import React, { useState, useMemo, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  TrendingUp,
  TrendingDown,
  BarChart2,
  PieChart,
  Activity,
  Users,
  Image,
  FileText,
  Video,
  Music,
  Calendar,
  Download,
  ArrowRight,
  Filter,
  X,
} from 'lucide-react';
import Layout from '../components/Layout';
import Button from '../components/Button';

interface PieChartItem {
  value: number;
  color: string;
}

const generatePieChartPaths = (data: PieChartItem[]): string[] => {
  const total = data.reduce((sum: number, item: PieChartItem) => sum + item.value, 0);
  if (total === 0) return [];

  let currentAngle = 0;
  const paths: string[] = [];

  for (const item of data) {
    const sliceAngle = (item.value / total) * 360;
    const startAngle = currentAngle - 90;
    const endAngle = startAngle + sliceAngle;

    const startRad = (startAngle * Math.PI) / 180;
    const endRad = (endAngle * Math.PI) / 180;

    const x1 = 50 + 40 * Math.cos(startRad);
    const y1 = 50 + 40 * Math.sin(startRad);
    const x2 = 50 + 40 * Math.cos(endRad);
    const y2 = 50 + 40 * Math.sin(endRad);

    const largeArcFlag = sliceAngle > 180 ? 1 : 0;

    paths.push(`M 50 50 L ${x1} ${y1} A 40 40 0 ${largeArcFlag} 1 ${x2} ${y2} Z`);
    currentAngle += sliceAngle;
  }

  return paths;
};

const tabs = [
  { id: 'week', label: '本周' },
  { id: 'month', label: '本月' },
  { id: 'quarter', label: '本季度' },
  { id: 'year', label: '本年' },
];

const dataByPeriod: Record<
  string,
  {
    summaryCards: {
      title: string;
      value: string;
      change: string;
      trend: 'up' | 'down';
      icon: typeof Activity;
      color: string;
    }[];
    usageData: { day: string; image: number; text: number; video: number; music: number }[];
    categoryDistribution: { name: string; value: number; color: string }[];
  }
> = {
  week: {
    summaryCards: [
      {
        title: '总生成次数',
        value: '1,234',
        change: '+12.5%',
        trend: 'up' as const,
        icon: Activity,
        color: 'from-blue-500 to-cyan-500',
      },
      {
        title: '活跃用户',
        value: '892',
        change: '+8.3%',
        trend: 'up' as const,
        icon: Users,
        color: 'from-green-500 to-emerald-500',
      },
      {
        title: '素材下载量',
        value: '3,567',
        change: '+15.2%',
        trend: 'up' as const,
        icon: Download,
        color: 'from-purple-500 to-pink-500',
      },
      {
        title: '平均响应时间',
        value: '2.3s',
        change: '-5.1%',
        trend: 'down' as const,
        icon: Calendar,
        color: 'from-orange-500 to-amber-500',
      },
    ],
    usageData: [
      { day: '周一', image: 120, text: 80, video: 45, music: 30 },
      { day: '周二', image: 145, text: 95, video: 52, music: 38 },
      { day: '周三', image: 132, text: 88, video: 48, music: 35 },
      { day: '周四', image: 167, text: 102, video: 61, music: 42 },
      { day: '周五', image: 189, text: 115, video: 72, music: 51 },
      { day: '周六', image: 210, text: 128, video: 85, music: 63 },
      { day: '周日', image: 175, text: 105, video: 68, music: 48 },
    ],
    categoryDistribution: [
      { name: '图片生成', value: 42, color: '#8B5CF6' },
      { name: '文案生成', value: 30, color: '#3B82F6' },
      { name: '视频生成', value: 18, color: '#EC4899' },
      { name: '音乐生成', value: 10, color: '#10B981' },
    ],
  },
  month: {
    summaryCards: [
      {
        title: '总生成次数',
        value: '5,421',
        change: '+8.7%',
        trend: 'up' as const,
        icon: Activity,
        color: 'from-blue-500 to-cyan-500',
      },
      {
        title: '活跃用户',
        value: '3,421',
        change: '+6.2%',
        trend: 'up' as const,
        icon: Users,
        color: 'from-green-500 to-emerald-500',
      },
      {
        title: '素材下载量',
        value: '12,890',
        change: '+11.3%',
        trend: 'up' as const,
        icon: Download,
        color: 'from-purple-500 to-pink-500',
      },
      {
        title: '平均响应时间',
        value: '2.1s',
        change: '-8.2%',
        trend: 'down' as const,
        icon: Calendar,
        color: 'from-orange-500 to-amber-500',
      },
    ],
    usageData: [
      { day: '第1周', image: 520, text: 380, video: 210, music: 165 },
      { day: '第2周', image: 680, text: 450, video: 280, music: 210 },
      { day: '第3周', image: 720, text: 480, video: 310, music: 230 },
      { day: '第4周', image: 890, text: 540, video: 350, music: 260 },
    ],
    categoryDistribution: [
      { name: '图片生成', value: 45, color: '#8B5CF6' },
      { name: '文案生成', value: 28, color: '#3B82F6' },
      { name: '视频生成', value: 17, color: '#EC4899' },
      { name: '音乐生成', value: 10, color: '#10B981' },
    ],
  },
  quarter: {
    summaryCards: [
      {
        title: '总生成次数',
        value: '18,934',
        change: '+15.6%',
        trend: 'up' as const,
        icon: Activity,
        color: 'from-blue-500 to-cyan-500',
      },
      {
        title: '活跃用户',
        value: '12,156',
        change: '+12.4%',
        trend: 'up' as const,
        icon: Users,
        color: 'from-green-500 to-emerald-500',
      },
      {
        title: '素材下载量',
        value: '45,234',
        change: '+18.7%',
        trend: 'up' as const,
        icon: Download,
        color: 'from-purple-500 to-pink-500',
      },
      {
        title: '平均响应时间',
        value: '1.9s',
        change: '-12.3%',
        trend: 'down' as const,
        icon: Calendar,
        color: 'from-orange-500 to-amber-500',
      },
    ],
    usageData: [
      { day: '1月', image: 2100, text: 1450, video: 980, music: 720 },
      { day: '2月', image: 2350, text: 1620, video: 1080, music: 810 },
      { day: '3月', image: 2890, text: 1980, video: 1320, music: 980 },
    ],
    categoryDistribution: [
      { name: '图片生成', value: 44, color: '#8B5CF6' },
      { name: '文案生成', value: 27, color: '#3B82F6' },
      { name: '视频生成', value: 18, color: '#EC4899' },
      { name: '音乐生成', value: 11, color: '#10B981' },
    ],
  },
  year: {
    summaryCards: [
      {
        title: '总生成次数',
        value: '78,456',
        change: '+23.4%',
        trend: 'up' as const,
        icon: Activity,
        color: 'from-blue-500 to-cyan-500',
      },
      {
        title: '活跃用户',
        value: '45,890',
        change: '+18.9%',
        trend: 'up' as const,
        icon: Users,
        color: 'from-green-500 to-emerald-500',
      },
      {
        title: '素材下载量',
        value: '198,234',
        change: '+28.5%',
        trend: 'up' as const,
        icon: Download,
        color: 'from-purple-500 to-pink-500',
      },
      {
        title: '平均响应时间',
        value: '1.7s',
        change: '-18.6%',
        trend: 'down' as const,
        icon: Calendar,
        color: 'from-orange-500 to-amber-500',
      },
    ],
    usageData: [
      { day: 'Q1', image: 7340, text: 5050, video: 3380, music: 2510 },
      { day: 'Q2', image: 8920, text: 6100, video: 4020, music: 3010 },
      { day: 'Q3', image: 10890, text: 7450, video: 4920, music: 3680 },
      { day: 'Q4', image: 12450, text: 8520, video: 5620, music: 4210 },
    ],
    categoryDistribution: [
      { name: '图片生成', value: 43, color: '#8B5CF6' },
      { name: '文案生成', value: 29, color: '#3B82F6' },
      { name: '视频生成', value: 16, color: '#EC4899' },
      { name: '音乐生成', value: 12, color: '#10B981' },
    ],
  },
};

const recentActivities = [
  {
    type: '图片',
    user: '用户A',
    action: '生成了美妆护肤主图',
    time: '2分钟前',
    status: 'success',
  },
  {
    type: '视频',
    user: '用户B',
    action: '生成了产品展示视频',
    time: '5分钟前',
    status: 'success',
  },
  {
    type: '文案',
    user: '用户C',
    action: '生成了商品描述文案',
    time: '8分钟前',
    status: 'success',
  },
  {
    type: '图片',
    user: '用户D',
    action: '下载了生成的图片',
    time: '12分钟前',
    status: 'success',
  },
  { type: '音乐', user: '用户E', action: '生成了背景音乐', time: '15分钟前', status: 'success' },
  {
    type: '视频',
    user: '用户F',
    action: '正在生成视频...',
    time: '18分钟前',
    status: 'processing',
  },
];

const Dashboard = () => {
  const [activeTab, setActiveTab] = useState('week');
  const [showFilterModal, setShowFilterModal] = useState(false);
  const [selectedContentType, setSelectedContentType] = useState<string>('全部');
  const [selectedUserType, setSelectedUserType] = useState<string>('全部用户');
  const navigate = useNavigate();

  const currentData = useMemo(() => dataByPeriod[activeTab], [activeTab]);

  const pieChartPaths = useMemo(
    () => generatePieChartPaths(currentData.categoryDistribution),
    [currentData.categoryDistribution]
  );

  const maxUsage = useMemo(() => {
    return Math.max(
      ...currentData.usageData.flatMap((d) => [d.image, d.text, d.video, d.music])
    );
  }, [currentData.usageData]);

  const summaryCards = useMemo(() => currentData.summaryCards, [currentData.summaryCards]);
  const usageData = useMemo(() => currentData.usageData, [currentData.usageData]);
  const categoryDistribution = useMemo(() => currentData.categoryDistribution, [currentData.categoryDistribution]);

  const handleNavigate = useCallback((path: string) => {
    navigate(path);
  }, [navigate]);

  const handleResetFilter = useCallback(() => {
    setSelectedContentType('全部');
    setSelectedUserType('全部用户');
  }, []);

  const handleCloseFilterModal = useCallback(() => {
    setShowFilterModal(false);
  }, []);

  const handleApplyFilter = useCallback(() => {
    setShowFilterModal(false);
  }, []);

  return (
    <Layout>
      <div className='min-h-screen bg-gray-50'>
        <div className='w-full px-4 py-6'>
          <div className='flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6'>
            <div>
              <h1 className='text-2xl font-bold text-gray-900'>数据仪表盘</h1>
              <p className='text-gray-500 text-sm'>实时监控平台运行数据和用户行为</p>
            </div>
            <div className='flex items-center gap-2'>
              {tabs.map((tab) => (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                    activeTab === tab.id
                      ? 'bg-primary text-white'
                      : 'bg-white text-gray-600 hover:bg-gray-100'
                  }`}
                >
                  {tab.label}
                </button>
              ))}
            </div>
          </div>

          <div className='grid md:grid-cols-4 gap-4 mb-6'>
            {summaryCards.map((card, idx) => {
              const Icon = card.icon;
              return (
                <div
                  key={idx}
                  className='bg-white rounded-xl p-4 shadow-sm'
                >
                  <div className='flex items-center justify-between mb-3'>
                    <div
                      className={`w-10 h-10 bg-gradient-to-br ${card.color} rounded-lg flex items-center justify-center`}
                    >
                      <Icon className='w-5 h-5 text-white' />
                    </div>
                    {card.trend === 'up' ? (
                      <TrendingUp className='w-5 h-5 text-green-500' />
                    ) : (
                      <TrendingDown className='w-5 h-5 text-red-500' />
                    )}
                  </div>
                  <div className='text-2xl font-bold text-gray-900 mb-1'>{card.value}</div>
                  <div className='text-sm text-gray-500 mb-1'>{card.title}</div>
                  <div
                    className={`text-xs font-medium ${card.trend === 'up' ? 'text-green-600' : 'text-red-600'}`}
                  >
                    {card.change} vs 上期
                  </div>
                </div>
              );
            })}
          </div>

          <div className='grid lg:grid-cols-3 gap-6 mb-6'>
            <div className='lg:col-span-2 bg-white rounded-xl p-6 shadow-sm'>
              <div className='flex items-center justify-between mb-6'>
                <h3 className='font-semibold text-gray-900 flex items-center gap-2'>
                  <BarChart2 className='w-5 h-5 text-primary' />
                  生成趋势分析
                </h3>
                <button
                  type='button'
                  className='flex items-center gap-1 text-sm text-primary hover:text-primary/80'
                  onClick={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    setShowFilterModal(true);
                  }}
                >
                  <Filter className='w-4 h-4' />
                  筛选
                </button>
              </div>

              <div className='h-64 flex items-end justify-between gap-4'>
                {usageData.map((day, idx) => (
                  <div
                    key={idx}
                    className='flex-1 flex flex-col items-center gap-2'
                  >
                    <div className='w-full flex items-end gap-1 h-48'>
                      <div
                        className='flex-1 bg-purple-500 rounded-t opacity-80 hover:opacity-100 transition-opacity'
                        style={{ height: `${(day.image / maxUsage) * 100}%` }}
                        title='图片'
                      />
                      <div
                        className='flex-1 bg-blue-500 rounded-t opacity-80 hover:opacity-100 transition-opacity'
                        style={{ height: `${(day.text / maxUsage) * 100}%` }}
                        title='文案'
                      />
                      <div
                        className='flex-1 bg-pink-500 rounded-t opacity-80 hover:opacity-100 transition-opacity'
                        style={{ height: `${(day.video / maxUsage) * 100}%` }}
                        title='视频'
                      />
                      <div
                        className='flex-1 bg-green-500 rounded-t opacity-80 hover:opacity-100 transition-opacity'
                        style={{ height: `${(day.music / maxUsage) * 100}%` }}
                        title='音乐'
                      />
                    </div>
                    <span className='text-xs text-gray-500'>{day.day}</span>
                  </div>
                ))}
              </div>

              <div className='flex justify-center gap-6 mt-4'>
                <div className='flex items-center gap-2'>
                  <div className='w-3 h-3 rounded bg-purple-500'></div>
                  <span className='text-xs text-gray-500'>图片</span>
                </div>
                <div className='flex items-center gap-2'>
                  <div className='w-3 h-3 rounded bg-blue-500'></div>
                  <span className='text-xs text-gray-500'>文案</span>
                </div>
                <div className='flex items-center gap-2'>
                  <div className='w-3 h-3 rounded bg-pink-500'></div>
                  <span className='text-xs text-gray-500'>视频</span>
                </div>
                <div className='flex items-center gap-2'>
                  <div className='w-3 h-3 rounded bg-green-500'></div>
                  <span className='text-xs text-gray-500'>音乐</span>
                </div>
              </div>
            </div>

            <div className='bg-white rounded-xl p-6 shadow-sm'>
              <h3 className='font-semibold text-gray-900 flex items-center gap-2 mb-6'>
                <PieChart className='w-5 h-5 text-primary' />
                分类分布
              </h3>

              <div className='flex flex-col items-center'>
                <svg
                  viewBox='0 0 100 100'
                  className='w-48 h-48'
                >
                  {pieChartPaths.map((path, idx) => (
                    <path
                      key={idx}
                      d={path}
                      fill={categoryDistribution[idx].color}
                      className='hover:opacity-80 transition-opacity cursor-pointer'
                    />
                  ))}
                </svg>

                <div className='w-full mt-4 space-y-3'>
                  {categoryDistribution.map((item, idx) => (
                    <div
                      key={idx}
                      className='flex items-center justify-between'
                    >
                      <div className='flex items-center gap-2'>
                        <div
                          className='w-3 h-3 rounded-full'
                          style={{ backgroundColor: item.color }}
                        ></div>
                        <span className='text-sm text-gray-600'>{item.name}</span>
                      </div>
                      <span className='text-sm font-bold text-gray-900'>{item.value}%</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>

          <div className='grid lg:grid-cols-3 gap-6'>
            <div className='lg:col-span-2 bg-white rounded-xl p-6 shadow-sm'>
              <h3 className='font-semibold text-gray-900 mb-6'>实时活动流</h3>
              <div className='space-y-4'>
                {recentActivities.map((activity, idx) => (
                  <div
                    key={idx}
                    className='flex items-center gap-4 p-3 hover:bg-gray-50 rounded-lg transition-colors'
                  >
                    <div
                      className={`w-10 h-10 rounded-lg flex items-center justify-center ${
                        activity.type === '图片'
                          ? 'bg-purple-100'
                          : activity.type === '视频'
                            ? 'bg-pink-100'
                            : activity.type === '文案'
                              ? 'bg-blue-100'
                              : 'bg-green-100'
                      }`}
                    >
                      {activity.type === '图片' && <Image className='w-5 h-5 text-purple-600' />}
                      {activity.type === '视频' && <Video className='w-5 h-5 text-pink-600' />}
                      {activity.type === '文案' && <FileText className='w-5 h-5 text-blue-600' />}
                      {activity.type === '音乐' && <Music className='w-5 h-5 text-green-600' />}
                    </div>
                    <div className='flex-1'>
                      <div className='font-medium text-gray-900'>
                        {activity.user} {activity.action}
                      </div>
                    </div>
                    <div className='flex items-center gap-2'>
                      <span
                        className={`px-2 py-0.5 rounded-full text-xs ${
                          activity.status === 'success'
                            ? 'bg-green-100 text-green-600'
                            : 'bg-yellow-100 text-yellow-600'
                        }`}
                      >
                        {activity.status === 'success' ? '完成' : '处理中'}
                      </span>
                      <span className='text-xs text-gray-400'>{activity.time}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className='bg-white rounded-xl p-6 shadow-sm'>
              <h3 className='font-semibold text-gray-900 mb-6'>快速操作</h3>
              <div className='space-y-3'>
                <button
                  className='w-full flex items-center gap-3 p-3 bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg hover:from-purple-100 hover:to-pink-100 transition-all'
                  onClick={() => handleNavigate('/home-poster')}
                >
                  <div className='w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg flex items-center justify-center'>
                    <Image className='w-5 h-5 text-white' />
                  </div>
                  <div className='text-left'>
                    <div className='font-medium text-gray-900'>生成图片</div>
                    <div className='text-xs text-gray-500'>创建AI图像</div>
                  </div>
                  <ArrowRight className='w-4 h-4 text-gray-400 ml-auto' />
                </button>

                <button
                  className='w-full flex items-center gap-3 p-3 bg-gradient-to-r from-blue-50 to-cyan-50 rounded-lg hover:from-blue-100 hover:to-cyan-100 transition-all'
                  onClick={() => handleNavigate('/text')}
                >
                  <div className='w-10 h-10 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-lg flex items-center justify-center'>
                    <FileText className='w-5 h-5 text-white' />
                  </div>
                  <div className='text-left'>
                    <div className='font-medium text-gray-900'>生成文案</div>
                    <div className='text-xs text-gray-500'>创建营销文案</div>
                  </div>
                  <ArrowRight className='w-4 h-4 text-gray-400 ml-auto' />
                </button>

                <button
                  className='w-full flex items-center gap-3 p-3 bg-gradient-to-r from-orange-50 to-amber-50 rounded-lg hover:from-orange-100 hover:to-amber-100 transition-all'
                  onClick={() => handleNavigate('/video')}
                >
                  <div className='w-10 h-10 bg-gradient-to-br from-orange-500 to-amber-500 rounded-lg flex items-center justify-center'>
                    <Video className='w-5 h-5 text-white' />
                  </div>
                  <div className='text-left'>
                    <div className='font-medium text-gray-900'>生成视频</div>
                    <div className='text-xs text-gray-500'>创建短视频</div>
                  </div>
                  <ArrowRight className='w-4 h-4 text-gray-400 ml-auto' />
                </button>

                <button
                  className='w-full flex items-center gap-3 p-3 bg-gradient-to-r from-green-50 to-teal-50 rounded-lg hover:from-green-100 hover:to-teal-100 transition-all'
                  onClick={() => handleNavigate('/music')}
                >
                  <div className='w-10 h-10 bg-gradient-to-br from-green-500 to-teal-500 rounded-lg flex items-center justify-center'>
                    <Music className='w-5 h-5 text-white' />
                  </div>
                  <div className='text-left'>
                    <div className='font-medium text-gray-900'>生成音乐</div>
                    <div className='text-xs text-gray-500'>创建背景音乐</div>
                  </div>
                  <ArrowRight className='w-4 h-4 text-gray-400 ml-auto' />
                </button>
              </div>
            </div>
          </div>

          {showFilterModal && (
            <div
              className='fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4'
              onClick={handleCloseFilterModal}
            >
              <div
                className='bg-white rounded-2xl p-6 w-full max-w-md'
                onClick={(e) => e.stopPropagation()}
              >
                <form onSubmit={(e) => e.preventDefault()}>
                  <div className='flex items-center justify-between mb-6'>
                    <h3 className='text-xl font-bold text-gray-900 flex items-center gap-2'>
                      <Filter className='w-5 h-5 text-primary' />
                      筛选条件
                    </h3>
                    <button
                      type='button'
                      className='p-2 hover:bg-gray-100 rounded-lg transition-colors'
                      onClick={handleCloseFilterModal}
                    >
                      <X className='w-5 h-5 text-gray-500' />
                    </button>
                  </div>

                  <div className='space-y-4'>
                    <div>
                      <label className='block text-sm font-medium text-gray-700 mb-2'>
                        内容类型
                      </label>
                      <div className='flex flex-wrap gap-2'>
                        {['全部', '图片', '文案', '视频', '音乐'].map((type) => (
                          <button
                            key={type}
                            type='button'
                            className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                              selectedContentType === type
                                ? 'bg-primary text-white'
                                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                            }`}
                            onClick={() => setSelectedContentType(type)}
                          >
                            {type}
                          </button>
                        ))}
                      </div>
                    </div>

                    <div>
                      <label className='block text-sm font-medium text-gray-700 mb-2'>
                        时间范围
                      </label>
                      <div className='flex gap-2'>
                        <select className='flex-1 px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20'>
                          <option>今天</option>
                          <option>昨天</option>
                          <option>本周</option>
                          <option>本月</option>
                          <option>本季度</option>
                          <option>本年</option>
                        </select>
                        <span className='flex items-center text-gray-400'>至</span>
                        <select className='flex-1 px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20'>
                          <option>今天</option>
                          <option>昨天</option>
                          <option>本周</option>
                          <option>本月</option>
                          <option>本季度</option>
                          <option>本年</option>
                        </select>
                      </div>
                    </div>

                    <div>
                      <label className='block text-sm font-medium text-gray-700 mb-2'>
                        用户类型
                      </label>
                      <div className='flex flex-wrap gap-2'>
                        {['全部用户', '普通用户', 'VIP用户', '专业用户'].map((userType) => (
                          <button
                            key={userType}
                            type='button'
                            className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                              selectedUserType === userType
                                ? 'bg-primary text-white'
                                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                            }`}
                            onClick={() => setSelectedUserType(userType)}
                          >
                            {userType}
                          </button>
                        ))}
                      </div>
                    </div>
                  </div>

                  <div className='flex gap-3 mt-6'>
                    <Button
                      variant='secondary'
                      className='flex-1'
                      onClick={(e) => {
                        e.preventDefault();
                        e.stopPropagation();
                        handleResetFilter();
                      }}
                    >
                      重置
                    </Button>
                    <Button
                      variant='primary'
                      className='flex-1'
                      onClick={handleApplyFilter}
                    >
                      应用筛选
                    </Button>
                  </div>
                </form>
              </div>
            </div>
          )}
        </div>
      </div>
    </Layout>
  );
};

export default Dashboard;