"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { DollarSign, 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 { Customer } from "@/types/customer";
import { CreateFinancialEntryDTO } from "@/types/finance";
import { financialEntrySchema, FinancialEntryFormValues } from "@/validators/finance";

interface FinancialEntryModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (data: CreateFinancialEntryDTO) => Promise<void>;
  customers: Customer[];
  isSaving?: boolean;
}

export function FinancialEntryModal({
  isOpen,
  onClose,
  onSubmit,
  customers,
  isSaving = false,
}: FinancialEntryModalProps) {
  const today = new Date().toISOString().split("T")[0];

  const {
    register,
    handleSubmit,
    watch,
    reset,
    formState: { errors },
  } = useForm<FinancialEntryFormValues>({
    resolver: zodResolver(financialEntrySchema),
    defaultValues: {
      entryType: "RECEIVABLE",
      entityId: "",
      description: "",
      amount: 1000,
      dueDate: today,
      notes: "",
    },
  });

  const entryTypeVal = watch("entryType");

  useEffect(() => {
    if (isOpen) {
      reset({
        entryType: "RECEIVABLE",
        entityId: customers[0]?.id || "",
        description: "",
        amount: 1000,
        dueDate: today,
        notes: "",
      });
    }
  }, [isOpen, reset, today]);

  const onFormSubmit = async (values: FinancialEntryFormValues) => {
    await onSubmit(values as CreateFinancialEntryDTO);
    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 max-h-[90vh] overflow-y-auto 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">
              <DollarSign className="h-5 w-5 text-primary" />
              Novo Lançamento Financeiro
            </h2>
            <p className="text-sm text-muted-foreground">
              Cadastre um título a receber de cliente ou conta a pagar.
            </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-5">
          <div>
            <label className="mb-1 block text-sm font-medium">Tipo de Lançamento *</label>
            <select
              {...register("entryType")}
              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs focus:outline-hidden focus:ring-1 focus:ring-ring font-semibold"
            >
              <option value="RECEIVABLE">Conta a Receber (Entrada)</option>
              <option value="PAYABLE">Conta a Pagar (Saída / Despesa)</option>
            </select>
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium">
              {entryTypeVal === "RECEIVABLE" ? "Cliente *" : "Fornecedor / Beneficiário *"}
            </label>
            {entryTypeVal === "RECEIVABLE" ? (
              <select
                {...register("entityId")}
                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs focus:outline-hidden focus:ring-1 focus:ring-ring"
              >
                <option value="">Selecione o cliente...</option>
                {customers.map((c) => (
                  <option key={c.id} value={c.id}>
                    {c.name} ({c.document})
                  </option>
                ))}
              </select>
            ) : (
              <Input {...register("entityId")} placeholder="Nome do fornecedor ou credor..." />
            )}
            {errors.entityId && (
              <p className="mt-1 text-xs text-rose-500">{errors.entityId.message}</p>
            )}
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium">Descrição do Título *</label>
            <Input {...register("description")} placeholder="Ex: Fatura locação escavadeira, Compra de peças..." />
            {errors.description && (
              <p className="mt-1 text-xs text-rose-500">{errors.description.message}</p>
            )}
          </div>

          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="mb-1 block text-sm font-medium">Valor (R$) *</label>
              <Input
                type="number"
                step="any"
                {...register("amount", { valueAsNumber: true })}
                placeholder="1000.00"
              />
              {errors.amount && (
                <p className="mt-1 text-xs text-rose-500">{errors.amount.message}</p>
              )}
            </div>

            <div>
              <label className="mb-1 block text-sm font-medium">Data de Vencimento *</label>
              <Input type="date" {...register("dueDate")} />
              {errors.dueDate && (
                <p className="mt-1 text-xs text-rose-500">{errors.dueDate.message}</p>
              )}
            </div>
          </div>

          <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" />}
              Registrar Lançamento
            </Button>
          </div>
        </form>
      </Card>
    </div>
  );
}