"use client"

import { useEffect, useState } from "react"
import { Plus, Pencil, Trash2, Loader2, AlertCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

interface FormaJuridica {
    id: number
    nombre: string
    codigo?: string
    descripcion?: string
    estado: boolean
}

export function FormasJuridicasConfig() {
    const [formas, setFormas] = useState<FormaJuridica[]>([])
    const [isLoading, setIsLoading] = useState(true)
    const [error, setError] = useState<string | null>(null)

    // Modal state
    const [isModalOpen, setIsModalOpen] = useState(false)
    const [editingForma, setEditingForma] = useState<FormaJuridica | null>(null)
    const [formData, setFormData] = useState({ nombre: "", codigo: "", descripcion: "", estado: true })
    const [isSaving, setIsSaving] = useState(false)

    // Delete state
    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
    const [deletingId, setDeletingId] = useState<number | null>(null)

    const fetchFormas = async () => {
        setIsLoading(true)
        setError(null)
        try {
            const token = localStorage.getItem("token")
            if (!token) throw new Error("No autenticado")

            const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/formas-juridicas`, {
                headers: {
                    Authorization: `Bearer ${token}`,
                    Accept: "application/json",
                },
            })

            if (!response.ok) throw new Error("Error al cargar formas jurídicas")

            const { data } = await response.json()
            setFormas(data)
        } catch (err) {
            console.error(err)
            setError("No se pudieron cargar las formas jurídicas")
        } finally {
            setIsLoading(false)
        }
    }

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

    const handleOpenModal = (forma?: FormaJuridica) => {
        if (forma) {
            setEditingForma(forma)
            setFormData({
                nombre: forma.nombre,
                codigo: forma.codigo || "",
                descripcion: forma.descripcion || "",
                estado: forma.estado
            })
        } else {
            setEditingForma(null)
            setFormData({ nombre: "", codigo: "", descripcion: "", estado: true })
        }
        setIsModalOpen(true)
    }

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault()
        setIsSaving(true)
        try {
            const token = localStorage.getItem("token")
            if (!token) throw new Error("No autenticado")

            const url = editingForma
                ? `${process.env.NEXT_PUBLIC_API_URL}/api/formas-juridicas/${editingForma.id}`
                : `${process.env.NEXT_PUBLIC_API_URL}/api/formas-juridicas`

            const method = editingForma ? "PUT" : "POST"

            const response = await fetch(url, {
                method,
                headers: {
                    "Content-Type": "application/json",
                    Authorization: `Bearer ${token}`,
                    Accept: "application/json",
                },
                body: JSON.stringify(formData),
            })

            if (!response.ok) {
                const errorData = await response.json()
                throw new Error(errorData.message || "Error al guardar")
            }

            await fetchFormas()
            setIsModalOpen(false)
        } catch (err: any) {
            console.error(err)
            alert(err.message || "Error al guardar la forma jurídica")
        } finally {
            setIsSaving(false)
        }
    }

    const handleDelete = async () => {
        if (!deletingId) return
        setIsSaving(true)
        try {
            const token = localStorage.getItem("token")
            if (!token) throw new Error("No autenticado")

            const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/formas-juridicas/${deletingId}`, {
                method: "DELETE",
                headers: {
                    Authorization: `Bearer ${token}`,
                    Accept: "application/json",
                },
            })

            if (!response.ok) throw new Error("Error al eliminar")

            await fetchFormas()
            setIsDeleteModalOpen(false)
        } catch (err) {
            console.error(err)
            alert("Error al eliminar la forma jurídica. Puede que esté en uso.")
        } finally {
            setIsSaving(false)
            setDeletingId(null)
        }
    }

    return (
        <Card>
            <CardHeader className="flex flex-row items-center justify-between">
                <div>
                    <CardTitle>Formas Jurídicas</CardTitle>
                    <CardDescription>Gestionar el catálogo de formas jurídicas disponibles</CardDescription>
                </div>
                <Button onClick={() => handleOpenModal()} size="sm" className="gap-2">
                    <Plus className="h-4 w-4" />
                    Agregar
                </Button>
            </CardHeader>
            <CardContent>
                {error && (
                    <Alert variant="destructive" className="mb-4">
                        <AlertCircle className="h-4 w-4" />
                        <AlertTitle>Error</AlertTitle>
                        <AlertDescription>{error}</AlertDescription>
                    </Alert>
                )}

                {isLoading ? (
                    <div className="flex justify-center py-8">
                        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
                    </div>
                ) : (
                    <div className="rounded-md border">
                        <Table>
                            <TableHeader>
                                <TableRow>
                                    <TableHead>Nombre</TableHead>
                                    <TableHead>Código</TableHead>
                                    <TableHead className="text-right">Acciones</TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                {formas.length === 0 ? (
                                    <TableRow>
                                        <TableCell colSpan={3} className="text-center py-8 text-muted-foreground">
                                            No hay formas jurídicas registradas
                                        </TableCell>
                                    </TableRow>
                                ) : (
                                    formas.map((forma) => (
                                        <TableRow key={forma.id}>
                                            <TableCell className="font-medium">{forma.nombre}</TableCell>
                                            <TableCell>{forma.codigo || "-"}</TableCell>
                                            <TableCell className="max-w-[200px] truncate" title={forma.descripcion}>{forma.descripcion || "-"}</TableCell>
                                            <TableCell>
                                                <span className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${forma.estado ? 'bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20' : 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/20'}`}>
                                                    {forma.estado ? 'Activo' : 'Inactivo'}
                                                </span>
                                            </TableCell>
                                            <TableCell className="text-right">
                                                <div className="flex justify-end gap-2">
                                                    <Button
                                                        variant="ghost"
                                                        size="icon"
                                                        onClick={() => handleOpenModal(forma)}
                                                    >
                                                        <Pencil className="h-4 w-4 text-muted-foreground" />
                                                    </Button>
                                                    <Button
                                                        variant="ghost"
                                                        size="icon"
                                                        onClick={() => {
                                                            setDeletingId(forma.id)
                                                            setIsDeleteModalOpen(true)
                                                        }}
                                                    >
                                                        <Trash2 className="h-4 w-4 text-destructive" />
                                                    </Button>
                                                </div>
                                            </TableCell>
                                        </TableRow>
                                    ))
                                )}
                            </TableBody>
                        </Table>
                    </div>
                )}

                {/* Modal Agregar/Editar */}
                <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
                    <DialogContent>
                        <DialogHeader>
                            <DialogTitle>{editingForma ? "Editar Forma Jurídica" : "Nueva Forma Jurídica"}</DialogTitle>
                            <DialogDescription>
                                Complete los datos de la forma jurídica. El nombre debe ser único.
                            </DialogDescription>
                        </DialogHeader>
                        <form onSubmit={handleSubmit} className="space-y-4">
                            <div className="grid gap-2">
                                <Label htmlFor="nombre">Nombre</Label>
                                <Input
                                    id="nombre"
                                    value={formData.nombre}
                                    onChange={(e) => setFormData({ ...formData, nombre: e.target.value })}
                                    placeholder="Ej: Cooperativa de Trabajo"
                                    required
                                />
                            </div>
                            <div className="grid gap-2">
                                <Label htmlFor="codigo">Código (Opcional)</Label>
                                <Input
                                    id="codigo"
                                    value={formData.codigo}
                                    onChange={(e) => setFormData({ ...formData, codigo: e.target.value })}
                                    placeholder="Ej: COOP-TRAB"
                                />
                            </div>
                            <div className="grid gap-2">
                                <Label htmlFor="descripcion">Descripción (Opcional)</Label>
                                <Input
                                    id="descripcion"
                                    value={formData.descripcion}
                                    onChange={(e) => setFormData({ ...formData, descripcion: e.target.value })}
                                    placeholder="Descripción breve..."
                                />
                            </div>
                            <div className="flex items-center gap-2">
                                <input
                                    type="checkbox"
                                    id="estado"
                                    checked={formData.estado}
                                    onChange={(e) => setFormData({ ...formData, estado: e.target.checked })}
                                    className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
                                />
                                <Label htmlFor="estado">Activo</Label>
                            </div>
                            <DialogFooter>
                                <Button type="button" variant="outline" onClick={() => setIsModalOpen(false)}>
                                    Cancelar
                                </Button>
                                <Button type="submit" disabled={isSaving}>
                                    {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                                    Guardar
                                </Button>
                            </DialogFooter>
                        </form>
                    </DialogContent>
                </Dialog>

                {/* Modal Eliminar */}
                <Dialog open={isDeleteModalOpen} onOpenChange={setIsDeleteModalOpen}>
                    <DialogContent>
                        <DialogHeader>
                            <DialogTitle>¿Está seguro?</DialogTitle>
                            <DialogDescription>
                                Esta acción eliminará la forma jurídica permanentemente. Si está en uso por algún trámite, no se podrá eliminar.
                            </DialogDescription>
                        </DialogHeader>
                        <DialogFooter>
                            <Button type="button" variant="outline" onClick={() => setIsDeleteModalOpen(false)}>
                                Cancelar
                            </Button>
                            <Button type="button" variant="destructive" onClick={handleDelete} disabled={isSaving}>
                                {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                                Eliminar
                            </Button>
                        </DialogFooter>
                    </DialogContent>
                </Dialog>
            </CardContent>
        </Card>
    )
}