'use client';

import { Button } from '@/components/common';
import { PageContainer } from '@/components/layout';
import { StatCard } from '@/components/features/dashboard/StatCard';
import { TrendChart } from '@/components/features/dashboard/TrendChart';
import { RegionDistribution } from '@/components/features/dashboard/RegionDistribution';
import { RecentActivity } from '@/components/features/dashboard/RecentActivity';
import styles from './dashboard.module.scss';

// 模拟统计数据
const statsData = [
  {
    title: '总认种量',
    value: 12580,
    suffix: '棵',
    change: { value: 5.6, trend: 'up' as const },
    color: '#1565C0',
  },
  {
    title: '活跃用户',
    value: 3240,
    suffix: '人',
    change: { value: 3.2, trend: 'up' as const },
    color: '#4CAF50',
  },
  {
    title: '省级公司',
    value: 28,
    suffix: '家',
    change: { value: 2.1, trend: 'up' as const },
    color: '#F5A623',
  },
  {
    title: '市级公司',
    value: 156,
    suffix: '家',
    change: { value: 4.8, trend: 'up' as const },
    color: '#9C27B0',
  },
];

// 模拟趋势数据
const trendData = [
  { date: '03-19', value: 150 },
  { date: '03-20', value: 280 },
  { date: '03-21', value: 320 },
  { date: '03-22', value: 250 },
  { date: '03-23', value: 380 },
  { date: '03-24', value: 420 },
  { date: '03-25', value: 390 },
];

// 模拟区域分布数据
const regionData = [
  { region: '华东地区', percentage: 35, color: '#1565C0' },
  { region: '华南地区', percentage: 25, color: '#4CAF50' },
  { region: '华北地区', percentage: 20, color: '#F5A623' },
  { region: '华中地区', percentage: 12, color: '#9C27B0' },
  { region: '其他地区', percentage: 8, color: '#607D8B' },
];

// 模拟最近活动数据
const activityData = [
  {
    id: '1',
    type: 'user_register' as const,
    icon: '👤',
    title: '新用户注册',
    description: '用户 张三 完成注册',
    timestamp: '5分钟前',
  },
  {
    id: '2',
    type: 'company_activity' as const,
    icon: '🏢',
    title: '公司授权',
    description: '广东省公司完成授权',
    timestamp: '15分钟前',
  },
  {
    id: '3',
    type: 'system_update' as const,
    icon: '⚙️',
    title: '系统更新',
    description: '龙虎榜规则已更新',
    timestamp: '1小时前',
  },
  {
    id: '4',
    type: 'report_generated' as const,
    icon: '📊',
    title: '报表生成',
    description: '3月份运营报表已生成',
    timestamp: '2小时前',
  },
  {
    id: '5',
    type: 'user_register' as const,
    icon: '👤',
    title: '新用户注册',
    description: '用户 李四 完成注册',
    timestamp: '3小时前',
  },
];

export default function DashboardPage() {
  const headerActions = (
    <>
      <Button variant="outline" size="sm">
        添加用户
      </Button>
      <Button variant="outline" size="sm">
        授权管理
      </Button>
      <Button variant="primary" size="sm">
        查看报表
      </Button>
    </>
  );

  return (
    <PageContainer
      title="仪表板"
      breadcrumb={[{ label: '首页', path: '/' }, { label: '仪表板' }]}
      actions={headerActions}
    >
      <div className={styles.dashboard}>
        {/* 统计卡片区 */}
        <div className={styles.dashboard__stats}>
          {statsData.map((stat, index) => (
            <StatCard key={index} {...stat} />
          ))}
        </div>

        {/* 图表区 */}
        <div className={styles.dashboard__charts}>
          <div className={styles.dashboard__mainChart}>
            <TrendChart title="认种趋势" data={trendData} />
          </div>
          <div className={styles.dashboard__sidePanel}>
            <RecentActivity activities={activityData} />
          </div>
        </div>

        {/* 底部区域 */}
        <div className={styles.dashboard__bottom}>
          <div className={styles.dashboard__regionChart}>
            <RegionDistribution data={regionData} />
          </div>
        </div>
      </div>
    </PageContainer>
  );
}