"use client"

import { useEffect, useState } from "react"
import { AppLayout } from "@/components/app-layout"
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Building2, MapPin, FileText, Loader2 } from "lucide-react"
import Link from "next/link"

export default function CatalogosPage() {
  const [counts, setCounts] = useState({
    formasJuridicas: 0,
    organismos: 0,
    jurisdicciones: 0
  })
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    const fetchCounts = async () => {
      try {
        const token = localStorage.getItem("token")
        if (!token) return

        const [formasRes, organismosRes, jurisdiccionesRes] = await Promise.all([
          fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/formas-juridicas`, {
            headers: { Authorization: `Bearer ${token}`, Accept: "application/json" }
          }),
          fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/organismos`, {
            headers: { Authorization: `Bearer ${token}`, Accept: "application/json" }
          }),
          fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/jurisdicciones`, {
            headers: { Authorization: `Bearer ${token}`, Accept: "application/json" }
          })
        ])

        const [formas, organismos, jurisdicciones] = await Promise.all([
          formasRes.json(),
          organismosRes.json(),
          jurisdiccionesRes.json()
        ])

        setCounts({
          formasJuridicas: formas.data?.length || 0,
          organismos: organismos.data?.length || 0,
          jurisdicciones: jurisdicciones.data?.length || 0
        })
      } catch (err) {
        console.error("Error fetching catalog counts:", err)
      } finally {
        setIsLoading(false)
      }
    }

    fetchCounts()
  }, [])

  const catalogos = [
    {
      title: "Formas Jurídicas",
      description: "Gestionar tipos de formas jurídicas disponibles",
      icon: Building2,
      count: counts.formasJuridicas,
      href: "/catalogos/formas-juridicas",
    },
    {
      title: "Organismos",
      description: "Administrar organismos y entidades",
      icon: FileText,
      count: counts.organismos,
      href: "/catalogos/organismos",
    },
    {
      title: "Jurisdicciones",
      description: "Configurar jurisdicciones (nación, provincias, municipios)",
      icon: MapPin,
      count: counts.jurisdicciones,
      href: "/catalogos/jurisdicciones",
    },
  ]

  return (
    <AppLayout userRole="edicion">
      <div className="p-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-foreground">Configuraciones</h1>
          <p className="text-muted-foreground mt-2">Gestión de catálogos y datos maestros del sistema</p>
        </div>

        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {catalogos.map((catalogo) => {
            const Icon = catalogo.icon
            return (
              <Link key={catalogo.title} href={catalogo.href}>
                <Card className="hover:border-primary/50 transition-colors cursor-pointer h-full">
                  <CardHeader>
                    <div className="flex items-center justify-between">
                      <Icon className="h-8 w-8 text-primary" />
                      {isLoading ? (
                        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
                      ) : (
                        <span className="text-2xl font-bold text-muted-foreground">{catalogo.count}</span>
                      )}
                    </div>
                    <CardTitle className="mt-4">{catalogo.title}</CardTitle>
                    <CardDescription>{catalogo.description}</CardDescription>
                  </CardHeader>
                </Card>
              </Link>
            )
          })}
        </div>
      </div>
    </AppLayout>
  )
}