'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { Users, FolderKanban, CheckSquare, Zap } from 'lucide-react';

interface DashboardStats {
  totalUsers: number;
  totalProjects: number;
  totalTasks: number;
  activeTasks: number;
  pendingTasks: number;
  failedTasks: number;
  completedTasks: number;
}

interface StatsCardsProps {
  stats?: DashboardStats;
  isLoading: boolean;
}

const statItems = [
  {
    key: 'totalUsers' as const,
    label: '总用户数',
    icon: Users,
    color: 'text-blue-500',
    bgColor: 'bg-blue-500/10',
  },
  {
    key: 'totalProjects' as const,
    label: '总项目数',
    icon: FolderKanban,
    color: 'text-emerald-500',
    bgColor: 'bg-emerald-500/10',
  },
  {
    key: 'totalTasks' as const,
    label: '总任务数',
    icon: CheckSquare,
    color: 'text-amber-500',
    bgColor: 'bg-amber-500/10',
  },
  {
    key: 'activeTasks' as const,
    label: '活跃任务',
    icon: Zap,
    color: 'text-purple-500',
    bgColor: 'bg-purple-500/10',
  },
];

export function StatsCards({ stats, isLoading }: StatsCardsProps) {
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      {statItems.map((item) => {
        const Icon = item.icon;
        const value = stats?.[item.key] ?? 0;

        return (
          <Card key={item.key}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">
                {item.label}
              </CardTitle>
              <div className={`${item.bgColor} p-2 rounded-md`}>
                <Icon className={`h-4 w-4 ${item.color}`} />
              </div>
            </CardHeader>
            <CardContent>
              {isLoading ? (
                <Skeleton className="h-8 w-20" />
              ) : (
                <div className="text-2xl font-bold">{value.toLocaleString()}</div>
              )}
            </CardContent>
          </Card>
        );
      })}
    </div>
  );
}
