"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 { 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, Phone, User, Power, Trash2 } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

interface Productor {
  id: string
  nombre: string
  razonSocial?: string
  cuit?: string
  email?: string
  tipoProduccion?: string
  telefono?: string
  establecimientos_count: number
  lotes_count: number
  status: "activo" | "inactivo"
}



import { apiFetch, getErrorMessage } from "@/lib/apiutils"
import { useEffect } from "react"

// ... imports

// ... imports (will check if useApi needs to be added, yes)
import { useApi } from "@/lib/use-api"
import { PaginationControl } from "@/components/ui/pagination-control"
import { useTableSort } from "@/lib/use-table-sort"
import { toast } from "sonner"

export default function ProductoresPage() {
  /* State */
  const { sortBy, sortDir, handleSort, appendSortParams, SortIcon } = useTableSort("created_at", "desc")
  const [statusFilter, setStatusFilter] = useState<"activo" | "inactivo" | "all">("activo")
  const [searchTerm, setSearchTerm] = useState("")
  const [currentPage, setCurrentPage] = useState(1)

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

  /* Fetch Data */
  const queryParams = new URLSearchParams()
  queryParams.append("page", currentPage.toString())
  if (statusFilter !== "all") {
    queryParams.append("status", statusFilter)
  }
  if (searchTerm.trim() !== "") {
    queryParams.append("search", searchTerm)
  }
  appendSortParams(queryParams)

  const { data: rawData, isLoading, mutate } = useApi(`/productores?${queryParams.toString()}`)

  const dataList = rawData?.data || []
  const lastPage = rawData?.last_page || 1
  const total = rawData?.total || 0

  const productores: Productor[] = dataList.map((p: any) => ({
    ...p,
    id: p.id.toString(),
    razonSocial: p.razon_social,
    tipoProduccion: p.tipo_produccion,
    // Counts come directly from API now
  }))

  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [editingProductor, setEditingProductor] = useState<Productor | null>(null)
  const [formData, setFormData] = useState<Omit<Productor, "id" | "establecimientos_count" | "lotes_count">>({
    nombre: "",
    razonSocial: "",
    cuit: "",
    email: "",
    tipoProduccion: "Mixto",
    telefono: "",
    status: "activo",
  })

  const filteredProductores = productores

  const handleOpenDialog = (productor?: Productor) => {
    if (productor) {
      setEditingProductor(productor)
      const { id, establecimientos_count, lotes_count, razon_social, tipo_produccion, ...productorData } = productor as any // Handle extended props
      setFormData({
        nombre: productorData.nombre || "",
        razonSocial: productor.razonSocial || "",
        cuit: productorData.cuit || "",
        email: productorData.email || "",
        tipoProduccion: productor.tipoProduccion || "Mixto",
        telefono: productorData.telefono || "",
        status: productorData.status || "activo",
      })
    } else {
      setEditingProductor(null)
      setFormData({
        nombre: "",
        razonSocial: "",
        cuit: "",
        email: "",
        tipoProduccion: "Mixto",
        telefono: "",
        status: "activo",
      })
    }
    setIsDialogOpen(true)
  }

  const handleSave = async () => {
    try {
      const payload = {
        ...formData,
        razon_social: formData.razonSocial,
        tipo_produccion: formData.tipoProduccion,
        status: formData.status // Explicitly ensuring status is sent
      }

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

      if (res.ok) {
        mutate()
        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 (productor: Productor) => {
    const newStatus = productor.status === "activo" ? "inactivo" : "activo"
    const action = newStatus === "activo" ? "activar" : "desactivar"

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

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

  const handleDelete = async (productor: Productor) => {
    if (confirm(`¿Estás seguro de que deseas ELIMINAR PERMANENTEMENTE a ${productor.nombre}? Esta acción no se puede deshacer.`)) {
      try {
        const res = await apiFetch(`/productores/${productor.id}`, {
          method: 'DELETE'
        })

        if (res.ok) {
          toast.success("Productor eliminado permanentemente")
          mutate()
        } else if (res.status === 409) {
          const data = await res.json()
          toast.error(data.message || "No se puede eliminar porque tiene registros asociados.")
        } else {
          const msg = await getErrorMessage(res)
          toast.error(msg || "Error al eliminar productor")
        }
      } 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 Productores</h1>
            <p className="text-muted-foreground mt-2">Administra los productores agrícolas</p>
          </div>
          <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
            <DialogTrigger asChild>
              <Button onClick={() => handleOpenDialog()} className="gap-2">
                <Plus className="h-4 w-4" />
                Nuevo Productor
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-lg">
              <DialogHeader>
                <DialogTitle>{editingProductor ? "Editar Productor" : "Nuevo Productor"}</DialogTitle>
                <DialogDescription>
                  {editingProductor
                    ? "Modifica la información del productor"
                    : "Completa los datos para registrar un nuevo productor"}
                </DialogDescription>
              </DialogHeader>
              <div className="grid gap-4 py-4">
                <div className="space-y-2">
                  <Label htmlFor="nombre">Nombre</Label>
                  <Input
                    id="nombre"
                    value={formData.nombre}
                    onChange={(e) => {
                      if (e.target.value.length <= 100) {
                        setFormData({ ...formData, nombre: e.target.value })
                      }
                    }}
                    maxLength={100}
                    placeholder="Juan Carlos Pérez"
                    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="razonSocial">Razón Social</Label>
                  <Input
                    id="razonSocial"
                    value={formData.razonSocial || ""}
                    onChange={(e) => {
                      if (e.target.value.length <= 100) {
                        setFormData({ ...formData, razonSocial: e.target.value })
                      }
                    }}
                    maxLength={100}
                    placeholder="Pérez Cereales S.A."
                    className={(formData.razonSocial || "").length >= 100 ? 'border-red-500 focus-visible:ring-red-500' : ''}
                  />
                  {(formData.razonSocial || "").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="cuit">CUIT</Label>
                  <Input
                    id="cuit"
                    value={formData.cuit}
                    onChange={(e) => {
                      let val = e.target.value.replace(/\D/g, '')
                      if (val.length > 11) val = val.slice(0, 11)

                      let formatted = val
                      if (val.length > 2) {
                        formatted = `${val.slice(0, 2)}-${val.slice(2)}`
                      }
                      if (val.length > 10) {
                        formatted = `${val.slice(0, 2)}-${val.slice(2, 10)}-${val.slice(10)}`
                      }
                      setFormData({ ...formData, cuit: formatted })
                    }}
                    placeholder="20-12345678-9"
                    maxLength={13}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email">Email</Label>
                  <Input
                    id="email"
                    type="email"
                    value={formData.email || ""}
                    onChange={(e) => {
                      if (e.target.value.length <= 100) {
                        setFormData({ ...formData, email: e.target.value })
                      }
                    }}
                    maxLength={100}
                    placeholder="contacto@ejemplo.com"
                    className={
                      ((formData.email || "").length >= 100 || (formData.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email))) 
                        ? 'border-red-500 focus-visible:ring-red-500' 
                        : ''
                    }
                  />
                  {(formData.email || "").length >= 100 && (
                    <p className="text-xs text-red-500 mt-1">Has alcanzado el límite máximo de 100 caracteres.</p>
                  )}
                  {formData.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email) && (
                    <p className="text-xs text-red-500 mt-1">Formato de correo inválido.</p>
                  )}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="tipoProduccion">Tipo de Producción</Label>
                  <Select
                    value={formData.tipoProduccion}
                    onValueChange={(value) => setFormData({ ...formData, tipoProduccion: value })}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Seleccionar tipo" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="Agricola">Agrícola</SelectItem>
                      <SelectItem value="Ganadera">Ganadera</SelectItem>
                      <SelectItem value="Mixto">Mixto</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="telefono">Teléfono</Label>
                  <Input
                    id="telefono"
                    value={formData.telefono || ""}
                    onChange={(e) => {
                      const val = e.target.value.replace(/[^\d\s\+\(\)\-]/g, '')
                      if (val.length <= 20) {
                        setFormData({ ...formData, telefono: val })
                      }
                    }}
                    maxLength={20}
                    placeholder="+54 11 1234-5678"
                    className={(formData.telefono || "").length >= 20 ? 'border-red-500 focus-visible:ring-red-500' : ''}
                  />
                  {(formData.telefono || "").length >= 20 && (
                    <p className="text-xs text-red-500 mt-1">Has alcanzado el límite máximo de 20 caracteres.</p>
                  )}
                </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>
              <DialogFooter>
                <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
                  Cancelar
                </Button>
                <Button onClick={handleSave}>{editingProductor ? "Guardar cambios" : "Crear productor"}</Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </div>

        <div className="hidden md:grid gap-4 md:grid-cols-2">
          <Card>
            <CardHeader className="pb-3">
              <CardTitle className="text-sm font-medium text-muted-foreground">Total Productores</CardTitle>
            </CardHeader>
            <CardContent>
              {isLoading ? (
                <div className="h-8 w-24 bg-muted animate-pulse rounded" />
              ) : (
                <div className="text-2xl font-bold text-foreground">{rawData?.stats?.total || 0}</div>
              )}
              <p className="text-xs text-muted-foreground mt-1">
                {rawData?.stats?.activos || 0} activos
              </p>
            </CardContent>
          </Card>
          <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">
                {rawData?.stats?.total_establecimientos || 0}
              </div>
              <p className="text-xs text-muted-foreground mt-1">Vinculados</p>
            </CardContent>
          </Card>
        </div>

        <Card>
          <CardHeader>
            <CardTitle>Listado de Productores</CardTitle>
            <CardDescription>Todos los productores 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 o CUIT..."
                  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 className="cursor-pointer select-none" onClick={() => handleSort("nombre")}>
                      <div className="flex items-center">Productor <SortIcon column="nombre" /></div>
                    </TableHead>
                    <TableHead className="cursor-pointer select-none" onClick={() => handleSort("tipo_produccion")}>
                      <div className="flex items-center">Tipo <SortIcon column="tipo_produccion" /></div>
                    </TableHead>
                    <TableHead className="cursor-pointer select-none" onClick={() => handleSort("establecimientos_count")}>
                      <div className="flex items-center">Establecimientos <SortIcon column="establecimientos_count" /></div>
                    </TableHead>
                    <TableHead className="cursor-pointer select-none" onClick={() => handleSort("lotes_count")}>
                      <div className="flex items-center">Lotes <SortIcon column="lotes_count" /></div>
                    </TableHead>
                    <TableHead className="cursor-pointer select-none" onClick={() => handleSort("status")}>
                      <div className="flex items-center">Estado <SortIcon column="status" /></div>
                    </TableHead>
                    <TableHead className="text-right">Acciones</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {isLoading && productores.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={6} className="text-center py-8">
                        Cargando productores...
                      </TableCell>
                    </TableRow>
                  ) : filteredProductores.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={6} className="text-center text-muted-foreground">
                        No se encontraron productores
                      </TableCell>
                    </TableRow>
                  ) : (
                    filteredProductores.map((productor) => (
                      <TableRow key={productor.id}>
                        <TableCell>
                          <div className="flex flex-col">
                            <span className="font-medium text-foreground">{productor.nombre}</span>
                            {productor.razonSocial && (
                              <span className="text-xs text-muted-foreground">{productor.razonSocial}</span>
                            )}
                          </div>
                        </TableCell>
                        <TableCell>
                          <Badge variant="outline">{productor.tipoProduccion || "Mixto"}</Badge>
                        </TableCell>
                        <TableCell>
                          <Badge variant="outline" className="font-normal">
                            {productor.establecimientos_count} campos
                          </Badge>
                        </TableCell>
                        <TableCell>
                          <Badge variant="outline" className="font-normal bg-muted/50">
                            {productor.lotes_count} lotes
                          </Badge>
                        </TableCell>
                        <TableCell>
                          <Badge
                            variant={productor.status === "activo" ? "default" : "secondary"}
                            className="capitalize"
                          >
                            {productor.status}
                          </Badge>
                        </TableCell>
                        <TableCell className="text-right">
                          <div className="flex justify-end gap-2">
                            <Button variant="ghost" size="icon" onClick={() => handleOpenDialog(productor)}>
                              <Pencil className="h-4 w-4" />
                            </Button>
                            <Button variant="ghost" size="icon" onClick={() => handleToggleStatus(productor)}>
                              <Power className={`h-4 w-4 ${productor.status === 'activo' ? 'text-destructive' : 'text-green-600'}`} />
                            </Button>
                            {productor.status === "inactivo" && (
                              <Button variant="ghost" size="icon" title="Eliminar permanentemente" onClick={() => handleDelete(productor)}>
                                <Trash2 className="h-4 w-4 text-red-600 hover:text-red-800" />
                              </Button>
                            )}
                          </div>
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </div>
            <PaginationControl
              currentPage={currentPage}
              lastPage={lastPage}
              total={total}
              onPageChange={setCurrentPage}
              isLoading={isLoading}
            />
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
}