"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 { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogDescription } from "@/components/ui/dialog"
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" // Fixed import to use named export instead of default
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, restrictToParentElement } 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 NuevaRecetaPage() {
  const router = useRouter()
  const { user } = useAuth()
  const useApiHook = useApi // Declare useApi hook

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

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

  const { data: insuData, mutate: mutateInsumo } = useApiHook("/insumos?limit=1000")
  const rawInsumos = insuData?.data || []
  const insumos: Insumo[] = useMemo(() => rawInsumos.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 || "",
  })), [rawInsumos])

  const { data: catData } = useApiHook("/categoria-insumos")
  const categoriasInsumo = Array.isArray(catData) ? catData : (catData?.data || [])

  const { data: cultData } = useApiHook("/cultivos")
  const rawCultivos = cultData || []
  const cultivosList = Array.isArray(rawCultivos) ? rawCultivos : (rawCultivos.data || [])
  const cultivos = useMemo(() => cultivosList.map((c: any) => ({
    id: String(c.id),
    nombre: c.nombre
  })), [cultivosList])

  const { data: prestData, mutate: mutatePrestador } = useApiHook("/prestadores?status=activo")
  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")



  const [isInsumoDialogOpen, setIsInsumoDialogOpen] = useState(false)
  const [filtroCategoria, setFiltroCategoria] = useState<Record<string, string>>({})
  const [newInsumo, setNewInsumo] = useState({ nombre_comercial: "", principio_activo: "", unidad_medida: "Litros", categoria_id: "" })
  const handleSaveInsumo = async () => {
    const res = await apiFetch("/insumos", { method: "POST", body: JSON.stringify({ ...newInsumo, status: "activo" }) })
    if (res.ok) {
      await mutateInsumo()
      setIsInsumoDialogOpen(false)
      setNewInsumo({ nombre_comercial: "", principio_activo: "", unidad_medida: "Litros", categoria_id: "" })
    } else {
      toast.error(await getErrorMessage(res))
    }
  }

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


  const [superficieAplicable, setSuperficieAplicable] = useState<number>(0)
  const [superficieAplicableInput, setSuperficieAplicableInput] = useState<string>("")
  const [laborConfirmada, setLaborConfirmada] = useState(false)
  const superficieEditadaManualmente = useRef(false)

  const [productos, setProductos] = useState<ProductoReceta[]>([
    {
      id: "1",
      insumoId: "",
      nombreProducto: "",
      dosis: 0,
      unidad: "L/ha",
      cantidadTotal: 0,
      orden: 1,
    },
  ])

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

  // Fetch campaigns dependent on establishment
  // Fetch active campaigns globally (independent of establishment)
  useEffect(() => {
    setCampanasLoading(true)
    apiFetch(`/campanas`)
      .then((res) => res.json())
      .then((data: any) => {
        const allCampaigns = data.data || []
        setCampanas(allCampaigns)

        if (allCampaigns.length > 0 && !campanaSeleccionada) {
          const activeCampaign = allCampaigns.find((c: any) => c.estado === 'activa')
          if (activeCampaign) {
            setCampanaSeleccionada(String(activeCampaign.id))
          } else {
            setCampanaSeleccionada(String(allCampaigns[0].id))
          }
        }
      })
      .catch((err) => console.error(err))
      .finally(() => setCampanasLoading(false))
  }, []) // Run once on mount (or when we want to refresh?) - Just on mount is fine for "Global" list



  const [aplicarConViento, setAplicarConViento] = useState("NO")
  const [vientoDireccion, setVientoDireccion] = useState<string[]>([]) // Changed to array for multi-select
  const [vientoIntensidad, setVientoIntensidad] = useState("")
  const [caudal, setCaudal] = useState("")
  const [pastillas, setPastillas] = useState("")
  const [gotas, setGotas] = useState("") // Added gotas field
  const [deriva, setDeriva] = useState("") // Added deriva field
  const [observaciones, setObservaciones] = useState("")

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

  useEffect(() => {
    setNumeroReceta("(Autogenerado)")

    const fecha = new Date().toLocaleDateString("es-AR", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
    })
    setFechaActual(fecha)
  }, [])

  const searchParams = useSearchParams()
  const establishmentParam = searchParams.get("establecimiento_id")
  const campanaParam = searchParams.get("campana_id")
  const cultivoParam = searchParams.get("cultivo_id")
  const backUrlParam = searchParams.get("back_url")
  const [paramsLoaded, setParamsLoaded] = useState(false)

  // Use Effect to handle initial params loading
  useEffect(() => {
    if (todosEstablecimientos.length > 0 && establishmentParam && !paramsLoaded) {
      const est = todosEstablecimientos.find(e => e.id === establishmentParam)
      if (est) {
        setProductorSeleccionado(est.productorId)
        // We need to wait for the producer selection effect to run potentially, 
        // or just set filtered establishments directly? 
        // Better to let the producer effect run, but we need to ensure establishment is selected after.
        // Actually, we can just set it here, but the producer effect clears it.
        // So we need to handle the sequence.

        // Let's set producer first. The existing effect [productorSeleccionado] clears establishment.
        // So we should utilize a state to know we are in "initializing" mode or simply set it after a tick?
        // Or simpler: Modify the producer effect to NOT clear if we are matching the desired establishment.

        // Alternative: Set everything here and ensure logic doesn't conflict.

        // Let's try setting producer, and rely on a separate specific effect for the params that runs when producer matches.
      }
    }
  }, [todosEstablecimientos, establishmentParam, paramsLoaded])

  // Allow manual override via URL param (Global campaigns)
  useEffect(() => {
    if (campanaParam && campanas.length > 0) {
      // If param provided, override auto-selection
      setCampanaSeleccionada(campanaParam)
    }
  }, [campanaParam, campanas])


  const establecimientosFiltrados = useMemo(() => {
    if (productorSeleccionado) {
      return todosEstablecimientos.filter((est) => est.productorId === productorSeleccionado)
    }
    return todosEstablecimientos
  }, [productorSeleccionado, todosEstablecimientos])

  // Auto-select first producer ONLY if there's only one
  useEffect(() => {
    if (productores.length === 1 && !productorSeleccionado && !establishmentParam && !paramsLoaded) {
      setProductorSeleccionado(String(productores[0].id))
    }
  }, [productores, productorSeleccionado, establishmentParam, paramsLoaded])

  // Auto-select the only establishment if producer is selected and they have exactly one
  useEffect(() => {
    if (establecimientosFiltrados.length === 1 && !establecimientoSeleccionado && !establishmentParam && !paramsLoaded) {
      setEstablecimientoSeleccionado(String(establecimientosFiltrados[0].id))
    }
  }, [establecimientosFiltrados, establecimientoSeleccionado, establishmentParam, paramsLoaded])

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

  // When producer changes, reset establishment only if it doesn't belong to the new producer
  useEffect(() => {
    if (establecimientoSeleccionado && productorSeleccionado) {
      const est = todosEstablecimientos.find(e => e.id === establecimientoSeleccionado)
      if (est && est.productorId !== productorSeleccionado) {
        setEstablecimientoSeleccionado("")
        setSuperficie(0)
      }
    } else if (!paramsLoaded && establishmentParam) {
      const est = todosEstablecimientos.find(e => e.id === establishmentParam)
      if (est && est.productorId === productorSeleccionado) {
        setEstablecimientoSeleccionado(establishmentParam)
      }
    }
  }, [productorSeleccionado, todosEstablecimientos])

  // Separate effect to handle Campana selection after establishment is set
  useEffect(() => {
    if (establishmentParam && !paramsLoaded && establecimientoSeleccionado === establishmentParam) {
      let campanaReady = true

      if (campanaParam) {
        if (campanas.length > 0) {
          const camp = campanas.find(c => String(c.id) === campanaParam)
          if (camp) {
            setCampanaSeleccionada(campanaParam)
          }
        } else {
          campanaReady = false
        }
      }

      if (cultivoParam) {
        setCultivo(cultivoParam)
      }

      if (campanaReady) {
        setParamsLoaded(true)
      }
    }
  }, [establecimientoSeleccionado, campanas, establishmentParam, campanaParam, cultivoParam, paramsLoaded])

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

  useEffect(() => {
    if (establecimientoSeleccionado) {
      setLotesLoading(true)
      apiFetch(`/lotes?establecimiento_id=${establecimientoSeleccionado}`)
        .then((res) => res.json())
        .then((data) => {
          if (Array.isArray(data)) {
            setLotes(data)
            setLotesSeleccionados(prev => prev.filter(id => data.some((l: any) => String(l.id) === id)))
          } else {
            setLotes([])
            setLotesSeleccionados([])
          }
        })
        .catch((err) => console.error(err))
        .finally(() => setLotesLoading(false))

      setSuperficie(0)
    } else {
      setLotes([])
      setLotesSeleccionados([])
      setSuperficie(0)
    }
  }, [establecimientoSeleccionado])

  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)
      // Only auto-fill superficieAplicable if the user hasn't manually entered a value
      if (!superficieEditadaManualmente.current) {
        setSuperficieAplicable(totalSup)
        setSuperficieAplicableInput(totalSup === 0 ? '' : String(totalSup))
      }
      // Use the last lote in selection order (not filtered order) to auto-select cultivo
      const lastSelectedId = lotesSeleccionados[lotesSeleccionados.length - 1]
      const lastSelectedLote = lotes.find((l: any) => String(l.id) === String(lastSelectedId))
      if (lastSelectedLote?.cultivo_id) {
        setCultivo(String(lastSelectedLote.cultivo_id))
      }
    } else {
      setSuperficie(0)
      if (!superficieEditadaManualmente.current) {
        setSuperficieAplicable(0)
        setSuperficieAplicableInput("")
      }
    }
  }, [lotesSeleccionados, lotes])

  useEffect(() => {
    if (user) {
      setIngenieroResponsable((prev) => prev || user.name || "")
      if (user.matricula) {
        setMatricula((prev) => prev || user.matricula || "")
      }
    }
  }, [user])

  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 {
      // Formatear fecha para backend
      const [day, month, year] = fechaActual.split("/")
      const formattedDate = `${year}-${month}-${day}`

      const payload = {
        numero: numeroReceta,
        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,
        pastillas,
        gotas,
        deriva,
        observaciones,
        ingeniero_responsable: ingenieroResponsable,
        prestador_id: prestadorSeleccionado === "ninguno" ? null : prestadorSeleccionado,
        matricula,
        items: lotesSeleccionados.map(loteId => {
          const loteObj = lotes.find((l: any) => String(l.id) === String(loteId))
          return {
            lote_id: loteId,
            cultivo_id: loteObj?.cultivo_id ? String(loteObj.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", {
        method: "POST",
        body: JSON.stringify(payload),
      })

      if (res.ok) {
        clearDraft()
        toast.success("Receta guardada 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")
    }
  }

  // PERSISTENCE LOGIC
  const DRAFT_KEY = 'receta_draft'

  // Load Draft
  useEffect(() => {
    const draft = localStorage.getItem(DRAFT_KEY)
    if (draft) {
      try {
        const parsed = JSON.parse(draft)
        // confirmation? Or just auto-load? User requested "persistir", implies auto.
        // We only restore if there are no specific URL params meant to override context (or we merge?)
        // For simplicity: Load draft.
        if (parsed.productorSeleccionado) setProductorSeleccionado(parsed.productorSeleccionado)
        if (parsed.establecimientoSeleccionado) setEstablecimientoSeleccionado(parsed.establecimientoSeleccionado)
        if (parsed.prestadorSeleccionado) setPrestadorSeleccionado(parsed.prestadorSeleccionado) // Load from draft
        if (parsed.campanaSeleccionada) setCampanaSeleccionada(parsed.campanaSeleccionada)
        if (parsed.cultivo) setCultivo(parsed.cultivo)
        if (parsed.lotesSeleccionados) setLotesSeleccionados(parsed.lotesSeleccionados)
        if (parsed.superficie) setSuperficie(parsed.superficie)
        if (parsed.superficieAplicable) {
          setSuperficieAplicable(parsed.superficieAplicable)
          setSuperficieAplicableInput(String(parsed.superficieAplicable))
          superficieEditadaManualmente.current = true  // preserve user's manual value on draft restore
        }
        if (parsed.labor) setLabor(parsed.labor)
        if (parsed.rinde) setRinde(parsed.rinde)
        if (parsed.momentoDia) setMomentoDia(parsed.momentoDia)

        if (parsed.productos) setProductos(parsed.productos)
        if (parsed.aplicarConViento) setAplicarConViento(parsed.aplicarConViento)
        if (parsed.vientoDireccion) setVientoDireccion(parsed.vientoDireccion)
        if (parsed.vientoIntensidad) setVientoIntensidad(parsed.vientoIntensidad)
        if (parsed.caudal) setCaudal(parsed.caudal)
        if (parsed.pastillas) setPastillas(parsed.pastillas)
        if (parsed.gotas) setGotas(parsed.gotas)
        if (parsed.deriva) setDeriva(parsed.deriva)
        if (parsed.observaciones) setObservaciones(parsed.observaciones)
        if (parsed.ingenieroResponsable) setIngenieroResponsable(parsed.ingenieroResponsable)
        if (parsed.matricula) setMatricula(parsed.matricula)

      } catch (e) {
        console.error("Error parsing draft", e)
      }
    }
  }, [])

  // Save Draft
  useEffect(() => {
    const dataToSave = {
      productorSeleccionado,
      establecimientoSeleccionado,
      campanaSeleccionada,
      cultivo,
      lotesSeleccionados,
      superficie,
      superficieAplicable,
      labor,
      rinde,
      momentoDia,

      productos,
      aplicarConViento,
      vientoDireccion,
      vientoIntensidad,
      caudal,
      pastillas,
      gotas,
      deriva,
      observaciones,
      ingenieroResponsable,
      matricula,
      prestadorSeleccionado
    }
    // Only save if there is at least some data to avoid overwriting with empty on initial mount race
    if (productorSeleccionado || establecimientoSeleccionado || productos.some(p => p.insumoId)) {
      localStorage.setItem(DRAFT_KEY, JSON.stringify(dataToSave))
    }
  }, [
    productorSeleccionado, establecimientoSeleccionado, prestadorSeleccionado, campanaSeleccionada, cultivo, lotesSeleccionados,
    superficie, superficieAplicable, labor, rinde, momentoDia, productos, aplicarConViento, vientoDireccion,
    vientoIntensidad, caudal, pastillas, gotas, deriva, observaciones, ingenieroResponsable, matricula
  ])

  // Clear Draft on Success
  const clearDraft = () => {
    localStorage.removeItem(DRAFT_KEY)
  }

  const productorNombre = productores.find((p) => p.id === productorSeleccionado)?.nombre || ""

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

  const [mounted, setMounted] = useState(false)
  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return (
      <DashboardLayout>
        <div className="flex items-center justify-center min-h-[50vh]">
          <div className="h-8 w-8 animate-spin rounded-full border-4 border-emerald-500 border-t-transparent"></div>
        </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={campanaParam ? `/dashboard/campanas/detalle?id=${campanaParam}&establecimiento_id=${establishmentParam || ""}&cultivo_id=${cultivoParam || ""}${backUrlParam ? `&back_url=${backUrlParam}` : ""}` : "/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">Nueva Receta Agronómica</h1>
            <p className="text-muted-foreground mt-2">Orden de trabajo profesional</p>
          </div>
        </div>

        <Card>
          <CardHeader className="border-b border-border bg-primary/5">
            <div className="flex flex-col gap-4 sm:flex-row sm: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="flex flex-col items-start sm:items-end">
                <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-start sm: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={campanas.length === 0}
                >
                  <SelectTrigger id="campana" className="h-11">
                    <SelectValue placeholder={campanasLoading ? "Cargando..." : "Seleccionar campaña"} />
                  </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}
                          </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 mb-2 block">
                  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>
                <p className="text-xs text-muted-foreground mt-1">
                  * Solo se listan productores con establecimientos vinculados.
                </p>
              </div>
              <div className="space-y-2">
                <Label htmlFor="establecimiento" className="text-base font-semibold">
                  Establecimiento *
                </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">
                              ({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 mb-2 block">
                  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">
          <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);
                      superficieEditadaManualmente.current = true;
                    }
                  }}
                  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>

            {labor !== "Cosecha" && (
              <div className="mt-8">
                <div className="border-t my-6" />
                <div className="flex flex-col gap-4 sm:flex-row sm:items-center justify-between mb-4">
                  <div>
                    <h3 className="text-lg font-semibold tracking-tight">Tabla de Mezcla - Productos</h3>
                    <p className="text-sm text-muted-foreground">Formulación y dosificación de insumos</p>
                  </div>
                  <div className="flex gap-2">
                    <Button onClick={() => setIsInsumoDialogOpen(true)} variant="outline" size="sm" className="gap-2 bg-transparent text-[#16a34a] border-[#16a34a] hover:bg-[#16a34a]/10">
                      <Plus className="h-4 w-4" />
                      Nuevo Insumo
                    </Button>
                    <Button onClick={agregarProducto} variant="outline" size="sm" className="gap-2 bg-transparent">
                      <Plus className="h-4 w-4" />
                      Agregar Fila
                    </Button>
                  </div>
                </div>
                <div className="rounded-lg border border-border overflow-hidden">
                 <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%]">Cantidad 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">
                                {(() => {
                                  const catFiltro = filtroCategoria[producto.id] || "todos"
                                  const insumosFiltrados = catFiltro === "todos"
                                    ? insumos
                                    : insumos.filter(i => i.categoriaId === catFiltro)
                                  return (
                                    <div className="flex flex-col gap-1">
                                      <Select
                                        value={catFiltro}
                                        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 producto" />
                                        </SelectTrigger>
                                        <SelectContent>
                                          {insumosFiltrados.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>
                                          ))}
                                          {insumosFiltrados.length === 0 && (
                                            <div className="p-2 text-xs text-muted-foreground text-center">Sin productos en esta categoría</div>
                                          )}
                                        </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>
                                <Input value={producto.unidad} disabled className="bg-muted text-sm" />
                              </TableCell>
                              <TableCell>
                                <div className="flex items-center gap-2">
                                  <Input
                                    value={Number(producto.cantidadTotal).toFixed(3)}
                                    disabled
                                    className="bg-primary/5 font-mono font-semibold"
                                  />
                                  <span className="text-sm text-muted-foreground whitespace-nowrap">
                                    {producto.unidad.split("/")[0]}
                                  </span>
                                </div>
                              </TableCell>
                              <TableCell>
                                {productos.length > 1 && (
                                  <Button
                                    variant="ghost"
                                    size="icon"
                                    onClick={() => eliminarProducto(producto.id)}
                                    className="h-8 w-8"
                                  >
                                    <Trash2 className="h-4 w-4 text-destructive" />
                                  </Button>
                                )}
                              </TableCell>
                            </SortableProductRow>
                          ))}
                        </SortableContext>
                      </TableBody>
                 </Table>
                 </DndContext>
                </div>
                {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>

        <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..."
                rows={4}
                className={`resize-none 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 del Profesional *</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 print:hidden pb-8">

          <Button onClick={handleGuardar} className="gap-2 bg-emerald-600 hover:bg-emerald-700 text-white">
            <Save className="h-4 w-4" />
            Guardar Receta
          </Button>
        </div>
      </div>


      <Dialog open={isInsumoDialogOpen} onOpenChange={setIsInsumoDialogOpen}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Nuevo Insumo</DialogTitle>
            <DialogDescription>Completa los datos para registrar un nuevo insumo</DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2 relative pb-2">
              <Label>Nombre Comercial</Label>
              <Input placeholder="Ej: Glifosato 48%" value={newInsumo.nombre_comercial} onChange={e => setNewInsumo({ ...newInsumo, nombre_comercial: e.target.value })} maxLength={100} />
              {newInsumo.nombre_comercial.length === 100 && <span className="text-xs text-red-500 font-medium absolute bottom-0 right-0">Máximo 100 caracteres</span>}
            </div>
            <div className="space-y-2 relative pb-2">
              <Label>Principio Activo</Label>
              <Input placeholder="Ej: Glifosato" value={newInsumo.principio_activo} onChange={e => setNewInsumo({ ...newInsumo, principio_activo: e.target.value })} maxLength={100} />
              {newInsumo.principio_activo.length === 100 && <span className="text-xs text-red-500 font-medium absolute bottom-0 right-0">Máximo 100 caracteres</span>}
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>Categoría</Label>
                <Select value={newInsumo.categoria_id} onValueChange={val => setNewInsumo({ ...newInsumo, categoria_id: val })}>
                  <SelectTrigger>
                    <SelectValue placeholder="Seleccionar" />
                  </SelectTrigger>
                  <SelectContent>
                    {categoriasInsumo.map((cat: any) => (
                      <SelectItem key={cat.id} value={String(cat.id)}>{cat.nombre}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>Unidad de Medida</Label>
                <Select value={newInsumo.unidad_medida} onValueChange={val => setNewInsumo({ ...newInsumo, unidad_medida: val })}>
                  <SelectTrigger>
                    <SelectValue placeholder="Seleccionar" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Litros">Litros</SelectItem>
                    <SelectItem value="Kilogramos">Kilogramos</SelectItem>
                    <SelectItem value="Gramos">Gramos</SelectItem>
                    <SelectItem value="Mililitros">Mililitros</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </div>
          <div className="flex justify-end gap-2 mt-2">
            <Button variant="outline" onClick={() => setIsInsumoDialogOpen(false)}>Cancelar</Button>
            <Button onClick={handleSaveInsumo} className="bg-emerald-600 hover:bg-emerald-700 text-white">Crear Insumo</Button>
          </div>
        </DialogContent>
      </Dialog>
    </DashboardLayout >
  )
}