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

interface Insumo {
  id: string
  nombreComercial: string
  principioActivo: string
  unidadMedida: string
  categoria: string
  categoriaId?: string
}

import { apiFetch, getErrorMessage } from "@/lib/apiutils"
import { useEffect } from "react"
import { PaginationControl } from "@/components/ui/pagination-control"

// ... imports
import { useApi } from "@/lib/use-api"
import { toast } from "sonner"

interface CategoriaInsumo {
  id: string
  nombre: string
}

export default function InsumosPage() {
  /* State */
  const [searchTerm, setSearchTerm] = useState("")
  const [currentPage, setCurrentPage] = useState(1)

  useEffect(() => {
    setCurrentPage(1)
  }, [searchTerm])

  /* API */
  const queryParams = new URLSearchParams()
  queryParams.append("page", currentPage.toString())
  if (searchTerm.trim() !== "") {
    queryParams.append("search", searchTerm)
  }

  const { data: rawData, isLoading, mutate } = useApi(`/insumos?${queryParams.toString()}`)
  // Fetch categories independently
  const { data: categoriesData, mutate: mutateCategories } = useApi("/categoria-insumos")

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

  const insumos: Insumo[] = dataList.map((i: any) => ({
    id: i.id.toString(),
    nombreComercial: i.nombre_comercial,
    principioActivo: i.principio_activo,
    unidadMedida: i.unidad_medida,
    categoria: i.categoria?.nombre || "Sin Categoría", // Handle relation
    categoriaId: i.categoria_id?.toString() || ""
  }))

  const categorias: CategoriaInsumo[] = (categoriesData || []).map((c: any) => ({
    id: c.id.toString(),
    nombre: c.nombre
  })).sort((a: CategoriaInsumo, b: CategoriaInsumo) => {
    const countA = rawData?.stats?.by_category?.[a.nombre] || 0
    const countB = rawData?.stats?.by_category?.[b.nombre] || 0
    return countB - countA
  })

  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [editingInsumo, setEditingInsumo] = useState<Insumo | null>(null)
  const [formData, setFormData] = useState<Omit<Insumo, "id" | "categoria"> & { categoriaId: string }>({
    nombreComercial: "",
    principioActivo: "",
    unidadMedida: "",
    categoriaId: "",
  })

  // Helper for duplicate key fix
  const unidades = ["Litros", "Kilogramos", "Gramos", "Mililitros"]

  // State for new category dialog
  const [isCatDialogOpen, setIsCatDialogOpen] = useState(false)
  const [newCatName, setNewCatName] = useState("")

  const handleCreateCategory = async () => {
    if (!newCatName) return
    try {
      const res = await apiFetch("/categoria-insumos", {
        method: "POST",
        body: JSON.stringify({ nombre: newCatName })
      })
      if (res.ok) {
        await mutateCategories()
        setNewCatName("")
        setIsCatDialogOpen(false)
      } else {
        const msg = await getErrorMessage(res)
        toast.error(msg)
      }
    } catch (e) {
      console.error(e)
    }
  }

  const filteredInsumos = insumos

  const handleOpenDialog = (insumo?: Insumo) => {
    if (insumo) {
      setEditingInsumo(insumo)
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      const { id, categoria, ...insumoData } = insumo
      setFormData({
        ...insumoData,
        categoriaId: insumoData.categoriaId || "",
      })
    } else {
      setEditingInsumo(null)
      setFormData({
        nombreComercial: "",
        principioActivo: "",
        unidadMedida: "",
        categoriaId: "",
      })
    }
    setIsDialogOpen(true)
  }

  const handleSave = async () => {
    try {
      const payload = {
        nombre_comercial: formData.nombreComercial,
        principio_activo: formData.principioActivo,
        unidad_medida: formData.unidadMedida,
        categoria_id: formData.categoriaId
      }

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

      if (res.ok) {
        mutate() // Revalidate
        setIsDialogOpen(false)
      } else {
        const msg = await getErrorMessage(res)
        toast.error(msg)
      }
    } catch (e) {
      console.error(e)
      toast.error("Error de conexión")
    }
  }


  const getCategoriaColor = (categoria: string) => {
    // Dynamic mapping not possible with hardcoded tailwind classes unless we use a hash or predefined list
    // Fallback to gray for now or keep existing mapping if names match
    const colors: Record<string, string> = {
      Herbicida: "bg-green-100 text-green-800 border-green-300",
      Insecticida: "bg-blue-100 text-blue-800 border-blue-300",
      Fungicida: "bg-purple-100 text-purple-800 border-purple-300",
      Fertilizante: "bg-amber-100 text-amber-800 border-amber-300",
      Acaricida: "bg-red-100 text-red-800 border-red-300",
      Coadyuvante: "bg-gray-100 text-gray-800 border-gray-300",
    }
    return colors[categoria] || "bg-gray-100 text-gray-800 border-gray-300"
  }

  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 Insumos</h1>
            <p className="text-muted-foreground mt-2">Administra el catálogo de insumos agrícolas</p>
          </div>
          <div className="flex gap-2">
            <Dialog open={isCatDialogOpen} onOpenChange={setIsCatDialogOpen}>
              <DialogTrigger asChild>
                <Button variant="outline" className="gap-2">
                  <Plus className="h-4 w-4" />
                  Nueva Categoría
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Nueva Categoría</DialogTitle>
                  <DialogDescription>Agrega una nueva categoría de insumos.</DialogDescription>
                </DialogHeader>
                <div className="py-4">
                  <Label>Nombre</Label>
                  <Input
                    value={newCatName}
                    onChange={(e) => setNewCatName(e.target.value)}
                    placeholder="Ej: Nutriente"
                  />
                </div>
                <DialogFooter>
                  <Button onClick={handleCreateCategory}>Guardar</Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>

            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
              <DialogTrigger asChild>
                <Button onClick={() => handleOpenDialog()} className="gap-2">
                  <Plus className="h-4 w-4" />
                  Nuevo Insumo
                </Button>
              </DialogTrigger>
              <DialogContent className="max-w-lg">
                <DialogHeader>
                  <DialogTitle>{editingInsumo ? "Editar Insumo" : "Nuevo Insumo"}</DialogTitle>
                  <DialogDescription>
                    {editingInsumo
                      ? "Modifica la información del insumo"
                      : "Completa los datos para registrar un nuevo insumo"}
                  </DialogDescription>
                </DialogHeader>
                <div className="grid gap-4 py-4">
                  <div className="space-y-2">
                    <Label htmlFor="nombreComercial">Nombre Comercial</Label>
                    <Input
                      id="nombreComercial"
                      value={formData.nombreComercial}
                      onChange={(e) => {
                        if (e.target.value.length <= 100) {
                          setFormData({ ...formData, nombreComercial: e.target.value })
                        }
                      }}
                      maxLength={100}
                      placeholder="Glifosato 48%"
                      className={formData.nombreComercial.length >= 100 ? 'border-red-500 focus-visible:ring-red-500' : ''}
                    />
                    {formData.nombreComercial.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="principioActivo">Principio Activo</Label>
                    <Input
                      id="principioActivo"
                      value={formData.principioActivo}
                      onChange={(e) => {
                        if (e.target.value.length <= 100) {
                          setFormData({ ...formData, principioActivo: e.target.value })
                        }
                      }}
                      maxLength={100}
                      placeholder="Glifosato"
                      className={formData.principioActivo.length >= 100 ? 'border-red-500 focus-visible:ring-red-500' : ''}
                    />
                    {formData.principioActivo.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="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="categoria">Categoría</Label>
                      <Select
                        value={formData.categoriaId}
                        onValueChange={(value) => setFormData({ ...formData, categoriaId: value })}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Seleccionar" />
                        </SelectTrigger>
                        <SelectContent>
                          {categorias.map((cat) => (
                            <SelectItem key={cat.id} value={cat.id}>
                              {cat.nombre}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="unidadMedida">Unidad de Medida</Label>
                      <Select
                        value={formData.unidadMedida}
                        onValueChange={(value) => setFormData({ ...formData, unidadMedida: value })}
                      >
                        <SelectTrigger>
                          <SelectValue placeholder="Seleccionar" />
                        </SelectTrigger>
                        <SelectContent>
                          {unidades.map((unidad) => (
                            <SelectItem key={unidad} value={unidad}>
                              {unidad}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

                </div>
                <DialogFooter>
                  <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
                    Cancelar
                  </Button>
                  <Button onClick={handleSave}>{editingInsumo ? "Guardar cambios" : "Crear insumo"}</Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          </div>
        </div>

        <div className="hidden md:flex gap-4 overflow-x-auto pb-2">
          <div className="min-w-[200px]">
            <Card className="h-full">
              <CardHeader className="pb-3">
                <CardTitle className="text-sm font-medium text-muted-foreground">Total Insumos</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">En catálogo</p>
              </CardContent>
            </Card>
          </div>
          {categorias.map((cat) => (
            <div key={cat.id} className="min-w-[200px]">
              <Card className="h-full">
                <CardHeader className="pb-3">
                  <CardTitle className="text-sm font-medium text-muted-foreground">{cat.nombre}s</CardTitle>
                </CardHeader>
                <CardContent>
                  {isLoading ? (
                    <div className="h-8 w-16 bg-muted animate-pulse rounded" />
                  ) : (
                    <div className="text-2xl font-bold text-foreground">
                      {rawData?.stats?.by_category?.[cat.nombre] || 0}
                    </div>
                  )}
                  <p className="text-xs text-muted-foreground mt-1">Productos</p>
                </CardContent>
              </Card>
            </div>
          ))}
        </div>

        <Card>
          <CardHeader>
            <CardTitle>Catálogo de Insumos</CardTitle>
            <CardDescription>Todos los productos agrícolas disponibles</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 comercial, principio activo o categoría..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className="rounded-lg border border-border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Producto</TableHead>
                    <TableHead>Principio Activo</TableHead>
                    <TableHead>Categoría</TableHead>
                    <TableHead>Unidad</TableHead>
                    <TableHead className="text-right">Acciones</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {isLoading && insumos.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={6} className="text-center py-8">
                        Cargando insumos...
                      </TableCell>
                    </TableRow>
                  ) : filteredInsumos.length === 0 ? (
                    <TableRow>
                      <TableCell colSpan={6} className="text-center text-muted-foreground">
                        No se encontraron insumos
                      </TableCell>
                    </TableRow>
                  ) : (
                    filteredInsumos.map((insumo) => (
                      <TableRow key={insumo.id}>
                        <TableCell>
                          <div className="flex items-center gap-2">
                            <Package className="h-4 w-4 text-muted-foreground" />
                            <span className="font-medium text-foreground">{insumo.nombreComercial}</span>
                          </div>
                        </TableCell>
                        <TableCell>
                          <span className="text-sm text-muted-foreground">{insumo.principioActivo}</span>
                        </TableCell>
                        <TableCell>
                          <Badge className={getCategoriaColor(insumo.categoria)}>{insumo.categoria}</Badge>
                        </TableCell>
                        <TableCell>
                          <Badge variant="outline" className="font-normal">
                            {insumo.unidadMedida}
                          </Badge>
                        </TableCell>
                        <TableCell className="text-right">
                          <div className="flex justify-end gap-2">
                            <Button variant="ghost" size="icon" onClick={() => handleOpenDialog(insumo)}>
                              <Pencil className="h-4 w-4" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))
                  )}
                </TableBody>
              </Table>
            </div>
            <PaginationControl
              currentPage={currentPage}
              lastPage={lastPage}
              total={total}
              onPageChange={setCurrentPage}
              isLoading={isLoading}
            />
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
}