"use client"

import { useState, useEffect } from "react"
import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Button } from "@/components/ui/button"
import { apiFetch } from "@/lib/apiutils"
import { toast } from "sonner"
import { FileText, Printer, Calendar, MapPin, Search } from "lucide-react"

export default function HistorialLotesPage() {
  const [campanas, setCampanas] = useState<any[]>([])
  const [productores, setProductores] = useState<any[]>([])
  const [establecimientos, setEstablecimientos] = useState<any[]>([])
  const [lotes, setLotes] = useState<any[]>([])

  const [campanaSeleccionada, setCampanaSeleccionada] = useState("todas")
  const [productorSeleccionado, setProductorSeleccionado] = useState("")
  const [loteSeleccionado, setLoteSeleccionado] = useState("todos")

  const [lotesFiltrados, setLotesFiltrados] = useState<any[]>([])

  const [recetas, setRecetas] = useState<any[]>([])
  const [loading, setLoading] = useState(false)
  const [hasSearched, setHasSearched] = useState(false)
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  useEffect(() => {
    // Fetch initial data
    apiFetch("/campanas?all=1").then(res => res.json()).then(data => setCampanas(data.data || []))
    apiFetch("/productores?all=1").then(res => res.json()).then(data => {
      // Deduplicate producers by ID just in case
      const uniqueProducers = Array.from(new Map((data.data || []).map((p: any) => [p.id, p])).values()) as any[];
      setProductores(uniqueProducers)
    })
    apiFetch("/establecimientos?all=1").then(res => res.json()).then(data => setEstablecimientos(data.data || []))
    apiFetch("/lotes").then(res => res.json()).then(data => setLotes(data)) // Lotes API is not paginated by default
  }, [])

  useEffect(() => {
    if (productorSeleccionado) {
      // Find establishments for this producer
      const estabs = establecimientos.filter(e => String(e.productor_id) === productorSeleccionado)
      const estabIds = estabs.map(e => String(e.id))
      // Find lots for those establishments
      const lotesProd = lotes.filter(l => estabIds.includes(String(l.establecimiento_id)))
      setLotesFiltrados(lotesProd)
      setLoteSeleccionado("todos")
    } else {
      setLotesFiltrados([])
      setLoteSeleccionado("todos")
    }
  }, [productorSeleccionado, establecimientos, lotes])

  const handleBuscar = async () => {
    if (!productorSeleccionado) {
      toast.error("Seleccione un Productor")
      return
    }

    setLoading(true)
    setHasSearched(true)
    try {
      let url = `/recetas?limit=all&productor_id=${productorSeleccionado}`

      if (campanaSeleccionada && campanaSeleccionada !== "todas") {
        url += `&campana_id=${campanaSeleccionada}`
      }
      if (loteSeleccionado && loteSeleccionado !== "todos") {
        url += `&lote_id=${loteSeleccionado}`
      } else {
        // If no specific lot selected, but we want only the lots of this producer:
        // By default, the productor_id filter already scopes the recipes to this producer.
      }

      const res = await apiFetch(url)
      const data = await res.json()
      setRecetas(data.data || [])
    } catch (e) {
      toast.error("Error al obtener el historial")
    } finally {
      setLoading(false)
    }
  }

  const handlePrint = () => {
    window.print()
  }

  const productorNombre = productores.find(p => String(p.id) === productorSeleccionado)?.nombre || ""
  const campanaNombre = campanaSeleccionada === "todas" ? "Todas las Campañas" : (campanas.find(c => String(c.id) === campanaSeleccionada)?.nombre || "")
  const loteNombre = loteSeleccionado === "todos" ? "Todos los Lotes" : (lotes.find(l => String(l.id) === loteSeleccionado)?.nombre || "")

  if (!mounted) return null

  return (
    <DashboardLayout>
      <div className="flex flex-col gap-6">
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between print:hidden">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">Historial de Lotes</h1>
            <p className="text-muted-foreground mt-1">
              Revise las labores aplicadas por productor, campaña y lote
            </p>
          </div>
          <Button onClick={handlePrint} className="gap-2" disabled={!hasSearched || recetas.length === 0}>
            <Printer className="h-4 w-4" />
            Imprimir Informe
          </Button>
        </div>

        <Card className="print:hidden">
          <CardHeader>
            <CardTitle>Filtros del Informe</CardTitle>
            <CardDescription>Seleccione los parámetros para generar el historial de labores</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid gap-4 md:grid-cols-3 mb-6">
              <div className="space-y-2">
                <Label>Campaña</Label>
                <Select value={campanaSeleccionada} onValueChange={setCampanaSeleccionada}>
                  <SelectTrigger>
                    <SelectValue placeholder="Seleccionar campaña" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="todas">Todas las campañas</SelectItem>
                    {campanas.map(c => (
                      <SelectItem key={c.id} value={String(c.id)}>
                        {c.nombre}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <Label>Productor *</Label>
                <Select value={productorSeleccionado} onValueChange={setProductorSeleccionado}>
                  <SelectTrigger>
                    <SelectValue placeholder="Seleccionar productor" />
                  </SelectTrigger>
                  <SelectContent>
                    {productores.map(p => (
                      <SelectItem key={p.id} value={String(p.id)}>
                        {p.nombre} {p.status === 'inactivo' ? '(Inactivo)' : ''}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <Label>Lote</Label>
                <Select
                  value={loteSeleccionado}
                  onValueChange={setLoteSeleccionado}
                  disabled={!productorSeleccionado || lotesFiltrados.length === 0}
                >
                  <SelectTrigger>
                    <SelectValue placeholder={productorSeleccionado ? "Todos los lotes" : "Seleccione productor primero"} />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="todos">Todos los lotes</SelectItem>
                    {lotesFiltrados.map(l => (
                      <SelectItem key={l.id} value={String(l.id)}>
                        {l.nombre} - {l.establecimiento?.nombre} ({l.superficie} ha)
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            <Button onClick={handleBuscar} disabled={loading || !productorSeleccionado} className="w-full sm:w-auto gap-2">
              <Search className="h-4 w-4" />
              {loading ? "Buscando..." : "Buscar Historial"}
            </Button>
          </CardContent>
        </Card>

        {/* PRINT VIEW HEADER */}
        <div className="hidden print:block mb-8 border-b-2 border-emerald-600 pb-4">
          <div className="flex justify-between items-start mb-6">
            <img src="/logo_transparent.png" alt="AgroRecetas" className="h-16 w-auto object-contain" />
            <div className="text-right">
              <h2 className="text-2xl font-bold text-emerald-800 uppercase tracking-wide">Historial de Lotes</h2>
              <p className="text-sm text-gray-500 mt-1">Fecha de emisión: {new Date().toLocaleDateString('es-AR')}</p>
            </div>
          </div>
          <div className="flex justify-between items-end">
            <div>
              <p className="text-sm text-foreground">
                <span className="font-bold">Productor:</span> {productorNombre}
              </p>
              <p className="text-sm text-foreground mt-1">
                <span className="font-bold">Campaña:</span> {campanaNombre}
              </p>
              <p className="text-sm text-foreground mt-1">
                <span className="font-bold">Lote/s:</span> {loteNombre}
              </p>
            </div>
          </div>
        </div>

        {/* RESULTS */}
        {hasSearched && (
          <div className="space-y-6">
            {recetas.length === 0 ? (
              <Card>
                <CardContent className="p-12 text-center text-muted-foreground">
                  <FileText className="h-12 w-12 mx-auto mb-4 opacity-20" />
                  <p>No se encontraron recetas para los filtros seleccionados.</p>
                </CardContent>
              </Card>
            ) : (
              recetas.map(receta => {
                // If a specific lot is selected, we might want to ONLY show the products/details applied to THAT lot.
                // However, since recipes usually apply the same labor to all its lots, we just show the whole recipe.
                // Or we can filter the items array to only the selected lot.
                const itemsToShow = loteSeleccionado !== "todos"
                  ? receta.items.filter((it: any) => String(it.lote_id) === loteSeleccionado)
                  : receta.items;

                if (itemsToShow.length === 0) return null;

                const labor = itemsToShow[0]?.labor || "Labor";
                const lotesAffected = itemsToShow.map((it: any) => it.lote?.nombre).join(", ");
                const cultivosAffected = Array.from(new Set(itemsToShow.map((it: any) => it.cultivo?.nombre).filter(Boolean))).join(", ");
                const productos = itemsToShow[0]?.productos || [];

                return (
                  <Card key={receta.id} className="break-inside-avoid print:shadow-none print:border-gray-300 print:mb-6">
                    <CardHeader className="bg-emerald-50/50 print:bg-transparent print:border-b print:border-gray-300 pb-3">
                      <div className="flex justify-between items-start">
                        <div>
                          <CardTitle className="text-lg font-bold text-emerald-800">
                            Receta N° {receta.numero} - {labor}
                          </CardTitle>
                          <CardDescription className="mt-1 text-foreground/80 font-medium">
                            Fecha: {receta.fecha} | Establecimiento: {receta.establecimiento?.nombre}
                          </CardDescription>
                        </div>
                      </div>
                    </CardHeader>
                    <CardContent className="pt-4">
                      <div className="mb-4 text-sm flex flex-col sm:flex-row gap-2 sm:gap-6">
                        <div>
                          <span className="font-bold text-foreground uppercase tracking-wide text-xs mr-2">Lotes afectados: </span>
                          <span className="font-semibold text-foreground">{lotesAffected}</span>
                        </div>
                        {cultivosAffected && (
                          <div>
                            <span className="font-bold text-foreground uppercase tracking-wide text-xs mr-2">Cultivo: </span>
                            <span className="font-semibold text-foreground">{cultivosAffected}</span>
                          </div>
                        )}
                      </div>

                      {productos.length > 0 ? (
                        <div className="rounded-md border border-border overflow-hidden print:border-gray-300 print:border">
                          <table className="w-full text-sm">
                            <thead className="bg-muted/50 print:bg-gray-100 border-b border-border print:border-gray-300">
                              <tr>
                                <th className="px-4 py-2 text-left text-xs font-bold text-foreground uppercase tracking-wide">Producto</th>
                                <th className="px-4 py-2 text-center text-xs font-bold text-foreground uppercase tracking-wide">Dosis</th>
                                <th className="px-4 py-2 text-right text-xs font-bold text-foreground uppercase tracking-wide">Cantidad Total</th>
                              </tr>
                            </thead>
                            <tbody className="divide-y divide-border print:divide-gray-300">
                              {productos.map((prod: any) => (
                                <tr key={prod.id}>
                                  <td className="px-4 py-2 font-medium text-foreground">{prod.nombre_producto}</td>
                                  <td className="px-4 py-2 text-center font-medium text-foreground">{Number(prod.dosis)} {prod.unidad}</td>
                                  <td className="px-4 py-2 text-right font-bold text-foreground">
                                    {Number(prod.cantidad_total).toFixed(3)} {prod.unidad.split("/")[0]}
                                  </td>
                                </tr>
                              ))}
                            </tbody>
                          </table>
                        </div>
                      ) : (
                        <p className="text-sm text-foreground font-medium italic">Sin productos en esta labor.</p>
                      )}

                      {receta.observaciones && (
                        <div className="mt-4 text-sm text-foreground">
                          <span className="font-bold uppercase tracking-wide text-xs mr-2">Observaciones: </span>
                          <span className="font-medium">{receta.observaciones}</span>
                        </div>
                      )}
                    </CardContent>
                  </Card>
                )
              })
            )}
          </div>
        )}
      </div>

      <style jsx global>{`
        @media print {
          html, body {
            height: auto !important;
            min-height: 0 !important;
          }
          body {
            background: white !important;
            color: black !important;
            margin: 1.5cm !important;
          }
          * {
            background: transparent !important;
            color: black !important;
            box-shadow: none !important;
            text-shadow: none !important;
          }
          @page {
            margin: 0mm;
          }
          .break-inside-avoid {
            break-inside: avoid;
            page-break-inside: avoid;
            display: block;
          }
          .border-b, .border-t, .border, .border-y {
            border-color: #e5e5e5 !important;
          }
        }
      `}</style>
    </DashboardLayout>
  )
}