"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { Calendar, CalendarCheck, Loader2, X } from "lucide-react";
import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
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 { currency } from "@/lib/utils";
import { Customer } from "@/types/customer";
import { Equipment } from "@/types/equipment";
import { CreateReservationDTO, Reservation } from "@/types/reservation";
import { reservationSchema, ReservationFormValues } from "@/validators/reservation";

interface ReservationFormModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (data: CreateReservationDTO) => Promise<void>;
  reservationToEdit?: Reservation | null;
  customers: Customer[];
  equipmentList: Equipment[];
  isSaving?: boolean;
}

export function ReservationFormModal({
  isOpen,
  onClose,
  onSubmit,
  reservationToEdit,
  customers,
  equipmentList,
  isSaving = false,
}: ReservationFormModalProps) {
  const today = new Date().toISOString().split("T")[0];
  const in15Days = new Date(Date.now() + 15 * 24 * 60 * 60 * 1000)
    .toISOString()
    .split("T")[0];
  const in30Days = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000)
    .toISOString()
    .split("T")[0];

  const {
    register,
    handleSubmit,
    watch,
    setValue,
    reset,
    formState: { errors },
  } = useForm<ReservationFormValues>({
    resolver: zodResolver(reservationSchema),
    defaultValues: {
      customerId: "",
      equipmentId: "",
      startDate: in15Days,
      endDate: in30Days,
      depositAmount: 1000,
      validUntil: in15Days,
      notes: "",
      status: "CONFIRMED",
    },
  });

  const selectedEquipId = watch("equipmentId");
  const startDateVal = watch("startDate");
  const endDateVal = watch("endDate");

  const selectedEquipment = equipmentList.find((e) => e.id === selectedEquipId);

  const calculateDays = (startStr: string, endStr: string) => {
    if (!startStr || !endStr) return 1;
    const start = new Date(startStr);
    const end = new Date(endStr);
    const diff = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
    return Math.max(diff, 1);
  };

  const daysCount = calculateDays(startDateVal, endDateVal);
  const estimatedTotal = selectedEquipment
    ? Number(selectedEquipment.dailyRate) * daysCount
    : 0;

  useEffect(() => {
    if (reservationToEdit) {
      reset({
        customerId: reservationToEdit.customerId,
        equipmentId: reservationToEdit.equipmentId,
        startDate: reservationToEdit.startDate.split("T")[0],
        endDate: reservationToEdit.endDate.split("T")[0],
        depositAmount: Number(reservationToEdit.depositAmount) || 0,
        validUntil: reservationToEdit.validUntil.split("T")[0],
        notes: reservationToEdit.notes || "",
        status: reservationToEdit.status,
      });
    } else {
      const activeCustomers = customers.filter((c) => c.status === "ACTIVE");
      reset({
        customerId: activeCustomers[0]?.id || customers[0]?.id || "",
        equipmentId: equipmentList[0]?.id || "",
        startDate: in15Days,
        endDate: in30Days,
        depositAmount: 1000,
        validUntil: in15Days,
        notes: "",
        status: "CONFIRMED",
      });
    }
  }, [reservationToEdit, customers, equipmentList, reset, isOpen, in15Days, in30Days]);

  const activeCustomers = customers.filter((c) => c.status === "ACTIVE" || c.id === reservationToEdit?.customerId);

  const onFormSubmit = async (values: ReservationFormValues) => {
    await onSubmit(values as CreateReservationDTO);
    onClose();
  };

  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!isOpen || !mounted) return null;

  return createPortal(
    <div className="fixed inset-0 z-[9999] 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] flex flex-col shadow-2xl overflow-hidden p-0">
        {/* Header Fixo no Topo */}
        <div className="flex items-center justify-between border-b px-6 py-4 bg-background shrink-0">
          <div>
            <h2 className="text-xl font-bold flex items-center gap-2">
              <CalendarCheck className="h-5 w-5 text-primary" />
              {reservationToEdit ? "Editar Reserva de Equipamento" : "Nova Reserva de Equipamento"}
            </h2>
            <p className="text-sm text-muted-foreground">
              {reservationToEdit
                ? `Altere os dados da reserva ${reservationToEdit.code}.`
                : "Reserve uma máquina para um cliente garantindo a disponibilidade no período."}
            </p>
          </div>
          <Button variant="ghost" size="icon" onClick={onClose}>
            <X className="h-5 w-5" />
          </Button>
        </div>

        <form onSubmit={handleSubmit(onFormSubmit)} className="flex-1 flex flex-col overflow-hidden min-h-0">
          {/* Corpo Rolável */}
          <div className="flex-1 overflow-y-auto px-6 py-5 space-y-5">
            {/* Cliente e Equipamento */}
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="mb-1 block text-sm font-medium">Cliente *</label>
              <select
                {...register("customerId")}
                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>
                {activeCustomers.map((c) => (
                  <option key={c.id} value={c.id}>
                    {c.name} ({c.document})
                  </option>
                ))}
              </select>
              {errors.customerId && (
                <p className="mt-1 text-xs text-rose-500">{errors.customerId.message}</p>
              )}
            </div>

            <div>
              <label className="mb-1 block text-sm font-medium">Equipamento Reservado *</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} ({currency(e.dailyRate)}/dia)
                  </option>
                ))}
              </select>
              {errors.equipmentId && (
                <p className="mt-1 text-xs text-rose-500">{errors.equipmentId.message}</p>
              )}
            </div>
          </div>

          {/* Período Reservado */}
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="mb-1 block text-sm font-medium">Data Inicial da Reserva *</label>
              <Input type="date" {...register("startDate")} />
              {errors.startDate && (
                <p className="mt-1 text-xs text-rose-500">{errors.startDate.message}</p>
              )}
            </div>

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

          <div className="rounded-lg border bg-muted/40 p-3 text-xs text-muted-foreground flex items-center justify-between">
            <span>
              Período Reservado: <strong>{daysCount} dias</strong>
            </span>
            <span>
              Estimativa de Locação: <strong>{currency(estimatedTotal)}</strong>
            </span>
          </div>

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

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

            <div>
              <label className="mb-1 block text-sm font-medium">Status da Reserva</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="CONFIRMED">Confirmada (Sinal Pago)</option>
                <option value="PENDING">Pendente de Sinal</option>
                <option value="CONVERTED">Convertida em Locação</option>
                <option value="EXPIRED">Expirada</option>
                <option value="CANCELED">Cancelada</option>
              </select>
            </div>
          </div>

          {/* Observações */}
          <div>
            <label className="mb-1 block text-sm font-medium">Observações da Reserva</label>
            <textarea
              {...register("notes")}
              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="Informações sobre pagamento do sinal, condições de entrega, contrato vinculado..."
            />
          </div>

          </div>

          {/* Rodapé e Botões (Fixo) */}
          <div className="flex items-center justify-end gap-3 border-t px-6 py-4 bg-background shrink-0">
            <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" />}
              {reservationToEdit ? "Salvar Reserva" : "Confirmar Reserva"}
            </Button>
          </div>
        </form>
      </Card>
    </div>,
    document.body
  );
}