"use client";

import { Check, FileText, Loader2, Sliders } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { SystemPreferences } from "@/types/settings";

interface SystemPreferencesTabProps {
  preferences: SystemPreferences | null;
  onSave: (data: Partial<SystemPreferences>) => Promise<any>;
  isSaving?: boolean;
}

export function SystemPreferencesTab({
  preferences,
  onSave,
  isSaving = false,
}: SystemPreferencesTabProps) {
  const [formData, setFormData] = useState<Partial<SystemPreferences>>({
    defaultCurrency: preferences?.defaultCurrency || "BRL",
    contractTermsFooter:
      preferences?.contractTermsFooter ||
      "O locatário declara ter recebido os equipamentos em perfeitas condições de uso e funcionamento.",
    enableEmailAlerts: preferences?.enableEmailAlerts ?? true,
    autoBackupDaily: preferences?.autoBackupDaily ?? true,
  });

  const [savedSuccess, setSavedSuccess] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await onSave(formData);
    setSavedSuccess(true);
    setTimeout(() => setSavedSuccess(false), 3000);
  };

  return (
    <Card className="p-6 shadow-xs border space-y-6">
      <div className="flex items-center justify-between border-b pb-4">
        <div>
          <h2 className="text-lg font-bold text-foreground flex items-center gap-2">
            <Sliders className="h-5 w-5 text-primary" /> Preferências Gerais & Termos de Contratos
          </h2>
          <p className="text-xs text-muted-foreground">
            Ajuste os textos padrão de contratos, notificações e parâmetros gerais do ERP.
          </p>
        </div>
      </div>

      <form onSubmit={handleSubmit} className="space-y-6">
        {/* Cláusulas e Termos Padrão do Contrato */}
        <div>
          <label className="mb-1 block text-sm font-medium flex items-center gap-2">
            <FileText className="h-4 w-4 text-primary" /> Cláusula de Rodapé Padrão dos Contratos
          </label>
          <textarea
            rows={4}
            value={formData.contractTermsFooter || ""}
            onChange={(e) => setFormData({ ...formData, contractTermsFooter: e.target.value })}
            className="w-full rounded-md border border-input bg-background p-3 text-xs shadow-xs focus:ring-1 focus:ring-ring outline-none"
            placeholder="Digite os termos padrão que aparecerão no rodapé das minutas e contratos..."
          />
          <p className="mt-1 text-xs text-muted-foreground">
            Este texto será inserido automaticamente em todas as impressões de contrato no módulo de Contratos.
          </p>
        </div>

        {/* Notificações e Backups */}
        <div className="space-y-3 border-t pt-4">
          <h3 className="text-xs font-bold uppercase tracking-wider text-muted-foreground">
            Alertas & Automação
          </h3>

          <div className="flex items-center gap-3">
            <input
              type="checkbox"
              id="prefEmailAlerts"
              checked={formData.enableEmailAlerts}
              onChange={(e) => setFormData({ ...formData, enableEmailAlerts: e.target.checked })}
              className="h-4 w-4 rounded border-gray-300 text-primary"
            />
            <label htmlFor="prefEmailAlerts" className="text-xs font-medium cursor-pointer">
              Enviar alertas por e-mail quando ordens de serviço ou contratos vencerem
            </label>
          </div>

          <div className="flex items-center gap-3">
            <input
              type="checkbox"
              id="prefAutoBackup"
              checked={formData.autoBackupDaily}
              onChange={(e) => setFormData({ ...formData, autoBackupDaily: e.target.checked })}
              className="h-4 w-4 rounded border-gray-300 text-primary"
            />
            <label htmlFor="prefAutoBackup" className="text-xs font-medium cursor-pointer">
              Ativar backup diário automático do banco de dados do sistema
            </label>
          </div>
        </div>

        {/* Botão de Salvar */}
        <div className="flex items-center justify-end gap-3 border-t pt-4">
          {savedSuccess && (
            <span className="text-xs font-semibold text-emerald-600 flex items-center gap-1">
              <Check className="h-4 w-4" /> Preferências salvas!
            </span>
          )}
          <Button type="submit" disabled={isSaving}>
            {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
            Salvar Preferências
          </Button>
        </div>
      </form>
    </Card>
  );
}