"use client"

import { useState, useEffect } from "react"
import { AppLayout } from "@/components/app-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,
} from "@/components/ui/dialog"
import { Plus, Pencil, Trash2, ArrowLeft, Loader2, AlertCircle } from "lucide-react"
import Link from "next/link"
import { Textarea } from "@/components/ui/textarea"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

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

export default function OrganismosPage() {
  const [organismos, setOrganismos] = useState<Organismo[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
  const [editingItem, setEditingItem] = useState<Organismo | null>(null)
  const [deletingItem, setDeletingItem] = useState<Organismo | null>(null)
  const [formData, setFormData] = useState({ nombre: "", descripcion: "", estado: true })
  const [isSaving, setIsSaving] = useState(false)

  const fetchOrganismos = 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/organismos`, {
        headers: {
          Authorization: `Bearer ${token}`,
          Accept: "application/json",
        },
      })

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

      const { data } = await response.json()
      setOrganismos(data)
    } catch (err) {
      console.error(err)
      setError("No se pudieron cargar los organismos")
    } finally {
      setIsLoading(false)
    }
  }

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

  const handleAdd = () => {
    setEditingItem(null)
    setFormData({ nombre: "", descripcion: "", estado: true })
    setIsDialogOpen(true)
  }

  const handleEdit = (item: Organismo) => {
    setEditingItem(item)
    setFormData({
      nombre: item.nombre,
      descripcion: item.descripcion || "",
      estado: item.estado
    })
    setIsDialogOpen(true)
  }

  const handleDelete = (item: Organismo) => {
    setDeletingItem(item)
    setIsDeleteDialogOpen(true)
  }

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

      const url = editingItem
        ? `${process.env.NEXT_PUBLIC_API_URL}/api/organismos/${editingItem.id}`
        : `${process.env.NEXT_PUBLIC_API_URL}/api/organismos`

      const method = editingItem ? "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 fetchOrganismos()
      setIsDialogOpen(false)
    } catch (err: any) {
      console.error(err)
      alert(err.message || "Error al guardar el organismo")
    } finally {
      setIsSaving(false)
    }
  }

  const confirmDelete = async () => {
    if (!deletingItem) 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/organismos/${deletingItem.id}`, {
        method: "DELETE",
        headers: {
          Authorization: `Bearer ${token}`,
          Accept: "application/json",
        },
      })

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

      await fetchOrganismos()
      setIsDeleteDialogOpen(false)
    } catch (err) {
      console.error(err)
      alert("Error al eliminar el organismo. Puede que esté en uso.")
    } finally {
      setIsSaving(false)
      setDeletingItem(null)
    }
  }

  return (
    <AppLayout userRole="edicion">
      <div className="p-8">
        <div className="mb-8 flex items-center justify-between">
          <div>
            <div className="flex items-center gap-4 mb-2">
              <Link href="/catalogos">
                <Button variant="ghost" size="sm">
                  <ArrowLeft className="h-4 w-4 mr-2" />
                  Volver
                </Button>
              </Link>
            </div>
            <h1 className="text-3xl font-bold text-foreground">Organismos</h1>
            <p className="text-muted-foreground mt-2">Administrar organismos y entidades</p>
          </div>
          <Button onClick={handleAdd}>
            <Plus className="h-4 w-4 mr-2" />
            Agregar Organismo
          </Button>
        </div>

        {error && (
          <Alert variant="destructive" className="mb-4">
            <AlertCircle className="h-4 w-4" />
            <AlertTitle>Error</AlertTitle>
            <AlertDescription>{error}</AlertDescription>
          </Alert>
        )}

        <div className="rounded-lg border border-border bg-card">
          {isLoading ? (
            <div className="flex justify-center py-8">
              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
            </div>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Nombre</TableHead>
                  <TableHead>Descripción</TableHead>
                  <TableHead>Estado</TableHead>
                  <TableHead className="text-right">Acciones</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {organismos.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={4} className="text-center py-8 text-muted-foreground">
                      No hay organismos registrados
                    </TableCell>
                  </TableRow>
                ) : (
                  organismos.map((organismo) => (
                    <TableRow key={organismo.id}>
                      <TableCell className="font-medium">{organismo.nombre}</TableCell>
                      <TableCell className="text-muted-foreground max-w-[300px] truncate" title={organismo.descripcion}>
                        {organismo.descripcion || "-"}
                      </TableCell>
                      <TableCell>
                        <span
                          className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${organismo.estado ? "bg-green-500/10 text-green-500" : "bg-red-500/10 text-red-500"
                            }`}
                        >
                          {organismo.estado ? "Activo" : "Inactivo"}
                        </span>
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-2">
                          <Button variant="ghost" size="sm" onClick={() => handleEdit(organismo)}>
                            <Pencil className="h-4 w-4" />
                          </Button>
                          <Button variant="ghost" size="sm" onClick={() => handleDelete(organismo)}>
                            <Trash2 className="h-4 w-4 text-destructive" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          )}
        </div>

        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>{editingItem ? "Editar" : "Agregar"} Organismo</DialogTitle>
              <DialogDescription>
                {editingItem ? "Modifica los datos del organismo" : "Completa los datos para crear un nuevo organismo"}
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              <div className="space-y-2">
                <Label htmlFor="nombre">Nombre</Label>
                <Input
                  id="nombre"
                  value={formData.nombre}
                  onChange={(e) => setFormData({ ...formData, nombre: e.target.value })}
                  placeholder="Ej: AFIP"
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="descripcion">Descripción</Label>
                <Textarea
                  id="descripcion"
                  value={formData.descripcion}
                  onChange={(e) => setFormData({ ...formData, descripcion: e.target.value })}
                  placeholder="Describe el organismo..."
                  rows={3}
                />
              </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>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
                Cancelar
              </Button>
              <Button onClick={handleSave} disabled={isSaving || !formData.nombre.trim()}>
                {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                {editingItem ? "Guardar Cambios" : "Agregar"}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Eliminar Organismo</DialogTitle>
              <DialogDescription>
                ¿Estás seguro de que deseas eliminar el organismo "{deletingItem?.nombre}"? Esta acción no se puede
                deshacer.
              </DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)}>
                Cancelar
              </Button>
              <Button variant="destructive" onClick={confirmDelete} disabled={isSaving}>
                {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                Eliminar
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </AppLayout>
  )
}