"use client"

import { useState, useEffect, useMemo, useRef } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { DashboardLayout } from "@/components/dashboard-layout"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Leaf, Plus, Trash2, Save, Printer, Calendar, MapPin, User, Sprout, ArrowLeft, ChevronDown, Check, Tractor, Pencil, GripVertical } from "lucide-react"
import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
    DropdownMenuContent,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { apiFetch, getErrorMessage } from "@/lib/apiutils"
import { useAuth } from "@/lib/auth-context"
import { useApi } from "@/lib/use-api"
import Link from "next/link"
import { toast } from "sonner"
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, DragEndEvent } from '@dnd-kit/core'
import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import { restrictToVerticalAxis } from '@dnd-kit/modifiers'

interface Productor {
    id: string
    nombre: string
}

interface Establecimiento {
    id: string
    nombre: string
    productorId: string
    ubicacion: string
    hectareas: number
}

interface Insumo {
    id: string
    nombreComercial: string
    principioActivo: string
    unidadMedida: string
    categoriaId: string
    categoriaNombre: string
}

interface ProductoReceta {
    id: string
    insumoId: string
    nombreProducto: string
    dosis: number | string
    unidad: string
    cantidadTotal: number
    orden: number
}

interface RecetaItemState {
    id: string
    loteId: string
    loteNombre: string
    loteSuperficie: number
    cultivoId: string
    cultivoNombre: string
    labor: string
    rinde?: string
    momentoDia: string
    productos: ProductoReceta[]
    total_recetas: number
    total_superficie: number
    total_establecimientos: number
}

function SortableProductRow({ producto, index, total, onReorder, children }: any) {
    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: producto.id });

    const style = {
        transform: CSS.Transform.toString(transform),
        transition,
        ...(isDragging ? { position: 'relative' as const, zIndex: 99, opacity: 0.8, backgroundColor: 'var(--background)' } : {})
    };

    const displayOrder = producto.orden > 0 ? producto.orden : index + 1;

    return (
        <TableRow ref={setNodeRef} style={style} className={isDragging ? "shadow-md relative" : ""}>
            <TableCell className="text-center align-middle">
                <div className="flex flex-row items-center justify-center gap-1">
                    <div {...attributes} {...listeners} className="cursor-grab hover:text-primary active:cursor-grabbing p-1" title="Arrastrar para reordenar">
                        <GripVertical className="h-4 w-4 text-muted-foreground" />
                    </div>
                    <input
                        type="number"
                        min={1}
                        max={total}
                        value={displayOrder}
                        onChange={(e) => {
                            const val = parseInt(e.target.value);
                            if (!isNaN(val)) {
                                const clamped = Math.max(1, Math.min(total, val));
                                onReorder(producto.id, clamped);
                            }
                        }}
                        className="w-9 h-7 text-center text-sm font-medium rounded-md border bg-muted focus:outline-none focus:ring-1 focus:ring-primary [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                    />
                </div>
            </TableCell>
            {children}
        </TableRow>
    );
}

export default function EditarRecetaPage() {
    const router = useRouter()
    const searchParams = useSearchParams()
    const recetaId = searchParams.get("id")
    const { user } = useAuth()
    const useApiHook = useApi

    // Use SWR hooks for static data
    const { data: prodData } = useApiHook("/productores?all=true&status=activo")
    const productores: Productor[] = useMemo(() => {
        const raw = prodData?.data || []
        return raw.map((p: any) => ({
            id: String(p.id),
            nombre: p.nombre,
        }))
    }, [prodData])

    const { data: estData } = useApiHook("/establecimientos?all=true&status=activo")
    const todosEstablecimientos: Establecimiento[] = useMemo(() => {
        const raw = estData?.data || []
        return raw.map((e: any) => ({
            id: String(e.id),
            nombre: e.nombre,
            productorId: String(e.productor_id),
            ubicacion: e.ubicacion,
            hectareas: Number(e.hectareas),
        }))
    }, [estData])

    const { data: insuData } = useApiHook("/insumos?limit=1000")
    const insumos: Insumo[] = useMemo(() => {
        const raw = insuData?.data || []
        return raw.map((i: any) => ({
            id: String(i.id),
            nombreComercial: i.nombre_comercial,
            principioActivo: i.principio_activo,
            unidadMedida: i.unidad_medida,
            categoriaId: String(i.categoria_id || ""),
            categoriaNombre: i.categoria?.nombre || "",
        }))
    }, [insuData])

    const { data: catData } = useApiHook("/categoria-insumos")
    const categoriasInsumo: any[] = useMemo(() => {
        const raw = catData || []
        return Array.isArray(raw) ? raw : (raw.data || [])
    }, [catData])

    const { data: cultData } = useApiHook("/cultivos")
    const rawCultivos = cultData || []
    const normalizedCultivos = Array.isArray(rawCultivos) ? rawCultivos : (rawCultivos.data || [])
    const cultivosList = normalizedCultivos

    const cultivos = useMemo(() => normalizedCultivos.map((c: any) => ({
        id: String(c.id),
        nombre: c.nombre
    })), [normalizedCultivos])

    const { data: prestData } = useApiHook("/prestadores?status=activo&all=true")
    const rawPrestadores = Array.isArray(prestData) ? prestData : (prestData?.data || [])
    const prestadoresList = useMemo(() => Array.isArray(rawPrestadores) ? rawPrestadores : [], [rawPrestadores])

    const { data: laboresData } = useApiHook("/labores?status=activo")
    const defaultLabores = ["Pulverización", "Fertilización", "Siembra", "Barbecho", "Aplicación Foliar", "Cosecha"]
    const labores: string[] = useMemo(() => {
        const raw = Array.isArray(laboresData) ? laboresData : (laboresData?.data || [])
        if (raw && raw.length > 0) {
            return raw.map((l: any) => l.nombre)
        }
        return defaultLabores
    }, [laboresData])

    const [numeroReceta, setNumeroReceta] = useState("")
    const [fechaActual, setFechaActual] = useState("")
    const [productorSeleccionado, setProductorSeleccionado] = useState("")
    const [establecimientoSeleccionado, setEstablecimientoSeleccionado] = useState("")
    const [prestadorSeleccionado, setPrestadorSeleccionado] = useState("ninguno") // Added state
    const [establecimientosFiltrados, setEstablecimientosFiltrados] = useState<Establecimiento[]>([])

    const [cultivo, setCultivo] = useState("")
    const [lotesSeleccionados, setLotesSeleccionados] = useState<string[]>([])
    const [superficie, setSuperficie] = useState<number>(0)
    const [filtroCategoria, setFiltroCategoria] = useState<Record<string, string>>({})
    const [labor, setLabor] = useState("")
    const [rinde, setRinde] = useState("")
    const [momentoDia, setMomentoDia] = useState("")


    const [superficieAplicable, setSuperficieAplicable] = useState<number>(0)
    const [superficieAplicableInput, setSuperficieAplicableInput] = useState<string>("")
    const isFirstLoadLotes = useRef(true)

    const [productos, setProductos] = useState<ProductoReceta[]>([])

    const [campanas, setCampanas] = useState<any[]>([])
    const [campanaSeleccionada, setCampanaSeleccionada] = useState("")
    const [campanasLoading, setCampanasLoading] = useState(false)

    const [lotes, setLotes] = useState<any[]>([])
    const [lotesLoading, setLotesLoading] = useState(false)

    const [aplicarConViento, setAplicarConViento] = useState("")
    const [vientoDireccion, setVientoDireccion] = useState<string[]>([])
    const [vientoIntensidad, setVientoIntensidad] = useState("")
    const [caudal, setCaudal] = useState("")
    const [pastillas, setPastillas] = useState("")
    const [gotas, setGotas] = useState("")
    const [deriva, setDeriva] = useState("")
    const [observaciones, setObservaciones] = useState("")

    const [ingenieroResponsable, setIngenieroResponsable] = useState("")
    const [matricula, setMatricula] = useState("")
    const [isLoadingReceta, setIsLoadingReceta] = useState(true)

    // 1. Cargar Receta Existente
    useEffect(() => {
        const fetchReceta = async () => {
            try {
                const res = await apiFetch(`/recetas/${recetaId}`)
                if (res.ok) {
                    const data = await res.json()

                    setNumeroReceta(data.numero || `REC-${data.id}`)
                    // Format date YYYY-MM-DD to DD/MM/YYYY for display
                    if (data.fecha) {
                        const [y, m, d] = data.fecha.split("-")
                        setFechaActual(`${d}/${m}/${y}`)
                    }

                    setProductorSeleccionado(String(data.productor_id))
                    setPrestadorSeleccionado(data.prestador_id ? String(data.prestador_id) : "ninguno")
                    setEstablecimientoSeleccionado(String(data.establecimiento_id))

                    // Load Items
                    if (data.items && Array.isArray(data.items)) {
                        const loadedItems: RecetaItemState[] = data.items.map((item: any) => ({
                            id: String(item.id || Date.now() + Math.random()),
                            loteId: String(item.lote_id),
                            loteNombre: item.lote?.nombre || "Desconocido",
                            loteSuperficie: Number(item.lote?.superficie || 0),
                            cultivoId: String(item.cultivo_id),
                            cultivoNombre: item.cultivo?.nombre || "Desconocido",
                            labor: item.labor,
                            rinde: item.rinde ? String(item.rinde) : undefined,
                            momentoDia: item.momento_dia || "",
                            productos: item.productos ? item.productos.map((p: any, pIdx: number) => ({
                                id: String(p.id),
                                insumoId: p.insumo_id ? String(p.insumo_id) : "",
                                nombreProducto: p.nombre_producto,
                                dosis: Number(p.dosis),
                                unidad: p.unidad,
                                cantidadTotal: Number(p.cantidad_total),
                                orden: Number(p.orden) > 0 ? Number(p.orden) : pIdx + 1
                            })) : []
                        }))

                        setLotesSeleccionados(loadedItems.map(i => i.loteId))

                        if (loadedItems.length > 0) {
                            setLabor(loadedItems[0].labor)
                            setCultivo(loadedItems[0].cultivoId)
                            setRinde(loadedItems[0].rinde || "")
                            setMomentoDia(loadedItems[0].momentoDia || "")
                            setProductos(loadedItems[0].productos)
                        } else {
                            setLabor("")
                        }
                    }

                    const supVal = Number(data.superficie)
                    setSuperficieAplicable(supVal)
                    setSuperficieAplicableInput(supVal === 0 ? '' : String(supVal))
                    setCampanaSeleccionada(String(data.campana_id || ""))

                    const hasWindData = data.aplicar_con_viento || !!data.viento_direccion
                    setAplicarConViento(hasWindData ? "SI" : "NO")
                    if (data.viento_direccion) {
                        setVientoDireccion(data.viento_direccion.split(",").map((s: string) => s.trim()))
                    } else {
                        setVientoDireccion([])
                    }
                    setVientoIntensidad(data.viento_intensidad || "")
                    const cleanCaudal = data.caudal ? String(data.caudal).replace(/\s*l\/ha$/i, "").trim() : ""
                    setCaudal(cleanCaudal)
                    setPastillas(data.pastillas || "")
                    setGotas(data.gotas || "")
                    setDeriva(data.deriva || "")
                    setObservaciones(data.observaciones || "")
                    setIngenieroResponsable(data.ingeniero_responsable)
                    setMatricula(data.matricula)

                } else {
                    console.error("Error fetching receta")
                }
            } catch (e) {
                console.error(e)
            } finally {
                setIsLoadingReceta(false)
            }
        }
        fetchReceta()
    }, [recetaId])


    // Fetch campaigns dependent on establishment
    useEffect(() => {
        if (establecimientoSeleccionado) {
            setCampanasLoading(true)
            apiFetch(`/campanas`)
                .then(res => res.json())
                .then((data: any) => {
                    setCampanas(data.data || [])
                })
                .catch(err => console.error(err))
                .finally(() => setCampanasLoading(false))
        } else {
            setCampanas([])
            //   setCampanaSeleccionada("") // Avoid resetting if we are loading initial data?
        }
    }, [establecimientoSeleccionado])

    // Filter Establishments - show all when no producer, filter when one is selected
    useEffect(() => {
        if (productorSeleccionado) {
            const filtrados = todosEstablecimientos.filter((est) => est.productorId === productorSeleccionado)
            setEstablecimientosFiltrados(filtrados)
            // Only reset if the current selection is NOT valid for this producer
            if (establecimientoSeleccionado) {
                const valid = filtrados.find(e => e.id === establecimientoSeleccionado)
                if (!valid && !isLoadingReceta) {
                    setEstablecimientoSeleccionado("")
                    setSuperficie(0)
                }
            }
        } else {
            setEstablecimientosFiltrados(todosEstablecimientos)
        }
    }, [productorSeleccionado, todosEstablecimientos, isLoadingReceta])

    // Cross-autocomplete: when establishment is selected, auto-fill the producer
    useEffect(() => {
        if (establecimientoSeleccionado && !isLoadingReceta) {
            const est = todosEstablecimientos.find(e => e.id === establecimientoSeleccionado)
            if (est && est.productorId !== productorSeleccionado) {
                setProductorSeleccionado(est.productorId)
            }
        }
    }, [establecimientoSeleccionado, todosEstablecimientos, isLoadingReceta])

    // Lotes logic
    useEffect(() => {
        if (establecimientoSeleccionado) {
            setLotesLoading(true)
            apiFetch(`/lotes?establecimiento_id=${establecimientoSeleccionado}`)
                .then(res => res.json())
                .then(data => {
                    if (Array.isArray(data)) {
                        setLotes(data)
                    } else {
                        setLotes([])
                    }
                    // We don't need to restore lotesSeleccionados here for items logic, 
                    // as items store their own loteId.
                    // But we might want to ensure valid loteSeleccionado if user is editing current form.
                    // Only for adding NEW items. 
                })
                .catch(err => console.error(err))
                .finally(() => setLotesLoading(false))
        } else {
            setLotes([])
        }
    }, [establecimientoSeleccionado, isLoadingReceta])

    // Lote Selection Effect for Current Item Form
    useEffect(() => {
        if (lotesSeleccionados.length > 0 && lotes.length > 0) {
            const selectedLotesObj = lotes.filter(l => lotesSeleccionados.includes(String(l.id)))
            const totalSup = selectedLotesObj.reduce((acc, l) => acc + Number(l.superficie), 0)
            setSuperficie(totalSup)

            if (isFirstLoadLotes.current) {
                isFirstLoadLotes.current = false
            } else {
                setSuperficieAplicable(totalSup)
            }

            if (selectedLotesObj.length > 0 && selectedLotesObj[0].cultivo_id) {
                setCultivo(String(selectedLotesObj[0].cultivo_id))
            }
        } else {
            setSuperficie(0)
            if (!isFirstLoadLotes.current) {
                setSuperficieAplicable(0)
            }
        }
    }, [lotesSeleccionados, lotes])

    const agregarProducto = () => {
        // Block if there's already an incomplete row (no product selected or no dose)
        const hayFilaVacia = productos.some(p => !p.nombreProducto || Number(p.dosis) === 0)
        if (hayFilaVacia) {
            toast.warning("Completá el producto y la dosis antes de agregar una nueva fila.")
            return
        }
        const nuevoProducto: ProductoReceta = {
            id: String(Date.now()),
            insumoId: "",
            nombreProducto: "",
            dosis: 0,
            unidad: "L/ha",
            cantidadTotal: 0,
            orden: productos.length + 1,
        }
        setProductos([...productos, nuevoProducto])
    }

    const reorderProducts = (productId: string, newOrden: number) => {
        setProductos(prev => {
            const targetProduct = prev.find(p => p.id === productId);
            if (!targetProduct) return prev;

            const oldOrden = targetProduct.orden;
            if (oldOrden === newOrden) return prev;

            return prev.map(p => {
                if (p.id === productId) return { ...p, orden: newOrden };
                if (oldOrden < newOrden) {
                    if (p.orden > oldOrden && p.orden <= newOrden) return { ...p, orden: p.orden - 1 };
                } else {
                    if (p.orden >= newOrden && p.orden < oldOrden) return { ...p, orden: p.orden + 1 };
                }
                return p;
            }).sort((a, b) => a.orden - b.orden);
        });
    }

    const sensors = useSensors(
        useSensor(PointerSensor, {
            activationConstraint: {
                distance: 5,
            },
        }),
        useSensor(KeyboardSensor, {
            coordinateGetter: sortableKeyboardCoordinates,
        })
    );

    const handleDragEnd = (event: DragEndEvent) => {
        const { active, over } = event;
        
        if (over && active.id !== over.id) {
            setProductos((items) => {
                const oldIndex = items.findIndex((i) => i.id === active.id);
                const newIndex = items.findIndex((i) => i.id === over.id);
                
                const newItems = arrayMove(items, oldIndex, newIndex);
                return newItems.map((item, index) => ({
                    ...item,
                    orden: index + 1
                }));
            });
        }
    };

    const eliminarProducto = (id: string) => {
        setProductos(prev => {
            const filtered = prev.filter((p) => p.id !== id);
            return filtered.sort((a,b) => a.orden - b.orden).map((p, index) => ({
                ...p,
                orden: index + 1
            }));
        });
    }

    const actualizarProducto = (id: string, campo: keyof ProductoReceta, valor: any) => {
        setProductos(
            productos.map((p) => {
                if (p.id === id) {
                    const productoActualizado = { ...p, [campo]: valor }

                    if (campo === "insumoId" && valor) {
                        const insumo = insumos.find((i) => i.id === valor)
                        if (insumo) {
                            productoActualizado.nombreProducto = insumo.nombreComercial
                            productoActualizado.unidad = `${insumo.unidadMedida}/ha`
                        }
                    }

                    if (campo === "dosis" || (campo === "insumoId" && Number(productoActualizado.dosis) > 0)) {
                        productoActualizado.cantidadTotal = Number((Number(productoActualizado.dosis) * Number(superficieAplicable)).toFixed(3))
                    }

                    return productoActualizado
                }
                return p
            }),
        )
    }

    useEffect(() => {
        setProductos(
            productos.map((p) => ({
                ...p,
                cantidadTotal: Number((Number(p.dosis) * Number(superficieAplicable)).toFixed(3)),
            })),
        )
    }, [superficieAplicable])



    const handleGuardar = async () => {
        // Validaciones específicas
        if (!productorSeleccionado) {
            toast.error("Por favor seleccione un Productor.")
            return
        }
        if (!establecimientoSeleccionado) {
            toast.error("Por favor seleccione un Establecimiento.")
            return
        }
        if (lotesSeleccionados.length === 0) {
            toast.error("Por favor seleccione al menos un Lote afectado.")
            return
        }
        if (!labor) {
            toast.error("Por favor seleccione una Labor.")
            return
        }
        if (!cultivo) {
            toast.error("Por favor seleccione el Cultivo.")
            return
        }
        if (labor === "Cosecha" && (!rinde || Number(rinde) <= 0)) {
            toast.error("Para la labor de Cosecha, debe especificar un rinde mayor a 0.")
            return
        }
        if (labor !== "Cosecha" && productos.length === 0) {
            toast.error("Debe agregar al menos un producto (o seleccionar Cosecha).")
            return
        }
        if (!ingenieroResponsable) {
            toast.error("Por favor ingrese el nombre del Ingeniero Responsable.")
            return
        }
        if (!matricula) {
            toast.error("Por favor ingrese la Matrícula del Ingeniero.")
            return
        }

        try {
            const [day, month, year] = fechaActual.split("/")
            const formattedDate = `${year}-${month}-${day}`

            const payload = {
                fecha: formattedDate,
                productor_id: productorSeleccionado,
                establecimiento_id: establecimientoSeleccionado,
                campana_id: campanaSeleccionada || null,
                superficie: Number(superficieAplicable),
                estado: "borrador",
                aplicar_con_viento: aplicarConViento === "SI",
                viento_direccion: vientoDireccion.join(", "),
                viento_intensidad: vientoIntensidad,
                caudal: caudal ? `${caudal} l/ha` : null,
                pastillas,
                gotas,
                deriva,
                observaciones,
                ingeniero_responsable: ingenieroResponsable,
                prestador_id: prestadorSeleccionado === "ninguno" ? null : prestadorSeleccionado,
                matricula,
                items: lotesSeleccionados.map(loteId => ({
                    lote_id: loteId,
                    cultivo_id: cultivo,
                    labor: labor,
                    rinde: rinde ? Number(rinde) : null,
                    momento_dia: momentoDia,
                    productos: productos.filter(p => p.nombreProducto).map(p => ({
                        insumo_id: p.insumoId,
                        nombre_producto: p.nombreProducto,
                        dosis: p.dosis,
                        unidad: p.unidad,
                        cantidad_total: p.cantidadTotal,
                        orden: p.orden
                    }))
                }))
            }

            const res = await apiFetch(`/recetas/${recetaId}`, {
                method: "PUT",
                body: JSON.stringify(payload),
            })

            if (res.ok) {
                toast.success("Receta actualizada exitosamente!")
                router.push("/dashboard/recetas")
            } else {
                const msg = await getErrorMessage(res)
                toast.error(msg)
            }
        } catch (e) {
            console.error(e)
            toast.error("Error de conexión")
        }
    }

    const establecimientoData = todosEstablecimientos.find((e) => e.id === establecimientoSeleccionado)

    if (isLoadingReceta) {
        return (
            <DashboardLayout>
                <div className="flex items-center justify-center min-h-[50vh]">
                    <p>Cargando receta...</p>
                </div>
            </DashboardLayout>
        )
    }

    return (
        <DashboardLayout>
            <div className="max-w-6xl mx-auto space-y-6 print:max-w-full">
                <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-start print:hidden">
                    <Link href="/dashboard/recetas">
                        <Button variant="ghost" size="icon">
                            <ArrowLeft className="h-5 w-5" />
                        </Button>
                    </Link>
                    <div>
                        <h1 className="text-3xl font-bold tracking-tight text-foreground text-balance">Editar Receta {numeroReceta}</h1>
                        <p className="text-muted-foreground mt-2">Modificar orden de trabajo</p>
                    </div>
                </div>

                <Card>
                    <CardHeader className="border-b border-border bg-primary/5">
                        <div className="flex items-center justify-between">
                            <div className="flex items-center gap-3">
                                <div className="flex items-center justify-center">
                                    <img src="/logo_transparent.png" alt="AgroRecetas" className="h-16 w-auto object-contain dark:hidden" />
                                    <img src="/logo_transparent.png" alt="AgroRecetas" className="h-16 w-auto object-contain hidden dark:block" />
                                </div>
                            </div>
                            <div className="text-right">
                                <div className="inline-flex items-center rounded-md border border-border px-4 py-2 text-lg font-mono bg-background">
                                    {numeroReceta}
                                </div>
                                <p className="text-sm text-muted-foreground mt-2 flex items-center justify-end gap-1">
                                    <Calendar className="h-3 w-3" />
                                    {fechaActual}
                                </p>
                            </div>
                        </div>
                    </CardHeader>
                    <CardContent className="pt-6">
                        <div className="grid gap-4 md:grid-cols-2">
                            <div className="space-y-2">
                                <Label htmlFor="labor" className="text-base font-semibold">
                                    Labor *
                                </Label>
                                <Select value={labor} onValueChange={setLabor}>
                                    <SelectTrigger id="labor" className="h-11">
                                        <SelectValue placeholder="Seleccionar labor" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {labores.map((lab) => (
                                            <SelectItem key={lab} value={lab}>
                                                {lab}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </div>
                            <div className="space-y-2">
                                <Label htmlFor="campana" className="text-base font-semibold">
                                    Campaña
                                </Label>
                                <Select
                                    value={campanaSeleccionada}
                                    onValueChange={setCampanaSeleccionada}
                                    disabled={!establecimientoSeleccionado || campanas.length === 0}
                                >
                                    <SelectTrigger id="campana" className="h-11">
                                        <SelectValue placeholder={campanasLoading ? "Cargando..." : "Seleccionar campaña (Opcional)"} />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {campanas.map((camp: any) => (
                                            <SelectItem key={camp.id} value={String(camp.id)}>
                                                <div className="flex items-center gap-2">
                                                    <Sprout className="h-4 w-4" />
                                                    <span className={camp.estado === 'activa' ? "font-semibold text-[#16a34a]" : ""}>
                                                        {camp.nombre} ({camp.cultivo} {camp.year_inicio}/{camp.year_fin})
                                                    </span>
                                                    {camp.estado === 'activa' && (
                                                        <span className="text-[10px] bg-[#16a34a]/10 text-[#16a34a] px-2 py-0.5 rounded ml-2 font-bold uppercase">Activa</span>
                                                    )}
                                                </div>
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                                {establecimientoSeleccionado && !campanasLoading && campanas.length === 0 && (
                                    <p className="text-xs text-muted-foreground mt-1">
                                        No hay campañas activas para este establecimiento.
                                    </p>
                                )}
                            </div>

                            <div className="space-y-2">
                                <Label htmlFor="productor" className="text-base font-semibold">
                                    Productor *
                                </Label>
                                <Select value={productorSeleccionado} onValueChange={setProductorSeleccionado}>
                                    <SelectTrigger id="productor" className="h-11">
                                        <SelectValue placeholder="Seleccionar productor" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {productores.map((prod) => (
                                            <SelectItem key={prod.id} value={prod.id}>
                                                <div className="flex items-center gap-2">
                                                    <User className="h-4 w-4" />
                                                    {prod.nombre}
                                                </div>
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </div>

                            <div className="space-y-2">
                                <Label htmlFor="establecimiento" className="text-base font-semibold">
                                    Establecimiento / Campo *
                                </Label>
                                <Select
                                    value={establecimientoSeleccionado}
                                    onValueChange={setEstablecimientoSeleccionado}
                                >
                                    <SelectTrigger id="establecimiento" className="h-11">
                                        <SelectValue placeholder="Seleccionar campo" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {establecimientosFiltrados.map((est) => (
                                            <SelectItem key={est.id} value={est.id}>
                                                <div className="flex items-center gap-2">
                                                    <MapPin className="h-4 w-4" />
                                                    {est.nombre}
                                                    {!productorSeleccionado && (
                                                        <span className="text-xs text-muted-foreground ml-1">
                                                            ({todosEstablecimientos.find(e => e.id === est.id) && productores.find(p => p.id === est.productorId)?.nombre})
                                                        </span>
                                                    )}
                                                </div>
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                                {establecimientoData && (
                                    <p className="text-xs text-muted-foreground flex items-center gap-1 mt-1">
                                        <MapPin className="h-3 w-3" />
                                        {establecimientoData.ubicacion}
                                    </p>
                                )}
                            </div>
                            <div className="space-y-2">
                                <Label htmlFor="prestador" className="text-base font-semibold">
                                    Prestador / Contratista
                                </Label>
                                <Select value={prestadorSeleccionado} onValueChange={setPrestadorSeleccionado}>
                                    <SelectTrigger id="prestador" className="h-11">
                                        <SelectValue placeholder="Seleccionar prestador (Opcional)" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="ninguno">Sin prestador asignado</SelectItem>
                                        {prestadoresList.map((p: any) => (
                                            <SelectItem key={p.id} value={String(p.id)}>
                                                <div className="flex items-center gap-2">
                                                    <Tractor className="h-4 w-4" />
                                                    {p.nombre}
                                                </div>
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </div>



                        </div>
                    </CardContent>
                </Card>


                <Card className="border-emerald-500/20 shadow-sm mt-8">
                    <CardHeader className="bg-emerald-500/5 pb-4">
                        <CardTitle>Detalle del Lote y Productos</CardTitle>
                        <CardDescription>Seleccione el lote y formule la mezcla para el mismo</CardDescription>
                    </CardHeader>
                    <CardContent className="pt-6">
                        <div className="grid gap-4 md:grid-cols-3 lg:grid-cols-6 mb-6">
                            <div className="space-y-2 flex flex-col lg:col-span-2">
                                <Label>Lotes Afectados *</Label>
                                <DropdownMenu>
                                    <DropdownMenuTrigger asChild>
                                        <Button variant="outline" className="w-full justify-between font-normal text-muted-foreground" disabled={!establecimientoSeleccionado || lotesLoading}>
                                            {lotesSeleccionados.length > 0
                                                ? `${lotesSeleccionados.length} lote(s) seleccionado(s)`
                                                : "Seleccionar lotes"}
                                        </Button>
                                    </DropdownMenuTrigger>
                                    <DropdownMenuContent className="w-56" align="start">
                                        {lotes.map((lote) => (
                                            <DropdownMenuCheckboxItem
                                                key={lote.id}
                                                checked={lotesSeleccionados.includes(String(lote.id))}
                                                onSelect={(e) => e.preventDefault()}
                                                onCheckedChange={(checked) => {
                                                    setLotesSeleccionados(prev =>
                                                        checked
                                                            ? [...prev, String(lote.id)]
                                                            : prev.filter(id => id !== String(lote.id))
                                                    )
                                                }}
                                            >
                                                <div className="flex flex-col items-start w-full">
                                                    <span>{lote.nombre}</span>
                                                    <span className="text-xs text-muted-foreground">{lote.superficie} ha</span>
                                                </div>
                                            </DropdownMenuCheckboxItem>
                                        ))}
                                    </DropdownMenuContent>
                                </DropdownMenu>
                            </div>

                            <div className="space-y-2">
                                <Label htmlFor="superficie">Sup. Total (ha)</Label>
                                <Input
                                    id="superficie"
                                    type="text"
                                    value={superficie}
                                    disabled
                                    className="bg-muted font-mono"
                                />
                            </div>

                            <div className="space-y-2">
                                <Label htmlFor="superficieAplicable">Sup. Aplicable (ha) *</Label>
                                <Input
                                    id="superficieAplicable"
                                    type="text"
                                    inputMode="decimal"
                                    placeholder="0"
                                    value={superficieAplicableInput}
                                    onChange={(e) => {
                                        const val = e.target.value;
                                        const sanitized = val.replace(',', '.');
                                        if (sanitized === '' || /^\d*\.?\d*$/.test(sanitized)) {
                                            setSuperficieAplicableInput(sanitized);
                                        }
                                    }}
                                    onBlur={(e) => {
                                        const num = parseFloat(e.target.value);
                                        const val = isNaN(num) ? 0 : num;
                                        setSuperficieAplicable(val);
                                        setSuperficieAplicableInput(val === 0 ? '' : String(val));
                                    }}
                                    className="font-mono bg-primary/5 border-primary/20"
                                />
                            </div>

                            <div className="space-y-2">
                                <Label htmlFor="cultivo">Cultivo *</Label>
                                <Select value={cultivo} onValueChange={setCultivo}>
                                    <SelectTrigger id="cultivo">
                                        <SelectValue placeholder="Seleccionar" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {cultivos.map((cult: any) => (
                                            <SelectItem key={cult.id} value={cult.id}>
                                                {cult.nombre}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </div>

                            {labor === "Cosecha" && (
                                <div className="space-y-2">
                                    <Label htmlFor="rinde">Rinde (qq/ha)</Label>
                                    <Input
                                        id="rinde"
                                        type="text"
                                        inputMode="decimal"
                                        placeholder="Ej: 35.5"
                                        value={rinde}
                                        onChange={(e) => {
                                            const val = e.target.value.replace(',', '.');
                                            if (val === '' || /^\d*\.?\d*$/.test(val)) {
                                                setRinde(val);
                                            }
                                        }}
                                    />
                                </div>
                            )}
                            <div className="space-y-2">
                                <Label htmlFor="momentoDia">Momento del Día</Label>
                                <Select value={momentoDia} onValueChange={setMomentoDia}>
                                    <SelectTrigger id="momentoDia">
                                        <SelectValue placeholder="Seleccionar" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="Mañana">Mañana</SelectItem>
                                        <SelectItem value="Tarde">Tarde</SelectItem>
                                        <SelectItem value="Noche">Noche</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                        </div>

                        {/* Products Table for Current Item */}
                        {labor !== "Cosecha" && (
                            <div className="mt-6 border rounded-md p-4 bg-background">
                                <div className="flex items-center justify-between mb-4">
                                    <div>
                                        <h4 className="text-sm font-semibold">Productos</h4>
                                        <p className="text-xs text-muted-foreground">Productos para esta labor</p>
                                    </div>
                                    <Button onClick={agregarProducto} variant="outline" size="sm" className="gap-2">
                                        <Plus className="h-4 w-4" />
                                        Agregar
                                    </Button>
                                </div>
                                <DndContext
                                    sensors={sensors}
                                    collisionDetection={closestCenter}
                                    onDragEnd={handleDragEnd}
                                    modifiers={[restrictToVerticalAxis]}
                                >
                                <Table>
                                    <TableHeader>
                                        <TableRow className="bg-muted/50">
                                            <TableHead className="w-[10%] text-center">Orden</TableHead>
                                            <TableHead className="w-[30%]">Producto</TableHead>
                                            <TableHead className="w-[20%]">Dosis</TableHead>
                                            <TableHead className="w-[15%]">Unidad</TableHead>
                                            <TableHead className="w-[20%]">Total</TableHead>
                                            <TableHead className="w-[5%]"></TableHead>
                                        </TableRow>
                                    </TableHeader>
                                        <TableBody>
                                            <SortableContext
                                                items={productos.map(p => p.id)}
                                                strategy={verticalListSortingStrategy}
                                            >
                                                {productos.map((producto, index) => (
                                                    <SortableProductRow key={producto.id} producto={producto} index={index} total={productos.length} onReorder={reorderProducts}>
                                                <TableCell className="align-top">
                                                    <div className="flex flex-col gap-1">
                                                        <Select
                                                            value={filtroCategoria[producto.id] || "todos"}
                                                            onValueChange={(val) => setFiltroCategoria(prev => ({ ...prev, [producto.id]: val }))}
                                                        >
                                                            <SelectTrigger className="w-full h-7 text-xs bg-muted/50 border-dashed">
                                                                <SelectValue placeholder="Filtrar por categoría" />
                                                            </SelectTrigger>
                                                            <SelectContent>
                                                                <SelectItem value="todos">Todas las categorías</SelectItem>
                                                                {categoriasInsumo.map((cat: any) => (
                                                                    <SelectItem key={cat.id} value={String(cat.id)}>{cat.nombre}</SelectItem>
                                                                ))}
                                                            </SelectContent>
                                                        </Select>
                                                        <Select
                                                            value={producto.insumoId}
                                                            onValueChange={(value) => actualizarProducto(producto.id, "insumoId", value)}
                                                        >
                                                            <SelectTrigger className="w-full">
                                                                <SelectValue placeholder="Seleccionar" />
                                                            </SelectTrigger>
                                                            <SelectContent>
                                                                {/* Fallback for inactive/deleted products */}
                                                                {producto.insumoId && !insumos.find(i => i.id === producto.insumoId) && producto.nombreProducto && (
                                                                    <SelectItem value={producto.insumoId}>
                                                                        <div>
                                                                            <p className="font-medium">{producto.nombreProducto}</p>
                                                                            <p className="text-xs text-muted-foreground">Insumo no encontrado / inactivo</p>
                                                                        </div>
                                                                    </SelectItem>
                                                                )}
                                                                {(() => {
                                                                    const catFiltro = filtroCategoria[producto.id] || "todos"
                                                                    const filtrados = catFiltro === "todos" ? insumos : insumos.filter(i => i.categoriaId === catFiltro)
                                                                    return filtrados.map((insumo) => (
                                                                        <SelectItem key={insumo.id} value={insumo.id}>
                                                                            <div>
                                                                                <p className="font-medium">{insumo.nombreComercial}</p>
                                                                                <p className="text-xs text-muted-foreground">{insumo.principioActivo}</p>
                                                                            </div>
                                                                        </SelectItem>
                                                                    ))
                                                                })()}
                                                            </SelectContent>
                                                        </Select>
                                                    </div>
                                                </TableCell>
                                                <TableCell>
                                                    <Input
                                                        type="text"
                                                        inputMode="decimal"
                                                        placeholder="0"
                                                        value={producto.dosis === 0 ? "" : String(producto.dosis)}
                                                        onChange={(e) => {
                                                            const val = e.target.value;
                                                            const sanitized = val.replace(',', '.');
                                                            if (sanitized === '' || /^\d*\.?\d*$/.test(sanitized)) {
                                                                actualizarProducto(producto.id, "dosis", sanitized);
                                                            }
                                                        }}
                                                        onBlur={(e) => {
                                                            const num = parseFloat(e.target.value);
                                                            actualizarProducto(producto.id, "dosis", isNaN(num) ? 0 : num);
                                                        }}
                                                        className="font-mono"
                                                    />
                                                </TableCell>
                                                <TableCell>{producto.unidad}</TableCell>
                                                <TableCell>{Number(producto.cantidadTotal).toFixed(3)}</TableCell>
                                                <TableCell>
                                                    <Button variant="ghost" size="icon" onClick={() => eliminarProducto(producto.id)}>
                                                        <Trash2 className="h-4 w-4 text-destructive" />
                                                    </Button>
                                                </TableCell>
                                                    </SortableProductRow>
                                                ))}
                                            </SortableContext>
                                        </TableBody>
                                </Table>
                                </DndContext>
                                {superficieAplicable > 0 && (
                                    <div className="mt-4 p-3 bg-muted/50 rounded-lg">
                                        <p className="text-sm text-muted-foreground">
                                            <span className="font-semibold text-foreground">Nota:</span> Las cantidades totales se calculan automáticamente multiplicando la dosis por la superficie aplicable ({superficieAplicable} ha)
                                        </p>
                                    </div>
                                )}
                            </div>
                        )}
                    </CardContent>
                </Card>

                {/* Metadata Card (Conditions, Responsible) */}

                <Card>
                    <CardHeader>
                        <CardTitle>Condiciones Ambientales y Técnicas</CardTitle>
                        <CardDescription>Parámetros de aplicación y observaciones</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <div className="grid gap-4 md:grid-cols-2">
                            <div className="space-y-2">
                                <Label htmlFor="aplicarConViento">Aplicar con Viento</Label>
                                <Select
                                    value={aplicarConViento}
                                    onValueChange={(value) => {
                                        setAplicarConViento(value)
                                        if (value === "NO") {
                                            setVientoDireccion([])
                                        }
                                    }}
                                >
                                    <SelectTrigger id="aplicarConViento">
                                        <SelectValue placeholder="Seleccionar" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="SI">SI</SelectItem>
                                        <SelectItem value="NO">NO</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>

                            {aplicarConViento === "SI" && (
                                <div className="space-y-2 md:col-span-2">
                                    <Label htmlFor="vientoDireccion">Dirección del Viento</Label>
                                    <div className="flex flex-wrap gap-2">
                                        {["N", "S", "E", "O", "NE", "NO", "SE", "SO"].map((dir) => (
                                            <Button
                                                key={dir}
                                                type="button"
                                                variant={vientoDireccion.includes(dir) ? "default" : "outline"}
                                                size="sm"
                                                onClick={() => {
                                                    setVientoDireccion((prev) =>
                                                        prev.includes(dir) ? prev.filter((d) => d !== dir) : [...prev, dir],
                                                    )
                                                }}
                                                className="h-8 w-12 text-xs"
                                            >
                                                {dir}
                                            </Button>
                                        ))}
                                        {vientoDireccion.length > 0 && (
                                            <span className="text-xs text-muted-foreground self-center ml-2">
                                                ({vientoDireccion.join(", ")})
                                            </span>
                                        )}
                                    </div>
                                </div>
                            )}

                            {aplicarConViento === "SI" && (
                                <div className="space-y-2">
                                    <Label htmlFor="vientoIntensidad">Intensidad del Viento</Label>
                                    <Select value={vientoIntensidad} onValueChange={setVientoIntensidad}>
                                        <SelectTrigger id="vientoIntensidad">
                                            <SelectValue placeholder="Seleccionar" />
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value="Calmo">Calmo</SelectItem>
                                            <SelectItem value="Leve">Leve</SelectItem>
                                            <SelectItem value="Moderado">Moderado</SelectItem>
                                            <SelectItem value="Intenso">Intenso</SelectItem>
                                        </SelectContent>
                                    </Select>
                                </div>
                            )}

                            <div className="space-y-2">
                                <Label htmlFor="caudal">Caudal (lts/ha)</Label>
                                <Input
                                    id="caudal"
                                    value={caudal}
                                    onChange={(e) => {
                                        if (e.target.value.length <= 50) setCaudal(e.target.value)
                                    }}
                                    maxLength={50}
                                    placeholder="Ej: 100"
                                    type="text"
                                    className={caudal.length >= 50 ? 'border-red-500 focus-visible:ring-red-500' : ''}
                                />
                                {caudal.length >= 50 && (
                                    <p className="text-xs text-red-500 mt-1">Has alcanzado el límite máximo de 50 caracteres.</p>
                                )}
                            </div>
                            <div className="space-y-2">
                                <Label htmlFor="pastillas">Boquillas</Label>
                                <Input
                                    id="pastillas"
                                    value={pastillas}
                                    onChange={(e) => {
                                        if (e.target.value.length <= 50) setPastillas(e.target.value)
                                    }}
                                    maxLength={50}
                                    placeholder="Ej: XR 110-03"
                                    type="text"
                                    className={pastillas.length >= 50 ? 'border-red-500 focus-visible:ring-red-500' : ''}
                                />
                                {pastillas.length >= 50 && (
                                    <p className="text-xs text-red-500 mt-1">Has alcanzado el límite máximo de 50 caracteres.</p>
                                )}
                            </div>
                            <div className="space-y-2">
                                <Label htmlFor="gotas">Gotas (Cantidad /ml)</Label>
                                <Input
                                    id="gotas"
                                    value={gotas}
                                    onChange={(e) => {
                                        if (e.target.value.length <= 50) setGotas(e.target.value)
                                    }}
                                    maxLength={50}
                                    placeholder="Ej: 50-70"
                                    type="text"
                                    className={gotas.length >= 50 ? 'border-red-500 focus-visible:ring-red-500' : ''}
                                />
                                {gotas.length >= 50 && (
                                    <p className="text-xs text-red-500 mt-1">Has alcanzado el límite máximo de 50 caracteres.</p>
                                )}
                            </div>
                            <div className="space-y-2">
                                <Label htmlFor="deriva">Deriva</Label>
                                <Input
                                    id="deriva"
                                    value={deriva}
                                    onChange={(e) => {
                                        if (e.target.value.length <= 50) setDeriva(e.target.value)
                                    }}
                                    maxLength={50}
                                    placeholder="Ej: Baja / Media"
                                    type="text"
                                    className={deriva.length >= 50 ? 'border-red-500 focus-visible:ring-red-500' : ''}
                                />
                                {deriva.length >= 50 && (
                                    <p className="text-xs text-red-500 mt-1">Has alcanzado el límite máximo de 50 caracteres.</p>
                                )}
                            </div>
                        </div>
                        <div className="space-y-2 mt-4">
                            <Label htmlFor="observaciones">Observaciones Generales</Label>
                            <Textarea
                                id="observaciones"
                                value={observaciones}
                                onChange={(e) => {
                                    if (e.target.value.length <= 500) {
                                        setObservaciones(e.target.value)
                                    }
                                }}
                                maxLength={500}
                                placeholder="Ej: Aplicar con vientos menores a 10 km/h..."
                                className={`min-h-[100px] ${observaciones.length >= 500 ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
                            />
                            {observaciones.length >= 500 && (
                                <p className="text-xs text-red-500 mt-1">Has alcanzado el límite máximo de 500 caracteres.</p>
                            )}
                        </div>
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader>
                        <CardTitle>Ingeniero Responsable</CardTitle>
                        <CardDescription>Firma y aclaración del profesional actuante</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <div className="grid gap-4 md:grid-cols-2">
                            <div className="space-y-2">
                                <Label htmlFor="ingeniero">Nombre y Apellido *</Label>
                                <Input
                                    id="ingeniero"
                                    value={ingenieroResponsable}
                                    onChange={(e) => {
                                        if (e.target.value.length <= 100) {
                                            setIngenieroResponsable(e.target.value)
                                        }
                                    }}
                                    maxLength={100}
                                    placeholder="Ing. Agr. Juan Pérez"
                                    className={ingenieroResponsable.length >= 100 ? 'border-red-500 focus-visible:ring-red-500' : ''}
                                />
                                {ingenieroResponsable.length >= 100 && (
                                    <p className="text-xs text-red-500 mt-1">Has alcanzado el límite máximo de 100 caracteres.</p>
                                )}
                            </div>
                            <div className="space-y-2">
                                <Label htmlFor="matricula">Matrícula Profesional *</Label>
                                <Input
                                    id="matricula"
                                    value={matricula}
                                    onChange={(e) => {
                                        if (e.target.value.length <= 40) {
                                            setMatricula(e.target.value)
                                        }
                                    }}
                                    maxLength={40}
                                    placeholder="Ej: MP 12345"
                                    className={`font-mono ${matricula.length >= 40 ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
                                />
                                {matricula.length >= 40 && (
                                    <p className="text-xs text-red-500 mt-1">Has alcanzado el límite máximo de 40 caracteres.</p>
                                )}
                            </div>
                        </div>
                        <div className="mt-6 pt-6 border-t border-border">
                            <div className="flex items-center justify-between">
                                <div className="space-y-1">
                                    <p className="text-sm font-medium text-foreground">Firma Digital</p>
                                    <p className="text-xs text-muted-foreground">
                                        Esta receta agronómica tiene validez legal según normativas vigentes
                                    </p>
                                </div>
                                <div className="text-right">
                                    <div className="h-16 w-48 border-b-2 border-border flex items-end justify-center pb-1">
                                        <span className="text-sm text-muted-foreground italic">
                                            {ingenieroResponsable || "Firma del profesional"}
                                        </span>
                                    </div>
                                    {matricula && <p className="text-xs text-muted-foreground mt-1">{matricula}</p>}
                                </div>
                            </div>
                        </div>
                    </CardContent>
                </Card>

                <div className="flex justify-end gap-4 pb-8">
                    <Button variant="outline" onClick={() => router.push("/dashboard/recetas")}>
                        Cancelar
                    </Button>
                    <Button onClick={handleGuardar} className="bg-emerald-600 hover:bg-emerald-700">
                        <Save className="mr-2 h-4 w-4" />
                        Guardar Cambios
                    </Button>
                </div>
            </div>
        </DashboardLayout>
    )
}