mexus-app/src/components/apu/mano-obra-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 {
  categoriaManoObraSchema,
  calcularFSR,
  type CategoriaManoObraInput,
} from "@/lib/validations/apu";
import { toast } from "@/hooks/use-toast";
import { Loader2 } from "lucide-react";
import { CATEGORIA_MANO_OBRA_LABELS } from "@/types";
import { CategoriaManoObra } from "@prisma/client";

interface ManoObraFormProps {
  categoria?: {
    id: string;
    codigo: string;
    nombre: string;
    categoria: CategoriaManoObra;
    salarioDiario: number;
    factorIMSS: number;
    factorINFONAVIT: number;
    factorRetiro: number;
    factorVacaciones: number;
    factorPrimaVac: number;
    factorAguinaldo: number;
    factorSalarioReal: number;
    salarioReal: number;
  };
}

export function ManoObraForm({ categoria }: ManoObraFormProps) {
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(false);
  const isEditing = !!categoria;

  const {
    register,
    handleSubmit,
    formState: { errors },
    setValue,
    watch,
  } = useForm<CategoriaManoObraInput>({
    resolver: zodResolver(categoriaManoObraSchema),
    defaultValues: {
      codigo: categoria?.codigo || "",
      nombre: categoria?.nombre || "",
      categoria: categoria?.categoria || "PEON",
      salarioDiario: categoria?.salarioDiario || 0,
      factorIMSS: categoria?.factorIMSS || 0.2675,
      factorINFONAVIT: categoria?.factorINFONAVIT || 0.05,
      factorRetiro: categoria?.factorRetiro || 0.02,
      factorVacaciones: categoria?.factorVacaciones || 0.0411,
      factorPrimaVac: categoria?.factorPrimaVac || 0.0103,
      factorAguinaldo: categoria?.factorAguinaldo || 0.0411,
    },
  });

  const watchedValues = watch();

  // Calculate FSR and salario real in real-time
  const calculatedValues = useMemo(() => {
    const fsr = calcularFSR({
      factorIMSS: watchedValues.factorIMSS || 0,
      factorINFONAVIT: watchedValues.factorINFONAVIT || 0,
      factorRetiro: watchedValues.factorRetiro || 0,
      factorVacaciones: watchedValues.factorVacaciones || 0,
      factorPrimaVac: watchedValues.factorPrimaVac || 0,
      factorAguinaldo: watchedValues.factorAguinaldo || 0,
    });
    const salarioReal = (watchedValues.salarioDiario || 0) * fsr;
    return { fsr, salarioReal };
  }, [watchedValues]);

  const onSubmit = async (data: CategoriaManoObraInput) => {
    setIsLoading(true);
    try {
      const url = isEditing
        ? `/api/apu/mano-obra/${categoria.id}`
        : "/api/apu/mano-obra";
      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 ? "Categoria actualizada" : "Categoria creada",
        description: isEditing
          ? "Los cambios han sido guardados"
          : "La categoria de mano de obra ha sido creada exitosamente",
      });

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

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Informacion General</CardTitle>
          <CardDescription>
            Datos basicos de la categoria de mano de obra
          </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: MO-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: Peon de obra"
                {...register("nombre")}
              />
              {errors.nombre && (
                <p className="text-sm text-red-600">{errors.nombre.message}</p>
              )}
            </div>
          </div>

          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label>Categoria *</Label>
              <Select
                value={watchedValues.categoria}
                onValueChange={(value) =>
                  setValue("categoria", value as CategoriaManoObra)
                }
              >
                <SelectTrigger>
                  <SelectValue placeholder="Seleccionar categoria" />
                </SelectTrigger>
                <SelectContent>
                  {Object.entries(CATEGORIA_MANO_OBRA_LABELS).map(
                    ([value, label]) => (
                      <SelectItem key={value} value={value}>
                        {label}
                      </SelectItem>
                    )
                  )}
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <Label htmlFor="salarioDiario">Salario Diario *</Label>
              <Input
                id="salarioDiario"
                type="number"
                step="0.01"
                placeholder="0.00"
                {...register("salarioDiario", { valueAsNumber: true })}
              />
              {errors.salarioDiario && (
                <p className="text-sm text-red-600">
                  {errors.salarioDiario.message}
                </p>
              )}
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Factor de Salario Real (FSR)</CardTitle>
          <CardDescription>
            Factores para calcular el salario real incluyendo prestaciones
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4 md:grid-cols-3">
            <div className="space-y-2">
              <Label htmlFor="factorIMSS">IMSS</Label>
              <Input
                id="factorIMSS"
                type="number"
                step="0.0001"
                {...register("factorIMSS", { valueAsNumber: true })}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="factorINFONAVIT">INFONAVIT</Label>
              <Input
                id="factorINFONAVIT"
                type="number"
                step="0.0001"
                {...register("factorINFONAVIT", { valueAsNumber: true })}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="factorRetiro">Retiro (SAR)</Label>
              <Input
                id="factorRetiro"
                type="number"
                step="0.0001"
                {...register("factorRetiro", { valueAsNumber: true })}
              />
            </div>
          </div>

          <div className="grid gap-4 md:grid-cols-3">
            <div className="space-y-2">
              <Label htmlFor="factorVacaciones">Vacaciones</Label>
              <Input
                id="factorVacaciones"
                type="number"
                step="0.0001"
                {...register("factorVacaciones", { valueAsNumber: true })}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="factorPrimaVac">Prima Vacacional</Label>
              <Input
                id="factorPrimaVac"
                type="number"
                step="0.0001"
                {...register("factorPrimaVac", { valueAsNumber: true })}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="factorAguinaldo">Aguinaldo</Label>
              <Input
                id="factorAguinaldo"
                type="number"
                step="0.0001"
                {...register("factorAguinaldo", { valueAsNumber: true })}
              />
            </div>
          </div>

          <div className="mt-6 rounded-lg bg-slate-50 p-4">
            <h4 className="mb-3 font-semibold">Resumen de Calculo</h4>
            <div className="grid gap-4 md:grid-cols-2">
              <div className="flex justify-between border-b pb-2">
                <span className="text-slate-600">Factor de Salario Real:</span>
                <span className="font-mono font-semibold">
                  {calculatedValues.fsr.toFixed(4)}
                </span>
              </div>
              <div className="flex justify-between border-b pb-2">
                <span className="text-slate-600">Salario Real Diario:</span>
                <span className="font-mono font-semibold text-green-600">
                  ${calculatedValues.salarioReal.toFixed(2)}
                </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 Categoria"}
        </Button>
      </div>
    </form>
  );
}