'use client';

import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  FileText,
  Calendar,
  Clock,
  Download,
  Eye,
  Settings,
  Play,
  Bell,
  ChevronRight,
  ChevronDown,
  RefreshCw,
  Wallet,
  Users,
  Target,
  Cog,
  ShieldCheck,
  Package,
  Megaphone,
  LayoutDashboard,
  Filter,
  Search,
  Plus,
  X,
  Mail,
  Layers,
  Send,
  CheckCircle,
} from 'lucide-react';
import Link from 'next/link';
import { InternalHeader } from '@/components/ui/internal-header';

interface ReportDefinition {
  id: string;
  key: string;
  name: string;
  description: string | null;
  module: string;
  category: string;
  reportType: string;
  permissions: string[];
  isActive: boolean;
  isSystem: boolean;
  _count: {
    schedules: number;
    subscriptions: number;
  };
}

interface ModuleMetadata {
  name: string;
  description: string;
  icon: string;
  color: string;
}

const moduleIcons: Record<string, React.ReactNode> = {
  finance: <Wallet className="w-5 h-5" />,
  hr: <Users className="w-5 h-5" />,
  sales: <Target className="w-5 h-5" />,
  operations: <Cog className="w-5 h-5" />,
  compliance: <ShieldCheck className="w-5 h-5" />,
  inventory: <Package className="w-5 h-5" />,
  marketing: <Megaphone className="w-5 h-5" />,
  executive: <LayoutDashboard className="w-5 h-5" />,
};

const moduleColors: Record<string, string> = {
  finance: 'emerald',
  hr: 'blue',
  sales: 'purple',
  operations: 'orange',
  compliance: 'red',
  inventory: 'amber',
  marketing: 'pink',
  executive: 'cyan',
};

export default function ReportsPage() {
  const [reports, setReports] = useState<ReportDefinition[]>([]);
  const [reportsByModule, setReportsByModule] = useState<Record<string, ReportDefinition[]>>({});
  const [moduleMetadata, setModuleMetadata] = useState<Record<string, ModuleMetadata>>({});
  const [expandedModules, setExpandedModules] = useState<Set<string>>(new Set());
  const [selectedReport, setSelectedReport] = useState<ReportDefinition | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedModule, setSelectedModule] = useState<string | null>(null);
  const [showSubscribeModal, setShowSubscribeModal] = useState(false);
  const [showEmailModal, setShowEmailModal] = useState(false);

  useEffect(() => {
    fetchReports();
  }, []);

  const fetchReports = async () => {
    try {
      setIsLoading(true);
      const res = await fetch('/api/reports');
      const data = await res.json();
      setReports(data.reports || []);
      setReportsByModule(data.reportsByModule || {});
      setModuleMetadata(data.moduleMetadata || {});
      setExpandedModules(new Set(Object.keys(data.reportsByModule || {})));
    } catch (error) {
      console.error('Error fetching reports:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const initializeReports = async () => {
    try {
      setIsLoading(true);
      await fetch('/api/reports', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'initialize' }),
      });
      await fetchReports();
    } catch (error) {
      console.error('Error initializing reports:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const toggleModule = (module: string) => {
    const newExpanded = new Set(expandedModules);
    if (newExpanded.has(module)) {
      newExpanded.delete(module);
    } else {
      newExpanded.add(module);
    }
    setExpandedModules(newExpanded);
  };

  const generateReport = async (reportKey: string) => {
    window.open(`/api/reports/${reportKey}?action=generate&format=html`, '_blank');
  };

  const downloadReport = async (reportKey: string, format: 'csv' | 'pdf') => {
    window.open(`/api/reports/${reportKey}?action=generate&format=${format}`, '_blank');
  };

  const filteredModules = Object.entries(reportsByModule).filter(([module, moduleReports]) => {
    if (selectedModule && module !== selectedModule) return false;
    if (!searchQuery) return true;
    return moduleReports.some(r => 
      r.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      r.description?.toLowerCase().includes(searchQuery.toLowerCase())
    );
  });

  const getColorClasses = (color: string) => {
    const colors: Record<string, { bg: string; border: string; text: string }> = {
      emerald: { bg: 'bg-emerald-500/10', border: 'border-emerald-500/30', text: 'text-emerald-400' },
      blue: { bg: 'bg-blue-500/10', border: 'border-blue-500/30', text: 'text-blue-400' },
      purple: { bg: 'bg-brand-secondary/10', border: 'border-brand-secondary/30', text: 'text-brand-secondary-light' },
      orange: { bg: 'bg-orange-500/10', border: 'border-orange-500/30', text: 'text-orange-400' },
      red: { bg: 'bg-red-500/10', border: 'border-red-500/30', text: 'text-red-400' },
      amber: { bg: 'bg-amber-500/10', border: 'border-amber-500/30', text: 'text-amber-400' },
      pink: { bg: 'bg-pink-500/10', border: 'border-pink-500/30', text: 'text-pink-400' },
      cyan: { bg: 'bg-brand-deep/10', border: 'border-brand-deep/30', text: 'text-brand' },
    };
    return colors[color] || colors.cyan;
  };

  if (isLoading && reports.length === 0) {
    return (
      <main className="min-h-screen bg-brand-bg">
        <InternalHeader />
        <div className="pt-16 flex items-center justify-center min-h-[80vh]">
          <div className="text-center">
            <RefreshCw className="w-8 h-8 text-brand animate-spin mx-auto mb-4" />
            <p className="text-gray-400">Loading reports...</p>
          </div>
        </div>
      </main>
    );
  }

  return (
    <main className="min-h-screen bg-brand-bg">
      <InternalHeader />
      <div className="pt-20 p-6">
        <div className="max-w-7xl mx-auto">
          {/* Header */}
          <div className="mb-8">
            <div className="flex items-center justify-between mb-4">
              <div>
                <h1 className="text-3xl font-bold text-white flex items-center gap-3">
                  <FileText className="w-8 h-8 text-brand" />
                  Report Center
                </h1>
                <p className="text-gray-400 mt-1">
                  {reports.length} reports across {Object.keys(reportsByModule).length} modules
                </p>
              </div>
              <div className="flex items-center gap-3">
                <button
                  onClick={fetchReports}
                  className="p-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-gray-300 transition-colors"
                  title="Refresh"
                >
                  <RefreshCw className={`w-5 h-5 ${isLoading ? 'animate-spin' : ''}`} />
                </button>
                <Link
                  href="/ghost-control/reports/builder"
                  className="px-4 py-2 rounded-lg bg-brand-secondary-deep hover:bg-brand-secondary text-white font-medium transition-colors flex items-center gap-2"
                >
                  <Layers className="w-4 h-4" />
                  Report Builder
                </Link>
                {reports.length === 0 && (
                  <button
                    onClick={initializeReports}
                    className="px-4 py-2 rounded-lg bg-brand-deep hover:bg-brand-deep text-white font-medium transition-colors flex items-center gap-2"
                  >
                    <Plus className="w-4 h-4" />
                    Initialize Reports
                  </button>
                )}
              </div>
            </div>

            {/* Filters */}
            <div className="flex flex-wrap items-center gap-4">
              <div className="relative flex-1 max-w-md">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                <input
                  type="text"
                  placeholder="Search reports..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="w-full pl-10 pr-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-brand-deep"
                />
              </div>
              <div className="flex items-center gap-2">
                <Filter className="w-4 h-4 text-gray-400" />
                <select
                  value={selectedModule || ''}
                  onChange={(e) => setSelectedModule(e.target.value || null)}
                  className="px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-brand-deep"
                >
                  <option value="">All Modules</option>
                  {Object.entries(moduleMetadata).map(([key, meta]) => (
                    <option key={key} value={key}>{meta.name}</option>
                  ))}
                </select>
              </div>
            </div>
          </div>

          {/* Reports by Module */}
          <div className="space-y-4">
            {filteredModules.map(([module, moduleReports]) => {
              const meta = moduleMetadata[module];
              const color = moduleColors[module] || 'cyan';
              const colorClasses = getColorClasses(color);
              const isExpanded = expandedModules.has(module);

              const filteredReports = searchQuery
                ? moduleReports.filter(r =>
                    r.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                    r.description?.toLowerCase().includes(searchQuery.toLowerCase())
                  )
                : moduleReports;

              if (filteredReports.length === 0) return null;

              return (
                <motion.div
                  key={module}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  className={`rounded-xl border ${colorClasses.border} ${colorClasses.bg} overflow-hidden`}
                >
                  {/* Module Header */}
                  <button
                    onClick={() => toggleModule(module)}
                    className="w-full px-6 py-4 flex items-center justify-between hover:bg-white/5 transition-colors"
                  >
                    <div className="flex items-center gap-4">
                      <div className={`p-2 rounded-lg ${colorClasses.bg} ${colorClasses.text}`}>
                        {moduleIcons[module]}
                      </div>
                      <div className="text-left">
                        <h2 className="text-lg font-semibold text-white">{meta?.name || module}</h2>
                        <p className="text-sm text-gray-400">{meta?.description}</p>
                      </div>
                      <span className="px-2 py-0.5 rounded-full bg-slate-700 text-xs text-gray-300">
                        {filteredReports.length} reports
                      </span>
                    </div>
                    {isExpanded ? (
                      <ChevronDown className="w-5 h-5 text-gray-400" />
                    ) : (
                      <ChevronRight className="w-5 h-5 text-gray-400" />
                    )}
                  </button>

                  {/* Reports List */}
                  <AnimatePresence>
                    {isExpanded && (
                      <motion.div
                        initial={{ height: 0, opacity: 0 }}
                        animate={{ height: 'auto', opacity: 1 }}
                        exit={{ height: 0, opacity: 0 }}
                        transition={{ duration: 0.2 }}
                        className="border-t border-slate-700/50"
                      >
                        <div className="divide-y divide-slate-700/50">
                          {filteredReports.map((report) => (
                            <div
                              key={report.id}
                              className="px-6 py-4 flex items-center justify-between hover:bg-white/5 transition-colors"
                            >
                              <div className="flex-1">
                                <div className="flex items-center gap-3">
                                  <h3 className="font-medium text-white">{report.name}</h3>
                                  <span className="px-2 py-0.5 rounded text-xs bg-slate-700 text-gray-300 capitalize">
                                    {report.category}
                                  </span>
                                  {!report.isActive && (
                                    <span className="px-2 py-0.5 rounded text-xs bg-red-500/20 text-red-400">
                                      Disabled
                                    </span>
                                  )}
                                </div>
                                <p className="text-sm text-gray-400 mt-1">{report.description}</p>
                                <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
                                  {report._count.schedules > 0 && (
                                    <span className="flex items-center gap-1">
                                      <Clock className="w-3 h-3" />
                                      {report._count.schedules} schedule(s)
                                    </span>
                                  )}
                                  {report._count.subscriptions > 0 && (
                                    <span className="flex items-center gap-1">
                                      <Bell className="w-3 h-3" />
                                      {report._count.subscriptions} subscriber(s)
                                    </span>
                                  )}
                                </div>
                              </div>
                              <div className="flex items-center gap-2">
                                <button
                                  onClick={() => generateReport(report.key)}
                                  className="p-2 rounded-lg hover:bg-slate-700 text-gray-400 hover:text-brand transition-colors"
                                  title="View Report"
                                >
                                  <Eye className="w-4 h-4" />
                                </button>
                                <button
                                  onClick={() => downloadReport(report.key, 'csv')}
                                  className="p-2 rounded-lg hover:bg-slate-700 text-gray-400 hover:text-green-400 transition-colors"
                                  title="Download CSV"
                                >
                                  <Download className="w-4 h-4" />
                                </button>
                                <button
                                  onClick={() => {
                                    setSelectedReport(report);
                                    setShowEmailModal(true);
                                  }}
                                  className="p-2 rounded-lg hover:bg-slate-700 text-gray-400 hover:text-amber-400 transition-colors"
                                  title="Email Report"
                                >
                                  <Mail className="w-4 h-4" />
                                </button>
                                <button
                                  onClick={() => {
                                    setSelectedReport(report);
                                    setShowSubscribeModal(true);
                                  }}
                                  className="p-2 rounded-lg hover:bg-slate-700 text-gray-400 hover:text-brand-secondary-light transition-colors"
                                  title="Subscribe"
                                >
                                  <Bell className="w-4 h-4" />
                                </button>
                              </div>
                            </div>
                          ))}
                        </div>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </motion.div>
              );
            })}
          </div>

          {filteredModules.length === 0 && (
            <div className="text-center py-12">
              <FileText className="w-12 h-12 text-gray-600 mx-auto mb-4" />
              <h3 className="text-lg font-medium text-gray-400">No reports found</h3>
              <p className="text-gray-500 mt-1">
                {searchQuery ? 'Try adjusting your search' : 'Initialize reports to get started'}
              </p>
            </div>
          )}

          {/* Subscribe Modal */}
          <AnimatePresence>
            {showSubscribeModal && selectedReport && (
              <SubscribeModal
                report={selectedReport}
                onClose={() => {
                  setShowSubscribeModal(false);
                  setSelectedReport(null);
                }}
              />
            )}
          </AnimatePresence>

          {/* Email Modal */}
          <AnimatePresence>
            {showEmailModal && selectedReport && (
              <EmailModal
                report={selectedReport}
                onClose={() => {
                  setShowEmailModal(false);
                  setSelectedReport(null);
                }}
              />
            )}
          </AnimatePresence>
        </div>
      </div>
    </main>
  );
}

// Subscribe Modal Component
function SubscribeModal({
  report,
  onClose,
}: {
  report: ReportDefinition;
  onClose: () => void;
}) {
  const [frequency, setFrequency] = useState<'daily' | 'weekly' | 'monthly'>('weekly');
  const [dayOfWeek, setDayOfWeek] = useState(1);
  const [dayOfMonth, setDayOfMonth] = useState(1);
  const [timeOfDay, setTimeOfDay] = useState('09:00');
  const [format, setFormat] = useState<'pdf' | 'csv'>('pdf');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubscribe = async () => {
    setIsSubmitting(true);
    try {
      await fetch('/api/reports/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          action: 'subscribe',
          userId: 'current-user',
          reportId: report.id,
          frequency,
          dayOfWeek: frequency === 'weekly' ? dayOfWeek : undefined,
          dayOfMonth: frequency === 'monthly' ? dayOfMonth : undefined,
          timeOfDay,
          format,
        }),
      });
      onClose();
    } catch (error) {
      console.error('Error subscribing:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4"
      onClick={onClose}
    >
      <motion.div
        initial={{ scale: 0.95, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        exit={{ scale: 0.95, opacity: 0 }}
        className="bg-slate-900 border border-slate-700 rounded-xl p-6 max-w-md w-full"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center justify-between mb-6">
          <h3 className="text-xl font-semibold text-white">Subscribe to Report</h3>
          <button
            onClick={onClose}
            className="p-1 rounded hover:bg-slate-800 text-gray-400"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        <div className="space-y-4">
          <div>
            <p className="text-sm text-gray-400 mb-1">Report</p>
            <p className="text-white font-medium">{report.name}</p>
          </div>

          <div>
            <label className="block text-sm text-gray-400 mb-2">Frequency</label>
            <select
              value={frequency}
              onChange={(e) => setFrequency(e.target.value as typeof frequency)}
              className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white"
            >
              <option value="daily">Daily</option>
              <option value="weekly">Weekly</option>
              <option value="monthly">Monthly</option>
            </select>
          </div>

          {frequency === 'weekly' && (
            <div>
              <label className="block text-sm text-gray-400 mb-2">Day of Week</label>
              <select
                value={dayOfWeek}
                onChange={(e) => setDayOfWeek(parseInt(e.target.value))}
                className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white"
              >
                <option value={0}>Sunday</option>
                <option value={1}>Monday</option>
                <option value={2}>Tuesday</option>
                <option value={3}>Wednesday</option>
                <option value={4}>Thursday</option>
                <option value={5}>Friday</option>
                <option value={6}>Saturday</option>
              </select>
            </div>
          )}

          {frequency === 'monthly' && (
            <div>
              <label className="block text-sm text-gray-400 mb-2">Day of Month</label>
              <input
                type="number"
                min={1}
                max={31}
                value={dayOfMonth}
                onChange={(e) => setDayOfMonth(parseInt(e.target.value))}
                className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white"
              />
            </div>
          )}

          <div>
            <label className="block text-sm text-gray-400 mb-2">Time</label>
            <input
              type="time"
              value={timeOfDay}
              onChange={(e) => setTimeOfDay(e.target.value)}
              className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white"
            />
          </div>

          <div>
            <label className="block text-sm text-gray-400 mb-2">Format</label>
            <select
              value={format}
              onChange={(e) => setFormat(e.target.value as typeof format)}
              className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white"
            >
              <option value="pdf">PDF</option>
              <option value="csv">CSV</option>
            </select>
          </div>
        </div>

        <div className="flex items-center gap-3 mt-6">
          <button
            onClick={onClose}
            className="flex-1 px-4 py-2 rounded-lg border border-slate-600 text-gray-300 hover:bg-slate-800 transition-colors"
          >
            Cancel
          </button>
          <button
            onClick={handleSubscribe}
            disabled={isSubmitting}
            className="flex-1 px-4 py-2 rounded-lg bg-brand-deep hover:bg-brand-deep text-white font-medium transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
          >
            {isSubmitting ? (
              <RefreshCw className="w-4 h-4 animate-spin" />
            ) : (
              <Bell className="w-4 h-4" />
            )}
            Subscribe
          </button>
        </div>
      </motion.div>
    </motion.div>
  );
}

// Email Modal Component
function EmailModal({
  report,
  onClose,
}: {
  report: ReportDefinition;
  onClose: () => void;
}) {
  const [recipients, setRecipients] = useState('');
  const [subject, setSubject] = useState(`[GFS Report] ${report.name}`);
  const [includeData, setIncludeData] = useState(true);
  const [isSending, setIsSending] = useState(false);
  const [sendStatus, setSendStatus] = useState<'idle' | 'success' | 'error'>('idle');

  const handleSendEmail = async () => {
    if (!recipients.trim()) return;
    
    setIsSending(true);
    setSendStatus('idle');
    try {
      const recipientList = recipients.split(',').map(e => e.trim()).filter(Boolean);
      
      const res = await fetch('/api/reports/email', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          action: 'send_report',
          reportId: report.id,
          recipients: recipientList,
          subject,
          includeData,
        }),
      });

      const data = await res.json();
      if (data.success) {
        setSendStatus('success');
        setTimeout(() => onClose(), 2000);
      } else {
        setSendStatus('error');
      }
    } catch (error) {
      console.error('Error sending email:', error);
      setSendStatus('error');
    } finally {
      setIsSending(false);
    }
  };

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4"
      onClick={onClose}
    >
      <motion.div
        initial={{ scale: 0.95, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        exit={{ scale: 0.95, opacity: 0 }}
        className="bg-slate-900 border border-slate-700 rounded-xl p-6 max-w-md w-full"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center justify-between mb-6">
          <h3 className="text-xl font-semibold text-white flex items-center gap-2">
            <Mail className="w-5 h-5 text-amber-400" />
            Email Report
          </h3>
          <button
            onClick={onClose}
            className="p-1 rounded hover:bg-slate-800 text-gray-400"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        {sendStatus === 'success' ? (
          <div className="text-center py-8">
            <CheckCircle className="w-12 h-12 text-green-400 mx-auto mb-4" />
            <h4 className="text-lg font-medium text-white mb-2">Email Sent!</h4>
            <p className="text-gray-400">The report has been sent successfully.</p>
          </div>
        ) : (
          <>
            <div className="space-y-4">
              <div>
                <p className="text-sm text-gray-400 mb-1">Report</p>
                <p className="text-white font-medium">{report.name}</p>
              </div>

              <div>
                <label className="block text-sm text-gray-400 mb-2">
                  Recipients <span className="text-gray-500">(comma-separated)</span>
                </label>
                <input
                  type="text"
                  value={recipients}
                  onChange={(e) => setRecipients(e.target.value)}
                  placeholder="email@example.com, another@example.com"
                  className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-amber-500"
                />
              </div>

              <div>
                <label className="block text-sm text-gray-400 mb-2">Subject</label>
                <input
                  type="text"
                  value={subject}
                  onChange={(e) => setSubject(e.target.value)}
                  className="w-full px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-amber-500"
                />
              </div>

              <div className="flex items-center gap-2">
                <input
                  type="checkbox"
                  id="includeData"
                  checked={includeData}
                  onChange={(e) => setIncludeData(e.target.checked)}
                  className="w-4 h-4 rounded bg-slate-700 border-slate-600 text-amber-500 focus:ring-amber-500"
                />
                <label htmlFor="includeData" className="text-sm text-gray-300">
                  Include report data in email
                </label>
              </div>
            </div>

            <div className="flex items-center gap-3 mt-6">
              <button
                onClick={onClose}
                className="flex-1 px-4 py-2 rounded-lg border border-slate-600 text-gray-300 hover:bg-slate-800 transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={handleSendEmail}
                disabled={isSending || !recipients.trim()}
                className="flex-1 px-4 py-2 rounded-lg bg-amber-600 hover:bg-amber-500 text-white font-medium transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
              >
                {isSending ? (
                  <RefreshCw className="w-4 h-4 animate-spin" />
                ) : sendStatus === 'error' ? (
                  <>
                    <X className="w-4 h-4" />
                    Failed - Retry
                  </>
                ) : (
                  <>
                    <Send className="w-4 h-4" />
                    Send Email
                  </>
                )}
              </button>
            </div>
          </>
        )}
      </motion.div>
    </motion.div>
  );
}
