"use client"

import { useState } from "react"
import { useParams, useRouter } from "next/navigation"
import useSWR from "swr"
import {
  ArrowLeft,
  Mail,
  Ban,
  Trash2,
  Edit,
  Music,
  MoreHorizontal,
  Download,
  Heart,
  ListMusic,
  Send,
  Loader2,
  CheckCircle,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

const fetcher = (url: string) => fetch(url).then((res) => res.json())

export default function AdminUserDetailPage() {
  const params = useParams()
  const router = useRouter()
  const userId = params.id as string

  const {
    data: userData,
    error,
    mutate,
  } = useSWR(`/api/users/${userId}`, fetcher, {
    dedupingInterval: 60000,
  })
  const user = userData?.data || userData

  const [showEditDialog, setShowEditDialog] = useState(false)
  const [showSuspendDialog, setShowSuspendDialog] = useState(false)
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const [showEmailDialog, setShowEmailDialog] = useState(false)
  const [isSaving, setIsSaving] = useState(false)
  const [editForm, setEditForm] = useState({
    name: "",
    email: "",
    plan: "",
    status: "",
  })

  useState(() => {
    if (user) {
      setEditForm({
        name: user.name || "",
        email: user.email || "",
        plan: user.plan || "free",
        status: user.status || "active",
      })
    }
  })

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "active":
        return <Badge className="bg-green-500/20 text-green-400 border-0">Actif</Badge>
      case "suspended":
        return <Badge className="bg-red-500/20 text-red-400 border-0">Suspendu</Badge>
      case "inactive":
        return <Badge className="bg-zinc-500/20 text-zinc-400 border-0">Inactif</Badge>
      default:
        return <Badge>{status}</Badge>
    }
  }

  const getPlanBadge = (plan: string) => {
    switch (plan) {
      case "premium":
        return <Badge className="bg-purple-500/20 text-purple-400 border-0">Premium</Badge>
      case "family":
        return <Badge className="bg-blue-500/20 text-blue-400 border-0">Famille</Badge>
      case "student":
        return <Badge className="bg-cyan-500/20 text-cyan-400 border-0">Etudiant</Badge>
      default:
        return <Badge className="bg-zinc-500/20 text-zinc-400 border-0">Gratuit</Badge>
    }
  }

  const handleSaveUser = async () => {
    setIsSaving(true)
    try {
      const res = await fetch(`/api/users/${userId}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: editForm.name,
          subscription_type: editForm.plan,
          is_active: editForm.status === "active",
        }),
      })
      if (res.ok) {
        mutate()
        setShowEditDialog(false)
      }
    } catch (error) {
      console.error("Error saving user:", error)
    } finally {
      setIsSaving(false)
    }
  }

  const handleSuspendUser = async () => {
    setIsSaving(true)
    try {
      const res = await fetch(`/api/users/${userId}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ is_active: false }),
      })
      if (res.ok) {
        mutate()
        setShowSuspendDialog(false)
      }
    } catch (error) {
      console.error("Error suspending user:", error)
    } finally {
      setIsSaving(false)
    }
  }

  const handleDeleteUser = async () => {
    setIsSaving(true)
    try {
      const res = await fetch(`/api/users/${userId}`, {
        method: "DELETE",
      })
      if (res.ok) {
        router.push("/admin/users")
      }
    } catch (error) {
      console.error("Error deleting user:", error)
    } finally {
      setIsSaving(false)
    }
  }

  if (error)
    return (
      <div className="flex flex-col items-center justify-center p-8 text-center">
        <p className="text-red-400 mb-4">Erreur lors du chargement de l'utilisateur</p>
        <Button onClick={() => router.back()} variant="outline">
          Retour
        </Button>
      </div>
    )

  if (!user)
    return (
      <div className="flex items-center justify-center p-8">
        <Loader2 className="w-8 h-8 animate-spin text-purple-500" />
      </div>
    )

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" onClick={() => router.back()} className="text-zinc-400 hover:text-white">
          <ArrowLeft className="w-5 h-5" />
        </Button>
        <div className="flex-1">
          <h1 className="text-2xl font-bold text-white">Détail Utilisateur</h1>
          <p className="text-zinc-400 text-sm">ID: {userId}</p>
        </div>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" className="border-zinc-700 text-white bg-transparent">
              <MoreHorizontal className="w-4 h-4 mr-2" />
              Actions
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="bg-zinc-800 border-zinc-700">
            <DropdownMenuItem
              onClick={() => {
                setEditForm({
                  name: user.name || "",
                  email: user.email || "",
                  plan: user.plan || "free",
                  status: user.status || "active",
                })
                setShowEditDialog(true)
              }}
              className="text-zinc-300"
            >
              <Edit className="w-4 h-4 mr-2" /> Modifier
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => setShowEmailDialog(true)} className="text-zinc-300">
              <Mail className="w-4 h-4 mr-2" /> Envoyer un email
            </DropdownMenuItem>
            <DropdownMenuSeparator className="bg-zinc-700" />
            <DropdownMenuItem onClick={() => setShowSuspendDialog(true)} className="text-yellow-400">
              <Ban className="w-4 h-4 mr-2" /> Suspendre
            </DropdownMenuItem>
            <DropdownMenuItem onClick={() => setShowDeleteDialog(true)} className="text-red-400">
              <Trash2 className="w-4 h-4 mr-2" /> Supprimer
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

      {/* User Profile Card */}
      <div className="bg-zinc-800/30 rounded-xl border border-zinc-700/50 p-6">
        <div className="flex flex-col md:flex-row gap-6">
          <img
            src={user.avatar || "/placeholder.svg?height=96&width=96&query=user avatar"}
            alt={user.name}
            className="w-24 h-24 rounded-full object-cover mx-auto md:mx-0"
          />
          <div className="flex-1 text-center md:text-left">
            <div className="flex flex-col md:flex-row md:items-center gap-2 mb-2">
              <h2 className="text-2xl font-bold text-white">{user.name || "Utilisateur"}</h2>
              <div className="flex justify-center md:justify-start gap-2">
                {getStatusBadge(user.status || "active")}
                {getPlanBadge(user.plan || "free")}
              </div>
            </div>
            <p className="text-zinc-400 mb-4">{user.email}</p>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div>
                <p className="text-zinc-500 text-xs">Inscrit le</p>
                <p className="text-white font-medium">{user.joined || "N/A"}</p>
              </div>
              <div>
                <p className="text-zinc-500 text-xs">Dernière connexion</p>
                <p className="text-white font-medium">{user.lastActive || "N/A"}</p>
              </div>
              <div>
                <p className="text-zinc-500 text-xs">Streams totaux</p>
                <p className="text-white font-medium">{(user.streams || 0).toLocaleString()}</p>
              </div>
              <div>
                <p className="text-zinc-500 text-xs">Temps d'écoute</p>
                <p className="text-white font-medium">{user.totalListeningTime || "0h"}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div className="bg-zinc-800/30 rounded-xl border border-zinc-700/50 p-4">
          <div className="flex items-center gap-3">
            <div className="p-2 rounded-lg bg-purple-500/20">
              <Music className="w-5 h-5 text-purple-400" />
            </div>
            <div>
              <p className="text-2xl font-bold text-white">{(user.streams || 0).toLocaleString()}</p>
              <p className="text-zinc-400 text-sm">Streams</p>
            </div>
          </div>
        </div>
        <div className="bg-zinc-800/30 rounded-xl border border-zinc-700/50 p-4">
          <div className="flex items-center gap-3">
            <div className="p-2 rounded-lg bg-pink-500/20">
              <Heart className="w-5 h-5 text-pink-400" />
            </div>
            <div>
              <p className="text-2xl font-bold text-white">{user.likedCount || 0}</p>
              <p className="text-zinc-400 text-sm">Favoris</p>
            </div>
          </div>
        </div>
        <div className="bg-zinc-800/30 rounded-xl border border-zinc-700/50 p-4">
          <div className="flex items-center gap-3">
            <div className="p-2 rounded-lg bg-blue-500/20">
              <ListMusic className="w-5 h-5 text-blue-400" />
            </div>
            <div>
              <p className="text-2xl font-bold text-white">{(user.playlists || []).length}</p>
              <p className="text-zinc-400 text-sm">Playlists</p>
            </div>
          </div>
        </div>
        <div className="bg-zinc-800/30 rounded-xl border border-zinc-700/50 p-4">
          <div className="flex items-center gap-3">
            <div className="p-2 rounded-lg bg-green-500/20">
              <Download className="w-5 h-5 text-green-400" />
            </div>
            <div>
              <p className="text-2xl font-bold text-white">{user.downloadsUsed || 0}</p>
              <p className="text-zinc-400 text-sm">Téléchargements</p>
            </div>
          </div>
        </div>
      </div>

      {/* Tabs */}
      <Tabs defaultValue="overview" className="space-y-4">
        <TabsList className="bg-zinc-800/50 border border-zinc-700/50">
          <TabsTrigger value="overview" className="data-[state=active]:bg-purple-600">
            Vue d'ensemble
          </TabsTrigger>
          <TabsTrigger value="activity" className="data-[state=active]:bg-purple-600">
            Activité
          </TabsTrigger>
          <TabsTrigger value="billing" className="data-[state=active]:bg-purple-600">
            Facturation
          </TabsTrigger>
          <TabsTrigger value="devices" className="data-[state=active]:bg-purple-600">
            Appareils
          </TabsTrigger>
        </TabsList>

        <TabsContent value="overview" className="space-y-4">
          <div className="grid md:grid-cols-2 gap-4">
            {/* Personal Info */}
            <div className="bg-zinc-800/30 rounded-xl border border-zinc-700/50 p-4">
              <h3 className="font-semibold text-white mb-4">Informations personnelles</h3>
              <div className="space-y-3">
                <div className="flex justify-between">
                  <span className="text-zinc-400">Email</span>
                  <span className="text-white">{user.email}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-zinc-400">Téléphone</span>
                  <span className="text-white">{user.phone || "Non renseigné"}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-zinc-400">Date de naissance</span>
                  <span className="text-white">{user.birthDate || "Non renseigné"}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-zinc-400">Pays</span>
                  <span className="text-white">{user.country || "Non renseigné"}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-zinc-400">Langue</span>
                  <span className="text-white">{(user.language || "fr").toUpperCase()}</span>
                </div>
              </div>
            </div>

            {/* Recent Tracks */}
            <div className="bg-zinc-800/30 rounded-xl border border-zinc-700/50 p-4">
              <h3 className="font-semibold text-white mb-4">Écoutes récentes</h3>
              <div className="space-y-3">
                {(user.recentTracks || []).length > 0 ? (
                  user.recentTracks.map((track: any, index: number) => (
                    <div key={index} className="flex items-center justify-between">
                      <div>
                        <p className="text-white">{track.title}</p>
                        <p className="text-zinc-400 text-sm">{track.artist}</p>
                      </div>
                      <span className="text-zinc-500 text-sm">{track.playedAt}</span>
                    </div>
                  ))
                ) : (
                  <p className="text-zinc-500 text-center py-4">Aucune écoute récente</p>
                )}
              </div>
            </div>

            {/* Playlists */}
            <div className="bg-zinc-800/30 rounded-xl border border-zinc-700/50 p-4">
              <h3 className="font-semibold text-white mb-4">Playlists</h3>
              <div className="space-y-3">
                {(user.playlists || []).length > 0 ? (
                  user.playlists.map((playlist: any, index: number) => (
                    <div key={index} className="flex items-center justify-between">
                      <div>
                        <p className="text-white">{playlist.name}</p>
                        <p className="text-zinc-400 text-sm">{playlist.tracks} titres</p>
                      </div>
                      <span className="text-zinc-500 text-sm">{playlist.followers} followers</span>
                    </div>
                  ))
                ) : (
                  <p className="text-zinc-500 text-center py-4">Aucune playlist</p>
                )}
              </div>
            </div>

            {/* Subscription */}
            <div className="bg-zinc-800/30 rounded-xl border border-zinc-700/50 p-4">
              <h3 className="font-semibold text-white mb-4">Abonnement</h3>
              <div className="space-y-3">
                <div className="flex justify-between">
                  <span className="text-zinc-400">Plan actuel</span>
                  {getPlanBadge(user.plan || "free")}
                </div>
                <div className="flex justify-between">
                  <span className="text-zinc-400">Expiration</span>
                  <span className="text-white">{user.planExpiry || "N/A"}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-zinc-400">Téléchargements</span>
                  <span className="text-white">
                    {user.downloadsUsed || 0} / {user.downloadsLimit || 100}
                  </span>
                </div>
                <div className="pt-2">
                  <div className="h-2 bg-zinc-700 rounded-full overflow-hidden">
                    <div
                      className="h-full bg-purple-500 rounded-full"
                      style={{ width: `${((user.downloadsUsed || 0) / (user.downloadsLimit || 100)) * 100}%` }}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </TabsContent>

        <TabsContent value="activity" className="space-y-4">
          <div className="bg-zinc-800/30 rounded-xl border border-zinc-700/50 overflow-hidden">
            <table className="w-full">
              <thead>
                <tr className="border-b border-zinc-700/50">
                  <th className="p-4 text-left text-sm font-medium text-zinc-400">Action</th>
                  <th className="p-4 text-left text-sm font-medium text-zinc-400">Date</th>
                  <th className="p-4 text-left text-sm font-medium text-zinc-400">Détails</th>
                </tr>
              </thead>
              <tbody>
                {(user.activityLog || []).length > 0 ? (
                  user.activityLog.map((log: any, index: number) => (
                    <tr key={index} className="border-b border-zinc-700/30">
                      <td className="p-4 text-white">{log.action}</td>
                      <td className="p-4 text-zinc-400">{log.date}</td>
                      <td className="p-4 text-zinc-400">{log.details || log.ip || "-"}</td>
                    </tr>
                  ))
                ) : (
                  <tr>
                    <td colSpan={3} className="p-4 text-center text-zinc-500">
                      Aucune activité
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </TabsContent>

        <TabsContent value="billing" className="space-y-4">
          <div className="bg-zinc-800/30 rounded-xl border border-zinc-700/50 overflow-hidden">
            <table className="w-full">
              <thead>
                <tr className="border-b border-zinc-700/50">
                  <th className="p-4 text-left text-sm font-medium text-zinc-400">ID Transaction</th>
                  <th className="p-4 text-left text-sm font-medium text-zinc-400">Date</th>
                  <th className="p-4 text-left text-sm font-medium text-zinc-400">Type</th>
                  <th className="p-4 text-left text-sm font-medium text-zinc-400">Montant</th>
                  <th className="p-4 text-left text-sm font-medium text-zinc-400">Statut</th>
                </tr>
              </thead>
              <tbody>
                {(user.transactions || []).length > 0 ? (
                  user.transactions.map((txn: any, index: number) => (
                    <tr key={index} className="border-b border-zinc-700/30">
                      <td className="p-4 text-white font-mono text-sm">{txn.id}</td>
                      <td className="p-4 text-zinc-400">{txn.date}</td>
                      <td className="p-4 text-zinc-400">{txn.type}</td>
                      <td className="p-4 text-white">{txn.amount}</td>
                      <td className="p-4">
                        <Badge
                          className={
                            txn.status === "completed"
                              ? "bg-green-500/20 text-green-400 border-0"
                              : "bg-yellow-500/20 text-yellow-400 border-0"
                          }
                        >
                          {txn.status === "completed" ? "Complété" : txn.status}
                        </Badge>
                      </td>
                    </tr>
                  ))
                ) : (
                  <tr>
                    <td colSpan={5} className="p-4 text-center text-zinc-500">
                      Aucune transaction
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </TabsContent>

        <TabsContent value="devices" className="space-y-4">
          <div className="grid gap-4">
            {(user.devices || []).map((device: any, index: number) => (
              <div key={index} className="bg-zinc-800/30 rounded-xl border border-zinc-700/50 p-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    <div className="p-3 rounded-lg bg-zinc-700/50">
                      {device.type === "mobile" && <span className="text-2xl">📱</span>}
                      {device.type === "desktop" && <span className="text-2xl">💻</span>}
                      {device.type === "tablet" && <span className="text-2xl">📟</span>}
                    </div>
                    <div>
                      <p className="text-white font-medium">{device.name}</p>
                      <p className="text-zinc-400 text-sm">Dernière utilisation: {device.lastUsed}</p>
                    </div>
                  </div>
                  <Button variant="ghost" size="sm" className="text-red-400 hover:text-red-300">
                    Déconnecter
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </TabsContent>
      </Tabs>

      {/* Edit Dialog */}
      <Dialog open={showEditDialog} onOpenChange={setShowEditDialog}>
        <DialogContent className="bg-zinc-900 border-zinc-700 text-white max-w-lg">
          <DialogHeader>
            <DialogTitle>Modifier l'utilisateur</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>Nom</Label>
                <Input
                  value={editForm.name}
                  onChange={(e) => setEditForm((prev) => ({ ...prev, name: e.target.value }))}
                  className="bg-zinc-800 border-zinc-700"
                />
              </div>
              <div className="space-y-2">
                <Label>Email</Label>
                <Input value={editForm.email} disabled className="bg-zinc-800 border-zinc-700 opacity-50" />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label>Plan</Label>
                <Select value={editForm.plan} onValueChange={(v) => setEditForm((prev) => ({ ...prev, plan: v }))}>
                  <SelectTrigger className="bg-zinc-800 border-zinc-700">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent className="bg-zinc-800 border-zinc-700">
                    <SelectItem value="free">Gratuit</SelectItem>
                    <SelectItem value="premium">Premium</SelectItem>
                    <SelectItem value="family">Famille</SelectItem>
                    <SelectItem value="student">Etudiant</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>Statut</Label>
                <Select value={editForm.status} onValueChange={(v) => setEditForm((prev) => ({ ...prev, status: v }))}>
                  <SelectTrigger className="bg-zinc-800 border-zinc-700">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent className="bg-zinc-800 border-zinc-700">
                    <SelectItem value="active">Actif</SelectItem>
                    <SelectItem value="suspended">Suspendu</SelectItem>
                    <SelectItem value="inactive">Inactif</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="ghost" onClick={() => setShowEditDialog(false)}>
              Annuler
            </Button>
            <Button onClick={handleSaveUser} disabled={isSaving} className="bg-purple-600 hover:bg-purple-700">
              {isSaving ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <CheckCircle className="w-4 h-4 mr-2" />}
              Enregistrer
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Suspend Dialog */}
      <Dialog open={showSuspendDialog} onOpenChange={setShowSuspendDialog}>
        <DialogContent className="bg-zinc-900 border-zinc-700 text-white">
          <DialogHeader>
            <DialogTitle>Suspendre l'utilisateur</DialogTitle>
            <DialogDescription className="text-zinc-400">
              Êtes-vous sûr de vouloir suspendre cet utilisateur ? Il ne pourra plus accéder à son compte.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="ghost" onClick={() => setShowSuspendDialog(false)}>
              Annuler
            </Button>
            <Button onClick={handleSuspendUser} disabled={isSaving} className="bg-yellow-600 hover:bg-yellow-700">
              {isSaving ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Ban className="w-4 h-4 mr-2" />}
              Suspendre
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Delete Dialog */}
      <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <DialogContent className="bg-zinc-900 border-zinc-700 text-white">
          <DialogHeader>
            <DialogTitle>Supprimer l'utilisateur</DialogTitle>
            <DialogDescription className="text-zinc-400">
              Cette action est irréversible. Toutes les données de l'utilisateur seront supprimées définitivement.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="ghost" onClick={() => setShowDeleteDialog(false)}>
              Annuler
            </Button>
            <Button onClick={handleDeleteUser} disabled={isSaving} className="bg-red-600 hover:bg-red-700">
              {isSaving ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Trash2 className="w-4 h-4 mr-2" />}
              Supprimer
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Email Dialog */}
      <Dialog open={showEmailDialog} onOpenChange={setShowEmailDialog}>
        <DialogContent className="bg-zinc-900 border-zinc-700 text-white max-w-lg">
          <DialogHeader>
            <DialogTitle>Envoyer un email</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label>Destinataire</Label>
              <Input value={user.email} disabled className="bg-zinc-800 border-zinc-700 opacity-50" />
            </div>
            <div className="space-y-2">
              <Label>Sujet</Label>
              <Input placeholder="Sujet de l'email" className="bg-zinc-800 border-zinc-700" />
            </div>
            <div className="space-y-2">
              <Label>Message</Label>
              <Textarea placeholder="Votre message..." className="bg-zinc-800 border-zinc-700 min-h-[150px]" />
            </div>
          </div>
          <DialogFooter>
            <Button variant="ghost" onClick={() => setShowEmailDialog(false)}>
              Annuler
            </Button>
            <Button className="bg-purple-600 hover:bg-purple-700">
              <Send className="w-4 h-4 mr-2" />
              Envoyer
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
