"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import ReactMarkdown from "react-markdown"
import remarkGfm from "remark-gfm"
import {
  ArrowLeft,
  CheckCircle2,
  Edit3,
  FileText,
  Paperclip,
  History,
  Download,
  Eye,
  GitCompare,
  Calendar,
  MapPin,
  Building2,
  Globe,
  ExternalLink,
  DollarSign,
  MessageSquare,
  AlertCircle,
  Copy,
  Loader2,
  Archive,
  RefreshCcw,
} from "lucide-react"

// Tipos
interface TramiteData {
  id: string
  nombre: string
  formaJuridica: string
  organismos: string[]
  jurisdiccion: string
  ultimaInteraccion: string
  estado: "En proceso" | "Completado" | "Cancelado"
  createdAt: string
  deletedAt?: string | null
  documentacion: string
  requiereCertificaciones: boolean
  certificacionesDetalle: string
  pasoAPaso: string
  costos: Array<{
    descripcion: string
    monto: string
    moneda: string
    observacion: string
  }>
  comentariosInternos: string
  linkGuia: string
  dondeSeRealiza: string
  comentarios?: Array<{
    id: number
    contenido: string
    created_at: string
    usuario_id: number
  }>
}

interface Adjunto {
  id: string
  tipo: string
  titulo: string
  archivo: string
  tamaño: string
  fechaSubida: string
  url?: string
}

interface VersionHistorial {
  id: string
  versionNro: string
  tipoCambio: "confirmación" | "edición menor" | "renovación mayor"
  fecha: string
  autor: string
}

interface TramiteDetalleProps {
  tramiteId: string
  onConfirm?: () => void
  onEditMinor?: (data: any) => void
  onRenewMajor?: (data: any) => void
  onViewVersion?: (versionId: string) => void
  onCompareVersions?: (versionA: string, versionB: string) => void
}

const tipoCambioColors = {
  confirmación: "bg-green-500/10 text-green-500 border-green-500/20",
  "edición menor": "bg-blue-500/10 text-blue-500 border-blue-500/20",
  "renovación mayor": "bg-purple-500/10 text-purple-500 border-purple-500/20",
  creación: "bg-slate-500/10 text-slate-700 border-slate-500/20",
}

const getEstadoBadge = (estado: string) => {
  switch (estado) {
    case "En proceso":
      return "bg-blue-500/10 text-blue-500 border-blue-500/20"
    case "Completado":
      return "bg-gray-500/10 text-gray-400 border-gray-500/20"
    case "Cancelado":
      return "bg-red-500/10 text-red-500 border-red-500/20"
    default:
      return "bg-gray-500/10 text-gray-400 border-gray-500/20"
  }
}

export function TramiteDetalle({
  tramiteId,
  onConfirm,
  onEditMinor,
  onRenewMajor,
  onViewVersion,
  onCompareVersions,
}: TramiteDetalleProps) {
  const router = useRouter()
  const [tramite, setTramite] = useState<TramiteData | null>(null)
  const [adjuntos, setAdjuntos] = useState<Adjunto[]>([])
  const [historial, setHistorial] = useState<VersionHistorial[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  // Estados para modales
  const [modalConfirmar, setModalConfirmar] = useState(false)
  const [modalArchivar, setModalArchivar] = useState(false)
  const [modalRestaurar, setModalRestaurar] = useState(false)
  const [comentarioConfirmacion, setComentarioConfirmacion] = useState("")

  useEffect(() => {
    const fetchTramite = async () => {
      try {
        const token = localStorage.getItem("token")
        if (!token) {
          throw new Error("No autenticado")
        }

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

        if (!response.ok) {
          throw new Error("Error al cargar el trámite")
        }

        const { data } = await response.json()

        // Map backend data to frontend interface
        const mappedTramite: TramiteData = {
          id: data.id.toString(),
          nombre: data.nombre,
          formaJuridica:
            data.formas_juridicas && data.formas_juridicas.length > 0
              ? data.formas_juridicas.map((fj: any) => fj.nombre).join(", ")
              : data.forma_juridica?.nombre || "No especificada",
          organismos: (data.organismos || []).map((o: any) => o.nombre),
          jurisdiccion: data.jurisdiccion?.nombre || "No especificada",
          ultimaInteraccion: data.updated_at,
          estado: data.estado,
          createdAt: data.created_at,
          deletedAt: data.deleted_at,
          documentacion: data.documentacion || "",
          requiereCertificaciones: data.requiere_certificaciones_externas,
          certificacionesDetalle: data.certificaciones_detalle || "",
          pasoAPaso: data.paso_a_paso || "",
          costos: data.costos || [],
          comentariosInternos: data.comentarios_internos || "",
          linkGuia: data.link_guia_oficial || "",
          dondeSeRealiza: data.donde_se_realiza || "",
          comentarios: data.comentarios || [],
        }

        const mappedAdjuntos: Adjunto[] = (data.adjuntos || []).map((adj: any) => ({
          id: adj.id.toString(),
          tipo: adj.tipo,
          titulo: adj.titulo || "Sin título",
          archivo: adj.ruta ? adj.ruta.split("/").pop() : "Archivo",
          tamaño: adj.tamano ? `${Math.round(adj.tamano / 1024)} KB` : "N/A",
          fechaSubida: adj.created_at,
          url: adj.url, // Ensure URL is passed if available
        }))

        const mappedHistorial: VersionHistorial[] = (data.versiones || []).map((ver: any) => ({
          id: ver.id.toString(),
          versionNro: ver.version_nro || "1.0", // Assuming version number exists
          tipoCambio: ver.tipo_cambio || "edición menor",
          fecha: ver.created_at,
          autor: ver.autor || ver.user?.name || "Sistema",
        }))

        setTramite(mappedTramite)
        setAdjuntos(mappedAdjuntos)
        setHistorial(mappedHistorial)
      } catch (err) {
        console.error(err)
        setError("No se pudo cargar la información del trámite")
      } finally {
        setIsLoading(false)
      }
    }

    fetchTramite()
  }, [tramiteId])

  // Handlers
  const handleConfirmar = async () => {
    try {
      const token = localStorage.getItem("token")
      if (!token) throw new Error("No autenticado")

      const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/tramites/${tramiteId}/confirmar`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
          Accept: "application/json",
        },
        body: JSON.stringify({ comentario: comentarioConfirmacion }),
      })

      if (!response.ok) throw new Error("Error al confirmar el trámite")

      // Refresh data
      window.location.reload()
    } catch (err) {
      console.error(err)
      alert("Error al confirmar el trámite")
    } finally {
      setModalConfirmar(false)
      setComentarioConfirmacion("")
    }
  }

  const handleEditar = () => {
    router.push(`/tramite/${tramiteId}/editar`)
  }

  const handleDuplicar = () => {
    router.push(`/tramite/${tramiteId}/duplicar`)
  }

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

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

      if (!response.ok) throw new Error("Error al archivar el trámite")

      // Redirect to home
      router.push("/")
    } catch (err) {
      console.error(err)
      alert("Error al archivar el trámite")
    } finally {
      setModalArchivar(false)
    }
  }

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

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

      if (!response.ok) throw new Error("Error al restaurar el trámite")

      // Refresh data
      window.location.reload()
    } catch (err) {
      console.error(err)
      alert("Error al restaurar el trámite")
    } finally {
      setModalRestaurar(false)
    }
  }

  if (isLoading) {
    return (
      <div className="flex h-screen items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    )
  }

  if (error || !tramite) {
    return (
      <div className="flex h-screen items-center justify-center text-destructive">
        {error || "No se encontró el trámite"}
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <div className="border-b border-border bg-card">
        <div className="mx-auto max-w-7xl px-6 py-6 lg:px-8">
          {/* Botón volver */}
          <Button
            variant="ghost"
            size="sm"
            onClick={() => router.push("/")}
            className="mb-4 gap-2 text-muted-foreground hover:text-foreground"
          >
            <ArrowLeft className="h-4 w-4" />
            Volver al listado
          </Button>

          {/* Título y chips */}
          <div className="space-y-4 mb-6">
            <div className="flex items-center justify-between">
              <div className="space-y-1">
                <div className="flex items-center gap-3">
                  <h1 className="text-3xl font-semibold tracking-tight text-foreground">{tramite.nombre}</h1>
                  <Badge className={getEstadoBadge(tramite.estado)}>{tramite.estado}</Badge>
                  {tramite.deletedAt && (
                    <Badge variant="outline" className="bg-gray-500/10 text-gray-600 border-gray-500/20">
                      <Archive className="h-3 w-3 mr-1" />
                      Archivado
                    </Badge>
                  )}
                </div>
                <p className="text-muted-foreground">
                  {tramite.organismos.join(", ")} • {tramite.jurisdiccion}
                </p>
              </div>

              {/* Acciones */}
              <div className="flex gap-2">
                {tramite.deletedAt ? (
                  <Button variant="outline" onClick={() => setModalRestaurar(true)}>
                    <RefreshCcw className="mr-2 h-4 w-4" />
                    Restaurar
                  </Button>
                ) : (
                  <>
                    <Button variant="outline" onClick={handleDuplicar}>
                      <Copy className="mr-2 h-4 w-4" />
                      Duplicar
                    </Button>
                    <Button variant="outline" onClick={handleEditar}>
                      <Edit3 className="mr-2 h-4 w-4" />
                      Editar
                    </Button>
                    <Button
                      variant="outline"
                      onClick={() => setModalArchivar(true)}
                      className="text-red-500 hover:text-red-600"
                    >
                      <Archive className="mr-2 h-4 w-4" />
                      Archivar
                    </Button>
                    <Button onClick={() => setModalConfirmar(true)}>
                      <CheckCircle2 className="mr-2 h-4 w-4" />
                      Confirmar
                    </Button>
                  </>
                )}
              </div>
            </div>

            <div className="flex flex-wrap items-center gap-2">
              <Badge variant="secondary" className="gap-1.5 px-3 py-1">
                <Building2 className="h-3.5 w-3.5" />
                {tramite.formaJuridica}
              </Badge>
              <Badge variant="secondary" className="gap-1.5 px-3 py-1">
                <Globe className="h-3.5 w-3.5" />
                {tramite.organismos.length > 0 ? tramite.organismos.join(", ") : "No especificado"}
              </Badge>
              <Badge variant="secondary" className="gap-1.5 px-3 py-1">
                <MapPin className="h-3.5 w-3.5" />
                {tramite.jurisdiccion}
              </Badge>
              <Badge variant="outline" className="gap-1.5 px-3 py-1">
                <Calendar className="h-3.5 w-3.5" />
                Última interacción: {new Date(tramite.ultimaInteraccion).toLocaleDateString("es-AR")}
              </Badge>
            </div>
          </div>
        </div>
      </div>

      {/* Contenido con Tabs */}
      <div className="mx-auto max-w-7xl px-6 py-8 lg:px-8">
        <Tabs defaultValue="ficha" className="space-y-6">
          <TabsList className="grid w-full max-w-md grid-cols-3">
            <TabsTrigger value="ficha" className="gap-2">
              <FileText className="h-4 w-4" />
              Ficha
            </TabsTrigger>
            <TabsTrigger value="adjuntos" className="gap-2">
              <Paperclip className="h-4 w-4" />
              Adjuntos
            </TabsTrigger>
            <TabsTrigger value="historial" className="gap-2">
              <History className="h-4 w-4" />
              Historial
            </TabsTrigger>
          </TabsList>

          {/* Tab: Ficha */}
          <TabsContent value="ficha" className="space-y-6">
            {/* Información General */}
            <Card>
              <CardHeader>
                <CardTitle>Información General</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid gap-4 sm:grid-cols-2">
                  <div>
                    <Label className="text-muted-foreground">Fecha de Creación</Label>
                    <p className="mt-1 text-foreground">
                      {tramite.createdAt
                        ? new Date(tramite.createdAt).toLocaleDateString("es-AR", {
                            year: "numeric",
                            month: "2-digit",
                            day: "2-digit",
                          })
                        : "No especificada"}
                    </p>
                  </div>
                  <div>
                    <Label className="text-muted-foreground">Dónde se realiza</Label>
                    <p className="mt-1 text-foreground">{tramite.dondeSeRealiza}</p>
                  </div>
                </div>
                {tramite.linkGuia && (
                  <div>
                    <Label className="text-muted-foreground">Guía Oficial</Label>
                    <a
                      href={tramite.linkGuia}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="mt-1 flex items-center gap-2 text-primary hover:underline"
                    >
                      {tramite.linkGuia}
                      <ExternalLink className="h-3.5 w-3.5" />
                    </a>
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Documentación y Requisitos */}
            <Card>
              <CardHeader>
                <CardTitle>Documentación y Requisitos</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="prose prose-sm max-w-none dark:prose-invert [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5">
                  <ReactMarkdown remarkPlugins={[remarkGfm]}>{tramite.documentacion}</ReactMarkdown>
                </div>
              </CardContent>
            </Card>

            {/* Certificaciones Externas */}
            {tramite.requiereCertificaciones && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <AlertCircle className="h-5 w-5 text-amber-500" />
                    Certificaciones Externas Requeridas
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-foreground">{tramite.certificacionesDetalle}</p>
                </CardContent>
              </Card>
            )}

            {/* Paso a Paso */}
            <Card>
              <CardHeader>
                <CardTitle>Paso a Paso</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="prose prose-sm max-w-none dark:prose-invert [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5">
                  <div
                    className="font-sans text-sm text-foreground"
                    dangerouslySetInnerHTML={{ __html: tramite.pasoAPaso }}
                  />
                </div>
              </CardContent>
            </Card>

            {/* Costos */}
            {tramite.costos.length > 0 && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <DollarSign className="h-5 w-5" />
                    Costos
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    {tramite.costos.map((costo, index) => (
                      <div key={index} className="rounded-lg border border-border bg-muted/30 p-4">
                        <div className="flex items-start justify-between gap-4">
                          <div className="flex-1">
                            <p className="font-medium text-foreground">{costo.descripcion}</p>
                            {costo.observacion && (
                              <p className="mt-1 text-sm text-muted-foreground">{costo.observacion}</p>
                            )}
                          </div>
                          <div className="text-right">
                            <p className="text-lg font-semibold text-foreground">
                              {costo.moneda} ${Number(costo.monto).toLocaleString("es-AR")}
                            </p>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            )}

            {/* Comentarios Internos */}
            {tramite.comentariosInternos && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <MessageSquare className="h-5 w-5" />
                    Comentarios Internos
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-muted-foreground">{tramite.comentariosInternos}</p>
                </CardContent>
              </Card>
            )}

            {/* Información de Actualización */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <CheckCircle2 className="h-5 w-5 text-green-500" />
                  Información de Actualización
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div>
                  <Label className="text-muted-foreground">Última Actualización</Label>
                  <p className="mt-1 text-foreground">
                    {new Date(tramite.ultimaInteraccion).toLocaleString("es-AR", {
                      dateStyle: "long",
                      timeStyle: "short",
                    })}
                  </p>
                </div>
                {tramite.comentarios && tramite.comentarios.length > 0 && (
                  <div>
                    <Label className="text-muted-foreground">Último Comentario de Confirmación</Label>
                    <p className="mt-1 text-sm text-foreground">
                      {tramite.comentarios[tramite.comentarios.length - 1].contenido}
                    </p>
                    <p className="mt-1 text-xs text-muted-foreground">
                      {new Date(tramite.comentarios[tramite.comentarios.length - 1].created_at).toLocaleString(
                        "es-AR",
                        {
                          dateStyle: "medium",
                          timeStyle: "short",
                        },
                      )}
                    </p>
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          {/* Tab: Adjuntos */}
          <TabsContent value="adjuntos">
            <Card>
              <CardHeader>
                <CardTitle>Archivos Adjuntos</CardTitle>
                <CardDescription>Documentos y archivos relacionados con este trámite</CardDescription>
              </CardHeader>
              <CardContent>
                {adjuntos.length === 0 ? (
                  <p className="py-8 text-center text-sm text-muted-foreground">No hay archivos adjuntos</p>
                ) : (
                  <div className="space-y-2">
                    {adjuntos.map((adjunto) => (
                      <div
                        key={adjunto.id}
                        className="flex items-center justify-between rounded-lg border border-border bg-card p-4 transition-colors hover:bg-muted/50"
                      >
                        <div className="flex items-center gap-3 flex-1 min-w-0">
                          <FileText className="h-5 w-5 text-muted-foreground flex-shrink-0" />
                          <div className="flex-1 min-w-0">
                            <p className="font-medium text-foreground truncate">{adjunto.titulo}</p>
                            <div className="mt-1 flex items-center gap-3 text-xs text-muted-foreground">
                              <Badge variant="secondary" className="text-xs">
                                {adjunto.tipo}
                              </Badge>
                              <span className="truncate max-w-[200px]" title={adjunto.archivo}>
                                {adjunto.archivo}
                              </span>
                              <span>{adjunto.tamaño}</span>
                              <span>Subido: {new Date(adjunto.fechaSubida).toLocaleDateString("es-AR")}</span>
                            </div>
                          </div>
                        </div>
                        <div className="flex items-center gap-2">
                          <Button
                            variant="ghost"
                            size="sm"
                            className="gap-2"
                            onClick={() => adjunto.url && window.open(adjunto.url, "_blank")}
                            disabled={!adjunto.url}
                          >
                            <Eye className="h-4 w-4" />
                            Ver
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            className="gap-2"
                            onClick={() =>
                              window.open(
                                `${process.env.NEXT_PUBLIC_API_URL}/api/adjuntos/${adjunto.id}/download`,
                                "_blank",
                              )
                            }
                            disabled={!adjunto.id}
                          >
                            <Download className="h-4 w-4" />
                            Descargar
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          {/* Tab: Historial */}
          <TabsContent value="historial">
            <Card>
              <CardHeader>
                <CardTitle>Historial de Versiones</CardTitle>
                <CardDescription>Timeline de cambios y actualizaciones del trámite</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="relative space-y-4">
                  {/* Línea vertical del timeline */}
                  <div className="absolute left-[15px] top-2 bottom-2 w-px bg-border" />

                  {historial.length === 0 ? (
                    <p className="py-4 text-center text-sm text-muted-foreground">No hay historial disponible</p>
                  ) : (
                    historial.map((version, index) => (
                      <div key={version.id} className="relative flex gap-4">
                        {/* Punto del timeline */}
                        <div className="relative z-10 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border-2 border-border bg-background">
                          <div className="h-3 w-3 rounded-full bg-primary" />
                        </div>

                        {/* Contenido */}
                        <div className="flex-1 pb-8">
                          <div className="rounded-lg border border-border bg-card p-4">
                            <div className="flex items-start justify-between gap-4">
                              <div className="flex-1">
                                <div className="flex items-center gap-3">
                                  <h4 className="font-semibold text-foreground">Versión {version.versionNro}</h4>
                                  <Badge className={tipoCambioColors[version.tipoCambio] || "bg-gray-100"}>
                                    {version.tipoCambio}
                                  </Badge>
                                </div>
                                <div className="mt-2 flex items-center gap-4 text-sm text-muted-foreground">
                                  <span className="flex items-center gap-1">
                                    <Calendar className="h-3.5 w-3.5" />
                                    {new Date(version.fecha).toLocaleDateString("es-AR")}
                                  </span>
                                  <span>Por {version.autor}</span>
                                </div>
                              </div>
                              <div className="flex items-center gap-2">
                                <Button
                                  variant="outline"
                                  size="sm"
                                  onClick={() => router.push(`/tramite/${tramiteId}/version/${version.id}`)}
                                  className="gap-2"
                                >
                                  <Eye className="h-4 w-4" />
                                  Ver versión
                                </Button>
                                {index !== 0 && (
                                  <Button
                                    variant="outline"
                                    size="sm"
                                    onClick={() =>
                                      router.push(
                                        `/tramite/${tramiteId}/comparar?v1=${version.id}&v2=${historial[0].id}`,
                                      )
                                    }
                                    className="gap-2"
                                  >
                                    <GitCompare className="h-4 w-4" />
                                    Comparar
                                  </Button>
                                )}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    ))
                  )}
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>

      {/* Modal: Confirmar */}
      <Dialog open={modalConfirmar} onOpenChange={setModalConfirmar}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Confirmar que el trámite sigue igual</DialogTitle>
            <DialogDescription>
              Esto creará una nueva versión de tipo "confirmación" indicando que la información sigue vigente.
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="comentario">Comentario (opcional)</Label>
              <Textarea
                id="comentario"
                placeholder="Agregue un comentario sobre la confirmación..."
                value={comentarioConfirmacion}
                onChange={(e) => setComentarioConfirmacion(e.target.value)}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setModalConfirmar(false)}>
              Cancelar
            </Button>
            <Button onClick={handleConfirmar}>Confirmar</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Modal Archivar */}
      <Dialog open={modalArchivar} onOpenChange={setModalArchivar}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Archivar Trámite</DialogTitle>
            <DialogDescription>
              ¿Estás seguro de que deseas archivar este trámite? Desaparecerá del listado principal pero podrás
              recuperarlo usando el filtro de archivados.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setModalArchivar(false)}>
              Cancelar
            </Button>
            <Button variant="destructive" onClick={handleArchivar}>
              Archivar
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Modal Restaurar */}
      <Dialog open={modalRestaurar} onOpenChange={setModalRestaurar}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Restaurar Trámite</DialogTitle>
            <DialogDescription>
              ¿Estás seguro de que deseas restaurar este trámite? Volverá a aparecer en el listado principal.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setModalRestaurar(false)}>
              Cancelar
            </Button>
            <Button onClick={handleRestaurar}>Restaurar</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}