"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { Loader2, Wrench, 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 { CreateEquipmentDTO, Equipment, EquipmentCategory } from "@/types/equipment";
import { equipmentSchema, EquipmentFormValues } from "@/validators/equipment";

interface EquipmentFormModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSubmit: (data: CreateEquipmentDTO) => Promise<void>;
  equipmentToEdit?: Equipment | null;
  categories: EquipmentCategory[];
  isSaving?: boolean;
}

export function EquipmentFormModal({
  isOpen,
  onClose,
  onSubmit,
  equipmentToEdit,
  categories,
  isSaving = false,
}: EquipmentFormModalProps) {
  const {
    register,
    handleSubmit,
    setValue,
    reset,
    formState: { errors },
  } = useForm<EquipmentFormValues>({
    resolver: zodResolver(equipmentSchema),
    defaultValues: {
      categoryId: categories[0]?.id || "",
      code: "",
      assetTag: "",
      brand: "",
      model: "",
      year: new Date().getFullYear(),
      serialNumber: "",
      acquisitionValue: 0,
      dailyRate: 0,
      weeklyRate: 0,
      monthlyRate: 0,
      status: "AVAILABLE",
      hourMeter: 0,
      mileage: 0,
      notes: "",
    },
  });

  const [dailyRateDisplay, setDailyRateDisplay] = useState("");
  const [weeklyRateDisplay, setWeeklyRateDisplay] = useState("");
  const [monthlyRateDisplay, setMonthlyRateDisplay] = useState("");
  const [acquisitionValueDisplay, setAcquisitionValueDisplay] = useState("");
  const [hourMeterDisplay, setHourMeterDisplay] = useState("");
  const [mileageDisplay, setMileageDisplay] = useState("");

  const formatCurrency = (value: string) => {
    const clean = value.replace(/\D/g, "");
    if (!clean) return "";
    const num = parseInt(clean, 10) / 100;
    return new Intl.NumberFormat("pt-BR", {
      style: "currency",
      currency: "BRL",
    }).format(num);
  };

  const parseCurrencyToNumber = (value: string): number => {
    const clean = value.replace(/\D/g, "");
    if (!clean) return 0;
    return parseInt(clean, 10) / 100;
  };

  const formatHourMeter = (value: string) => {
    const clean = value.replace(/\D/g, "");
    if (!clean) return "";
    const num = parseInt(clean, 10) / 10;
    return num.toLocaleString("pt-BR", { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + " h";
  };

  const parseHourMeterToNumber = (value: string): number => {
    const clean = value.replace(/\D/g, "");
    if (!clean) return 0;
    return parseInt(clean, 10) / 10;
  };

  const formatMileage = (value: string) => {
    const clean = value.replace(/\D/g, "");
    if (!clean) return "";
    const num = parseInt(clean, 10);
    return num.toLocaleString("pt-BR") + " km";
  };

  const parseMileageToNumber = (value: string): number => {
    const clean = value.replace(/\D/g, "");
    if (!clean) return 0;
    return parseInt(clean, 10);
  };

  const handleDailyRateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const formatted = formatCurrency(e.target.value);
    setDailyRateDisplay(formatted);
    setValue("dailyRate", parseCurrencyToNumber(formatted), { shouldValidate: true });
  };

  const handleWeeklyRateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const formatted = formatCurrency(e.target.value);
    setWeeklyRateDisplay(formatted);
    setValue("weeklyRate", parseCurrencyToNumber(formatted), { shouldValidate: true });
  };

  const handleMonthlyRateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const formatted = formatCurrency(e.target.value);
    setMonthlyRateDisplay(formatted);
    setValue("monthlyRate", parseCurrencyToNumber(formatted), { shouldValidate: true });
  };

  const handleAcquisitionValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const formatted = formatCurrency(e.target.value);
    setAcquisitionValueDisplay(formatted);
    setValue("acquisitionValue", parseCurrencyToNumber(formatted), { shouldValidate: true });
  };

  const handleHourMeterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const formatted = formatHourMeter(e.target.value);
    setHourMeterDisplay(formatted);
    setValue("hourMeter", parseHourMeterToNumber(formatted), { shouldValidate: true });
  };

  const handleMileageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const formatted = formatMileage(e.target.value);
    setMileageDisplay(formatted);
    setValue("mileage", parseMileageToNumber(formatted), { shouldValidate: true });
  };

  useEffect(() => {
    if (equipmentToEdit) {
      const daily = Number(equipmentToEdit.dailyRate) || 0;
      const weekly = Number(equipmentToEdit.weeklyRate) || 0;
      const monthly = Number(equipmentToEdit.monthlyRate) || 0;
      const acq = Number(equipmentToEdit.acquisitionValue) || 0;
      const hour = equipmentToEdit.hourMeter !== null && equipmentToEdit.hourMeter !== undefined ? Number(equipmentToEdit.hourMeter) : 0;
      const mile = equipmentToEdit.mileage !== null && equipmentToEdit.mileage !== undefined ? Number(equipmentToEdit.mileage) : 0;

      const formatBRL = (val: number) =>
        new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(val);

      setDailyRateDisplay(formatBRL(daily));
      setWeeklyRateDisplay(formatBRL(weekly));
      setMonthlyRateDisplay(formatBRL(monthly));
      setAcquisitionValueDisplay(formatBRL(acq));

      setHourMeterDisplay(hour.toLocaleString("pt-BR", { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + " h");
      setMileageDisplay(mile.toLocaleString("pt-BR") + " km");

      reset({
        categoryId: equipmentToEdit.categoryId,
        code: equipmentToEdit.code,
        assetTag: equipmentToEdit.assetTag,
        brand: equipmentToEdit.brand,
        model: equipmentToEdit.model,
        year: equipmentToEdit.year || new Date().getFullYear(),
        serialNumber: equipmentToEdit.serialNumber || "",
        acquisitionValue: acq,
        dailyRate: daily,
        weeklyRate: weekly,
        monthlyRate: monthly,
        status: equipmentToEdit.status,
        hourMeter: hour,
        mileage: mile,
        notes: equipmentToEdit.notes || "",
      });
    } else {
      setDailyRateDisplay("");
      setWeeklyRateDisplay("");
      setMonthlyRateDisplay("");
      setAcquisitionValueDisplay("");
      setHourMeterDisplay("");
      setMileageDisplay("");

      reset({
        categoryId: categories[0]?.id || "",
        code: "",
        assetTag: "",
        brand: "",
        model: "",
        year: new Date().getFullYear(),
        serialNumber: "",
        acquisitionValue: 0,
        dailyRate: 0,
        weeklyRate: 0,
        monthlyRate: 0,
        status: "AVAILABLE",
        hourMeter: 0,
        mileage: 0,
        notes: "",
      });
    }
  }, [equipmentToEdit, categories, reset, isOpen]);

  const onFormSubmit = async (values: EquipmentFormValues) => {
    await onSubmit(values as CreateEquipmentDTO);
    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-3xl 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">
              <Wrench className="h-5 w-5 text-primary" />
              {equipmentToEdit ? "Editar Equipamento" : "Novo Equipamento"}
            </h2>
            <p className="text-sm text-muted-foreground">
              {equipmentToEdit
                ? "Atualize as informações operacionais e patrimoniais do ativo."
                : "Cadastre um novo equipamento para disponibilizar para locação."}
            </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-6">
            {/* Dados Identificadores & Categoria */}
          <div className="space-y-4">
            <h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
              Identificação & Categoria
            </h3>
            <div className="grid gap-4 md:grid-cols-3">
              <div>
                <label className="mb-1 block text-sm font-medium">Categoria *</label>
                <select
                  {...register("categoryId")}
                  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"
                >
                  {categories.map((cat) => (
                    <option key={cat.id} value={cat.id}>
                      {cat.name}
                    </option>
                  ))}
                </select>
                {errors.categoryId && (
                  <p className="mt-1 text-xs text-rose-500">{errors.categoryId.message}</p>
                )}
              </div>

              <div>
                <label className="mb-1 block text-sm font-medium">Código Interno *</label>
                <Input {...register("code")} placeholder="Ex: EQ-1009" />
                {errors.code && (
                  <p className="mt-1 text-xs text-rose-500">{errors.code.message}</p>
                )}
              </div>

              <div>
                <label className="mb-1 block text-sm font-medium">Patrimônio / Placa *</label>
                <Input {...register("assetTag")} placeholder="Ex: PAT-9009" />
                {errors.assetTag && (
                  <p className="mt-1 text-xs text-rose-500">{errors.assetTag.message}</p>
                )}
              </div>
            </div>
          </div>

          {/* Ficha Técnica */}
          <div className="space-y-4">
            <h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
              Especificações Técnicas
            </h3>
            <div className="grid gap-4 md:grid-cols-3">
              <div>
                <label className="mb-1 block text-sm font-medium">Marca *</label>
                <Input {...register("brand")} placeholder="Ex: Caterpillar, JLG, Bobcat" />
                {errors.brand && (
                  <p className="mt-1 text-xs text-rose-500">{errors.brand.message}</p>
                )}
              </div>

              <div>
                <label className="mb-1 block text-sm font-medium">Modelo *</label>
                <Input {...register("model")} placeholder="Ex: 320 GC, S570" />
                {errors.model && (
                  <p className="mt-1 text-xs text-rose-500">{errors.model.message}</p>
                )}
              </div>

              <div>
                <label className="mb-1 block text-sm font-medium">Ano de Fabricação</label>
                <Input
                  type="number"
                  {...register("year", { valueAsNumber: true })}
                  placeholder="2024"
                />
                {errors.year && (
                  <p className="mt-1 text-xs text-rose-500">{errors.year.message}</p>
                )}
              </div>

              <div className="md:col-span-2">
                <label className="mb-1 block text-sm font-medium">Número de Série / Chassi</label>
                <Input {...register("serialNumber")} placeholder="Ex: CAT320-98812" />
              </div>

              <div>
                <label className="mb-1 block text-sm font-medium">Status Operacional</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="AVAILABLE">Disponível (Pátio)</option>
                  <option value="RENTED">Locado (Em Operação)</option>
                  <option value="MAINTENANCE">Em Manutenção</option>
                  <option value="RESERVED">Reservado</option>
                  <option value="INACTIVE">Inativo (Desativado)</option>
                </select>
              </div>
            </div>
          </div>

          {/* Tarifas de Locação & Valores */}
          <div className="space-y-4">
            <h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
              Tarifador de Locação & Valor de Aquisição
            </h3>
            <div className="grid gap-4 md:grid-cols-4">
              <div>
                <label className="mb-1 block text-sm font-medium">Diária (R$) *</label>
                <Input
                  type="text"
                  value={dailyRateDisplay}
                  onChange={handleDailyRateChange}
                  placeholder="R$ 0,00"
                />
                {errors.dailyRate && (
                  <p className="mt-1 text-xs text-rose-500">{errors.dailyRate.message}</p>
                )}
              </div>

              <div>
                <label className="mb-1 block text-sm font-medium">Semanal (R$)</label>
                <Input
                  type="text"
                  value={weeklyRateDisplay}
                  onChange={handleWeeklyRateChange}
                  placeholder="R$ 0,00"
                />
              </div>

              <div>
                <label className="mb-1 block text-sm font-medium">Mensal (R$)</label>
                <Input
                  type="text"
                  value={monthlyRateDisplay}
                  onChange={handleMonthlyRateChange}
                  placeholder="R$ 0,00"
                />
              </div>

              <div>
                <label className="mb-1 block text-sm font-medium">Valor de Aquisição (R$)</label>
                <Input
                  type="text"
                  value={acquisitionValueDisplay}
                  onChange={handleAcquisitionValueChange}
                  placeholder="R$ 0,00"
                />
              </div>
            </div>
          </div>

          {/* Horímetro / Quilometragem */}
          <div className="space-y-4">
            <h3 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
              Telemetria & Uso
            </h3>
            <div className="grid gap-4 md:grid-cols-2">
              <div>
                <label className="mb-1 block text-sm font-medium">Horímetro Atual (Horas)</label>
                <Input
                  type="text"
                  value={hourMeterDisplay}
                  onChange={handleHourMeterChange}
                  placeholder="0,0 h"
                />
              </div>

              <div>
                <label className="mb-1 block text-sm font-medium">Quilometragem (KM)</label>
                <Input
                  type="text"
                  value={mileageDisplay}
                  onChange={handleMileageChange}
                  placeholder="0 km"
                />
              </div>
            </div>
          </div>

          {/* Observações */}
          <div>
            <label className="mb-1 block text-sm font-medium">Observações Gerais</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="Histórico prévio, acessórios inclusos (caçambas, cabos), restrições de uso..."
            />
          </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" />}
              {equipmentToEdit ? "Salvar Alterações" : "Cadastrar Equipamento"}
            </Button>
          </div>
        </form>
      </Card>
    </div>,
    document.body
  );
}