mexus-app/src/components/apu/equipo-form.tsx

"use client";

import { useState, useMemo } from "react";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  equipoMaquinariaSchema,
  calcularCostoHorario,
  type EquipoMaquinariaInput,
} from "@/lib/validations/apu";
import { toast } from "@/hooks/use-toast";
import { Loader2 } from "lucide-react";
import { TIPO_EQUIPO_LABELS } from "@/types";
import { TipoEquipo } from "@prisma/client";

interface EquipoFormProps {
  equipo?: {
    id: string;
    codigo: string;
    nombre: string;
    tipo: TipoEquipo;
    valorAdquisicion: number;
    vidaUtilHoras: number;
    valorRescate: number;
    consumoCombustible: number | null;
    precioCombustible: number | null;
    factorMantenimiento: number;
    costoOperador: number | null;
    costoHorario: number;
  };
}

export function EquipoForm({ equipo }: EquipoFormProps) {
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(false);
  const isEditing = !!equipo;

  const {
    register,
    handleSubmit,
    formState: { errors },
    setValue,
    watch,
  } = useForm<EquipoMaquinariaInput>({
    resolver: zodResolver(equipoMaquinariaSchema),
    defaultValues: {
      codigo: equipo?.codigo || "",
      nombre: equipo?.nombre || "",
      tipo: equipo?.tipo || "MAQUINARIA_LIGERA",
      valorAdquisicion: equipo?.valorAdquisicion || 0,
      vidaUtilHoras: equipo?.vidaUtilHoras || 0,
      valorRescate: equipo?.valorRescate || 0,
      consumoCombustible: equipo?.consumoCombustible || undefined,
      precioCombustible: equipo?.precioCombustible || undefined,
      factorMantenimiento: equipo?.factorMantenimiento || 0.6,
      costoOperador: equipo?.costoOperador || undefined,
    },
  });

  const watchedValues = watch();

  // Calculate costo horario in real-time
  const calculatedCostoHorario = useMemo(() => {
    if (!watchedValues.valorAdquisicion || !watchedValues.vidaUtilHoras) {
      return 0;
    }
    return calcularCostoHorario({
      valorAdquisicion: watchedValues.valorAdquisicion || 0,
      vidaUtilHoras: watchedValues.vidaUtilHoras || 1,
      valorRescate: watchedValues.valorRescate || 0,
      consumoCombustible: watchedValues.consumoCombustible,
      precioCombustible: watchedValues.precioCombustible,
      factorMantenimiento: watchedValues.factorMantenimiento || 0.6,
      costoOperador: watchedValues.costoOperador,
    });
  }, [watchedValues]);

  // Calculate breakdown
  const costoBreakdown = useMemo(() => {
    const va = watchedValues.valorAdquisicion || 0;
    const vh = watchedValues.vidaUtilHoras || 1;
    const vr = watchedValues.valorRescate || 0;
    const fm = watchedValues.factorMantenimiento || 0.6;
    const cc = watchedValues.consumoCombustible || 0;
    const pc = watchedValues.precioCombustible || 0;
    const co = watchedValues.costoOperador || 0;

    const depreciacion = (va - vr) / vh;
    const mantenimiento = depreciacion * fm;
    const combustible = cc * pc;

    return {
      depreciacion,
      mantenimiento,
      combustible,
      operador: co,
    };
  }, [watchedValues]);

  const onSubmit = async (data: EquipoMaquinariaInput) => {
    setIsLoading(true);
    try {
      const url = isEditing
        ? `/api/apu/equipos/${equipo.id}`
        : "/api/apu/equipos";
      const method = isEditing ? "PUT" : "POST";

      const response = await fetch(url, {
        method,
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
      });

      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.error || "Error al guardar");
      }

      toast({
        title: isEditing ? "Equipo actualizado" : "Equipo creado",
        description: isEditing
          ? "Los cambios han sido guardados"
          : "El equipo ha sido creado exitosamente",
      });

      router.push("/apu/equipos");
      router.refresh();
    } catch (error) {
      toast({
        title: "Error",
        description: error instanceof Error ? error.message : "No se pudo guardar el equipo",
        variant: "destructive",
      });
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Informacion General</CardTitle>
          <CardDescription>
            Datos basicos del equipo o maquinaria
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="codigo">Codigo *</Label>
              <Input
                id="codigo"
                placeholder="Ej: EQ-001"
                {...register("codigo")}
              />
              {errors.codigo && (
                <p className="text-sm text-red-600">{errors.codigo.message}</p>
              )}
            </div>

            <div className="space-y-2">
              <Label htmlFor="nombre">Nombre *</Label>
              <Input
                id="nombre"
                placeholder="Ej: Retroexcavadora CAT 420F"
                {...register("nombre")}
              />
              {errors.nombre && (
                <p className="text-sm text-red-600">{errors.nombre.message}</p>
              )}
            </div>
          </div>

          <div className="space-y-2">
            <Label>Tipo de Equipo *</Label>
            <Select
              value={watchedValues.tipo}
              onValueChange={(value) => setValue("tipo", value as TipoEquipo)}
            >
              <SelectTrigger>
                <SelectValue placeholder="Seleccionar tipo" />
              </SelectTrigger>
              <SelectContent>
                {Object.entries(TIPO_EQUIPO_LABELS).map(([value, label]) => (
                  <SelectItem key={value} value={value}>
                    {label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Datos Economicos</CardTitle>
          <CardDescription>
            Valores para calcular el costo horario del equipo
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4 md:grid-cols-3">
            <div className="space-y-2">
              <Label htmlFor="valorAdquisicion">Valor de Adquisicion *</Label>
              <Input
                id="valorAdquisicion"
                type="number"
                step="0.01"
                placeholder="0.00"
                {...register("valorAdquisicion", { valueAsNumber: true })}
              />
              {errors.valorAdquisicion && (
                <p className="text-sm text-red-600">
                  {errors.valorAdquisicion.message}
                </p>
              )}
            </div>

            <div className="space-y-2">
              <Label htmlFor="vidaUtilHoras">Vida Util (horas) *</Label>
              <Input
                id="vidaUtilHoras"
                type="number"
                placeholder="0"
                {...register("vidaUtilHoras", { valueAsNumber: true })}
              />
              {errors.vidaUtilHoras && (
                <p className="text-sm text-red-600">
                  {errors.vidaUtilHoras.message}
                </p>
              )}
            </div>

            <div className="space-y-2">
              <Label htmlFor="valorRescate">Valor de Rescate</Label>
              <Input
                id="valorRescate"
                type="number"
                step="0.01"
                placeholder="0.00"
                {...register("valorRescate", { valueAsNumber: true })}
              />
            </div>
          </div>

          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="factorMantenimiento">Factor de Mantenimiento</Label>
              <Input
                id="factorMantenimiento"
                type="number"
                step="0.01"
                placeholder="0.60"
                {...register("factorMantenimiento", { valueAsNumber: true })}
              />
              <p className="text-xs text-slate-500">
                Tipicamente entre 0.40 y 0.80 (60% por defecto)
              </p>
            </div>

            <div className="space-y-2">
              <Label htmlFor="costoOperador">Costo Operador (por hora)</Label>
              <Input
                id="costoOperador"
                type="number"
                step="0.01"
                placeholder="0.00"
                {...register("costoOperador", { valueAsNumber: true })}
              />
            </div>
          </div>

          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="consumoCombustible">Consumo Combustible (Lt/hr)</Label>
              <Input
                id="consumoCombustible"
                type="number"
                step="0.01"
                placeholder="0.00"
                {...register("consumoCombustible", { valueAsNumber: true })}
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="precioCombustible">Precio Combustible ($/Lt)</Label>
              <Input
                id="precioCombustible"
                type="number"
                step="0.01"
                placeholder="0.00"
                {...register("precioCombustible", { valueAsNumber: true })}
              />
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Resumen de Costo Horario</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="rounded-lg bg-slate-50 p-4">
            <div className="space-y-2">
              <div className="flex justify-between border-b pb-2">
                <span className="text-slate-600">Depreciacion:</span>
                <span className="font-mono">
                  ${costoBreakdown.depreciacion.toFixed(2)}/hr
                </span>
              </div>
              <div className="flex justify-between border-b pb-2">
                <span className="text-slate-600">Mantenimiento:</span>
                <span className="font-mono">
                  ${costoBreakdown.mantenimiento.toFixed(2)}/hr
                </span>
              </div>
              <div className="flex justify-between border-b pb-2">
                <span className="text-slate-600">Combustible:</span>
                <span className="font-mono">
                  ${costoBreakdown.combustible.toFixed(2)}/hr
                </span>
              </div>
              <div className="flex justify-between border-b pb-2">
                <span className="text-slate-600">Operador:</span>
                <span className="font-mono">
                  ${costoBreakdown.operador.toFixed(2)}/hr
                </span>
              </div>
              <div className="flex justify-between pt-2">
                <span className="font-semibold">Costo Horario Total:</span>
                <span className="font-mono text-lg font-bold text-green-600">
                  ${calculatedCostoHorario.toFixed(2)}/hr
                </span>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      <div className="flex justify-end gap-4">
        <Button
          type="button"
          variant="outline"
          onClick={() => router.back()}
          disabled={isLoading}
        >
          Cancelar
        </Button>
        <Button type="submit" disabled={isLoading}>
          {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
          {isEditing ? "Guardar Cambios" : "Crear Equipo"}
        </Button>
      </div>
    </form>
  );
}