import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { YamlEditor } from '@/components/ui/yaml-editor';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useKubectl } from '@/hooks/useKubectl';
import { useToast } from '@/hooks/useToast';
import {
  Loader2,
  GitBranch,
  AlertCircle,
  RefreshCw,
  ArrowLeft,
  MoreVertical,
  Trash2,
  Settings,
  Copy,
  Tag,
  Database,
  Info,
  Eye,
  Download,
  ExternalLink,
  Network,
  Server,
  Target,
  Route,
  Shield,
  Globe,
  Zap,
  CheckCircle,
  XCircle,
  Minus,
} from 'lucide-react';

interface ServiceData {
  name: string;
  namespace: string;
  type: string;
  clusterIP: string;
  externalIPs: string[];
  ports: Array<{
    name?: string;
    port: number;
    targetPort: string | number;
    protocol: string;
    nodePort?: number;
  }>;
  selector: Record<string, string>;
  sessionAffinity: string;
  creationTimestamp: string;
  labels: Record<string, string>;
  annotations: Record<string, string>;
  resourceVersion: string;
  uid: string;
  status: {
    loadBalancer?: {
      ingress?: Array<{
        ip?: string;
        hostname?: string;
      }>;
    };
  };
}

export function ServiceDetailsPage() {
  const { namespaceName, serviceName } = useParams<{
    namespaceName: string;
    serviceName: string;
  }>();
  const navigate = useNavigate();
  const { executeCommand } = useKubectl();
  const { showToast } = useToast();

  const [service, setService] = useState<ServiceData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [showYaml, setShowYaml] = useState(false);
  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
  const [deleting, setDeleting] = useState(false);

  const fetchServiceDetails = async () => {
    if (!namespaceName || !serviceName) return;

    try {
      setLoading(true);
      setError(null);

      const command = `kubectl get service ${serviceName} -n ${namespaceName} -o json`;
      const result = await executeCommand(command);

      if (result.success) {
        const data = JSON.parse(result.data);
        setService({
          name: data.metadata.name,
          namespace: data.metadata.namespace,
          type: data.spec.type,
          clusterIP: data.spec.clusterIP,
          externalIPs: data.spec.externalIPs || [],
          ports: data.spec.ports || [],
          selector: data.spec.selector || {},
          sessionAffinity: data.spec.sessionAffinity || 'None',
          creationTimestamp: data.metadata.creationTimestamp,
          labels: data.metadata.labels || {},
          annotations: data.metadata.annotations || {},
          resourceVersion: data.metadata.resourceVersion,
          uid: data.metadata.uid,
          status: data.status || {},
        });
      } else {
        setError(result.error || 'Falha ao buscar detalhes do Service');
      }
    } catch (err) {
      const errorMsg = err instanceof Error ? err.message : 'Erro inesperado';
      setError(errorMsg);
    } finally {
      setLoading(false);
    }
  };

  const fetchYaml = () => {
    setShowYaml(true);
  };

  const handleDeleteService = async () => {
    if (!namespaceName || !serviceName) return;

    setDeleting(true);
    try {
      const command = `kubectl delete service ${serviceName} -n ${namespaceName}`;
      const result = await executeCommand(command);

      if (result.success) {
        showToast({
          title: 'Service Excluído',
          description: `Service "${serviceName}" foi excluído com sucesso`,
          variant: 'success',
        });

        navigate('/service-discovery/services');
      } else {
        showToast({
          title: 'Erro ao Excluir Service',
          description: result.error || 'Falha ao excluir o Service',
          variant: 'destructive',
        });
      }
    } catch (err) {
      const errorMsg = err instanceof Error ? err.message : 'Erro inesperado';
      showToast({
        title: 'Erro',
        description: errorMsg,
        variant: 'destructive',
      });
    } finally {
      setDeleting(false);
      setDeleteModalOpen(false);
    }
  };

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text);
    showToast({
      title: 'Copiado',
      description: 'Conteúdo copiado para a área de transferência',
      variant: 'success',
    });
  };

  const getAge = (creationTimestamp: string) => {
    const now = new Date();
    const created = new Date(creationTimestamp);
    const diffMs = now.getTime() - created.getTime();
    const diffSeconds = Math.floor(diffMs / 1000);
    const diffMinutes = Math.floor(diffSeconds / 60);
    const diffHours = Math.floor(diffMinutes / 60);
    const diffDays = Math.floor(diffHours / 24);

    if (diffDays > 0) return `${diffDays}d`;
    if (diffHours > 0) return `${diffHours}h`;
    if (diffMinutes > 0) return `${diffMinutes}m`;
    return `${diffSeconds}s`;
  };

  const getServiceTypeColor = (type: string) => {
    switch (type) {
      case 'ClusterIP':
        return 'bg-blue-100 text-blue-800';
      case 'NodePort':
        return 'bg-green-100 text-green-800';
      case 'LoadBalancer':
        return 'bg-purple-100 text-purple-800';
      case 'ExternalName':
        return 'bg-orange-100 text-orange-800';
      default:
        return 'bg-gray-100 text-gray-800';
    }
  };

  const getServiceTypeIcon = (type: string) => {
    switch (type) {
      case 'ClusterIP':
        return Server;
      case 'NodePort':
        return Network;
      case 'LoadBalancer':
        return Globe;
      case 'ExternalName':
        return ExternalLink;
      default:
        return GitBranch;
    }
  };

  const getLoadBalancerAddresses = () => {
    if (!service || !service.status.loadBalancer?.ingress) return [];
    return service.status.loadBalancer.ingress
      .map((ing) => ing.ip || ing.hostname)
      .filter(Boolean);
  };

  const formatPortDisplay = (port: ServiceData['ports'][0]) => {
    let display = `${port.port}`;
    if (port.targetPort && port.targetPort !== port.port) {
      display += `:${port.targetPort}`;
    }
    if (port.protocol !== 'TCP') {
      display += `/${port.protocol}`;
    }
    if (port.nodePort) {
      display += ` (NodePort: ${port.nodePort})`;
    }
    return display;
  };

  useEffect(() => {
    fetchServiceDetails();
  }, [namespaceName, serviceName]);

  if (loading) {
    return (
      <div className="flex items-center justify-center h-96">
        <div className="text-center">
          <Loader2 className="h-8 w-8 animate-spin mx-auto mb-4" />
          <p className="text-muted-foreground">
            Carregando detalhes do Service...
          </p>
        </div>
      </div>
    );
  }

  if (error || !service) {
    return (
      <div className="flex items-center justify-center h-96">
        <div className="text-center">
          <AlertCircle className="h-8 w-8 text-red-500 mx-auto mb-4" />
          <p className="text-red-600 mb-4">
            {error || 'Service não encontrado'}
          </p>
          <div className="space-x-2">
            <Button onClick={() => fetchServiceDetails()}>
              <RefreshCw className="h-4 w-4 mr-2" />
              Tentar Novamente
            </Button>
            <Button
              variant="outline"
              onClick={() => navigate('/service-discovery/services')}
            >
              <ArrowLeft className="h-4 w-4 mr-2" />
              Voltar
            </Button>
          </div>
        </div>
      </div>
    );
  }

  const ServiceTypeIcon = getServiceTypeIcon(service.type);
  const loadBalancerAddresses = getLoadBalancerAddresses();

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-4">
          <Button variant="ghost" size="icon" onClick={() => navigate(-1)}>
            <ArrowLeft className="h-4 w-4" />
          </Button>
          <div>
            <h1 className="text-3xl font-bold text-foreground flex items-center">
              <GitBranch className="h-8 w-8 mr-3 text-blue-600" />
              {service.name}
            </h1>
            <div className="text-muted-foreground">
              Service no namespace{' '}
              <Badge variant="outline" className="mx-1">
                {service.namespace}
              </Badge>
            </div>
          </div>
        </div>

        <div className="flex items-center space-x-2">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline">
                <MoreVertical className="h-4 w-4 mr-2" />
                Ações
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuLabel>Navegação</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem
                onClick={() => navigate('/service-discovery/services')}
              >
                <ExternalLink className="h-4 w-4 mr-2" />
                Lista de Services
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>

      {/* Informações Gerais */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center justify-between">
            <div className="flex items-center">
              <Info className="h-5 w-5 mr-2" />
              Informações Gerais
            </div>
            <div className="flex gap-2">
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button onClick={fetchYaml} variant="outline" size="sm">
                      <Eye className="h-4 w-4 mr-2" />
                      YAML
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>
                    <p>Visualizar YAML completo</p>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>

              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button
                      onClick={() =>
                        copyToClipboard(JSON.stringify(service, null, 2))
                      }
                      variant="outline"
                      size="sm"
                    >
                      <Copy className="h-4 w-4 mr-2" />
                      JSON
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>
                    <p>Copiar dados como JSON</p>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>

              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button
                      onClick={() => setDeleteModalOpen(true)}
                      variant="destructive"
                      size="sm"
                    >
                      <Trash2 className="h-4 w-4 mr-2" />
                      Excluir
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>
                    <p>Excluir este Service</p>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            </div>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div>
              <label className="text-sm font-medium text-muted-foreground">
                Nome
              </label>
              <div className="flex items-center justify-between mt-1">
                <span className="text-sm font-medium">{service.name}</span>
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-6 w-6"
                  onClick={() => copyToClipboard(service.name)}
                >
                  <Copy className="h-3 w-3" />
                </Button>
              </div>
            </div>
            <div>
              <label className="text-sm font-medium text-muted-foreground">
                Namespace
              </label>
              <div className="flex items-center justify-between mt-1">
                <Badge variant="outline">{service.namespace}</Badge>
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-6 w-6"
                  onClick={() => copyToClipboard(service.namespace)}
                >
                  <Copy className="h-3 w-3" />
                </Button>
              </div>
            </div>
            <div>
              <label className="text-sm font-medium text-muted-foreground">
                Tipo
              </label>
              <div className="mt-1">
                <Badge className={getServiceTypeColor(service.type)}>
                  <ServiceTypeIcon className="h-3 w-3 mr-1" />
                  {service.type}
                </Badge>
              </div>
            </div>
            <div>
              <label className="text-sm font-medium text-muted-foreground">
                Criado há
              </label>
              <div className="mt-1">
                <span className="text-sm">
                  {getAge(service.creationTimestamp)}
                </span>
              </div>
            </div>
          </div>

          <div className="mt-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="text-sm font-medium text-muted-foreground">
                  Cluster IP
                </label>
                <div className="flex items-center justify-between mt-1">
                  <span className="text-sm font-mono">{service.clusterIP}</span>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-6 w-6"
                    onClick={() => copyToClipboard(service.clusterIP)}
                  >
                    <Copy className="h-3 w-3" />
                  </Button>
                </div>
              </div>
              <div>
                <label className="text-sm font-medium text-muted-foreground">
                  Session Affinity
                </label>
                <div className="mt-1">
                  <span className="text-sm">{service.sessionAffinity}</span>
                </div>
              </div>
            </div>
          </div>

          <div className="mt-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="text-sm font-medium text-muted-foreground">
                  UID
                </label>
                <div className="flex items-center justify-between mt-1">
                  <span className="text-sm font-mono">{service.uid}</span>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-6 w-6"
                    onClick={() => copyToClipboard(service.uid)}
                  >
                    <Copy className="h-3 w-3" />
                  </Button>
                </div>
              </div>
              <div>
                <label className="text-sm font-medium text-muted-foreground">
                  Resource Version
                </label>
                <div className="mt-1">
                  <span className="text-sm">{service.resourceVersion}</span>
                </div>
              </div>
            </div>
          </div>

          {/* Labels e Annotations lado a lado */}
          {(Object.keys(service.labels).length > 0 ||
            Object.keys(service.annotations).length > 0) && (
            <div className="mt-6">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* Labels */}
                {Object.keys(service.labels).length > 0 && (
                  <div>
                    <label className="text-sm font-medium text-muted-foreground flex items-center mb-3">
                      <Tag className="h-4 w-4 mr-2" />
                      Labels
                    </label>
                    <div className="space-y-2">
                      {Object.entries(service.labels).map(([key, value]) => (
                        <div
                          key={key}
                          className="flex items-center justify-between p-2 bg-muted rounded"
                        >
                          <div className="flex-1 min-w-0">
                            <div className="text-sm font-medium truncate">
                              {key}
                            </div>
                            <div className="text-xs text-muted-foreground truncate">
                              {value}
                            </div>
                          </div>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-6 w-6"
                            onClick={() => copyToClipboard(`${key}=${value}`)}
                          >
                            <Copy className="h-3 w-3" />
                          </Button>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {/* Annotations */}
                {Object.keys(service.annotations).length > 0 && (
                  <div>
                    <label className="text-sm font-medium text-muted-foreground flex items-center mb-3">
                      <Settings className="h-4 w-4 mr-2" />
                      Annotations
                    </label>
                    <div className="space-y-2">
                      {Object.entries(service.annotations).map(
                        ([key, value]) => (
                          <div
                            key={key}
                            className="flex items-center justify-between p-2 bg-muted rounded"
                          >
                            <div className="flex-1 min-w-0">
                              <div className="text-sm font-medium truncate">
                                {key}
                              </div>
                              <div className="text-xs text-muted-foreground truncate">
                                {value}
                              </div>
                            </div>
                            <Button
                              variant="ghost"
                              size="icon"
                              className="h-6 w-6"
                              onClick={() => copyToClipboard(`${key}=${value}`)}
                            >
                              <Copy className="h-3 w-3" />
                            </Button>
                          </div>
                        ),
                      )}
                    </div>
                  </div>
                )}
              </div>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Configuração de Rede */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Network className="h-5 w-5 mr-2" />
            Configuração de Rede
          </CardTitle>
          <CardDescription>
            {service.ports.length} porta(s) configurada(s) • Tipo:{' '}
            {service.type}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="ports" className="w-full">
            <TabsList>
              <TabsTrigger value="ports">Portas</TabsTrigger>
              <TabsTrigger value="selectors">Seletores</TabsTrigger>
              {service.externalIPs.length > 0 && (
                <TabsTrigger value="external">IPs Externos</TabsTrigger>
              )}
              {loadBalancerAddresses.length > 0 && (
                <TabsTrigger value="loadbalancer">Load Balancer</TabsTrigger>
              )}
            </TabsList>

            <TabsContent value="ports" className="mt-4">
              {service.ports.length > 0 ? (
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Nome</TableHead>
                      <TableHead>Porta</TableHead>
                      <TableHead>Target Port</TableHead>
                      <TableHead>Protocolo</TableHead>
                      {service.type === 'NodePort' && (
                        <TableHead>Node Port</TableHead>
                      )}
                      <TableHead className="w-16">Ações</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {service.ports.map((port, index) => (
                      <TableRow key={index}>
                        <TableCell>
                          <Badge variant="outline">
                            {port.name || `port-${index + 1}`}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          <span className="font-mono text-sm">{port.port}</span>
                        </TableCell>
                        <TableCell>
                          <span className="font-mono text-sm">
                            {port.targetPort}
                          </span>
                        </TableCell>
                        <TableCell>
                          <Badge variant="secondary">{port.protocol}</Badge>
                        </TableCell>
                        {service.type === 'NodePort' && (
                          <TableCell>
                            {port.nodePort ? (
                              <Badge
                                variant="outline"
                                className="text-green-700 bg-green-100"
                              >
                                {port.nodePort}
                              </Badge>
                            ) : (
                              <Minus className="h-4 w-4 text-muted-foreground" />
                            )}
                          </TableCell>
                        )}
                        <TableCell>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-6 w-6"
                            onClick={() =>
                              copyToClipboard(formatPortDisplay(port))
                            }
                          >
                            <Copy className="h-3 w-3" />
                          </Button>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              ) : (
                <div className="text-center py-8 text-muted-foreground">
                  <Network className="h-8 w-8 mx-auto mb-2 opacity-50" />
                  <p>Nenhuma porta configurada</p>
                </div>
              )}
            </TabsContent>

            <TabsContent value="selectors" className="mt-4">
              {Object.keys(service.selector).length > 0 ? (
                <div className="space-y-3">
                  <div className="flex items-center mb-4">
                    <Target className="h-5 w-5 mr-2 text-blue-600" />
                    <span className="font-medium">Seletores de Pod</span>
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {Object.entries(service.selector).map(([key, value]) => (
                      <Card key={key} className="p-4">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center">
                            <Tag className="h-4 w-4 mr-2 text-blue-600" />
                            <div>
                              <div className="font-medium text-sm">{key}</div>
                              <div className="text-xs text-muted-foreground">
                                {value}
                              </div>
                            </div>
                          </div>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-6 w-6"
                            onClick={() => copyToClipboard(`${key}=${value}`)}
                          >
                            <Copy className="h-3 w-3" />
                          </Button>
                        </div>
                      </Card>
                    ))}
                  </div>
                </div>
              ) : (
                <div className="text-center py-8 text-muted-foreground">
                  <Target className="h-8 w-8 mx-auto mb-2 opacity-50" />
                  <p>Nenhum seletor configurado</p>
                  <p className="text-sm mt-1">
                    Este service pode não direcionar para nenhum pod
                  </p>
                </div>
              )}
            </TabsContent>

            {service.externalIPs.length > 0 && (
              <TabsContent value="external" className="mt-4">
                <div className="space-y-3">
                  <div className="flex items-center mb-4">
                    <Globe className="h-5 w-5 mr-2 text-purple-600" />
                    <span className="font-medium">IPs Externos</span>
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {service.externalIPs.map((ip, index) => (
                      <Card key={index} className="p-4">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center">
                            <Network className="h-4 w-4 mr-2 text-purple-600" />
                            <span className="font-mono">{ip}</span>
                          </div>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-6 w-6"
                            onClick={() => copyToClipboard(ip)}
                          >
                            <Copy className="h-3 w-3" />
                          </Button>
                        </div>
                      </Card>
                    ))}
                  </div>
                </div>
              </TabsContent>
            )}

            {loadBalancerAddresses.length > 0 && (
              <TabsContent value="loadbalancer" className="mt-4">
                <div className="space-y-3">
                  <div className="flex items-center mb-4">
                    <Zap className="h-5 w-5 mr-2 text-green-600" />
                    <span className="font-medium">
                      Endereços do Load Balancer
                    </span>
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {loadBalancerAddresses.map((address, index) => (
                      <Card key={index} className="p-4">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center">
                            <CheckCircle className="h-4 w-4 mr-2 text-green-600" />
                            <span className="font-mono">{address}</span>
                          </div>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="h-6 w-6"
                            onClick={() => copyToClipboard(address)}
                          >
                            <Copy className="h-3 w-3" />
                          </Button>
                        </div>
                      </Card>
                    ))}
                  </div>
                </div>
              </TabsContent>
            )}
          </Tabs>
        </CardContent>
      </Card>

      {/* YAML Modal */}
      <YamlEditor
        open={showYaml}
        onOpenChange={setShowYaml}
        resourceType="service"
        resourceName={service.name}
        namespace={service.namespace}
        title={`YAML do Service - ${service.name}`}
      />

      {/* Delete Confirmation Modal */}
      <Dialog open={deleteModalOpen} onOpenChange={setDeleteModalOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Excluir Service</DialogTitle>
            <DialogDescription>
              Tem certeza que deseja excluir o Service{' '}
              <strong>{service.name}</strong> do namespace{' '}
              <strong>{service.namespace}</strong>?
              <br />
              <br />
              Esta ação não pode ser desfeita e pode afetar a conectividade de
              pods que dependem deste service.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => setDeleteModalOpen(false)}
              disabled={deleting}
            >
              Cancelar
            </Button>
            <Button
              variant="destructive"
              onClick={handleDeleteService}
              disabled={deleting}
            >
              {deleting ? (
                <>
                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                  Excluindo...
                </>
              ) : (
                <>
                  <Trash2 className="h-4 w-4 mr-2" />
                  Excluir Service
                </>
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}
