"use client"

import { useState, useEffect, useCallback } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { Search, Plus, Eye, ChevronLeft, ChevronRight, X, Loader2, Archive, Info } from "lucide-react"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { useCatalogos } from "@/hooks/use-catalogos"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

// Tipos de datos
type EstadoTramite = "En proceso" | "Completado" | "Cancelado"

interface Tramite {
  id: number
  nombre: string
  forma_juridica: { id: number; nombre: string }
  formas_juridicas?: { id: number; nombre: string }[]
  organismos: { id: number; nombre: string }[]
  jurisdiccion: { id: number; nombre: string; tipo: string }
  updated_at: string
  estado: EstadoTramite
  deleted_at?: string | null
}

interface PaginationMeta {
  current_page: number
  last_page: number
  total: number
}

export function TramitesListado() {
  const router = useRouter()
  const { catalogos, isLoading: isLoadingCatalogos } = useCatalogos()

  // Filtros
  const [formaJuridicaId, setFormaJuridicaId] = useState<string>("")
  const [organismoId, setOrganismoId] = useState<string>("")
  const [tipoJurisdiccion, setTipoJurisdiccion] = useState<string>("")
  const [jurisdiccionId, setJurisdiccionId] = useState<string>("")
  const [searchQuery, setSearchQuery] = useState<string>("")
  const [incluirArchivados, setIncluirArchivados] = useState<boolean>(false)

  // Data & Pagination
  const [tramites, setTramites] = useState<Tramite[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [meta, setMeta] = useState<PaginationMeta | null>(null)
  const [currentPage, setCurrentPage] = useState(1)

  const fetchTramites = useCallback(async () => {
    try {
      setIsLoading(true)
      const token = localStorage.getItem("token")
      if (!token) return

      const params = new URLSearchParams()
      params.append("page", currentPage.toString())
      if (searchQuery) params.append("q", searchQuery)
      if (formaJuridicaId) params.append("forma_juridica_id", formaJuridicaId)
      if (organismoId) params.append("organismo_id", organismoId)
      if (jurisdiccionId) params.append("jurisdiccion_id", jurisdiccionId)
      if (incluirArchivados) params.append("incluir_archivados", "true")

      // Note: filtering by tipoJurisdiccion is handled by filtering the jurisdiction dropdown,
      // but if we wanted to filter by type in backend we'd need to implement it there too.
      // For now, we rely on the specific jurisdiccion_id being sent.

      const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/tramites?${params.toString()}`, {
        headers: {
          Authorization: `Bearer ${token}`,
          Accept: "application/json",
        },
      })

      if (!response.ok) throw new Error("Error al cargar trámites")

      const data = await response.json()
      setTramites(data.data)
      setMeta(data.meta)
    } catch (error) {
      console.error(error)
    } finally {
      setIsLoading(false)
    }
  }, [currentPage, searchQuery, formaJuridicaId, organismoId, jurisdiccionId, incluirArchivados])

  useEffect(() => {
    fetchTramites()
  }, [fetchTramites])

  const limpiarFiltros = () => {
    setFormaJuridicaId("")
    setOrganismoId("")
    setTipoJurisdiccion("")
    setJurisdiccionId("")
    setSearchQuery("")
    setCurrentPage(1)
  }

  // Filtrar jurisdicciones para el dropdown dependiente
  const jurisdiccionesFiltradas = catalogos.jurisdicciones.filter(
    (j) => !tipoJurisdiccion || j.tipo === tipoJurisdiccion,
  )

  const getEstadoBadge = (estado: EstadoTramite) => {
    const variants: Record<string, { variant: "default" | "secondary" | "destructive" | "outline"; label: string }> = {
      "En proceso": { variant: "default", label: "En proceso" },
      Completado: { variant: "outline", label: "Completado" },
      Cancelado: { variant: "destructive", label: "Cancelado" },
    }
    return variants[estado] || { variant: "secondary", label: estado }
  }

  return (
    <div className="min-h-screen bg-background p-6 lg:p-8">
      <div className="mx-auto max-w-7xl space-y-6">
        {/* Encabezado */}
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h1 className="text-3xl font-semibold tracking-tight text-foreground">Gestión de Trámites</h1>
            <p className="mt-1 text-sm text-muted-foreground">Administre y realice seguimiento de todos los trámites</p>
          </div>
          <Button onClick={() => router.push("/nuevo-tramite")} size="default" className="gap-2">
            <Plus className="h-4 w-4" />
            Nuevo Trámite
          </Button>
        </div>

        {/* Filtros */}
        <Card className="p-6">
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <h3 className="text-sm font-medium text-foreground">Filtros</h3>
              <Button
                variant="outline"
                size="sm"
                onClick={limpiarFiltros}
                className="gap-2 bg-transparent"
                disabled={!formaJuridicaId && !organismoId && !tipoJurisdiccion && !searchQuery}
              >
                <X className="h-4 w-4" />
                Limpiar filtros
              </Button>
            </div>

            <Alert className="bg-blue-500/10 text-blue-600 border-blue-500/20 py-2">
              <Info className="h-4 w-4" />
              <AlertDescription className="ml-2 text-xs">
                La lista de <strong>Jurisdicciones</strong> se actualizará según el{" "}
                <strong>Tipo de Jurisdicción</strong> seleccionado.
              </AlertDescription>
            </Alert>

            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
              {/* Forma Jurídica */}
              <div className="space-y-2 max-w-full">
                <label className="text-sm font-medium text-foreground">Forma Jurídica</label>
                <Select
                  value={formaJuridicaId}
                  onValueChange={(value) => {
                    setFormaJuridicaId(value)
                    setCurrentPage(1)
                  }}
                >
                  <SelectTrigger className="bg-background w-full">
                    <SelectValue placeholder="Seleccionar..." />
                  </SelectTrigger>
                  <SelectContent>
                    {catalogos.formas_juridicas.map((fj) => (
                      <SelectItem key={fj.id} value={fj.id.toString()}>
                        {fj.nombre}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              {/* Organismo */}
              <div className="space-y-2 max-w-full">
                <label className="text-sm font-medium text-foreground">Organismo</label>
                <Select
                  value={organismoId}
                  onValueChange={(value) => {
                    setOrganismoId(value)
                    setCurrentPage(1)
                  }}
                >
                  <SelectTrigger className="bg-background w-full">
                    <SelectValue placeholder="Seleccionar..." />
                  </SelectTrigger>
                  <SelectContent>
                    {catalogos.organismos.map((org) => (
                      <SelectItem key={org.id} value={org.id.toString()}>
                        {org.nombre}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              {/* Tipo Jurisdicción */}
              <div className="space-y-2 max-w-full">
                <label className="text-sm font-medium text-foreground">Tipo Jurisdicción</label>
                <Select
                  value={tipoJurisdiccion}
                  onValueChange={(value) => {
                    setTipoJurisdiccion(value)
                    setJurisdiccionId("") // Reset specific jurisdiction when type changes
                    setCurrentPage(1)
                  }}
                >
                  <SelectTrigger className="bg-background w-full">
                    <SelectValue placeholder="Seleccionar..." />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="nacion">Nación</SelectItem>
                    <SelectItem value="provincia">Provincia</SelectItem>
                    <SelectItem value="municipio">Municipio</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              {/* Detalle Jurisdicción */}
              <div className="space-y-2 max-w-full">
                <label className="text-sm font-medium text-foreground">Jurisdicción</label>
                <Select
                  value={jurisdiccionId}
                  onValueChange={(value) => {
                    setJurisdiccionId(value)
                    setCurrentPage(1)
                  }}
                  disabled={!tipoJurisdiccion && jurisdiccionesFiltradas.length > 100} // Optional optimization
                >
                  <SelectTrigger className="bg-background w-full">
                    <SelectValue placeholder="Seleccionar..." />
                  </SelectTrigger>
                  <SelectContent>
                    {jurisdiccionesFiltradas.map((j) => (
                      <SelectItem key={j.id} value={j.id.toString()}>
                        {j.nombre}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            {/* Buscador */}
            <div className="space-y-2 w-1/2">
              <label className="text-sm font-medium text-foreground">Buscar por nombre</label>
              <div className="relative">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                  placeholder="Buscar trámite..."
                  value={searchQuery}
                  onChange={(e) => {
                    setSearchQuery(e.target.value)
                    setCurrentPage(1)
                  }}
                  className="bg-background pl-9"
                />
              </div>
            </div>

            {/* Filtro Archivados */}
            <div className="flex items-center space-x-2">
              <Checkbox
                id="mostrar-archivados"
                checked={incluirArchivados}
                onCheckedChange={(checked) => {
                  setIncluirArchivados(checked === true)
                  setCurrentPage(1)
                }}
              />
              <Label
                htmlFor="mostrar-archivados"
                className="text-sm font-medium cursor-pointer flex items-center gap-2"
              >
                <Archive className="h-4 w-4" />
                Mostrar archivados
              </Label>
            </div>
          </div>
        </Card>

        {/* Tabla */}
        <Card className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow className="border-border hover:bg-muted/50">
                <TableHead className="font-semibold text-foreground min-w-[180px] max-w-[280px]">Nombre</TableHead>
                <TableHead className="font-semibold text-foreground min-w-[140px] max-w-[200px]">
                  Forma Jurídica
                </TableHead>
                <TableHead className="font-semibold text-foreground min-w-[140px] max-w-[200px]">Organismo</TableHead>
                <TableHead className="font-semibold text-foreground min-w-[120px] max-w-[160px]">
                  Jurisdicción
                </TableHead>
                <TableHead className="font-semibold text-foreground min-w-[130px]">Última Actualización</TableHead>
                <TableHead className="font-semibold text-foreground min-w-[110px]">Estado</TableHead>
                <TableHead className="text-right font-semibold text-foreground min-w-[100px]">Acciones</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {isLoading ? (
                <TableRow>
                  <TableCell colSpan={7} className="h-24 text-center">
                    <div className="flex items-center justify-center gap-2">
                      <Loader2 className="h-4 w-4 animate-spin" />
                      Cargando trámites...
                    </div>
                  </TableCell>
                </TableRow>
              ) : tramites.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={7} className="h-24 text-center text-muted-foreground">
                    No se encontraron trámites con los filtros seleccionados.
                  </TableCell>
                </TableRow>
              ) : (
                tramites.map((tramite) => {
                  const estadoBadge = getEstadoBadge(tramite.estado)
                  const formasJuridicasText =
                    tramite.formas_juridicas && tramite.formas_juridicas.length > 0
                      ? tramite.formas_juridicas.map((fj) => fj.nombre).join(", ")
                      : tramite.forma_juridica?.nombre

                  const organismosText = tramite.organismos?.map((o) => o.nombre).join(", ")

                  return (
                    <TableRow key={tramite.id} className="border-border hover:bg-muted/30">
                      <TableCell className="font-medium text-foreground max-w-[280px]">
                        <TooltipProvider>
                          <Tooltip>
                            <TooltipTrigger asChild>
                              <div
                                className="truncate cursor-pointer hover:text-primary transition-colors"
                                onClick={() => router.push(`/tramite/${tramite.id}`)}
                              >
                                {tramite.nombre}
                              </div>
                            </TooltipTrigger>
                            <TooltipContent side="top" className="max-w-md">
                              <p>{tramite.nombre}</p>
                            </TooltipContent>
                          </Tooltip>
                        </TooltipProvider>
                      </TableCell>
                      <TableCell className="text-muted-foreground max-w-[200px]">
                        <TooltipProvider>
                          <Tooltip>
                            <TooltipTrigger asChild>
                              <div className="truncate cursor-help">{formasJuridicasText}</div>
                            </TooltipTrigger>
                            <TooltipContent side="top" className="max-w-md">
                              <p>{formasJuridicasText}</p>
                            </TooltipContent>
                          </Tooltip>
                        </TooltipProvider>
                      </TableCell>
                      <TableCell className="text-muted-foreground max-w-[200px]">
                        <TooltipProvider>
                          <Tooltip>
                            <TooltipTrigger asChild>
                              <div className="truncate cursor-help">{organismosText}</div>
                            </TooltipTrigger>
                            <TooltipContent side="top" className="max-w-md">
                              <p>{organismosText}</p>
                            </TooltipContent>
                          </Tooltip>
                        </TooltipProvider>
                      </TableCell>
                      <TableCell className="text-muted-foreground max-w-[160px]">
                        <TooltipProvider>
                          <Tooltip>
                            <TooltipTrigger asChild>
                              <div className="truncate cursor-help">{tramite.jurisdiccion?.nombre}</div>
                            </TooltipTrigger>
                            <TooltipContent side="top" className="max-w-md">
                              <p>{tramite.jurisdiccion?.nombre}</p>
                            </TooltipContent>
                          </Tooltip>
                        </TooltipProvider>
                      </TableCell>
                      <TableCell className="text-muted-foreground whitespace-nowrap">
                        {new Date(tramite.updated_at).toLocaleDateString("es-AR")}
                      </TableCell>
                      <TableCell>
                        <div className="flex flex-col gap-1">
                          <Badge variant={estadoBadge.variant} className="w-fit">
                            {estadoBadge.label}
                          </Badge>
                          {tramite.deleted_at && (
                            <Badge variant="outline" className="bg-gray-500/10 text-gray-600 border-gray-500/20 w-fit">
                              <Archive className="h-3 w-3 mr-1" />
                              Archivado
                            </Badge>
                          )}
                        </div>
                      </TableCell>
                      <TableCell className="text-right">
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => router.push(`/tramite/${tramite.id}`)}
                          className="gap-2"
                        >
                          <Eye className="h-4 w-4" />
                          Ver
                        </Button>
                      </TableCell>
                    </TableRow>
                  )
                })
              )}
            </TableBody>
          </Table>
        </Card>

        {/* Paginación */}
        {meta && (
          <div className="flex items-center justify-between border-t border-border px-6 py-4">
            <div className="text-sm text-muted-foreground">
              Mostrando {meta.current_page * 15 - 14} a {Math.min(meta.current_page * 15, meta.total)} de {meta.total}{" "}
              trámites
            </div>
            <div className="flex items-center gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                disabled={meta.current_page === 1}
                className="gap-1"
              >
                <ChevronLeft className="h-4 w-4" />
                Anterior
              </Button>
              <div className="flex items-center gap-1">
                <span className="text-sm font-medium">
                  Página {meta.current_page} de {meta.last_page}
                </span>
              </div>
              <Button
                variant="outline"
                size="sm"
                onClick={() => setCurrentPage((p) => Math.min(meta.last_page, p + 1))}
                disabled={meta.current_page === meta.last_page}
                className="gap-1"
              >
                Siguiente
                <ChevronRight className="h-4 w-4" />
              </Button>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}