import React from 'react';
import { useNavigate } from 'react-router';
import { Users, Bell, Eye, TrendingUp, TrendingDown, Activity } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/client/components/ui/card';
import { Badge } from '@/client/components/ui/badge';
import { Progress } from '@/client/components/ui/progress';

// 仪表盘页面
export const DashboardPage = () => {
  const navigate = useNavigate();
  const stats = [
    {
      title: '活跃用户',
      value: '112,893',
      icon: Users,
      color: 'text-blue-500',
      bgColor: 'bg-blue-50',
      trend: 12.5,
      trendDirection: 'up',
      description: '较昨日增长 12.5%',
    },
    {
      title: '系统消息',
      value: '93',
      icon: Bell,
      color: 'text-yellow-500',
      bgColor: 'bg-yellow-50',
      trend: 0,
      trendDirection: 'neutral',
      description: '其中 5 条未读',
    },
    {
      title: '在线用户',
      value: '1,128',
      icon: Eye,
      color: 'text-purple-500',
      bgColor: 'bg-purple-50',
      trend: 32.1,
      trendDirection: 'up',
      description: '当前在线率 32.1%',
    },
  ];

  const recentActivities = [
    {
      id: 1,
      user: '张三',
      action: '登录系统',
      time: '2分钟前',
      status: 'success',
    },
    {
      id: 2,
      user: '李四',
      action: '创建了新用户',
      time: '5分钟前',
      status: 'info',
    },
    {
      id: 3,
      user: '王五',
      action: '删除了用户',
      time: '10分钟前',
      status: 'warning',
    },
    {
      id: 4,
      user: '赵六',
      action: '修改了配置',
      time: '15分钟前',
      status: 'info',
    },
  ];

  const systemMetrics = [
    {
      name: 'CPU使用率',
      value: 65,
      color: 'bg-green-500',
    },
    {
      name: '内存使用率',
      value: 78,
      color: 'bg-blue-500',
    },
    {
      name: '磁盘使用率',
      value: 45,
      color: 'bg-purple-500',
    },
    {
      name: '网络使用率',
      value: 32,
      color: 'bg-orange-500',
    },
  ];

  const handleQuickActionClick = (action: string) => {
    switch (action) {
      case 'users':
        navigate('/admin/users');
        break;
      case 'settings':
        navigate('/admin/settings');
        break;
      case 'backup':
        navigate('/admin/backup');
        break;
      case 'logs':
        navigate('/admin/logs');
        break;
      default:
        break;
    }
  };

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">仪表盘</h1>
        <p className="text-muted-foreground">
          欢迎回来！这里是系统概览和关键指标。
        </p>
      </div>

      {/* 统计卡片 */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {stats.map((stat, index) => {
          const Icon = stat.icon;
          return (
            <Card key={index} className="transition-all duration-300 hover:shadow-lg">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">
                  {stat.title}
                </CardTitle>
                <div className={`p-2 rounded-full ${stat.bgColor}`}>
                  <Icon className={`h-4 w-4 ${stat.color}`} />
                </div>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{stat.value}</div>
                <div className="flex items-center space-x-2">
                  {stat.trendDirection === 'up' && (
                    <TrendingUp className="h-4 w-4 text-green-500" />
                  )}
                  {stat.trendDirection === 'down' && (
                    <TrendingDown className="h-4 w-4 text-red-500" />
                  )}
                  <p className="text-xs text-muted-foreground">{stat.description}</p>
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
        {/* 系统性能 */}
        <Card className="lg:col-span-4">
          <CardHeader>
            <CardTitle>系统性能</CardTitle>
            <CardDescription>
              当前系统各项资源的使用情况
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {systemMetrics.map((metric, index) => (
                <div key={index} className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span className="font-medium">{metric.name}</span>
                    <span className="text-muted-foreground">{metric.value}%</span>
                  </div>
                  <Progress value={metric.value} className="h-2" />
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* 最近活动 */}
        <Card className="lg:col-span-3">
          <CardHeader>
            <CardTitle>最近活动</CardTitle>
            <CardDescription>
              系统最新操作记录
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {recentActivities.map((activity) => (
                <div key={activity.id} className="flex items-center space-x-4">
                  <div className="flex-shrink-0">
                    <div className={`p-2 rounded-full ${
                      activity.status === 'success' ? 'bg-green-100' :
                      activity.status === 'warning' ? 'bg-yellow-100' : 'bg-blue-100'
                    }`}>
                      <Activity className={`h-4 w-4 ${
                        activity.status === 'success' ? 'text-green-600' :
                        activity.status === 'warning' ? 'text-yellow-600' : 'text-blue-600'
                      }`} />
                    </div>
                  </div>
                  <div className="flex-1 space-y-1">
                    <p className="text-sm font-medium">
                      {activity.user} {activity.action}
                    </p>
                    <p className="text-sm text-muted-foreground">
                      {activity.time}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 快捷操作 */}
      <Card>
        <CardHeader>
          <CardTitle>快捷操作</CardTitle>
          <CardDescription>
            常用的管理功能
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            <Card
              className="hover:shadow-md transition-all cursor-pointer"
              onClick={() => handleQuickActionClick('users')}
            >
              <CardHeader className="pb-3">
                <CardTitle className="text-base">用户管理</CardTitle>
                <CardDescription>查看和管理所有用户</CardDescription>
              </CardHeader>
            </Card>
            <Card
              className="hover:shadow-md transition-all cursor-pointer"
              onClick={() => handleQuickActionClick('settings')}
            >
              <CardHeader className="pb-3">
                <CardTitle className="text-base">系统设置</CardTitle>
                <CardDescription>配置系统参数</CardDescription>
              </CardHeader>
            </Card>
            <Card
              className="hover:shadow-md transition-all cursor-pointer"
              onClick={() => handleQuickActionClick('backup')}
            >
              <CardHeader className="pb-3">
                <CardTitle className="text-base">数据备份</CardTitle>
                <CardDescription>执行数据备份操作</CardDescription>
              </CardHeader>
            </Card>
            <Card
              className="hover:shadow-md transition-all cursor-pointer"
              onClick={() => handleQuickActionClick('logs')}
            >
              <CardHeader className="pb-3">
                <CardTitle className="text-base">日志查看</CardTitle>
                <CardDescription>查看系统日志</CardDescription>
              </CardHeader>
            </Card>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};