"use client"

import { useState, useEffect } from "react"
import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  BarChart3,
  User,
  Calendar,
  TrendingUp,
  Sprout,
  Package,
  Filter,
  ArrowRight
} from "lucide-react"
import { apiFetch } from "@/lib/apiutils"
import { PaginationControl } from "@/components/ui/pagination-control"

interface Productor {
  id: string
  nombre: string
  cuit?: string
  razon_social?: string
  email?: string
  tipo_produccion?: string
}

interface Establecimiento {
  id: string
  nombre: string
  ubicacion: string
  productor?: Productor
}

interface Campana {
  id: string
  nombre: string
  cultivo: string
  hectareas: number // Comes from Establishment size? Or Campaign specific?
  rindeQQha?: number
  estado: string // "activa" | "finalizada"
  fecha_inicio: string
  fecha_fin: string
}

interface Producto {
  nombre_producto?: string
  nombre?: string
  dosis: number
  unidad_medida?: string
  unidad?: string
}

interface RecetaItem {
  id: string
  labor: string
  rinde?: number
  lote?: { nombre: string }
  cultivo?: { nombre: string }
  productos: Producto[]
}

interface Receta {
  id: string
  fecha: string
  observaciones?: string
  superficie: number
  items: RecetaItem[]
}

// Extended Campana for detailed view
interface CampanaDetalle extends Campana {
  establecimiento: Establecimiento
  recetas: Receta[]
}

export default function AnalisisProduccionPage() {
  // Filters State
  const [establecimientos, setEstablecimientos] = useState<Establecimiento[]>([])
  const [selectedEstablecimientoId, setSelectedEstablecimientoId] = useState<string>("")

  const [campanas, setCampanas] = useState<Campana[]>([])
  const [selectedCampanaId, setSelectedCampanaId] = useState<string>("")

  const [cultivosDisponibles, setCultivosDisponibles] = useState<string[]>([])
  const [selectedCultivo, setSelectedCultivo] = useState<string>("todos") // "todos" or specific crop name

  // Data State
  const [analisisData, setAnalisisData] = useState<CampanaDetalle | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [currentPage, setCurrentPage] = useState(1)
  const ITEMS_PER_PAGE = 3

  // Fetch Establecimientos on mount
  useEffect(() => {
    const fetchEstablecimientos = async () => {
      try {
        const res = await apiFetch("/establecimientos")
        if (res.ok) {
          const data = await res.json()
          setEstablecimientos(data.data || [])
        }
      } catch (e) {
        console.error(e)
      }
    }
    fetchEstablecimientos()
  }, [])

  // Fetch Campanas when Establecimiento selected
  useEffect(() => {
    // Reset selection when establishment changes
    setSelectedCampanaId("")
    setCampanas([])
    setAnalisisData(null)

    if (selectedEstablecimientoId) {
      const fetchCampanas = async () => {
        try {
          // Pass limit=-1 or high number if backend supports it to get all?
          // CampanaController default is 10. We might need all relevant ones.
          // Let's assume pagination is default 10 but we might want more. 
          // For now just standard call. 
          // Backend CampanaController index handles 'establecimiento_id'
          const res = await apiFetch(`/campanas?establecimiento_id=${selectedEstablecimientoId}&limit=50`)
          if (res.ok) {
            const data = await res.json()
            setCampanas(data.data || [])
          }
        } catch (e) {
          console.error(e)
        }
      }
      fetchCampanas()
    }
  }, [selectedEstablecimientoId])

  // Fetch Analysis Data (Campana Detail) when BOTH selected
  useEffect(() => {
    if (selectedCampanaId && selectedEstablecimientoId) {
      const fetchDetail = async () => {
        setIsLoading(true)
        try {
          const res = await apiFetch(`/campanas/${selectedCampanaId}?establecimiento_id=${selectedEstablecimientoId}`)
          if (res.ok) {
            const data = await res.json()
            setAnalisisData(data)

            // Extract unique crops from recipes' items
            const crops = Array.from(new Set(data.recetas.flatMap((r: any) => r.items?.map((i: any) => i.cultivo?.nombre || "Desconocido") || [])))
            setCultivosDisponibles(crops as string[])
            setSelectedCultivo("todos")
            setCurrentPage(1) // Reset page on new data
          }
        } catch (e) {
          console.error(e)
        } finally {
          setIsLoading(false)
        }
      }
      fetchDetail()
    } else {
      setAnalisisData(null)
      setCultivosDisponibles([])
    }
  }, [selectedCampanaId, selectedEstablecimientoId])


  const getStatusColor = (status: string) => {
    const colors = {
      activa: "bg-green-100 text-green-800 border-green-300",
      finalizada: "bg-gray-100 text-gray-800 border-gray-300",
    }
    return colors[status as keyof typeof colors] || colors.activa
  }

  const getFilteredItems = () => {
    if (!analisisData) return []
    let items = analisisData.recetas.flatMap((r: any) => (r.items || []).map((item: any) => ({
      item: item,
      receta: r
    })))

    if (selectedCultivo !== "todos") {
      items = items.filter(x => (x.item.cultivo?.nombre || "Desconocido") === selectedCultivo)
    }

    // Sort by descending date
    return items.sort((a, b) => new Date(b.receta.fecha).getTime() - new Date(a.receta.fecha).getTime())
  }

  const calcularInsumosTotal = (filteredItems: any[]) => {
    const insumosMap = new Map<string, { cantidad: number; unidad: string }>()

    filteredItems.forEach(({ item, receta }) => {
      (item.productos || []).forEach((prod: any) => {
        const nombre = prod.nombre_producto || prod.nombre || "Desconocido"
        const unidad = prod.unidad || prod.unidad_medida || "-"

        const key = `${nombre}-${unidad}`
        if (!insumosMap.has(key)) {
          insumosMap.set(key, { cantidad: 0, unidad: unidad })
        }

        const current = insumosMap.get(key)!
        const superficie = receta.superficie || 0
        current.cantidad += prod.dosis * superficie
      })
    })

    return Array.from(insumosMap.entries()).map(([key, value]) => ({
      nombre: key.split("-")[0],
      unidad: value.unidad,
      total: value.cantidad
    }))
  }

  const filteredItems = getFilteredItems()
  const totalItems = filteredItems.length
  const lastPage = Math.ceil(totalItems / ITEMS_PER_PAGE) || 1
  const paginatedItems = filteredItems.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE)

  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight text-foreground text-balance flex items-center gap-2">
            <BarChart3 className="h-8 w-8 text-primary" />
            Análisis de Producción
          </h1>
          <p className="text-muted-foreground mt-2">
            Analiza el rendimiento y costos por Campaña y Establecimiento
          </p>
        </div>

        <div className="grid gap-6 lg:grid-cols-12">
          {/* Panel izquierdo: Filtros */}
          <div className="lg:col-span-3 space-y-4">
            <Card>
              <CardHeader className="pb-3">
                <CardTitle className="text-lg flex items-center gap-2">
                  <Filter className="h-5 w-5" />
                  Filtros
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <label className="text-sm font-medium">Establecimiento</label>
                  <Select value={selectedEstablecimientoId} onValueChange={setSelectedEstablecimientoId}>
                    <SelectTrigger>
                      <SelectValue placeholder="Seleccionar..." />
                    </SelectTrigger>
                    <SelectContent>
                      {establecimientos.map(est => (
                        <SelectItem key={est.id} value={String(est.id)}>
                          {est.nombre}{est.productor?.nombre ? ` — ${est.productor.nombre}` : ""}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-2">
                  <label className="text-sm font-medium">Campaña</label>
                  <Select
                    value={selectedCampanaId}
                    onValueChange={setSelectedCampanaId}
                    disabled={campanas.length === 0}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder={campanas.length === 0 ? "Sin campañas" : "Seleccionar..."} />
                    </SelectTrigger>
                    <SelectContent>
                      {campanas.map(camp => (
                        <SelectItem key={camp.id} value={String(camp.id)}>{camp.nombre}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                {analisisData && cultivosDisponibles.length > 0 && (
                  <div className="space-y-2">
                    <label className="text-sm font-medium">Cultivo</label>
                    <Select
                      value={selectedCultivo}
                      onValueChange={setSelectedCultivo}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Todos" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="todos">Todos los cultivos</SelectItem>
                        {cultivosDisponibles.map(c => (
                          <SelectItem key={c} value={c}>{c}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Show Producer Card only if Analysis fetches */}
            {analisisData && analisisData.establecimiento.productor && (
              <Card className="bg-primary/5 border-primary/20">
                <CardHeader className="pb-2">
                  <CardTitle className="text-base font-medium flex items-center gap-2 text-primary">
                    <User className="h-4 w-4" />
                    Productor
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-2 text-sm">
                  <div>
                    <span className="font-semibold block">{analisisData.establecimiento.productor.nombre}</span>
                    <span className="text-muted-foreground">{analisisData.establecimiento.productor.razon_social}</span>
                  </div>
                  {analisisData.establecimiento.productor.cuit && (
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">CUIT:</span>
                      <span>{analisisData.establecimiento.productor.cuit}</span>
                    </div>
                  )}
                  {analisisData.establecimiento.productor.email && (
                    <div className="flex justify-between flex-wrap gap-1">
                      <span className="text-muted-foreground">Email:</span>
                      <span className="break-all">{analisisData.establecimiento.productor.email}</span>
                    </div>
                  )}
                  {analisisData.establecimiento.productor.tipo_produccion && (
                    <div className="flex justify-between">
                      <span className="text-muted-foreground">Tipo:</span>
                      <Badge variant="outline" className="text-xs">{analisisData.establecimiento.productor.tipo_produccion}</Badge>
                    </div>
                  )}
                </CardContent>
              </Card>
            )}
          </div>

          {/* Panel derecho: Detalle */}
          <div className="lg:col-span-9">
            {isLoading ? (
              <div className="flex items-center justify-center h-64">
                <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
              </div>
            ) : analisisData ? (
              <div className="space-y-6">
                {/* Información de la campaña */}
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Calendar className="h-5 w-5 text-primary" />
                      {analisisData.nombre}
                    </CardTitle>
                    <CardDescription>Detalle de campaña en {analisisData.establecimiento.nombre}</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                      <div className="space-y-1">
                        <p className="text-sm text-muted-foreground">Cultivo</p>
                        <p className="font-medium text-sm">
                          {selectedCultivo === "todos"
                            ? cultivosDisponibles.join(", ")
                            : selectedCultivo}
                        </p>
                      </div>
                      <div className="space-y-1">
                        <p className="text-sm text-muted-foreground">Período</p>
                        <p className="font-medium">
                          {new Date(analisisData.fecha_inicio).getFullYear()}/{new Date(analisisData.fecha_fin).getFullYear()}
                        </p>
                      </div>
                      <div className="space-y-1">
                        <p className="text-sm text-muted-foreground">Superficie</p>
                        <p className="font-medium">{analisisData.hectareas} ha</p>
                      </div>
                      <div className="space-y-1">
                        <p className="text-sm text-muted-foreground">Estado</p>
                        <Badge className={getStatusColor(analisisData.estado)} variant="outline">
                          {analisisData.estado === "activa" ? "Activa" : "Finalizada"}
                        </Badge>
                      </div>
                    </div>
                  </CardContent>
                </Card>

                {/* Labores / Recetas */}
                <Card>
                  <CardHeader>
                    <CardTitle>Historial de Aplicaciones</CardTitle>
                    <CardDescription>Recetas agronómicas aplicadas en esta campaña</CardDescription>
                  </CardHeader>
                  <CardContent>
                    {filteredItems.length === 0 ? (
                      <div className="text-center py-8 text-muted-foreground">
                        <Sprout className="h-12 w-12 mx-auto mb-2 opacity-30" />
                        <p>No hay labores registradas para esta selección</p>
                      </div>
                    ) : (
                      <div className="space-y-6">
                        {paginatedItems.map((data: any, index: number) => {
                          const { item, receta } = data
                          return (
                            <div key={`${receta.id}-${index}`} className="relative pl-6 border-l-2 border-muted last:border-0 pb-6 last:pb-0">
                              <div className="absolute -left-[9px] top-0 h-4 w-4 rounded-full bg-primary border-2 border-background" />
                              <div className="space-y-2">
                                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
                                  <div className="flex items-center gap-2 flex-wrap">
                                    <Badge variant="secondary">{item.labor || "Aplicación"}</Badge>
                                    <span className="font-medium text-sm text-muted-foreground">
                                      en {item.lote?.nombre || "General"}
                                    </span>
                                    {item.cultivo?.nombre && (
                                      <Badge variant="outline" className="text-[10px] text-muted-foreground">{item.cultivo.nombre}</Badge>
                                    )}
                                    {item.labor === 'Cosecha' && item.rinde !== undefined && item.rinde !== null && (
                                      <Badge variant="outline" className="text-[10px] font-mono bg-amber-50 text-amber-900 border-amber-200">Rinde: {item.rinde} qq/ha</Badge>
                                    )}
                                  </div>
                                  <span className="text-xs text-muted-foreground">
                                    {new Date(receta.fecha).toLocaleDateString("es-AR")}
                                  </span>
                                </div>
                                <p className="text-sm italic text-muted-foreground">{receta.observaciones || "Sin observaciones"}</p>

                                {item.productos && item.productos.length > 0 && (
                                  <div className="bg-muted/30 rounded-md p-3">
                                    <p className="text-xs font-semibold mb-2">Productos:</p>
                                    <div className="space-y-2">
                                      {item.productos.map((prod: any, idx: number) => (
                                        <div key={idx} className="flex items-center justify-between text-xs border-b border-border/50 pb-1 last:border-0 last:pb-0">
                                          <div className="flex items-center gap-2">
                                            <div className="h-1.5 w-1.5 rounded-full bg-primary/60" />
                                            <span>{prod.nombre_producto || prod.nombre}</span>
                                          </div>
                                          <span className="font-mono text-muted-foreground bg-background px-2 py-0.5 rounded border border-border/50">
                                            {prod.dosis} {prod.unidad || prod.unidad_medida}
                                          </span>
                                        </div>
                                      ))}
                                    </div>
                                  </div>
                                )}
                              </div>
                            </div>
                          )
                        })}
                      </div>
                    )}

                    {filteredItems.length > ITEMS_PER_PAGE && (
                      <div className="mt-4 border-t pt-2">
                        <PaginationControl
                          currentPage={currentPage}
                          lastPage={lastPage}
                          total={totalItems}
                          onPageChange={setCurrentPage}
                        />
                      </div>
                    )}
                  </CardContent>
                </Card>

                {/* Insumos Utilizados - Always shown */}
                <Card>
                  <CardHeader>
                    <CardTitle>Insumos Utilizados</CardTitle>
                    <CardDescription>Listado de productos aplicados</CardDescription>
                  </CardHeader>
                  <CardContent>
                    {filteredItems.length === 0 ? (
                      <p className="text-sm text-muted-foreground text-center">Sin datos de insumos</p>
                    ) : (
                      <div className="rounded-lg border border-border">
                        <Table>
                          <TableHeader>
                            <TableRow className="bg-muted/50">
                              <TableHead>Producto</TableHead>
                              <TableHead className="text-right">Total Usado</TableHead>
                              <TableHead className="text-right">Unidad</TableHead>
                            </TableRow>
                          </TableHeader>
                          <TableBody>
                            {calcularInsumosTotal(filteredItems).map((insumo, idx) => (
                              <TableRow key={idx}>
                                <TableCell className="font-medium">{insumo.nombre}</TableCell>
                                <TableCell className="text-right font-mono">{insumo.total.toLocaleString("es-AR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</TableCell>
                                <TableCell className="text-right text-muted-foreground">{insumo.unidad}</TableCell>
                              </TableRow>
                            ))}
                          </TableBody>
                        </Table>
                      </div>
                    )}
                  </CardContent>
                </Card>


              </div>
            ) : (
              <Card className="h-full flex items-center justify-center min-h-[400px]">
                <CardContent className="text-center py-12">
                  <div className="bg-muted/50 p-4 rounded-full w-fit mx-auto mb-4">
                    <ArrowRight className="h-8 w-8 text-primary" />
                  </div>
                  <h3 className="text-lg font-semibold text-foreground mb-2">Comienza el Análisis</h3>
                  <p className="text-sm text-muted-foreground max-w-sm mx-auto">
                    Selecciona un <strong>Establecimiento</strong> y una <strong>Campaña</strong> en los filtros de la izquierda para ver el reporte detallado.
                  </p>
                </CardContent>
              </Card>
            )}
          </div>
        </div>
      </div>
    </DashboardLayout>
  )
}