"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { AnimatedCard } from "@/components/ui/animated-card"
import { AnimatedButton } from "@/components/ui/animated-button"
import { useToast } from "@/components/ui/toast"
import {
  MessageSquare,
  Send,
  Search,
  Filter,
  Users,
  Building,
  Star,
  Clock,
  Eye,
  Reply,
  Archive,
  Trash2,
  Plus,
  Mail,
  Phone,
  AlertCircle,
  CheckCircle,
  User,
  Calendar,
  Paperclip,
  MoreHorizontal,
  Flag,
  Download,
  RotateCcw as Refresh
} from "lucide-react"

// Mock messages data
const mockMessages = [
  {
    id: 1,
    type: "inquiry",
    subject: "Question about memory care programs",
    from: {
      name: "Sarah Johnson",
      email: "sarah.j@email.com",
      type: "family",
      avatar: "/placeholder.svg?height=40&width=40&text=SJ"
    },
    to: {
      name: "Sunrise Senior Living",
      facilityId: 1,
      type: "facility"
    },
    content: "Hello, I'm interested in learning more about your memory care programs. My mother has early-stage dementia and we're looking for a caring environment. Could you provide more details about your approach to memory care?",
    timestamp: "2024-01-20T10:30:00Z",
    status: "unread",
    priority: "normal",
    tags: ["memory-care", "inquiry"],
    replies: []
  },
  {
    id: 2,
    type: "complaint",
    subject: "Billing issue needs resolution",
    from: {
      name: "Mike Chen",
      email: "mike.chen@email.com",
      type: "family",
      avatar: "/placeholder.svg?height=40&width=40&text=MC"
    },
    to: {
      name: "Golden Years Care Center",
      facilityId: 2,
      type: "facility"
    },
    content: "I've been charged twice for the same service last month. I've tried contacting the facility directly but haven't received a response. This needs to be resolved urgently as it's causing financial strain.",
    timestamp: "2024-01-19T15:45:00Z",
    status: "read",
    priority: "high",
    tags: ["billing", "urgent"],
    replies: [
      {
        id: 21,
        from: {
          name: "Admin Support",
          type: "admin"
        },
        content: "Thank you for bringing this to our attention. I've forwarded your concern to the billing department and the facility management. You should receive a response within 24 hours.",
        timestamp: "2024-01-19T16:15:00Z"
      }
    ]
  },
  {
    id: 3,
    type: "support",
    subject: "Help with profile updates",
    from: {
      name: "Jennifer Martinez",
      email: "j.martinez@peacefulgardens.com",
      type: "facility_owner",
      avatar: "/placeholder.svg?height=40&width=40&text=JM"
    },
    to: {
      name: "Platform Support",
      type: "admin"
    },
    content: "I'm having trouble updating our facility photos on the platform. The upload seems to hang at 50%. Can someone help me resolve this issue?",
    timestamp: "2024-01-18T09:20:00Z",
    status: "read",
    priority: "normal",
    tags: ["technical-support", "photos"],
    replies: [
      {
        id: 31,
        from: {
          name: "Tech Support",
          type: "admin"
        },
        content: "I'll help you with the photo upload issue. It sounds like a browser caching problem. Please try clearing your browser cache and uploading again. If the issue persists, I can schedule a screen share session to help you directly.",
        timestamp: "2024-01-18T09:45:00Z"
      }
    ]
  },
  {
    id: 4,
    type: "review_dispute",
    subject: "Request to review posted review",
    from: {
      name: "Robert Wilson",
      email: "r.wilson@goldenyears.com",
      type: "facility_owner",
      avatar: "/placeholder.svg?height=40&width=40&text=RW"
    },
    to: {
      name: "Review Moderation Team",
      type: "admin"
    },
    content: "A recent review posted about our facility contains factual inaccuracies and appears to be from someone who was never actually a resident here. I would like to request a review of this post and potentially have it removed.",
    timestamp: "2024-01-17T14:30:00Z",
    status: "read",
    priority: "normal",
    tags: ["review-dispute", "moderation"],
    replies: []
  },
  {
    id: 5,
    type: "emergency",
    subject: "Urgent data correction needed",
    from: {
      name: "Lisa Thompson",
      email: "l.thompson@riversideseni",
      type: "facility_owner",
      avatar: "/placeholder.svg?height=40&width=40&text=LT"
    },
    to: {
      name: "Data Management Team",
      type: "admin"
    },
    content: "Our facility information shows incorrect licensing numbers and contact details. This is urgent as it's affecting our ability to receive legitimate inquiries from families.",
    timestamp: "2024-01-16T11:15:00Z",
    status: "read",
    priority: "urgent",
    tags: ["data-correction", "urgent"],
    replies: [
      {
        id: 51,
        from: {
          name: "Data Team",
          type: "admin"
        },
        content: "Thank you for the urgent notification. I've immediately flagged this for correction. Please send the correct licensing numbers and contact details to data@geezerguide.com and we'll update them within 2 hours.",
        timestamp: "2024-01-16T11:30:00Z"
      }
    ]
  }
]

const mockStats = {
  totalMessages: 247,
  unreadMessages: 23,
  urgentMessages: 5,
  averageResponseTime: "2h 15m",
  resolutionRate: 94.5,
  messagesByType: {
    inquiry: 145,
    complaint: 45,
    support: 89,
    review_dispute: 12,
    emergency: 8
  }
}

export default function AdminMessagesPage() {
  const [selectedMessage, setSelectedMessage] = useState<any>(null)
  const [showNewMessage, setShowNewMessage] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")
  const [filterType, setFilterType] = useState("all")
  const [filterStatus, setFilterStatus] = useState("all")
  const [filterPriority, setFilterPriority] = useState("all")
  const [replyText, setReplyText] = useState("")
  const [newMessageSubject, setNewMessageSubject] = useState("")
  const [newMessageContent, setNewMessageContent] = useState("")
  const [newMessageRecipient, setNewMessageRecipient] = useState("")
  const { success, error } = useToast()

  const filteredMessages = mockMessages.filter(message => {
    const matchesSearch = 
      message.subject.toLowerCase().includes(searchQuery.toLowerCase()) ||
      message.from.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      message.content.toLowerCase().includes(searchQuery.toLowerCase())
    
    const matchesType = filterType === "all" || message.type === filterType
    const matchesStatus = filterStatus === "all" || message.status === filterStatus
    const matchesPriority = filterPriority === "all" || message.priority === filterPriority
    
    return matchesSearch && matchesType && matchesStatus && matchesPriority
  })

  const handleSendReply = () => {
    if (!replyText.trim()) {
      error("Please enter a reply message")
      return
    }
    
    success("Reply sent successfully!")
    setReplyText("")
  }

  const handleSendNewMessage = () => {
    if (!newMessageSubject.trim() || !newMessageContent.trim()) {
      error("Please fill in all required fields")
      return
    }
    
    success("Message sent successfully!")
    setShowNewMessage(false)
    setNewMessageSubject("")
    setNewMessageContent("")
    setNewMessageRecipient("")
  }

  const handleMarkAsRead = (messageId: number) => {
    success("Message marked as read")
  }

  const handleArchive = (messageId: number) => {
    success("Message archived")
  }

  const handleFlag = (messageId: number) => {
    success("Message flagged for follow-up")
  }

  const getStatusColor = (status: string) => {
    switch (status) {
      case "unread":
        return "bg-blue-100 text-blue-800"
      case "read":
        return "bg-gray-100 text-gray-800"
      case "replied":
        return "bg-green-100 text-green-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case "urgent":
        return "bg-red-100 text-red-800"
      case "high":
        return "bg-orange-100 text-orange-800"
      case "normal":
        return "bg-blue-100 text-blue-800"
      case "low":
        return "bg-gray-100 text-gray-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

  const getTypeIcon = (type: string) => {
    switch (type) {
      case "inquiry":
        return <MessageSquare className="h-4 w-4" />
      case "complaint":
        return <AlertCircle className="h-4 w-4" />
      case "support":
        return <CheckCircle className="h-4 w-4" />
      case "review_dispute":
        return <Flag className="h-4 w-4" />
      case "emergency":
        return <AlertCircle className="h-4 w-4 text-red-600" />
      default:
        return <MessageSquare className="h-4 w-4" />
    }
  }

  return (
    <div className="p-3 md:p-6 lg:p-8 space-y-4 md:space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <h1 className="font-primary text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900">Message Center</h1>
          <p className="font-body text-sm md:text-base lg:text-xl text-gray-600 mt-1 md:mt-2">
            Manage communications with families and facility owners
          </p>
        </div>
        <div className="flex gap-2 md:gap-3">
          <AnimatedButton 
            variant="outline" 
            onClick={() => success("Messages refreshed!")}
            className="border-[#3F5CEA] text-[#3F5CEA] hover:bg-[#3F5CEA] hover:text-white"
          >
            <Refresh className="h-4 w-4 mr-2" />
            Refresh
          </AnimatedButton>
          <AnimatedButton 
            onClick={() => setShowNewMessage(true)}
            className="bg-[#3F5CEA] hover:bg-[#2E4BC7] text-white"
          >
            <Plus className="h-4 w-4 mr-2" />
            New Message
          </AnimatedButton>
        </div>
      </div>

      {/* Stats Overview */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
        <AnimatedCard className="hover:shadow-lg transition-shadow duration-300">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="font-body text-sm font-medium">Total Messages</CardTitle>
            <MessageSquare className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="font-primary text-3xl font-bold">{mockStats.totalMessages}</div>
            <p className="font-body text-xs text-muted-foreground">All time</p>
          </CardContent>
        </AnimatedCard>

        <AnimatedCard className="hover:shadow-lg transition-shadow duration-300">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="font-body text-sm font-medium">Unread</CardTitle>
            <Eye className="h-4 w-4 text-blue-500" />
          </CardHeader>
          <CardContent>
            <div className="font-primary text-3xl font-bold text-blue-600">{mockStats.unreadMessages}</div>
            <p className="font-body text-xs text-muted-foreground">Needs attention</p>
          </CardContent>
        </AnimatedCard>

        <AnimatedCard className="hover:shadow-lg transition-shadow duration-300">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="font-body text-sm font-medium">Urgent</CardTitle>
            <AlertCircle className="h-4 w-4 text-red-500" />
          </CardHeader>
          <CardContent>
            <div className="font-primary text-3xl font-bold text-red-600">{mockStats.urgentMessages}</div>
            <p className="font-body text-xs text-muted-foreground">High priority</p>
          </CardContent>
        </AnimatedCard>

        <AnimatedCard className="hover:shadow-lg transition-shadow duration-300">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="font-body text-sm font-medium">Avg Response</CardTitle>
            <Clock className="h-4 w-4 text-green-500" />
          </CardHeader>
          <CardContent>
            <div className="font-primary text-3xl font-bold text-green-600">{mockStats.averageResponseTime}</div>
            <p className="font-body text-xs text-muted-foreground">Response time</p>
          </CardContent>
        </AnimatedCard>

        <AnimatedCard className="hover:shadow-lg transition-shadow duration-300">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="font-body text-sm font-medium">Resolution Rate</CardTitle>
            <CheckCircle className="h-4 w-4 text-purple-500" />
          </CardHeader>
          <CardContent>
            <div className="font-primary text-3xl font-bold text-purple-600">{mockStats.resolutionRate}%</div>
            <p className="font-body text-xs text-muted-foreground">Successfully resolved</p>
          </CardContent>
        </AnimatedCard>
      </div>

      {/* Filters */}
      <AnimatedCard>
        <CardHeader>
          <CardTitle className="font-primary text-2xl flex items-center gap-2">
            <Filter className="h-5 w-5" />
            Filter Messages
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
            <div>
              <Label className="font-body text-lg">Search</Label>
              <div className="relative">
                <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="Search messages..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10 text-lg"
                />
              </div>
            </div>
            
            <div>
              <Label className="font-body text-lg">Type</Label>
              <Select value={filterType} onValueChange={setFilterType}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Types</SelectItem>
                  <SelectItem value="inquiry">Inquiries</SelectItem>
                  <SelectItem value="complaint">Complaints</SelectItem>
                  <SelectItem value="support">Support</SelectItem>
                  <SelectItem value="review_dispute">Review Disputes</SelectItem>
                  <SelectItem value="emergency">Emergency</SelectItem>
                </SelectContent>
              </Select>
            </div>
            
            <div>
              <Label className="font-body text-lg">Status</Label>
              <Select value={filterStatus} onValueChange={setFilterStatus}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Status</SelectItem>
                  <SelectItem value="unread">Unread</SelectItem>
                  <SelectItem value="read">Read</SelectItem>
                  <SelectItem value="replied">Replied</SelectItem>
                </SelectContent>
              </Select>
            </div>
            
            <div>
              <Label className="font-body text-lg">Priority</Label>
              <Select value={filterPriority} onValueChange={setFilterPriority}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Priorities</SelectItem>
                  <SelectItem value="urgent">Urgent</SelectItem>
                  <SelectItem value="high">High</SelectItem>
                  <SelectItem value="normal">Normal</SelectItem>
                  <SelectItem value="low">Low</SelectItem>
                </SelectContent>
              </Select>
            </div>
            
            <div className="flex items-end">
              <Button 
                variant="outline" 
                onClick={() => {
                  setSearchQuery("")
                  setFilterType("all")
                  setFilterStatus("all")
                  setFilterPriority("all")
                }}
                className="w-full font-body text-lg"
              >
                Clear Filters
              </Button>
            </div>
          </div>
        </CardContent>
      </AnimatedCard>

      {/* Messages List */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Messages List */}
        <div className="lg:col-span-1">
          <AnimatedCard>
            <CardHeader>
              <CardTitle className="font-primary text-2xl">
                Messages ({filteredMessages.length})
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-2 max-h-[600px] overflow-y-auto">
                {filteredMessages.map((message) => (
                  <div
                    key={message.id}
                    onClick={() => setSelectedMessage(message)}
                    className={`p-4 rounded-lg border cursor-pointer transition-colors duration-200 ${
                      selectedMessage?.id === message.id
                        ? "bg-blue-50 border-blue-200"
                        : "hover:bg-gray-50"
                    }`}
                  >
                    <div className="flex items-start justify-between mb-2">
                      <div className="flex items-center gap-2">
                        {getTypeIcon(message.type)}
                        <Badge className={`font-body text-xs ${getPriorityColor(message.priority)}`}>
                          {message.priority}
                        </Badge>
                        <Badge className={`font-body text-xs ${getStatusColor(message.status)}`}>
                          {message.status}
                        </Badge>
                      </div>
                      <span className="font-body text-xs text-gray-500">
                        {new Date(message.timestamp).toLocaleDateString('en-US')}
                      </span>
                    </div>
                    
                    <h3 className={`font-primary text-lg ${
                      message.status === "unread" ? "font-bold" : "font-medium"
                    } text-gray-900 mb-1`}>
                      {message.subject}
                    </h3>
                    
                    <div className="flex items-center gap-2 mb-2">
                      <img
                        src={message.from.avatar}
                        alt={message.from.name}
                        className="w-6 h-6 rounded-full"
                      />
                      <span className="font-body text-lg text-gray-700">
                        {message.from.name}
                      </span>
                      {message.from.type === "facility_owner" && (
                        <Building className="h-3 w-3 text-blue-600" />
                      )}
                    </div>
                    
                    <p className="font-body text-lg text-gray-600 line-clamp-2">
                      {message.content}
                    </p>
                    
                    {message.replies.length > 0 && (
                      <div className="mt-2 flex items-center gap-1 text-sm text-blue-600">
                        <Reply className="h-3 w-3" />
                        <span className="font-body">{message.replies.length} replies</span>
                      </div>
                    )}
                  </div>
                ))}
                
                {filteredMessages.length === 0 && (
                  <div className="text-center py-8">
                    <MessageSquare className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                    <p className="font-body text-lg text-gray-600">No messages match your filters</p>
                  </div>
                )}
              </div>
            </CardContent>
          </AnimatedCard>
        </div>

        {/* Message Detail */}
        <div className="lg:col-span-2">
          {selectedMessage ? (
            <AnimatedCard>
              <CardHeader>
                <div className="flex items-center justify-between">
                  <CardTitle className="font-primary text-2xl">{selectedMessage.subject}</CardTitle>
                  <div className="flex gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => handleMarkAsRead(selectedMessage.id)}
                      className="font-body"
                    >
                      <Eye className="h-4 w-4 mr-1" />
                      Mark Read
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => handleFlag(selectedMessage.id)}
                      className="font-body"
                    >
                      <Flag className="h-4 w-4 mr-1" />
                      Flag
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => handleArchive(selectedMessage.id)}
                      className="font-body"
                    >
                      <Archive className="h-4 w-4 mr-1" />
                      Archive
                    </Button>
                  </div>
                </div>
                <div className="flex items-center gap-4 text-lg text-gray-600">
                  <div className="flex items-center gap-2">
                    <img
                      src={selectedMessage.from.avatar}
                      alt={selectedMessage.from.name}
                      className="w-8 h-8 rounded-full"
                    />
                    <span className="font-body">{selectedMessage.from.name}</span>
                    <span className="font-body">({selectedMessage.from.email})</span>
                  </div>
                  <span className="font-body">
                    {new Date(selectedMessage.timestamp).toLocaleString()}
                  </span>
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-6">
                  {/* Original Message */}
                  <div className="p-4 bg-gray-50 rounded-lg">
                    <p className="font-body text-lg leading-relaxed text-gray-800">
                      {selectedMessage.content}
                    </p>
                  </div>
                  
                  {/* Tags */}
                  {selectedMessage.tags && selectedMessage.tags.length > 0 && (
                    <div className="flex gap-2">
                      {selectedMessage.tags.map((tag: string, index: number) => (
                        <Badge key={index} variant="outline" className="font-body">
                          {tag}
                        </Badge>
                      ))}
                    </div>
                  )}
                  
                  {/* Replies */}
                  {selectedMessage.replies.length > 0 && (
                    <div className="space-y-4">
                      <h3 className="font-primary text-xl font-semibold">Replies</h3>
                      {selectedMessage.replies.map((reply: any) => (
                        <div key={reply.id} className="p-4 bg-blue-50 rounded-lg border-l-4 border-blue-500">
                          <div className="flex items-center gap-2 mb-2">
                            <User className="h-4 w-4 text-blue-600" />
                            <span className="font-body text-lg font-medium text-blue-900">
                              {reply.from.name}
                            </span>
                            <span className="font-body text-lg text-blue-700">
                              {new Date(reply.timestamp).toLocaleString()}
                            </span>
                          </div>
                          <p className="font-body text-lg text-blue-800">{reply.content}</p>
                        </div>
                      ))}
                    </div>
                  )}
                  
                  {/* Reply Form */}
                  <div className="space-y-4 border-t pt-6">
                    <h3 className="font-primary text-xl font-semibold">Send Reply</h3>
                    <Textarea
                      placeholder="Type your reply here..."
                      value={replyText}
                      onChange={(e) => setReplyText(e.target.value)}
                      className="text-lg"
                      rows={4}
                    />
                    <div className="flex gap-3">
                      <AnimatedButton
                        onClick={handleSendReply}
                        className="bg-[#3F5CEA] hover:bg-[#2E4BC7] text-white font-body text-lg"
                      >
                        <Send className="h-4 w-4 mr-2" />
                        Send Reply
                      </AnimatedButton>
                      <Button variant="outline" className="font-body text-lg">
                        <Paperclip className="h-4 w-4 mr-2" />
                        Attach File
                      </Button>
                    </div>
                  </div>
                </div>
              </CardContent>
            </AnimatedCard>
          ) : (
            <AnimatedCard>
              <CardContent className="flex items-center justify-center h-96">
                <div className="text-center">
                  <MessageSquare className="h-16 w-16 text-gray-400 mx-auto mb-4" />
                  <h3 className="font-primary text-2xl font-semibold text-gray-900 mb-2">
                    Select a Message
                  </h3>
                  <p className="font-body text-lg text-gray-600">
                    Choose a message from the list to view details and respond
                  </p>
                </div>
              </CardContent>
            </AnimatedCard>
          )}
        </div>
      </div>

      {/* New Message Dialog */}
      <Dialog open={showNewMessage} onOpenChange={setShowNewMessage}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle className="font-primary text-3xl">Compose New Message</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <Label htmlFor="recipient" className="font-body text-lg">Recipient</Label>
              <Input
                id="recipient"
                placeholder="Enter recipient email or name..."
                value={newMessageRecipient}
                onChange={(e) => setNewMessageRecipient(e.target.value)}
                className="text-lg"
              />
            </div>
            
            <div>
              <Label htmlFor="subject" className="font-body text-lg">Subject</Label>
              <Input
                id="subject"
                placeholder="Enter message subject..."
                value={newMessageSubject}
                onChange={(e) => setNewMessageSubject(e.target.value)}
                className="text-lg"
              />
            </div>
            
            <div>
              <Label htmlFor="content" className="font-body text-lg">Message</Label>
              <Textarea
                id="content"
                placeholder="Type your message here..."
                value={newMessageContent}
                onChange={(e) => setNewMessageContent(e.target.value)}
                className="text-lg"
                rows={6}
              />
            </div>
            
            <div className="flex gap-3 justify-end">
              <Button 
                variant="outline" 
                onClick={() => setShowNewMessage(false)}
                className="font-body text-lg"
              >
                Cancel
              </Button>
              <AnimatedButton
                onClick={handleSendNewMessage}
                className="bg-[#3F5CEA] hover:bg-[#2E4BC7] text-white font-body text-lg"
              >
                <Send className="h-4 w-4 mr-2" />
                Send Message
              </AnimatedButton>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}