"use client"

import { useState } 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 { Textarea } from "@/components/ui/textarea"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Plus, Pencil, Search, MapPin, User, LayoutGrid, Sprout, Power } from "lucide-react"
import Link from "next/link"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"



interface Establecimiento {
  id: string
  nombre: string
  ubicacion?: string
  productorId: string
  productorNombre: string
  hectareas: number
  status: "activo" | "inactivo"
  observaciones?: string
  lastActiveCampaignId?: string
}


import { apiFetch, getErrorMessage } from "@/lib/apiutils"
import { useEffect } from "react"
import { PaginationControl } from "@/components/ui/pagination-control"
import { LotesDialog } from "./lotes-dialog"
import { toast } from "sonner"

// ... imports
interface Productor {
  id: string
  nombre: string
}

export default function EstablecimientosPage() {
  const [establecimientos, setEstablecimientos] = useState<Establecimiento[]>([])
  const [productores, setProductores] = useState<Productor[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [currentPage, setCurrentPage] = useState(1)
  const [lastPage, setLastPage] = useState(1)
  const [total, setTotal] = useState(0)
  const [stats, setStats] = useState({ total: 0, activos: 0, total_hectareas: 0 })
  const [statusFilter, setStatusFilter] = useState<"activo" | "inactivo" | "all">("activo")
  const [searchTerm, setSearchTerm] = useState("")

  // Lotes State
  const [isLotesDialogOpen, setIsLotesDialogOpen] = useState(false)
  const [selectedEstablecimientoForLotes, setSelectedEstablecimientoForLotes] = useState<Establecimiento | null>(null)

  const handleOpenLotesDialog = (establecimiento: Establecimiento) => {
    setSelectedEstablecimientoForLotes(establecimiento)
    setIsLotesDialogOpen(true)
  }

  const fetchData = async () => {
    setIsLoading(true)
    try {
      const queryParams = new URLSearchParams()
      queryParams.append("page", currentPage.toString())
      if (statusFilter !== "all") {
        queryParams.append("status", statusFilter)
      }
      if (searchTerm.trim() !== "") {
        queryParams.append("search", searchTerm)
      }

      const [estRes, prodRes] = await Promise.all([
        apiFetch(`/establecimientos?${queryParams.toString()}`),
        apiFetch("/productores?all=true&status=activo")
      ])

      if (estRes.ok && prodRes.ok) {
        const estData = await estRes.json()
        const prodData = await prodRes.json()

        const dataList = estData.data || []
        setLastPage(estData.last_page || 1)
        setTotal(estData.total || 0)
        setStats(estData.stats || { total: 0, activos: 0, total_hectareas: 0 })

        const mappedEst = dataList.map((e: any) => ({
          ...e,
          id: e.id.toString(),
          productorId: e.productor_id.toString(),
          productorNombre: e.productor?.nombre || "Desconocido",
          hectareas: Number(e.hectareas),
          observaciones: e.observaciones || "",
          lastActiveCampaignId: e.last_active_campaign_id ? String(e.last_active_campaign_id) : undefined
        }))

        const rawProd = prodData.data || []
        const mappedProd = rawProd.map((p: any) => ({
          id: p.id.toString(),
          nombre: p.nombre
        }))

        setEstablecimientos(mappedEst)
        setProductores(mappedProd)
      }
    } catch (e) {
      console.error(e)
    } finally {
      setIsLoading(false)
    }
  }

  useEffect(() => {
    fetchData()
  }, [currentPage, statusFilter, searchTerm])

  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [editingEstablecimiento, setEditingEstablecimiento] = useState<Establecimiento | null>(null)

  /* Reset page when filter changes */
  useEffect(() => {
    setCurrentPage(1)
  }, [statusFilter, searchTerm])

  const [formData, setFormData] = useState<Omit<Establecimiento, "id" | "productorNombre">>({
    nombre: "",
    ubicacion: "",
    productorId: "",
    hectareas: 0,
    status: "activo",
    observaciones: "",
  })


  const filteredEstablecimientos = establecimientos



  const handleOpenDialog = (establecimiento?: Establecimiento) => {
    if (establecimiento) {
      setEditingEstablecimiento(establecimiento)
      const { id, productorNombre, ...estData } = establecimiento
      setFormData({
        nombre: estData.nombre || "",
        ubicacion: estData.ubicacion || "",
        productorId: estData.productorId || "",
        hectareas: estData.hectareas || 0,
        status: estData.status || "activo",
        observaciones: estData.observaciones || "",
      })
    } else {
      setEditingEstablecimiento(null)
      setFormData({
        nombre: "",
        ubicacion: "",
        productorId: "",
        hectareas: 0,
        status: "activo",
        observaciones: "",
      })
    }
    setIsDialogOpen(true)
  }

  const handleSave = async () => {
    try {
      const payload = {
        ...formData,
        hectareas: Number(formData.hectareas) || 0,
        productor_id: formData.productorId
      }

      let res;
      if (editingEstablecimiento) {
        res = await apiFetch(`/establecimientos/${editingEstablecimiento.id}`, {
          method: 'PUT',
          body: JSON.stringify(payload)
        })
      } else {
        res = await apiFetch('/establecimientos', {
          method: 'POST',
          body: JSON.stringify(payload)
        })
      }

      if (res.ok) {
        fetchData()
        setIsDialogOpen(false)
      } else {
        const msg = await getErrorMessage(res)
        toast.error(msg)
      }

    } catch (e) {
      console.error(e)
      toast.error("Error de conexión")
    }
  }

  const handleToggleStatus = async (establecimiento: Establecimiento) => {
    const newStatus = establecimiento.status === "activo" ? "inactivo" : "activo"
    const action = newStatus === "activo" ? "activar" : "desactivar"

    if (confirm(`¿Estás seguro de que deseas ${action} este establecimiento?`)) {
      try {
        const res = await apiFetch(`/establecimientos/${establecimiento.id}`, {
          method: 'PUT',
          body: JSON.stringify({ status: newStatus })
        })

        if (res.ok) {
          fetchData()
        } else {
          toast.error("Error al actualizar estado")
        }
      } catch (e) {
        console.error(e)
        toast.error("Error de conexión")
      }
    }
  }

  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h1 className="text-3xl font-bold tracking-tight text-foreground text-balance">
              Gestión de Establecimientos
            </h1>
            <p className="text-muted-foreground mt-2">Administra los campos y establecimientos</p>
          </div>
          <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
            <DialogTrigger asChild>
              <Button onClick={() => handleOpenDialog()} className="gap-2">
                <Plus className="h-4 w-4" />
                Nuevo Establecimiento
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-lg">
              <DialogHeader>
                <DialogTitle>{editingEstablecimiento ? "Editar Establecimiento" : "Nuevo Establecimiento"}</DialogTitle>
                <DialogDescription>
                  {editingEstablecimiento
                    ? "Modifica la información del establecimiento"
                    : "Completa los datos para registrar un nuevo establecimiento"}
                </DialogDescription>
              </DialogHeader>
              <div className="grid gap-4 py-4">
                <div className="space-y-2">
                  <Label htmlFor="nombre">Nombre del Campo</Label>
                  <Input
                    id="nombre"
                    value={formData.nombre}
                    onChange={(e) => {
                      if (e.target.value.length <= 100) {
                        setFormData({ ...formData, nombre: e.target.value })
                      }
                    }}
                    maxLength={100}
                    placeholder="Campo La Esperanza"
                    className={formData.nombre.length >= 100 ? 'border-red-500 focus-visible:ring-red-500' : ''}
                  />
                  {formData.nombre.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="ubicacion">Ubicación</Label>
                  <Input
                    id="ubicacion"
                    value={formData.ubicacion}
                    onChange={(e) => {
                      if (e.target.value.length <= 150) {
                        setFormData({ ...formData, ubicacion: e.target.value })
                      }
                    }}
                    maxLength={150}
                    placeholder="Ruta 9 Km 245, Provincia"
                    className={(formData.ubicacion || "").length >= 150 ? 'border-red-500 focus-visible:ring-red-500' : ''}
                  />
                  {(formData.ubicacion || "").length >= 150 && (
                    <p className="text-xs text-red-500 mt-1">Has alcanzado el límite máximo de 150 caracteres.</p>
                  )}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="productorId">Productor</Label>
                  <Select
                    value={formData.productorId}
                    onValueChange={(value) => setFormData({ ...formData, productorId: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Seleccionar productor" />
                    </SelectTrigger>
                    <SelectContent>
                      {productores.map((productor) => (
                        <SelectItem key={productor.id} value={productor.id}>
                          {productor.nombre}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="hectareas">Hectáreas</Label>
                  <Input
                    id="hectareas"
                    type="number"
                    min="0"
                    step="any"
                    value={formData.hectareas === 0 && !editingEstablecimiento ? "" : formData.hectareas}
                    onChange={(e) => {
                      const val = e.target.value;
                      if (val === "") {
                        setFormData({ ...formData, hectareas: "" as any });
                      } else {
                        setFormData({ ...formData, hectareas: Number(val) });
                      }
                    }}
                    onKeyDown={(e) => {
                      if (e.ctrlKey || e.metaKey || e.key.length > 1) return;
                      if (!/[0-9.,]/.test(e.key)) {
                        e.preventDefault();
                      }
                    }}
                    placeholder="0"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="status">Estado</Label>
                  <Select
                    value={formData.status}
                    onValueChange={(value: "activo" | "inactivo") => setFormData({ ...formData, status: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Seleccionar estado" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="activo">Activo</SelectItem>
                      <SelectItem value="inactivo">Inactivo</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="observaciones">Observaciones</Label>
                  <Textarea
                    id="observaciones"
                    value={formData.observaciones || ""}
                    onChange={(e) => {
                      if (e.target.value.length <= 500) {
                        setFormData({ ...formData, observaciones: e.target.value })
                      }
                    }}
                    maxLength={500}
                    placeholder="Información adicional del campo..."
                    className={(formData.observaciones || "").length >= 500 ? 'border-red-500 focus-visible:ring-red-500' : ''}
                  />
                  {(formData.observaciones || "").length >= 500 && (
                    <p className="text-xs text-red-500 mt-1">Has alcanzado el límite máximo de 500 caracteres.</p>
                  )}
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
                  Cancelar
                </Button>
                <Button onClick={handleSave}>
                  {editingEstablecimiento ? "Guardar cambios" : "Crear establecimiento"}
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </div>

        <div className="hidden md:grid gap-4 md:grid-cols-3">
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm font-medium text-muted-foreground">Total Establecimientos</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-foreground">{stats.total}</div>
              <p className="text-xs text-muted-foreground mt-1">
                {stats.activos} activos
              </p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm font-medium text-muted-foreground">Total Hectáreas</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-foreground">
                {Number(stats.total_hectareas).toLocaleString()}
              </div>
              <p className="text-xs text-muted-foreground mt-1">Superficie total</p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm font-medium text-muted-foreground">Promedio Ha/Campo</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-foreground">
                {stats.total > 0
                  ? Math.round(Number(stats.total_hectareas) / stats.total).toLocaleString()
                  : 0}
              </div>
              <p className="text-xs text-muted-foreground mt-1">Por establecimiento</p>
            </CardContent>
          </Card>
        </div>

        <Card>
          <CardHeader>
            <CardTitle>Listado de Establecimientos</CardTitle>
            <CardDescription>Todos los campos registrados</CardDescription>
            <div className="pt-4 flex flex-col sm:flex-row gap-4">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                  placeholder="Buscar por nombre, ubicación o productor..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
              <div className="w-full sm:w-[200px]">
                <Select value={statusFilter} onValueChange={(val: any) => setStatusFilter(val)}>
                  <SelectTrigger>
                    <SelectValue placeholder="Estado" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="activo">Solo Activos</SelectItem>
                    <SelectItem value="inactivo">Solo Inactivos</SelectItem>
                    <SelectItem value="all">Todos</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className="rounded-lg border border-border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Productor</TableHead>
                    <TableHead>Establecimiento</TableHead>
                    <TableHead>Hectáreas</TableHead>
                    <TableHead>Observaciones</TableHead>
                    <TableHead>Estado</TableHead>
                    <TableHead className="text-right">Acciones</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredEstablecimientos.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={6} className="text-center text-muted-foreground">
                        No se encontraron establecimientos
                      </TableCell>
                    </TableRow>
                  ) : (
                    filteredEstablecimientos.map((establecimiento) => (
                      <TableRow key={establecimiento.id}>
                        <TableCell>
                          <div className="flex items-center gap-2 text-sm text-muted-foreground">
                            <User className="h-3 w-3" />
                            <span>{establecimiento.productorNombre}</span>
                          </div>
                        </TableCell>
                        <TableCell>
                          <span className="font-medium text-foreground">{establecimiento.nombre}</span>
                        </TableCell>
                        <TableCell>
                          <Badge variant="outline" className="font-normal">
                            {establecimiento.hectareas.toLocaleString()} ha
                          </Badge>
                        </TableCell>
                        <TableCell>
                          <span className="text-sm text-muted-foreground truncate max-w-[200px] block" title={establecimiento.observaciones}>
                            {establecimiento.observaciones || "-"}
                          </span>
                        </TableCell>
                        <TableCell>
                          <Badge
                            variant={establecimiento.status === "activo" ? "default" : "secondary"}
                            className="capitalize"
                          >
                            {establecimiento.status}
                          </Badge>
                        </TableCell>
                        <TableCell className="text-right">
                          <div className="flex justify-end gap-2">
                            {establecimiento.lastActiveCampaignId && (
                              <Link href={`/dashboard/campanas/detalle?id=${establecimiento.lastActiveCampaignId}&establecimiento_id=${establecimiento.id}&back_url=/dashboard/establecimientos`}>
                                <Button variant="ghost" size="icon" title="Ver Última Campaña Activa">
                                  <Sprout className="h-4 w-4 text-green-600" />
                                </Button>
                              </Link>
                            )}
                            <Button variant="ghost" size="icon" onClick={() => handleOpenLotesDialog(establecimiento)} title="Gestionar Lotes">
                              <LayoutGrid className="h-4 w-4" />
                            </Button>
                            <Button variant="ghost" size="icon" onClick={() => handleOpenDialog(establecimiento)}>
                              <Pencil className="h-4 w-4" />
                            </Button>
                            <Button variant="ghost" size="icon" onClick={() => handleToggleStatus(establecimiento)}>
                              <Power className={`h-4 w-4 ${establecimiento.status === 'activo' ? 'text-destructive' : 'text-green-600'}`} />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </div>
            <PaginationControl
              currentPage={currentPage}
              lastPage={lastPage}
              total={total}
              onPageChange={(page) => {
                setCurrentPage(page)
                // Need to re-fetch when page changes
                // But fetchData is not a dependency of useEffect currently. 
                // Better approach: add currentPage to useEffect dependency.
              }}
              isLoading={isLoading}
            />
          </CardContent>
        </Card>

        {/* Dialogo ABM Lotes */}
        <LotesDialog
          open={isLotesDialogOpen}
          onOpenChange={setIsLotesDialogOpen}
          establecimientoId={selectedEstablecimientoForLotes?.id || null}
          establecimientoNombre={selectedEstablecimientoForLotes?.nombre || null}
          maxHectareas={selectedEstablecimientoForLotes?.hectareas || 0}
        />
      </div>
    </DashboardLayout >
  )
}