"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { Calendar, 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 { Equipment } from "@/types/equipment";
import { CreateScheduleEventDTO, ScheduleEvent } from "@/types/schedule";
import { scheduleEventSchema, ScheduleEventFormValues } from "@/validators/schedule";

interface ScheduleEventModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (data: CreateScheduleEventDTO) => Promise<void>;
  eventToEdit?: ScheduleEvent | null;
  customers: Customer[];
  equipmentList: Equipment[];
  isSaving?: boolean;
}

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

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<ScheduleEventFormValues>({
    resolver: zodResolver(scheduleEventSchema),
    defaultValues: {
      title: "",
      type: "DELIVERY",
      customerId: "",
      equipmentId: "",
      startDate: today,
      endDate: today,
      location: "",
      technician: "",
      notes: "",
      status: "SCHEDULED",
    },
  });

  useEffect(() => {
    if (eventToEdit) {
      reset({
        title: eventToEdit.title,
        type: eventToEdit.type,
        customerId: eventToEdit.customerId || "",
        equipmentId: eventToEdit.equipmentId || "",
        startDate: eventToEdit.startDate.split("T")[0],
        endDate: eventToEdit.endDate.split("T")[0],
        location: eventToEdit.location || "",
        technician: eventToEdit.technician || "",
        notes: eventToEdit.notes || "",
        status: eventToEdit.status,
      });
    } else {
      const activeCustomers = customers.filter((c) => c.status === "ACTIVE");
      reset({
        title: "Mobilização / Entrega de Equipamento",
        type: "DELIVERY",
        customerId: activeCustomers[0]?.id || customers[0]?.id || "",
        equipmentId: equipmentList[0]?.id || "",
        startDate: today,
        endDate: today,
        location: "Canteiro de Obras",
        technician: "Motorista / Equipe de Logística",
        notes: "",
        status: "SCHEDULED",
      });
    }
  }, [eventToEdit, customers, equipmentList, reset, isOpen, today]);

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

  const onFormSubmit = async (values: ScheduleEventFormValues) => {
    await onSubmit(values as CreateScheduleEventDTO);
    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">
              <Calendar className="h-5 w-5 text-primary" />
              {eventToEdit ? "Editar Agendamento" : "Novo Agendamento Operacional"}
            </h2>
            <p className="text-sm text-muted-foreground">
              {eventToEdit
                ? "Atualize o horário, localização ou motorista da entrega."
                : "Agende entregas, coletas ou manutenções com notificação para a equipe."}
            </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 className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="mb-1 block text-sm font-medium">Tipo de Evento *</label>
              <select
                {...register("type")}
                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="DELIVERY">Entrega (Mobilização)</option>
                <option value="RETURN">Devolução (Coleta)</option>
                <option value="MAINTENANCE">Manutenção no Canteiro</option>
                <option value="INSPECTION">Vistoria Técnica / Check-list</option>
              </select>
            </div>

            <div>
              <label className="mb-1 block text-sm font-medium">Status do Agendamento</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="SCHEDULED">Agendado</option>
                <option value="IN_TRANSIT">Em Trânsito / Em Andamento</option>
                <option value="COMPLETED">Concluído</option>
                <option value="CANCELED">Cancelado</option>
              </select>
            </div>
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium">Título do Agendamento *</label>
            <Input {...register("title")} placeholder="Ex: Entrega de Escavadeira na Obra Paulista" />
            {errors.title && (
              <p className="mt-1 text-xs text-rose-500">{errors.title.message}</p>
            )}
          </div>

          <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 (opcional)...</option>
                {activeCustomers.map((c) => (
                  <option key={c.id} value={c.id}>
                    {c.name}
                  </option>
                ))}
              </select>
            </div>

            <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 (opcional)...</option>
                {equipmentList.map((eq) => (
                  <option key={eq.id} value={eq.id}>
                    {eq.code} - {eq.brand} {eq.model}
                  </option>
                ))}
              </select>
            </div>
          </div>

          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <label className="mb-1 block text-sm font-medium">Data Inicial *</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 *</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="grid gap-4 md:grid-cols-2">
            <div>
              <label className="mb-1 block text-sm font-medium">Localização / Endereço da Obra</label>
              <Input {...register("location")} placeholder="Ex: Av. Paulista, 1500 - São Paulo/SP" />
            </div>

            <div>
              <label className="mb-1 block text-sm font-medium">Motorista / Técnico Responsável</label>
              <Input {...register("technician")} placeholder="Ex: Motorista Roberto (Caminhão Prancha)" />
            </div>
          </div>

          <div>
            <label className="mb-1 block text-sm font-medium">Instruções / Observações de Transporte</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="Instruções para acesso à obra, contatos no local..."
            />
          </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" />}
              {eventToEdit ? "Salvar Alterações" : "Agendar Compromisso"}
            </Button>
          </div>
        </form>
      </Card>
    </div>
  );
}