"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { DollarSign, Loader2, Wrench, 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 { Equipment } from "@/types/equipment";
import { Supplier } from "@/types/supplier";
import { CreateServiceOrderDTO, ServiceOrder } from "@/types/maintenance";
import { maintenanceSchema, MaintenanceFormValues } from "@/validators/maintenance";

interface MaintenanceFormModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (data: CreateServiceOrderDTO) => Promise<void>;
  serviceOrderToEdit?: ServiceOrder | null;
  equipmentList: Equipment[];
  suppliersList: Supplier[];
  isSaving?: boolean;
}

export function MaintenanceFormModal({
  isOpen,
  onClose,
  onSubmit,
  serviceOrderToEdit,
  equipmentList,
  suppliersList,
  isSaving = false,
}: MaintenanceFormModalProps) {
  const today = new Date().toISOString().split("T")[0];
  const in30Days = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split("T")[0];

  const {
    register,
    handleSubmit,
    reset,
    watch,
    formState: { errors },
  } = useForm<MaintenanceFormValues>({
    resolver: zodResolver(maintenanceSchema),
    defaultValues: {
      equipmentId: "",
      title: "",
      description: "",
      status: "OPEN",
      cost: 0,
      openedAt: today,
      closedAt: null,
      supplierId: "",
      generatePayable: true,
      dueDate: in30Days,
    },
  });

  const selectedStatus = watch("status");
  const costValue = watch("cost");
  const generatePayable = watch("generatePayable");

  useEffect(() => {
    if (serviceOrderToEdit) {
      const existingPayable = serviceOrderToEdit.payables && serviceOrderToEdit.payables[0];
      reset({
        equipmentId: serviceOrderToEdit.equipmentId,
        title: serviceOrderToEdit.title,
        description: serviceOrderToEdit.description || "",
        status: serviceOrderToEdit.status,
        cost: Number(serviceOrderToEdit.cost) || 0,
        openedAt: serviceOrderToEdit.openedAt.split("T")[0],
        closedAt: serviceOrderToEdit.closedAt ? serviceOrderToEdit.closedAt.split("T")[0] : null,
        supplierId: existingPayable?.supplierId || serviceOrderToEdit.supplierId || "",
        generatePayable: Boolean(existingPayable),
        dueDate: existingPayable ? existingPayable.dueDate.split("T")[0] : in30Days,
      });
    } else {
      reset({
        equipmentId: equipmentList[0]?.id || "",
        title: "",
        description: "",
        status: "OPEN",
        cost: 0,
        openedAt: today,
        closedAt: null,
        supplierId: suppliersList[0]?.id || "",
        generatePayable: true,
        dueDate: in30Days,
      });
    }
  }, [serviceOrderToEdit, equipmentList, suppliersList, reset, isOpen, today, in30Days]);

  const onFormSubmit = async (values: MaintenanceFormValues) => {
    await onSubmit({
      ...values,
      closedAt: values.status === "DONE" || values.status === "CANCELED" ? values.closedAt || today : null,
    } as CreateServiceOrderDTO);
    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-2xl 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">
              <Wrench className="h-5 w-5 text-primary" />
              {serviceOrderToEdit ? "Editar Ordem de Serviço" : "Nova Ordem de Serviço"}
            </h2>
            <p className="text-sm text-muted-foreground">
              {serviceOrderToEdit
                ? `Altere os dados da OS ${serviceOrderToEdit.code}.`
                : "Registre uma nova manutenção preventiva ou corretiva para o maquinário."}
            </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">
          {/* Equipamento e Título */}
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="mb-1 block text-sm font-medium">Equipamento *</label>
              <select
                {...register("equipmentId")}
                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 a máquina...</option>
                {equipmentList.map((e) => (
                  <option key={e.id} value={e.id}>
                    {e.code} - {e.brand} {e.model} ({e.status})
                  </option>
                ))}
              </select>
              {errors.equipmentId && (
                <p className="mt-1 text-xs text-rose-500">{errors.equipmentId.message}</p>
              )}
            </div>

            <div>
              <label className="mb-1 block text-sm font-medium">Título da Manutenção *</label>
              <Input
                {...register("title")}
                placeholder="Ex: Troca de óleo e revisão de filtros"
              />
              {errors.title && (
                <p className="mt-1 text-xs text-rose-500">{errors.title.message}</p>
              )}
            </div>
          </div>

          {/* Status, Custo e Data Abertura */}
          <div className="grid gap-4 md:grid-cols-3">
            <div>
              <label className="mb-1 block text-sm font-medium">Status da OS *</label>
              <select
                {...register("status")}
                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="OPEN">Aberta (Pendente)</option>
                <option value="IN_PROGRESS">Em Andamento</option>
                <option value="DONE">Concluída</option>
                <option value="CANCELED">Cancelada</option>
              </select>
            </div>

            <div>
              <label className="mb-1 block text-sm font-medium">Custo Total / Estimado (R$)</label>
              <Input
                type="number"
                step="any"
                {...register("cost", { valueAsNumber: true })}
                placeholder="0.00"
              />
              {errors.cost && (
                <p className="mt-1 text-xs text-rose-500">{errors.cost.message}</p>
              )}
            </div>

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

          {(selectedStatus === "DONE" || selectedStatus === "CANCELED") && (
            <div>
              <label className="mb-1 block text-sm font-medium">Data de Encerramento</label>
              <Input type="date" {...register("closedAt")} />
            </div>
          )}

          {/* Seção Financeira - Contas a Pagar */}
          <div className="rounded-xl border bg-purple-500/5 p-4 border-purple-500/20 space-y-3">
            <div className="flex items-center justify-between">
              <label className="flex items-center gap-2 cursor-pointer font-bold text-sm text-foreground">
                <input
                  type="checkbox"
                  {...register("generatePayable")}
                  className="h-4 w-4 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
                />
                <DollarSign className="h-4 w-4 text-purple-600" />
                Gerar lançamento no Contas a Pagar (Financeiro)
              </label>
            </div>

            {generatePayable && (
              <div className="grid gap-4 md:grid-cols-2 pt-2 border-t border-purple-500/10">
                <div>
                  <label className="mb-1 block text-xs font-medium text-muted-foreground">
                    Fornecedor / Oficina Responsável
                  </label>
                  <select
                    {...register("supplierId")}
                    className="w-full rounded-md border border-input bg-background px-3 py-1.5 text-xs shadow-xs focus:outline-hidden focus:ring-1 focus:ring-ring"
                  >
                    <option value="">Selecione o fornecedor (opcional)...</option>
                    {suppliersList.map((sup) => (
                      <option key={sup.id} value={sup.id}>
                        {sup.name}
                      </option>
                    ))}
                  </select>
                </div>

                <div>
                  <label className="mb-1 block text-xs font-medium text-muted-foreground">
                    Vencimento da Conta
                  </label>
                  <Input type="date" className="h-8 text-xs" {...register("dueDate")} />
                </div>
              </div>
            )}
          </div>

          {/* Descrição Detalhada */}
          <div>
            <label className="mb-1 block text-sm font-medium">Descrição dos Serviços / Peças</label>
            <textarea
              {...register("description")}
              rows={3}
              className="w-full rounded-md border border-input bg-background p-3 text-sm shadow-xs focus:outline-hidden focus:ring-1 focus:ring-ring"
              placeholder="Descreva o problema diagnosticado, peças substituídas, oficina contratada ou horímetro/quilometragem no momento do reparo..."
            />
          </div>

          {/* Aviso */}
          <div className="rounded-lg border bg-muted/40 p-3 text-xs text-muted-foreground">
            💡 <strong>Nota:</strong> Marcar a OS como <em>Em Andamento</em> altera o status do equipamento para <strong>MANUTENÇÃO</strong>. Marcar como <em>Concluída</em> libera a máquina para <strong>DISPONÍVEL</strong>.
          </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" />}
              {serviceOrderToEdit ? "Salvar Alterações" : "Criar Ordem de Serviço"}
            </Button>
          </div>
        </form>
      </Card>
    </div>
  );
}