'use client';
import { zodResolver } from '@hookform/resolvers/zod';
import { Button } from '@repo/shadcn/button';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@repo/shadcn/form';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@repo/shadcn/select';
import { Input } from '@repo/shadcn/input';
import { useForm } from 'react-hook-form';
import { useUpdateProduct } from "@/feactures/inventory/hooks/use-mutation";
import { updateInventory, EditInventory, InventoryTable } from '@/feactures/inventory/schemas/inventory'; // Renombrado EditInventory para claridad
import { Textarea } from '@repo/shadcn/components/ui/textarea';
import { STATUS } from '@/constants/status'
import { useState, useEffect } from 'react';
import { sizeFormate } from "@/feactures/inventory/utils/sizeFormate"
// import { z } from 'zod'; // Asegúrate de importar Zod

// --- MODIFICACIÓN CLAVE ---
// Extiende tu esquema para incluir el campo de imagen como FileList para el frontend
// En el esquema Zod principal (editInventory), urlImg puede seguir siendo string[] si es lo que guardas en DB.
// Pero para la validación del formulario temporalmente, necesitamos manejar FileList.
// Si tu EditInventory original no contempla FileList, crea un esquema para el formulario.

// Ejemplo de cómo podrías adaptar tu esquema para el formulario
// const formSchemaWithFiles = editInventory.extend({
//   urlImg: z.custom<FileList | undefined | null>().optional(), // Ahora permite FileList para el input file
// });

// Define un tipo para los datos del formulario que incluye el FileList
// type FormDataWithFiles = z.infer<typeof formSchemaWithFiles>;

interface UpdateFormProps {
  onSuccess?: () => void;
  onCancel?: () => void;
  defaultValues?: Partial<InventoryTable>;
}

export function UpdateForm({
  onSuccess,
  onCancel,
  defaultValues,
}: UpdateFormProps) {
  const {
    mutate: saveAccountingAccounts,
    isPending: isSaving,
    isError,
  } = useUpdateProduct();

  const [sizeFile, setSizeFile] = useState('0 bytes');
  const [previewUrls, setPreviewUrls] = useState<string[]>([]);

  useEffect(() => {
    return () => {
      previewUrls.forEach(url => URL.revokeObjectURL(url));
    };
  }, [previewUrls]);

  const defaultformValues: EditInventory = { // Usamos el nuevo tipo aquí
    id: defaultValues?.id,
    title: defaultValues?.title || '',
    description: defaultValues?.description || '',
    price: defaultValues?.price || '',
    address: defaultValues?.address || '',
    status: defaultValues?.status || 'BORRADOR',
    stock: defaultValues?.stock ?? 0,
    urlImg: undefined, // Inicializamos como undefined o null para el FileList
  };

  const form = useForm<EditInventory>({ // Usamos el nuevo tipo aquí
    resolver: zodResolver(updateInventory), // Usamos el esquema extendido
    defaultValues: defaultformValues,
    mode: 'onChange',
  });

  const onSubmit = async (data: EditInventory) => {
    // --- MODIFICACIÓN CLAVE: Crear FormData ---
    const formData = new FormData();

    // Añadir otros campos de texto al FormData
    formData.append('id', data.id ? String(data.id) : ''); // Los IDs a menudo son numéricos, conviértelos a string
    formData.append('title', data.title);
    formData.append('description', data.description);
    formData.append('price', String(data.price)); // Convertir a string
    formData.append('address', data.address);
    formData.append('status', data.status);
    formData.append('stock', String(data.stock)); // Convertir a string

    // --- MODIFICACIÓN AQUÍ: Asegurar que cada archivo sea un 'File' ---
    if (data.urlImg) { // Primero, verifica que FileList no sea null/undefined
      for (let i = 0; i < data.urlImg.length; i++) {
        const file = data.urlImg[i];
        if (file) { // Asegura que el archivo individual no sea undefined
          formData.append('urlImg', file); // 'file' es de tipo File, que es un Blob
        }
      }
    }

    // --- IMPORTANTE: Tu hook `useUpdateProduct` DEBE ser capaz de aceptar FormData ---
    // Si `useUpdateProduct` llama a `safeFetchApi`, entonces `safeFetchApi` ya está preparado
    // para recibir `FormData`.
    saveAccountingAccounts(formData as any, { // Forzamos el tipo a 'any' si `useUpdateProduct` no espera FormData en su tipo
      onSuccess: () => {
        form.reset();
        onSuccess?.();
      },
      onError: (error) => {
        console.error("Error al guardar el producto:", error);
        form.setError('root', {
          type: 'manual',
          message: error.message || 'Error al guardar el producto',
        });
      },
    });
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        {form.formState.errors.root && (
          <div className="text-destructive text-sm">
            {form.formState.errors.root.message}
          </div>
        )}
        <div className="grid grid-cols-2 gap-4">
          <FormField
            control={form.control}
            name="title"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Nombre/Título</FormLabel>
                <FormControl>
                  <Input {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="price"
            render={({ field }) => (
              <FormItem >
                <FormLabel>Precio</FormLabel>
                <FormControl>
                  <Input type="number" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="address"
            render={({ field }) => (
              <FormItem className='col-span-2'>
                <FormLabel>Dirección</FormLabel>
                <FormControl>
                  <Input {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="description"
            render={({ field }) => (
              <FormItem className='col-span-2'>
                <FormLabel>Descripción</FormLabel>
                <FormControl>
                  <Textarea {...field} className="resize-none" />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="stock"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Cantidad/Stock</FormLabel>
                <FormControl>
                  <Input {...field} type="number" onChange={(e) => field.onChange(Number(e.target.value))} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="status"
            render={({ field }) => (
              <FormItem className="w-full">
                <FormLabel>Estatus</FormLabel>
                <Select value={field.value} onValueChange={(value) => field.onChange(value)}>
                  <SelectTrigger className="w-full">
                    <SelectValue placeholder="Seleccione un estatus" />
                  </SelectTrigger>
                  <SelectContent>
                    {Object.entries(STATUS).map(([value, label]) => (
                      <SelectItem key={value} value={value}>
                        {label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <FormMessage />
              </FormItem>
            )}
          />

          <div className="col-span-2">
            <FormField
              control={form.control}
              name="urlImg"
              render={({ field: { onChange, onBlur, name, ref } }) => (
                <FormItem>
                  <FormLabel>Imagen</FormLabel>
                  <p>Peso máximo: 5MB / {sizeFile} <span className='text-xs text-destructive'>(Máximo 10 archivos)</span></p>
                  <FormControl>
                    <Input
                      type="file"
                      multiple
                      onBlur={onBlur}
                      name={name}
                      ref={ref}
                      onChange={(e) => {
                        if (e.target.files) {
                          const files = Array.from(e.target.files);
                          let size = 0;
                          const newPreviewUrls: string[] = [];

                          files.forEach(element => {
                            size += element.size;
                            newPreviewUrls.push(URL.createObjectURL(element));
                          });

                          const tamañoFormateado = sizeFormate(size);
                          setSizeFile(tamañoFormateado);
                          setPreviewUrls(newPreviewUrls);
                          onChange(e.target.files);
                        } else {
                          setPreviewUrls([]);
                        }
                      }}
                    />
                  </FormControl>
                  <FormMessage />
                  {previewUrls.length > 0 && (
                    <div className="mt-2 flex flex-wrap gap-2">
                      {previewUrls.map((url, index) => (
                        <img key={index} src={url} alt={`Preview ${index}`} className="w-24 h-24 object-cover rounded-md" />
                      ))}
                    </div>
                  )}
                </FormItem>
              )}
            />
          </div>
        </div>

        <div className="flex justify-end gap-4">
          <Button variant="outline" type="button" onClick={onCancel}>
            Cancelar
          </Button>
          <Button type="submit" disabled={isSaving}>
            {isSaving ? 'Guardando...' : 'Guardar'}
          </Button>
        </div>
      </form>
    </Form>
  );
}