"use client"

import { useState, useEffect, useMemo } from "react"
import { useApi } from "@/lib/use-api"
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, ArrowLeft, Calendar, MapPin, User } from "lucide-react"
import Link from "next/link"
import { useRouter, useSearchParams } from "next/navigation"
import { useAuth } from "@/lib/auth-context"
import { toast } from "sonner"

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

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

export default function NuevaRecetaCampanaPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const campaniaId = searchParams.get("id") as string
  const { user } = useAuth()

  const campana = {
    id: campaniaId,
    nombre: "Soja 2025",
    establecimiento: "Campo La Esperanza",
    productor: "Juan Carlos Pérez",
    cultivo: "Soja",
    hectareas: 450,
  }

  const insumos: Insumo[] = [
    { id: "1", nombreComercial: "Glifosato 48%", principioActivo: "Glifosato", unidadMedida: "L" },
    { id: "2", nombreComercial: "Urea Granulada", principioActivo: "Nitrógeno 46%", unidadMedida: "kg" },
    { id: "3", nombreComercial: "Cipermetrina 25%", principioActivo: "Cipermetrina", unidadMedida: "L" },
    { id: "4", nombreComercial: "Fosfato Diamónico", principioActivo: "Fósforo 18%", unidadMedida: "kg" },
    { id: "5", nombreComercial: "2,4-D Amina", principioActivo: "2,4-D", unidadMedida: "L" },
    { id: "6", nombreComercial: "Atrazina 90%", principioActivo: "Atrazina", unidadMedida: "kg" },
  ]

  const { data: laboresData } = useApi("/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 [loteNumero, setLoteNumero] = useState("")
  const [superficie, setSuperficie] = useState<number>(campana.hectareas)
  const [superficieAplicable, setSuperficieAplicable] = useState<number>(campana.hectareas)
  const [labor, setLabor] = useState("")
  const [momentoDia, setMomentoDia] = useState("")

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

  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("")

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

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

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

  const agregarProducto = () => {
    const nuevoProducto: ProductoReceta = {
      id: String(Date.now()),
      insumoId: "",
      nombreProducto: "",
      dosis: 0,
      unidad: "L/ha",
      cantidadTotal: 0,
    }
    setProductos([...productos, nuevoProducto])
  }

  const eliminarProducto = (id: string) => {
    setProductos(productos.filter((p) => p.id !== id))
  }

  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 = () => {
    toast.success(`Receta guardada y vinculada a la campaña ${campana.nombre}!`)
    router.push(`/dashboard/campanas/detalle?id=${campana.id}`)
  }

  return (
    <DashboardLayout>
      <div className="max-w-6xl mx-auto space-y-6">
        <div className="flex items-center gap-4">
          <Link href={`/dashboard/campanas/detalle?id=${campana.id}`}>
            <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 Labor / Receta</h1>
            <p className="text-muted-foreground mt-1">Campaña: {campana.nombre}</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" />
                </div>
                <div>
                  <CardDescription className="text-sm font-semibold">Orden de Trabajo - {campana.nombre}</CardDescription>
                </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-3">
              <div className="space-y-2">
                <Label className="text-sm text-muted-foreground">Productor</Label>
                <div className="flex items-center gap-2 p-3 bg-muted/50 rounded-md">
                  <User className="h-4 w-4 text-muted-foreground" />
                  <span className="font-medium">{campana.productor}</span>
                </div>
              </div>
              <div className="space-y-2">
                <Label className="text-sm text-muted-foreground">Establecimiento</Label>
                <div className="flex items-center gap-2 p-3 bg-muted/50 rounded-md">
                  <MapPin className="h-4 w-4 text-muted-foreground" />
                  <span className="font-medium">{campana.establecimiento}</span>
                </div>
              </div>
              <div className="space-y-2">
                <Label className="text-sm text-muted-foreground">Cultivo</Label>
                <div className="flex items-center gap-2 p-3 bg-muted/50 rounded-md">
                  <Leaf className="h-4 w-4 text-muted-foreground" />
                  <span className="font-medium">{campana.cultivo}</span>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Detalles de la Labor</CardTitle>
            <CardDescription>Información técnica del área de aplicación</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid gap-4 md:grid-cols-3">
              <div className="space-y-2">
                <Label htmlFor="lote">Lote Nº *</Label>
                <Input
                  id="lote"
                  value={loteNumero}
                  onChange={(e) => {
                    if (e.target.value.length <= 50) {
                      setLoteNumero(e.target.value)
                    }
                  }}
                  maxLength={50}
                  placeholder="Ej: L-3A"
                  className={loteNumero.length >= 50 ? 'border-red-500 focus-visible:ring-red-500' : ''}
                />
                {loteNumero.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="superficie">Superficie Total (ha)</Label>
                <Input
                  id="superficie"
                  type="text" inputMode="decimal"
                  value={superficie}
                  disabled
                  className="font-mono bg-muted"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="superficieAplicable">Superficie Aplicable (ha) *</Label>
                <Input
                  id="superficieAplicable"
                  type="text" inputMode="decimal"
                  min="0"
                  step="any"
                  value={superficieAplicable}
                  onChange={(e) => setSuperficieAplicable(parseFloat(e.target.value) || 0)}
                  onKeyDown={(e) => {
                    if (e.ctrlKey || e.metaKey || e.key.length > 1) return;
                    if (!/[0-9.,]/.test(e.key)) {
                      e.preventDefault();
                    }
                  }}
                  className="font-mono bg-primary/5 border-primary/20"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="labor">Tipo de Labor *</Label>
                <Select value={labor} onValueChange={setLabor}>
                  <SelectTrigger id="labor">
                    <SelectValue placeholder="Seleccionar" />
                  </SelectTrigger>
                  <SelectContent>
                    {labores.map((lab) => (
                      <SelectItem key={lab} value={lab}>
                        {lab}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </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>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <div>
                <CardTitle>Tabla de Mezcla - Productos</CardTitle>
                <CardDescription>Formulación y dosificación de insumos</CardDescription>
              </div>
              <Button onClick={agregarProducto} variant="outline" size="sm" className="gap-2 bg-transparent">
                <Plus className="h-4 w-4" />
                Agregar Producto
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <div className="rounded-lg border border-border overflow-hidden">
              <Table>
                <TableHeader>
                  <TableRow className="bg-muted/50">
                    <TableHead className="w-[40%]">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>
                  {productos.map((producto) => (
                    <TableRow key={producto.id}>
                      <TableCell>
                        <Select
                          value={producto.insumoId}
                          onValueChange={(value) => actualizarProducto(producto.id, "insumoId", value)}
                        >
                          <SelectTrigger className="w-full">
                            <SelectValue placeholder="Seleccionar producto" />
                          </SelectTrigger>
                          <SelectContent>
                            {insumos.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>
                      </TableCell>
                      <TableCell>
                        <Input
                          type="text" inputMode="decimal"
                          min="0"
                          step="any"
                          value={producto.dosis}
                          onChange={(e) => {
                            const val = e.target.value;
                            if (val === "") {
                              actualizarProducto(producto.id, "dosis", "");
                            } else {
                              actualizarProducto(producto.id, "dosis", val);
                            }
                          }}
                          onKeyDown={(e) => {
                            if (e.ctrlKey || e.metaKey || e.key.length > 1) return;
                            if (!/[0-9.,]/.test(e.key)) {
                              e.preventDefault();
                            }
                          }}
                          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>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </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>
            )}
          </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="aplicarViento">Aplicar con Viento</Label>
                <Select
                  value={aplicarConViento}
                  onValueChange={(value) => {
                    setAplicarConViento(value)
                    if (value === "NO") {
                      setVientoDireccion([])
                    }
                  }}
                >
                  <SelectTrigger id="aplicarViento">
                    <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="Notas adicionales sobre la aplicación..."
                className={`min-h-[100px] ${observaciones.length >= 500 ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
                rows={4}
              />
              {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</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid gap-4 md:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="ingeniero">Nombre Completo</Label>
                <Input
                  id="ingeniero"
                  value={ingenieroResponsable}
                  onChange={(e) => {
                    if (e.target.value.length <= 100) {
                      setIngenieroResponsable(e.target.value)
                    }
                  }}
                  maxLength={100}
                  placeholder="Ej: 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>
          </CardContent>
        </Card>

        <div className="flex justify-end gap-2 pb-6">
          <Link href={`/dashboard/campanas/detalle?id=${campana.id}`}>
            <Button variant="outline">Cancelar</Button>
          </Link>
          <Button onClick={handleGuardar} className="gap-2">
            <Save className="h-4 w-4" />
            Guardar Receta
          </Button>
        </div>
      </div>
    </DashboardLayout>
  )
}