"use client";

import React, { useState, useMemo } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  PhoneOff,
  Search,
  Filter,
  X,
  Clock,
  User,
  Wifi,
  WifiOff,
  AlertCircle,
  CheckCircle,
  Loader2,
  Eye,
  Globe,
  Signal,
  Activity,
  UserCheck,
  PhoneIncoming,
  PhoneOutgoing,
  Timer,
  Network,
  Server,
  Zap,
  RefreshCw,
} from "lucide-react";

// Importar tipos, utilidades y hooks
import type { FriendlyStatus } from "./types";
import { 
  getStatusAppearance,
  formatDuration,
  parseContactsInfo,
  getLatencyBadgeClass,
  getNameInitials,
  extractConnectedContacts,
  isExtension,
  isTrunk
} from "./utils";
import {
  useAmiConnection,
  useClock,
  useExtensions,
  useAmiEvents,
  useFilters,
  useEndpointDetails,
  useCallOperations,
  useEndpointsLatency
} from "./hooks";

export default function DashboardPage() {
  // Estados usando hooks personalizados
  const connected = useAmiConnection();
  const now = useClock();
  const { 
    extensions, 
    setExtensions, 
    isLoading, 
    initialReady, 
    forceCleanupOrphanedStates, 
    manualRefresh 
  } = useExtensions();
  const {
    searchQuery,
    setSearchQuery,
    statusFilter,
    toggleStatusFilter,
    allExtensions,
    filteredExtensions
  } = useFilters(extensions);
  const {
    detailsPeer,
    setDetailsPeer,
    endpointDetails,
    loadingDetails
  } = useEndpointDetails();
  const { originateCall: _originateCall, hangupChannel } = useCallOperations();
  const { latencyData: endpointsLatency, isLoadingLatency } = useEndpointsLatency();

  // Estado local para conexión AMI
  const [amiConnected, setAmiConnected] = useState<boolean | null>(connected);

  // Usar eventos SSE
  useAmiEvents(setExtensions, setAmiConnected);

  // Separar extensiones y troncales
  const extensionsList = filteredExtensions.filter((ext) => isExtension(ext.peer));
  const trunksList = filteredExtensions.filter((ext) => isTrunk(ext.peer));

  // Estados únicos para filtros
  const uniqueFriendlyStatuses = useMemo(() => {
    const statusCounts: Record<FriendlyStatus, number> = {
      "Disponible": 0,
      "Timbrando": 0,
      "Sonando": 0,
      "En llamada": 0,
      "Ocupado": 0,
      "En espera": 0,
      "No registrado": 0,
      "Desconectado": 0,
      "No disponible": 0,
      "Desconocido": 0,
    };

    for (const ext of allExtensions) {
      for (const [label, statuses] of Object.entries({
        "Disponible": ["NotInUse", "Registered"],
        "Timbrando": ["Ringing"],
        "Sonando": ["Ringing"],
        "En llamada": ["InUse", "RingInUse"],
        "Ocupado": ["Busy"],
        "En espera": ["OnHold", "Hold"],
        "No registrado": ["Unregistered", "Unavailable", "Invalid"],
        "Desconectado": ["Unreachable"],
        "Desconocido": ["Unknown"],
      })) {
        if (statuses.includes(ext.status)) {
          statusCounts[label as FriendlyStatus]++;
          break;
        }
      }
    }

    return Object.entries(statusCounts)
      .filter(([, count]) => count > 0)
      .map(([label]) => label as FriendlyStatus);
  }, [allExtensions]);

  // Estado de conexión de proveedores
  const providerConnectionStatus = useMemo(() => {
    const trunks = allExtensions.filter((ext) => isTrunk(ext.peer));
    
    const connectedTrunks = trunks.filter((trunk) => {
      const contactsInfo = parseContactsInfo(trunk.contacts);
      return contactsInfo.ips.length > 0;
    });
    
    return {
      total: trunks.length,
      connected: connectedTrunks.length,
      percentage: trunks.length > 0 ? (connectedTrunks.length / trunks.length) * 100 : 0,
    };
  }, [allExtensions]);

  // Latencia promedio
  const averageLatency = useMemo(() => {
    const trunks = allExtensions.filter((ext) => isTrunk(ext.peer));
    const latencies: number[] = [];
    
    for (const trunk of trunks) {
      const contactsInfo = parseContactsInfo(trunk.contacts);
      if (contactsInfo.latencyMs !== undefined) {
        latencies.push(contactsInfo.latencyMs);
      }
    }
    
    return latencies.length > 0 
      ? Math.round(latencies.reduce((sum, lat) => sum + lat, 0) / latencies.length)
      : null;
  }, [allExtensions]);

  // Función para extraer host de contactos
  const extractHostFromContacts = (contacts: string | undefined) => {
    if (!contacts) return null;
    const match = /sip:([^@]+@)?([^:;]+)/.exec(contacts);
    return match ? match[2] : null;
  };

  // Función para obtener estado amigable de troncal
  const getTrunkFriendlyStatus = (status: string | undefined, contacts: string | undefined) => {
    const hasContacts = contacts && contacts.trim() !== "";
    
    if (status === "Registered" && hasContacts) return "Conectado";
    if (status === "Registered" && !hasContacts) return "Registrado";
    if (status === "Unreachable") return "Sin conexión";
    if (status === "Unknown") return "Verificando";
    return status ?? "Desconocido";
  };

  // Función para obtener icono de estado de troncal
  const getTrunkStatusIcon = (status: string | undefined, contacts: string | undefined) => {
    const hasContacts = contacts && contacts.trim() !== "";
    
    if (status === "Registered" && hasContacts) return CheckCircle;
    if (status === "Registered" && !hasContacts) return Activity;
    if (status === "Unreachable") return AlertCircle;
    if (status === "Unknown") return Loader2;
    return Network;
  };

  // Función para obtener color de estado de troncal
  const getTrunkStatusColor = (status: string | undefined, contacts: string | undefined) => {
    const hasContacts = contacts && contacts.trim() !== "";
    
    if (status === "Registered" && hasContacts) return "bg-green-100 text-green-800 border-green-200";
    if (status === "Registered" && !hasContacts) return "bg-yellow-100 text-yellow-800 border-yellow-200";
    if (status === "Reachable") return "bg-green-100 text-green-800 border-green-200";
    if (status === "Unreachable") return "bg-red-100 text-red-800 border-red-200";
    if (status === "Unknown") return "bg-gray-100 text-gray-800 border-gray-200";
    return "bg-gray-100 text-gray-800 border-gray-200";
  };

  if (isLoading && !initialReady) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <Loader2 className="h-8 w-8 animate-spin mx-auto mb-4" />
          <p className="text-muted-foreground">Cargando dashboard...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="container mx-auto p-6 space-y-6">
      {/* Header del Dashboard */}
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Dashboard de Llamadas</h1>
          <p className="text-muted-foreground">
            Monitoreo en tiempo real de extensiones y troncales
          </p>
        </div>
        
        <div className="flex items-center gap-4">
          {/* Estado de conexión AMI */}
          <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-muted/50">
            {amiConnected === null ? (
              <AlertCircle className="h-4 w-4 text-yellow-500" />
            ) : amiConnected ? (
              <Wifi className="h-4 w-4 text-green-500" />
            ) : (
              <WifiOff className="h-4 w-4 text-red-500" />
            )}
            <span className="text-sm font-medium">
              {amiConnected === null ? "Verificando..." : amiConnected ? "Conectado" : "Desconectado"}
            </span>
          </div>

          {/* Estado de conexión del proveedor */}
          <Badge variant="outline" className={`${getLatencyBadgeClass(averageLatency)} px-3 py-1`}>
            <Server className="h-3 w-3 mr-1" />
            Proveedores: {providerConnectionStatus.connected}/{providerConnectionStatus.total}
            {averageLatency !== null && ` • ${averageLatency}ms`}
          </Badge>
        </div>
      </div>

      {/* Controles de búsqueda y filtros */}
      <div className="flex flex-col sm:flex-row gap-4">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Buscar por extensión, número o nombre..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-10"
          />
        </div>
        
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" className="gap-2">
              <Filter className="h-4 w-4" />
              Filtros
              {statusFilter.length > 0 && (
                <Badge variant="secondary" className="ml-1">
                  {statusFilter.length}
                </Badge>
              )}
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-56">
            {uniqueFriendlyStatuses.map((status) => (
              <DropdownMenuCheckboxItem
                key={status}
                checked={statusFilter.includes(status)}
                onCheckedChange={() => toggleStatusFilter(status)}
              >
                {status}
              </DropdownMenuCheckboxItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>

        {/* Botón de refresh manual */}
        <Button 
          variant="outline" 
          className="gap-2"
          onClick={manualRefresh}
          disabled={isLoading}
        >
          <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
          Actualizar
        </Button>

        {/* Botón de limpieza forzada */}
        <Button 
          variant="outline" 
          className="gap-2"
          onClick={forceCleanupOrphanedStates}
        >
          <Zap className="h-4 w-4" />
          Limpiar Estados
        </Button>
      </div>

      {/* Chips de filtros activos */}
      {statusFilter.length > 0 && (
        <div className="flex flex-wrap gap-2">
          {statusFilter.map((status) => (
            <Badge
              key={status}
              variant="secondary"
              className="gap-1 cursor-pointer hover:bg-secondary/80"
              onClick={() => toggleStatusFilter(status)}
            >
              {status}
              <X className="h-3 w-3" />
            </Badge>
          ))}
        </div>
      )}

      {/* Secciones de Anexos y Troncales */}
      <div className="grid gap-6">
        {/* Sección de Anexos */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <UserCheck className="h-5 w-5 text-blue-600" />
              Anexos ({extensionsList.length})
            </CardTitle>
          </CardHeader>
          <CardContent>
            {extensionsList.length === 0 ? (
              <div className="text-center py-12">
                <User className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                <p className="text-muted-foreground">No se encontraron anexos</p>
              </div>
            ) : (
              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                {extensionsList.map((ext) => {
                  const appearance = getStatusAppearance(ext.status);
                  const IconComponent = appearance.icon;
                  
                  return (
                    <Card key={ext.peer} className="relative hover:shadow-md transition-shadow">
                      <CardContent className="p-4">
                        <div className="flex items-start justify-between mb-3">
                          <div className="flex items-center gap-3">
                            <Avatar className="h-10 w-10">
                              <AvatarFallback className="bg-blue-100 text-blue-700 font-semibold">
                                {ext.callerIdName ? getNameInitials(ext.callerIdName) : ext.peer.slice(-2)}
                              </AvatarFallback>
                            </Avatar>
                            <div>
                              <div className="font-semibold text-lg">{ext.peer}</div>
                              {ext.callerIdName && (
                                <div className="text-sm text-muted-foreground">
                                  {ext.callerIdName}
                                </div>
                              )}
                            </div>
                          </div>
                          
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => setDetailsPeer(ext.peer)}
                            className="h-8 w-8 p-0"
                          >
                            <Eye className="h-4 w-4" />
                          </Button>
                        </div>
                        
                        <div className="space-y-3">
                          <Badge className={`${appearance.className} justify-start gap-2`}>
                            <IconComponent className="h-3 w-3" />
                            {ext.status === "NotInUse" ? "Disponible" : 
                             ext.status === "InUse" ? "En llamada" :
                             ext.status === "Ringing" ? "Timbrando" :
                             ext.status === "Busy" ? "Ocupado" : 
                             ext.status === "Unavailable" ? "No disponible" : ext.status}
                          </Badge>
                          
                          {ext.callerId && (
                            <div className="flex items-center gap-2 text-sm text-muted-foreground">
                              <PhoneOutgoing className="h-3 w-3" />
                              <span>Llamando: {ext.callerId}</span>
                            </div>
                          )}
                          
                          {ext.connectedLine && (
                            <div className="flex items-center gap-2 text-sm text-muted-foreground">
                              <PhoneIncoming className="h-3 w-3" />
                              <span>Conectado: {ext.connectedLine}</span>
                            </div>
                          )}
                          
                          {ext.ringStartedAt && (
                            <div className="flex items-center gap-2 text-sm text-orange-600">
                              <Timer className="h-3 w-3" />
                              <span>Sonando: {formatDuration(ext.ringStartedAt, now)}</span>
                            </div>
                          )}
                          
                          {ext.callStartedAt && (
                            <div className="flex items-center gap-2 text-sm text-green-600">
                              <Clock className="h-3 w-3" />
                              <span>En llamada: {formatDuration(ext.callStartedAt, now)}</span>
                            </div>
                          )}
                        </div>
                        
                        {ext.channel && (
                          <div className="mt-4 flex gap-2">
                            <Button
                              size="sm"
                              variant="destructive"
                              onClick={() => hangupChannel(ext.channel ?? "")}
                              className="w-full"
                            >
                              <PhoneOff className="h-3 w-3 mr-1" />
                              Colgar
                            </Button>
                          </div>
                        )}
                      </CardContent>
                    </Card>
                  );
                })}
              </div>
            )}
          </CardContent>
        </Card>

        {/* Sección de Troncales */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Network className="h-5 w-5 text-green-600" />
              Troncales ({trunksList.length})
            </CardTitle>
          </CardHeader>
          <CardContent>
            {trunksList.length === 0 ? (
              <div className="text-center py-12">
                <Server className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
                <p className="text-muted-foreground">No se encontraron troncales</p>
              </div>
            ) : (
              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                {trunksList.map((trunk) => {
                  const host = extractHostFromContacts(trunk.contacts);
                  const connectedContacts = extractConnectedContacts(null);
                  const friendlyStatus = getTrunkFriendlyStatus(trunk.status, trunk.contacts);
                  const StatusIcon = getTrunkStatusIcon(trunk.status, trunk.contacts);
                  const statusColor = getTrunkStatusColor(trunk.status, trunk.contacts);
                  const contactsInfo = parseContactsInfo(trunk.contacts ?? "");
                  
                  // Obtener latencia del hook
                  const endpointLatency = endpointsLatency[trunk.peer];
                  
                  return (
                    <Card key={trunk.peer} className="relative hover:shadow-md transition-shadow">
                      <CardContent className="p-4">
                        <div className="flex items-start justify-between mb-3">
                          <div className="flex items-center gap-3">
                            <div className="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
                              <Server className="h-5 w-5 text-green-700" />
                            </div>
                            <div>
                              <div className="font-semibold text-lg">{trunk.peer}</div>
                              {host && (
                                <div className="text-sm text-muted-foreground flex items-center gap-1">
                                  <Globe className="h-3 w-3" />
                                  {host}
                                </div>
                              )}
                            </div>
                          </div>
                          
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => setDetailsPeer(trunk.peer)}
                            className="h-8 w-8 p-0"
                          >
                            <Eye className="h-4 w-4" />
                          </Button>
                        </div>
                        
                        <div className="space-y-3">
                          <Badge className={`${statusColor} border justify-start gap-2`}>
                            <StatusIcon className={`h-3 w-3 ${trunk.status === "Unknown" ? "animate-spin" : ""}`} />
                            {friendlyStatus}
                          </Badge>
                          
                          {/* Información de latencia desde el hook */}
                          {endpointLatency?.latencyMs !== undefined && (
                            <div className="flex items-center gap-2 text-sm">
                              <Signal className="h-3 w-3 text-blue-500" />
                              <span className="text-muted-foreground">Latencia AMI:</span>
                              <Badge className={getLatencyBadgeClass(endpointLatency.latencyMs)}>
                                {endpointLatency.latencyMs}ms
                              </Badge>
                              {isLoadingLatency && (
                                <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
                              )}
                            </div>
                          )}
                          
                          {/* Información de latencia de contactos (fallback) */}
                          {!endpointLatency?.latencyMs && contactsInfo.latencyMs !== undefined && (
                            <div className="flex items-center gap-2 text-sm">
                              <Signal className="h-3 w-3 text-blue-500" />
                              <span className="text-muted-foreground">Latencia:</span>
                              <Badge className={getLatencyBadgeClass(contactsInfo.latencyMs)}>
                                {contactsInfo.latencyMs}ms
                              </Badge>
                            </div>
                          )}
                          
                          {/* Información de contactos conectados */}
                          {connectedContacts.length > 0 && (
                            <div className="space-y-2">
                              <div className="text-sm font-medium flex items-center gap-1">
                                <Activity className="h-3 w-3 text-green-500" />
                                Conexiones activas:
                              </div>
                              {connectedContacts.slice(0, 2).map((contact, idx) => (
                                <div key={idx} className="text-sm bg-muted/50 rounded-md p-2">
                                  <div className="flex justify-between items-center">
                                    <span className="font-mono text-xs">{contact.contact}</span>
                                    {contact.rtt && (
                                      <Badge variant="outline" className="text-xs">
                                        <Zap className="h-2 w-2 mr-1" />
                                        {contact.rtt}ms
                                      </Badge>
                                    )}
                                  </div>
                                </div>
                              ))}
                              {connectedContacts.length > 2 && (
                                <div className="text-xs text-muted-foreground">
                                  +{connectedContacts.length - 2} conexiones más
                                </div>
                              )}
                            </div>
                          )}
                          
                          {/* Mensaje cuando no hay conexiones */}
                          {connectedContacts.length === 0 && trunk.status === "Registered" && (
                            <div className="text-sm text-muted-foreground flex items-center gap-2">
                              <AlertCircle className="h-3 w-3 text-yellow-500" />
                              Sin conexiones activas
                            </div>
                          )}
                        </div>
                      </CardContent>
                    </Card>
                  );
                })}
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      {/* Mensaje cuando no hay resultados */}
      {filteredExtensions.length === 0 && !isLoading && (
        <Card>
          <CardContent className="p-8 text-center">
            <AlertCircle className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
            <h3 className="text-lg font-medium mb-2">No se encontraron resultados</h3>
            <p className="text-muted-foreground">
              Intenta ajustar los filtros o la búsqueda para ver más extensiones.
            </p>
          </CardContent>
        </Card>
      )}

      {/* Modal de detalles */}
      <Dialog open={!!detailsPeer} onOpenChange={() => setDetailsPeer(null)}>
        <DialogContent className="max-w-4xl max-h-[90vh] flex flex-col">
          <DialogHeader className="flex-shrink-0">
            <DialogTitle>Detalles del Endpoint: {detailsPeer}</DialogTitle>
            <DialogDescription>
              Información técnica detallada del endpoint seleccionado
            </DialogDescription>
          </DialogHeader>
          
          <div className="flex-1 overflow-y-auto">
            {loadingDetails ? (
              <div className="flex items-center justify-center py-8">
                <Loader2 className="h-6 w-6 animate-spin mr-2" />
                Cargando detalles...
              </div>
            ) : endpointDetails?.error ? (
              <div className="text-center py-8">
                <AlertCircle className="h-8 w-8 text-red-500 mx-auto mb-2" />
                <p className="text-red-600">{endpointDetails.error}</p>
              </div>
            ) : endpointDetails?.grouped ? (
              <div className="pr-2 space-y-4">
                {/* Información del Endpoint */}
                {(endpointDetails.grouped?.EndpointDetail?.length ?? 0) > 0 && (
                  <div className="border rounded-lg">
                    <div className="bg-muted/50 px-4 py-2 border-b">
                      <h4 className="font-semibold text-sm">Configuración del Endpoint</h4>
                    </div>
                    <div className="p-4">
                      <div className="bg-muted rounded-md p-3 max-h-60 overflow-y-auto">
                        <pre className="text-xs font-mono whitespace-pre-wrap break-all">
                          {JSON.stringify(endpointDetails.grouped?.EndpointDetail?.[0], null, 2)}
                        </pre>
                      </div>
                    </div>
                  </div>
                )}

                {/* Información de AOR */}
                {(endpointDetails.grouped?.AorDetail?.length ?? 0) > 0 && (
                  <div className="border rounded-lg">
                    <div className="bg-muted/50 px-4 py-2 border-b">
                      <h4 className="font-semibold text-sm">Configuración AOR</h4>
                    </div>
                    <div className="p-4">
                      <div className="bg-muted rounded-md p-3 max-h-60 overflow-y-auto">
                        <pre className="text-xs font-mono whitespace-pre-wrap break-all">
                          {JSON.stringify(endpointDetails.grouped?.AorDetail?.[0], null, 2)}
                        </pre>
                      </div>
                    </div>
                  </div>
                )}

                {/* Información de Autenticación */}
                {(Array.isArray(endpointDetails.grouped?.AuthDetail) && endpointDetails.grouped.AuthDetail.length > 0) && (
                  <div className="border rounded-lg">
                    <div className="bg-muted/50 px-4 py-2 border-b">
                      <h4 className="font-semibold text-sm">Configuración de Autenticación</h4>
                    </div>
                    <div className="p-4">
                      <div className="bg-muted rounded-md p-3 max-h-60 overflow-y-auto">
                        <pre className="text-xs font-mono whitespace-pre-wrap break-all">
                          {JSON.stringify(endpointDetails.grouped?.AuthDetail?.[0], null, 2)}
                        </pre>
                      </div>
                    </div>
                  </div>
                )}

                {/* Información de Transporte */}
                {(Array.isArray(endpointDetails.grouped?.TransportDetail) && endpointDetails.grouped.TransportDetail.length > 0) && (
                  <div className="border rounded-lg">
                    <div className="bg-muted/50 px-4 py-2 border-b">
                      <h4 className="font-semibold text-sm">Configuración de Transporte</h4>
                    </div>
                    <div className="p-4">
                      <div className="bg-muted rounded-md p-3 max-h-60 overflow-y-auto">
                        <pre className="text-xs font-mono whitespace-pre-wrap break-all">
                          {JSON.stringify(endpointDetails.grouped?.TransportDetail?.[0], null, 2)}
                        </pre>
                      </div>
                    </div>
                  </div>
                )}

                {/* Información de Contactos */}
                {endpointDetails.contacts && Object.keys(endpointDetails.contacts).length > 0 && (
                  <div className="border rounded-lg">
                    <div className="bg-muted/50 px-4 py-2 border-b">
                      <h4 className="font-semibold text-sm">Contactos Activos</h4>
                    </div>
                    <div className="p-4">
                      <div className="bg-muted rounded-md p-3 max-h-60 overflow-y-auto">
                        <pre className="text-xs font-mono whitespace-pre-wrap break-all">
                          {JSON.stringify(endpointDetails.contacts, null, 2)}
                        </pre>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            ) : (
              <p className="text-center text-muted-foreground py-8">
                No hay detalles disponibles
              </p>
            )}
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}