"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { BriefcaseBusiness, Loader2, X } from "lucide-react";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { CreateSupplierDTO, Supplier } from "@/types/supplier";
import { supplierSchema, SupplierFormValues } from "@/validators/supplier";

interface SupplierFormModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (data: CreateSupplierDTO) => Promise<void>;
  supplierToEdit?: Supplier | null;
  isSaving?: boolean;
}

export function SupplierFormModal({
  isOpen,
  onClose,
  onSubmit,
  supplierToEdit,
  isSaving = false,
}: SupplierFormModalProps) {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<SupplierFormValues>({
    resolver: zodResolver(supplierSchema),
    defaultValues: {
      name: "",
      document: "",
      email: "",
      phone: "",
      contactName: "",
    },
  });

  useEffect(() => {
    if (supplierToEdit) {
      reset({
        name: supplierToEdit.name,
        document: supplierToEdit.document || "",
        email: supplierToEdit.email || "",
        phone: supplierToEdit.phone || "",
        contactName: supplierToEdit.contactName || "",
      });
    } else {
      reset({
        name: "",
        document: "",
        email: "",
        phone: "",
        contactName: "",
      });
    }
  }, [supplierToEdit, reset, isOpen]);

  const onFormSubmit = async (values: SupplierFormValues) => {
    const payload: CreateSupplierDTO = {
      name: values.name.trim(),
      document: values.document?.trim() || undefined,
      email: values.email?.trim() || undefined,
      phone: values.phone?.trim() || undefined,
      contactName: values.contactName?.trim() || undefined,
    };
    await onSubmit(payload);
    onClose();
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-xs transition-all">
      <Card className="w-full max-w-lg p-6 shadow-2xl">
        <div className="flex items-center justify-between border-b pb-4">
          <div>
            <h2 className="text-xl font-bold flex items-center gap-2">
              <BriefcaseBusiness className="h-5 w-5 text-primary" />
              {supplierToEdit ? "Editar Fornecedor" : "Novo Fornecedor"}
            </h2>
            <p className="text-sm text-muted-foreground">
              {supplierToEdit
                ? `Altere os dados do fornecedor ${supplierToEdit.name}.`
                : "Cadastre um novo fornecedor de peças, oficina mecânica ou prestador de serviços."}
            </p>
          </div>
          <Button variant="ghost" size="icon" onClick={onClose}>
            <X className="h-5 w-5" />
          </Button>
        </div>

        <form onSubmit={handleSubmit(onFormSubmit)} className="mt-5 space-y-4">
          {/* Nome / Razão Social */}
          <div>
            <label className="mb-1 block text-sm font-medium">Razão Social / Nome Fantasia *</label>
            <Input
              {...register("name")}
              placeholder="Ex: Oficina Diesel Nordeste LTDA"
            />
            {errors.name && (
              <p className="mt-1 text-xs text-rose-500">{errors.name.message}</p>
            )}
          </div>

          {/* CNPJ / CPF e Responsável */}
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="mb-1 block text-sm font-medium">CNPJ / CPF</label>
              <Input
                {...register("document")}
                placeholder="44.333.222/0001-11"
              />
            </div>

            <div>
              <label className="mb-1 block text-sm font-medium">Pessoa de Contato</label>
              <Input
                {...register("contactName")}
                placeholder="Ex: Roberto Silva (Gerente)"
              />
            </div>
          </div>

          {/* E-mail e Telefone */}
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="mb-1 block text-sm font-medium">E-mail Financeiro</label>
              <Input
                type="email"
                {...register("email")}
                placeholder="financeiro@fornecedor.com"
              />
              {errors.email && (
                <p className="mt-1 text-xs text-rose-500">{errors.email.message}</p>
              )}
            </div>

            <div>
              <label className="mb-1 block text-sm font-medium">Telefone / WhatsApp</label>
              <Input
                {...register("phone")}
                placeholder="(81) 3222-4040"
              />
            </div>
          </div>

          {/* Rodapé */}
          <div className="flex items-center justify-end gap-3 border-t pt-4">
            <Button type="button" variant="secondary" onClick={onClose}>
              Cancelar
            </Button>
            <Button type="submit" disabled={isSaving}>
              {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              {supplierToEdit ? "Salvar Alterações" : "Cadastrar Fornecedor"}
            </Button>
          </div>
        </form>
      </Card>
    </div>
  );
}