import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import { DashboardStats, UserDashboardStats } from "./service";

interface DashboardStatsCardProps {
  stats: DashboardStats | UserDashboardStats;
  showUserStats?: boolean;
}

export function DashboardStatsCard({ stats, showUserStats = false }: DashboardStatsCardProps) {
  const userStats = showUserStats ? stats as UserDashboardStats : null;
  
  const completionRate = stats.total > 0 ? Math.round((stats.completed / stats.total) * 100) : 0;
  const myCompletionRate = userStats && userStats.myTotal > 0 
    ? Math.round((userStats.myCompleted / userStats.myTotal) * 100) 
    : 0;

  return (
    <Card className="h-full">
      <CardHeader className="pb-3">
        <CardTitle className="text-lg font-medium">{stats.displayName}</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* 팀 전체 통계 */}
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <span className="text-sm font-medium text-muted-foreground">팀 전체</span>
            <span className="text-sm font-bold">{stats.total}건</span>
          </div>
          
          <div className="flex gap-2">
            <Badge variant="secondary" className="text-xs">
              대기 {stats.pending}
            </Badge>
            <Badge variant="default" className="text-xs bg-blue-500">
              진행 {stats.inProgress}
            </Badge>
            <Badge variant="default" className="text-xs bg-green-500">
              완료 {stats.completed}
            </Badge>
          </div>
          
          <div className="space-y-1">
            <div className="flex justify-between text-xs">
              <span>완료율</span>
              <span>{completionRate}%</span>
            </div>
            <Progress value={completionRate} className="h-2" />
          </div>
        </div>

        {/* 개인 통계 */}
        {showUserStats && userStats && (
          <>
            <hr className="border-muted" />
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <span className="text-sm font-medium text-muted-foreground">내 업무</span>
                <span className="text-sm font-bold">{userStats.myTotal}건</span>
              </div>
              
              <div className="flex gap-2">
                <Badge variant="outline" className="text-xs">
                  대기 {userStats.myPending}
                </Badge>
                <Badge variant="outline" className="text-xs border-blue-500 text-blue-600">
                  진행 {userStats.myInProgress}
                </Badge>
                <Badge variant="outline" className="text-xs border-green-500 text-green-600">
                  완료 {userStats.myCompleted}
                </Badge>
              </div>
              
              <div className="space-y-1">
                <div className="flex justify-between text-xs">
                  <span>완료율</span>
                  <span>{myCompletionRate}%</span>
                </div>
                <Progress value={myCompletionRate} className="h-2" />
              </div>
            </div>
          </>
        )}
      </CardContent>
    </Card>
  );
}