"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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

interface Jurisdiccion {
  id: number
  tipo: "nacion" | "provincia" | "municipio"
  nombre: string
  descripcion?: string
  estado: boolean
}

export default function JurisdiccionesPage() {
  const [jurisdicciones, setJurisdicciones] = useState<Jurisdiccion[]>([])
  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<Jurisdiccion | null>(null)
  const [deletingItem, setDeletingItem] = useState<Jurisdiccion | null>(null)
  const [formData, setFormData] = useState({ tipo: "", nombre: "", descripcion: "", estado: true })
  const [isSaving, setIsSaving] = useState(false)

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

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

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

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

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

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

  const handleDelete = (item: Jurisdiccion) => {
    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/jurisdicciones/${editingItem.id}`
        : `${process.env.NEXT_PUBLIC_API_URL}/api/jurisdicciones`

      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 fetchJurisdicciones()
      setIsDialogOpen(false)
    } catch (err: any) {
      console.error(err)
      alert(err.message || "Error al guardar la jurisdicción")
    } 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/jurisdicciones/${deletingItem.id}`, {
        method: "DELETE",
        headers: {
          Authorization: `Bearer ${token}`,
          Accept: "application/json",
        },
      })

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

      await fetchJurisdicciones()
      setIsDeleteDialogOpen(false)
    } catch (err) {
      console.error(err)
      alert("Error al eliminar la jurisdicción. 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">Jurisdicciones</h1>
            <p className="text-muted-foreground mt-2">Configurar jurisdicciones (nación, provincias, municipios)</p>
          </div>
          <Button onClick={handleAdd}>
            <Plus className="h-4 w-4 mr-2" />
            Agregar Jurisdicción
          </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>Tipo</TableHead>
                  <TableHead>Nombre</TableHead>
                  <TableHead>Descripción</TableHead>
                  <TableHead>Estado</TableHead>
                  <TableHead className="text-right">Acciones</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {jurisdicciones.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
                      No hay jurisdicciones registradas
                    </TableCell>
                  </TableRow>
                ) : (
                  jurisdicciones.map((jurisdiccion) => {
                    const tipoColors = {
                      nacion: "bg-blue-500/10 text-blue-700 border-blue-500/20",
                      provincia: "bg-purple-500/10 text-purple-700 border-purple-500/20",
                      municipio: "bg-yellow-500/10 text-yellow-700 border-yellow-500/20"
                    }

                    return (
                      <TableRow key={jurisdiccion.id}>
                        <TableCell>
                          <span className={`inline-flex items-center rounded-md px-2 py-1 text-xs font-medium capitalize border ${tipoColors[jurisdiccion.tipo]}`}>
                            {jurisdiccion.tipo}
                          </span>
                        </TableCell>
                        <TableCell className="font-medium">{jurisdiccion.nombre}</TableCell>
                        <TableCell className="text-muted-foreground max-w-[200px] truncate" title={jurisdiccion.descripcion}>
                          {jurisdiccion.descripcion || "-"}
                        </TableCell>
                        <TableCell>
                          <span
                            className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${jurisdiccion.estado ? "bg-green-500/10 text-green-500" : "bg-red-500/10 text-red-500"
                              }`}
                          >
                            {jurisdiccion.estado ? "Activo" : "Inactivo"}
                          </span>
                        </TableCell>
                        <TableCell className="text-right">
                          <div className="flex justify-end gap-2">
                            <Button variant="ghost" size="sm" onClick={() => handleEdit(jurisdiccion)}>
                              <Pencil className="h-4 w-4" />
                            </Button>
                            <Button variant="ghost" size="sm" onClick={() => handleDelete(jurisdiccion)}>
                              <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"} Jurisdicción</DialogTitle>
              <DialogDescription>
                {editingItem
                  ? "Modifica los datos de la jurisdicción"
                  : "Completa los datos para crear una nueva jurisdicción"}
              </DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              <div className="space-y-2">
                <Label htmlFor="tipo">Tipo</Label>
                <Select
                  value={formData.tipo}
                  onValueChange={(value) => setFormData({ ...formData, tipo: value })}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Seleccionar tipo" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="nacion">Nación</SelectItem>
                    <SelectItem value="provincia">Provincia</SelectItem>
                    <SelectItem value="municipio">Municipio</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <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: Buenos Aires"
                />
              </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="Descripción adicional..."
                  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.tipo || !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 Jurisdicción</DialogTitle>
              <DialogDescription>
                ¿Estás seguro de que deseas eliminar la jurisdicción "{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>
  )
}