"use client"

import { useState, useEffect } from "react"
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 { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Calendar,
  MapPin,
  User,
  TrendingUp,
  Plus,
  Eye,
  Sprout,
  Droplets,
  Bug,
  ArrowLeft,
  Edit,
  Save,
  Search,
} from "lucide-react"
import Link from "next/link"
import { useRouter, useSearchParams } from "next/navigation"
import { PaginationControl } from "@/components/ui/pagination-control"

interface Labor {
  id: string
  tipo: "Siembra" | "Monitoreo" | "Pulverización" | "Fertilización"
  fecha: string
  recetaId?: string
  observaciones: string
  responsable: string
  loteNombre?: string
  cultivo?: string
  productor?: string
  establecimiento?: string
}

import { apiFetch } from "@/lib/apiutils"
import { toast } from "sonner"

interface Campana {
  id: string
  nombre: string
  establecimiento: {
    id: string
    nombre: string
    hectareas: number
    productor: {
      id: string
      nombre: string
    } | null
  }
  cultivo: string
  anio: number
  fecha_inicio: string
  fecha_fin: string
  estado: "activa" | "finalizada"
  hectareas: number
  rinde_qq_ha?: number
  produccion_total?: number
  rinde_estimado?: number
  produccion_estimada?: number
  rinde_por_cultivo?: {
    cultivo: string
    superficie: number
    produccion: number
    rinde: number
  }[]
  labores_count: number
}

export default function DetalleCampanaPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const id = searchParams.get("id") as string
  const establecimientoId = searchParams.get("establecimiento_id")
  const cultivoId = searchParams.get("cultivo_id")
  const backUrl = searchParams.get("back_url")

  const [campana, setCampana] = useState<Campana | null>(null)
  const [labores, setLabores] = useState<Labor[]>([])
  const [loading, setLoading] = useState(true)
  const [uniqueCrops, setUniqueCrops] = useState<string>("-")

  // Note: Manual Rinde editing is deprecated for grouped campaign displays, handled via real harvest recipes.

  const [isEditingStatus, setIsEditingStatus] = useState(false)
  const [statusTemp, setStatusTemp] = useState<"activa" | "finalizada">("activa")

  const [searchTerm, setSearchTerm] = useState("")
  // Pagination for Labores
  const [laboresPage, setLaboresPage] = useState(1)
  const [laboresTotal, setLaboresTotal] = useState(0)
  const [laboresLastPage, setLaboresLastPage] = useState(1)

  const fetchCampana = async () => {
    try {
      const query = establecimientoId ? `?establecimiento_id=${establecimientoId}` : ""
      const res = await apiFetch(`/campanas/${id}${query}`)
      if (res.ok) {
        const data = await res.json()
        setCampana(data)
        // Use the new dynamically calculated grouped stats when available

        // We utilize the campana fetch only for the campaign details/stats.
        // Labores will be fetched separately with pagination.
      } else {
        console.error("Failed to fetch campana", res.status, res.statusText)
      }
    } catch (e) {
      console.error(e)
    }
  }

  const fetchLabores = async () => {
    try {
      // Fetch recipes filtered by this campaign
      let url = `/recetas?campana_id=${id}&page=${laboresPage}&limit=10`
      if (searchTerm) url += `&search=${encodeURIComponent(searchTerm)}`
      const res = await apiFetch(url)
      if (res.ok) {
        const data = await res.json()
        const rawRecetas = data.data || []

        const mappedLabores: Labor[] = rawRecetas.map((r: any) => ({
          id: String(r.id),
          tipo: r.labor || "Aplicación",
          fecha: r.fecha,
          recetaId: String(r.id),
          observaciones: r.observaciones || "",
          responsable: r.ingeniero_responsable || "N/A",
          loteNombre: r.lotes?.map((l: any) => l.nombre).join(", ") || "N/A",
          cultivo: r.cultivo_rel?.nombre || r.cultivoRel?.nombre,
          productor: r.productor?.nombre || "N/A",
          establecimiento: r.establecimiento?.nombre || "N/A"
        }))
        setLabores(mappedLabores)
        setLaboresTotal(data.total)
        setLaboresLastPage(data.last_page)

        // Calculate unique crops from the recipes
        // Note: Ideally backend should give this, or we fallback to campana's list if available.
        // We aggregate from the fetched page? No, valid unique crops should summarize the WHOLE campaign.
        // Campana object from 'fetchCampana' might have 'cultivos_unicos' if we updated controller.
        // Let's rely on what we have or just show what's visible?
        // Existing logic used 'mappedLabores', but now we only have one page.
        // Let's use the 'cultivo' field from the campaign object itself if possible, or leave it simpler.
        // In CampanaController we added 'cultivos_unicos'. Let's check update there.
        // For now, let's just use what's in the page or wait for fetchCampana data.
      }
    } catch (e) {
      console.error(e)
    }
  }

  useEffect(() => {
    setLoading(true)
    Promise.all([fetchCampana(), fetchLabores()]).finally(() => setLoading(false))
  }, [id, establecimientoId])

  // Refetch labores when page changes
  useEffect(() => {
    fetchLabores()
  }, [laboresPage, searchTerm])

  // Update Unique Crops when Campana loads (if controller provides it)
  useEffect(() => {
    if (campana && (campana as any).cultivos_unicos) {
      setUniqueCrops((campana as any).cultivos_unicos.join(", "))
    } else if (campana?.cultivo) {
      setUniqueCrops(campana.cultivo)
    }
  }, [campana])

  const handleNuevaReceta = () => {
    const params = new URLSearchParams()
    if (campana?.id) params.set("campana_id", campana.id)
    if (campana?.establecimiento?.id) params.set("establecimiento_id", campana.establecimiento.id)
    if (establecimientoId && !params.get("establecimiento_id")) params.set("establecimiento_id", establecimientoId)
    if (cultivoId) params.set("cultivo_id", cultivoId)
    if (backUrl) params.set("back_url", backUrl) // Forward the original back URL
    router.push(`/dashboard/recetas/nueva?${params.toString()}`)
  }

  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 getTipoIcon = (tipo: string) => {
    const icons = {
      Siembra: <Sprout className="h-4 w-4" />,
      Monitoreo: <Eye className="h-4 w-4" />,
      Pulverización: <Droplets className="h-4 w-4" />,
      Fertilización: <TrendingUp className="h-4 w-4" />,
    }
    return icons[tipo as keyof typeof icons] || <Bug className="h-4 w-4" />
  }

  // API manual save functions removed since we compute yields from Cosecha recipes

  const handleGuardarStatus = async () => {
    try {
      const res = await apiFetch(`/campanas/${campana?.id}`, {
        method: "PUT",
        body: JSON.stringify({ estado: statusTemp }),
      })
      if (res.ok) {
        const updated = await res.json()
        setCampana((prev) => (prev ? { ...prev, estado: updated.estado } : null))
        setIsEditingStatus(false)
        toast.success("Estado actualizado exitosamente")
      } else {
        toast.error("Error al actualizar estado")
      }
    } catch (e) {
      console.error(e)
      toast.error("Error de conexión")
    }
  }

  if (loading) return <div className="p-8">Cargando...</div>
  if (!campana) return <div className="p-8">Campaña no encontrada</div>

  const backLink = backUrl || `/dashboard/campanas?establecimiento_id=${establecimientoId || ""}&cultivo_id=${cultivoId || ""}`

  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div className="flex items-center gap-4">
          <Link href={backLink}>
            <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">{campana.nombre}</h1>
            <p className="text-muted-foreground mt-1">Detalle de campaña y labores realizadas</p>
          </div>
        </div>

        <div className="grid gap-4 md:grid-cols-2">
          <Card>
            <CardHeader>
              <CardTitle className="text-base">Información General</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground flex items-center gap-1">
                  <Calendar className="h-3 w-3" />
                  Período:
                </span>
                <span className="font-medium">
                  {new Date(campana.fecha_inicio).toLocaleDateString("es-AR")} -{" "}
                  {new Date(campana.fecha_fin).toLocaleDateString("es-AR")}
                </span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground flex items-center gap-1">
                  <Calendar className="h-3 w-3" />
                  Período:
                </span>
                <span className="font-medium">
                  {new Date(campana.fecha_inicio).toLocaleDateString("es-AR")} -{" "}
                  {new Date(campana.fecha_fin).toLocaleDateString("es-AR")}
                </span>
              </div>
              <div className="flex justify-between text-sm pt-2 border-t">
                {isEditingStatus ? (
                  <div className="flex items-center gap-2">
                    <select
                      className="h-8 rounded-md border border-input bg-background px-2 text-sm"
                      value={statusTemp}
                      onChange={(e) => setStatusTemp(e.target.value as "activa" | "finalizada")}
                    >
                      <option value="activa">Activa</option>
                      <option value="finalizada">Finalizada</option>
                    </select>
                    <Button size="sm" onClick={handleGuardarStatus}>
                      <Save className="h-4 w-4" />
                    </Button>
                    <Button size="sm" variant="ghost" onClick={() => setIsEditingStatus(false)}>
                      Cancelar
                    </Button>
                  </div>
                ) : (
                  <div className="flex items-center gap-2">
                    <Badge className={getStatusColor(campana.estado)}>
                      {campana.estado === "activa" ? "Activa" : "Finalizada"}
                    </Badge>
                    <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => {
                      setStatusTemp(campana.estado)
                      setIsEditingStatus(true)
                    }}>
                      <Edit className="h-3 w-3" />
                    </Button>
                  </div>
                )}
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-3">
              <div className="flex items-center justify-between">
                <CardTitle className="text-base flex items-center gap-2">
                  <TrendingUp className="h-4 w-4" />
                  Rendimiento Estimado
                </CardTitle>
              </div>
              <CardDescription>
                Rendimientos calculados en base a recetas de "Cosecha"
              </CardDescription>
            </CardHeader>
            <CardContent>
              {(!campana.rinde_por_cultivo || campana.rinde_por_cultivo.length === 0) ? (
                <div className="text-center py-8">
                  <p className="text-sm text-muted-foreground">
                    Aún no se ha registrado ninguna labor de "Cosecha".
                  </p>
                </div>
              ) : (
                <div className="space-y-4 max-h-[220px] overflow-y-auto pr-2">
                  {campana.rinde_por_cultivo.map((stat, i) => (
                    <div key={i} className="flex flex-col gap-2 p-3 bg-muted/30 rounded-lg border border-border/50">
                      <div className="flex items-center justify-between border-b border-border/50 pb-2 mb-1">
                        <span className="font-semibold text-sm">{stat.cultivo}</span>
                        <Badge variant="outline" className="text-xs bg-background">{stat.superficie} ha cosechadas</Badge>
                      </div>
                      <div className="grid grid-cols-2 gap-4">
                        <div>
                          <p className="text-xs text-muted-foreground">Rinde Promedio</p>
                          <p className="text-xl font-bold font-mono text-primary">{stat.rinde} <span className="text-xs font-normal">QQ/ha</span></p>
                        </div>
                        <div>
                          <p className="text-xs text-muted-foreground text-right">Producción</p>
                          <p className="text-xl font-bold font-mono text-primary text-right">{stat.produccion} <span className="text-xs font-normal">QQ totales</span></p>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </div>

        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <div>
                <CardTitle>Labores Realizadas</CardTitle>
                <CardDescription>Historial de trabajos y recetas aplicadas en esta campaña</CardDescription>
              </div>
              <div className="flex items-center gap-3">
                <div className="relative w-64">
                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input
                    type="search"
                    placeholder="Filtrar lote, productor, cultivo..."
                    className="pl-8 bg-background"
                    value={searchTerm}
                    onChange={(e) => {
                      setSearchTerm(e.target.value)
                      setLaboresPage(1)
                    }}
                  />
                </div>
                <Button onClick={handleNuevaReceta} className="gap-2">
                  <Plus className="h-4 w-4" />
                  Nueva Labor
                </Button>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            {labores.length === 0 ? (
              <div className="text-center py-12">
                <Sprout className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
                <h3 className="text-lg font-semibold text-foreground mb-2">No hay labores registradas</h3>
                <p className="text-sm text-muted-foreground mb-4">
                  Comienza agregando la primera labor o receta para esta campaña
                </p>

              </div>
            ) : (
              <>
                <div className="rounded-lg border border-border">
                  <Table>
                    <TableHeader>
                      <TableRow className="bg-muted/50">
                        <TableHead>Tipo de Labor</TableHead>
                        <TableHead>Fecha</TableHead>
                        <TableHead>Productor</TableHead>
                        <TableHead>Establecimiento</TableHead>
                        <TableHead>Lote</TableHead>
                        <TableHead>Observaciones</TableHead>
                        <TableHead>Responsable</TableHead>
                        <TableHead className="text-right">Acciones</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {labores.map((labor) => (
                        <TableRow key={labor.id}>
                          <TableCell>
                            <div className="flex items-center gap-2">
                              {getTipoIcon(labor.tipo)}
                              <span className="font-medium">{labor.tipo}</span>
                            </div>
                          </TableCell>
                          <TableCell>
                            <span className="text-sm text-muted-foreground">
                              {new Date(labor.fecha).toLocaleDateString("es-AR")}
                            </span>
                          </TableCell>
                          <TableCell>
                            <span className="text-sm font-medium">{labor.productor}</span>
                          </TableCell>
                          <TableCell>
                            <span className="text-sm text-muted-foreground">{labor.establecimiento}</span>
                          </TableCell>
                          <TableCell>
                            <span className="text-sm font-medium">{labor.loteNombre}</span>
                          </TableCell>
                          <TableCell>
                            <span className="text-sm">{labor.observaciones}</span>
                          </TableCell>
                          <TableCell>
                            <span className="text-sm text-muted-foreground">{labor.responsable}</span>
                          </TableCell>
                          <TableCell className="text-right">
                            {labor.recetaId ? (
                              <Link href={`/dashboard/recetas/ver?id=${labor.recetaId}`}>
                                <Button variant="outline" size="sm" className="gap-2 bg-transparent">
                                  <Eye className="h-3 w-3" />
                                  Ver Receta
                                </Button>
                              </Link>
                            ) : (
                              <Badge variant="outline" className="text-xs">
                                Sin receta
                              </Badge>
                            )}
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>

                <div className="mt-4">
                  <PaginationControl
                    currentPage={laboresPage}
                    lastPage={laboresLastPage}
                    total={laboresTotal}
                    onPageChange={setLaboresPage}
                  />
                </div>
              </>
            )}
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
}