"use client"

import { useState, useEffect } from "react"
import { useApi } from "@/lib/use-api"
import { DashboardLayout } from "@/components/dashboard-layout"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Search, Plus, Edit, Trash2, Wrench, CheckCircle2, XCircle } from "lucide-react"
import { apiFetch, getErrorMessage } from "@/lib/apiutils"
import { useSWRConfig } from "swr"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { toast } from "sonner"
import { PaginationControl } from "@/components/ui/pagination-control"

interface Labor {
  id: number
  nombre: string
  descripcion: string | null
  status: string
}

export default function LaboresPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState("todos")
  const [currentPage, setCurrentPage] = useState(1)
  const { mutate } = useSWRConfig()

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

  // Build query string
  const queryParams = new URLSearchParams()
  queryParams.append("page", currentPage.toString())
  queryParams.append("limit", "10")
  if (searchTerm.trim() !== "") {
    queryParams.append("search", searchTerm)
  }
  if (statusFilter !== "todos") {
    queryParams.append("status", statusFilter)
  }

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

  // Support both paginated and plain array responses
  const dataList: Labor[] = Array.isArray(rawData) ? rawData : (rawData?.data || [])
  const lastPage = rawData?.last_page || 1
  const total = rawData?.total || dataList.length

  // Stats calculation
  const totalLabores = total
  const activasCount = dataList.filter((l) => l.status === "activo").length
  const inactivasCount = dataList.filter((l) => l.status === "inactivo").length

  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [editingLabor, setEditingLabor] = useState<Labor | null>(null)
  const [formData, setFormData] = useState({
    nombre: "",
    descripcion: "",
    status: "activo",
  })
  const [saving, setSaving] = useState(false)

  const handleOpenDialog = (labor?: Labor) => {
    if (labor) {
      setEditingLabor(labor)
      setFormData({
        nombre: labor.nombre,
        descripcion: labor.descripcion || "",
        status: labor.status || "activo",
      })
    } else {
      setEditingLabor(null)
      setFormData({
        nombre: "",
        descripcion: "",
        status: "activo",
      })
    }
    setIsDialogOpen(true)
  }

  const handleSave = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!formData.nombre.trim()) {
      toast.error("El nombre de la labor es obligatorio.")
      return
    }

    setSaving(true)
    try {
      const url = editingLabor ? `/labores/${editingLabor.id}` : "/labores"
      const method = editingLabor ? "PUT" : "POST"

      const res = await apiFetch(url, {
        method,
        body: JSON.stringify(formData),
      })

      if (res.ok) {
        toast.success(editingLabor ? "Labor actualizada exitosamente" : "Labor creada exitosamente")
        mutate(`/labores?${queryParams.toString()}`)
        setIsDialogOpen(false)
      } else {
        const msg = await getErrorMessage(res)
        toast.error(msg)
      }
    } catch (error) {
      console.error(error)
      toast.error("Error de conexión al guardar")
    } finally {
      setSaving(false)
    }
  }

  const handleDelete = async (id: number) => {
    if (confirm("¿Estás seguro de eliminar esta labor?")) {
      try {
        const res = await apiFetch(`/labores/${id}`, { method: "DELETE" })
        if (res.ok) {
          toast.success("Labor eliminada correctamente")
          mutate(`/labores?${queryParams.toString()}`)
        } else {
          toast.error("Error al eliminar la labor")
        }
      } 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">Gestión de Labores</h1>
            <p className="text-muted-foreground mt-1">Catálogo de labores agrícolas y tareas del campo</p>
          </div>

          <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
            <DialogTrigger asChild>
              <Button onClick={() => handleOpenDialog()} className="gap-2 bg-emerald-600 hover:bg-emerald-700 text-white">
                <Plus className="h-4 w-4" />
                Nueva Labor
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-md">
              <form onSubmit={handleSave}>
                <DialogHeader>
                  <DialogTitle>{editingLabor ? "Editar Labor" : "Nueva Labor"}</DialogTitle>
                  <DialogDescription>
                    {editingLabor ? "Modifica los datos de la labor agrícola" : "Registra un nuevo tipo de labor o tarea"}
                  </DialogDescription>
                </DialogHeader>

                <div className="grid gap-4 py-4">
                  <div className="space-y-2">
                    <Label htmlFor="nombre">Nombre de la Labor *</Label>
                    <Input
                      id="nombre"
                      value={formData.nombre}
                      onChange={(e) => {
                        if (e.target.value.length <= 100) {
                          setFormData({ ...formData, nombre: e.target.value })
                        }
                      }}
                      maxLength={100}
                      placeholder="Ej: Pulverización, Siembra, Cosecha"
                      required
                    />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="descripcion">Descripción / Notas (Opcional)</Label>
                    <Textarea
                      id="descripcion"
                      value={formData.descripcion}
                      onChange={(e) => {
                        if (e.target.value.length <= 500) {
                          setFormData({ ...formData, descripcion: e.target.value })
                        }
                      }}
                      maxLength={500}
                      placeholder="Ej: Aplicación terrestre de agroquímicos o fertilización foliar"
                      className="min-h-[90px]"
                    />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="status">Estado</Label>
                    <Select
                      value={formData.status}
                      onValueChange={(val) => setFormData({ ...formData, status: val })}
                    >
                      <SelectTrigger className="w-full">
                        <SelectValue placeholder="Seleccionar estado" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="activo">Activo</SelectItem>
                        <SelectItem value="inactivo">Inactivo</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

                <DialogFooter>
                  <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
                    Cancelar
                  </Button>
                  <Button type="submit" disabled={saving} className="bg-emerald-600 hover:bg-emerald-700 text-white">
                    {saving ? "Guardando..." : editingLabor ? "Guardar cambios" : "Crear labor"}
                  </Button>
                </DialogFooter>
              </form>
            </DialogContent>
          </Dialog>
        </div>

        {/* Stats Cards */}
        <div className="grid gap-4 md:grid-cols-3">
          <Card className="border-border shadow-sm">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">Total Labores</CardTitle>
              <Wrench className="h-4 w-4 text-emerald-600" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{totalLabores}</div>
              <p className="text-xs text-muted-foreground mt-1">Registradas en el sistema</p>
            </CardContent>
          </Card>

          <Card className="border-border shadow-sm">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">Labores Activas</CardTitle>
              <CheckCircle2 className="h-4 w-4 text-emerald-600" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-emerald-600">{activasCount}</div>
              <p className="text-xs text-muted-foreground mt-1">Disponibles para recetas</p>
            </CardContent>
          </Card>

          <Card className="border-border shadow-sm">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">Labores Inactivas</CardTitle>
              <XCircle className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-muted-foreground">{inactivasCount}</div>
              <p className="text-xs text-muted-foreground mt-1">Deshabilitadas en catálogo</p>
            </CardContent>
          </Card>
        </div>

        {/* Search & Filter */}
        <div className="flex flex-col sm:flex-row items-center gap-3">
          <div className="relative flex-1 w-full max-w-sm">
            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Buscar labor por nombre..."
              className="pl-8"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>

          <Select value={statusFilter} onValueChange={setStatusFilter}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Filtrar por estado" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="todos">Todos los estados</SelectItem>
              <SelectItem value="activo">Activas</SelectItem>
              <SelectItem value="inactivo">Inactivas</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {/* Table */}
        <div className="rounded-md border border-border bg-card shadow-sm">
          <Table>
            <TableHeader>
              <TableRow className="bg-muted/50">
                <TableHead className="w-[30%]">Nombre</TableHead>
                <TableHead className="w-[45%]">Descripción</TableHead>
                <TableHead className="w-[15%]">Estado</TableHead>
                <TableHead className="w-[10%] text-right">Acciones</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {isLoading ? (
                <TableRow>
                  <TableCell colSpan={4} className="text-center py-8 text-muted-foreground">
                    Cargando labores...
                  </TableCell>
                </TableRow>
              ) : dataList.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={4} className="text-center py-8 text-muted-foreground">
                    No se encontraron labores
                  </TableCell>
                </TableRow>
              ) : (
                dataList.map((labor: Labor) => (
                  <TableRow key={labor.id}>
                    <TableCell className="font-semibold text-foreground">{labor.nombre}</TableCell>
                    <TableCell className="text-muted-foreground text-sm">
                      {labor.descripcion || "—"}
                    </TableCell>
                    <TableCell>
                      <Badge variant={labor.status === "activo" ? "default" : "secondary"} className={labor.status === "activo" ? "bg-emerald-600 hover:bg-emerald-700" : ""}>
                        {labor.status === "activo" ? "Activa" : "Inactiva"}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end gap-1">
                        <Button variant="ghost" size="icon" onClick={() => handleOpenDialog(labor)}>
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button variant="ghost" size="icon" onClick={() => handleDelete(labor.id)}>
                          <Trash2 className="h-4 w-4 text-destructive" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>

          {lastPage > 1 && (
            <div className="p-4 border-t border-border">
              <PaginationControl
                currentPage={currentPage}
                lastPage={lastPage}
                total={total}
                onPageChange={setCurrentPage}
              />
            </div>
          )}
        </div>
      </div>
    </DashboardLayout>
  )
}