"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Clock, CheckCircle, Eye, FileText } from "lucide-react";

interface ComplianceResponseStatsProps {
  stats: {
    inProgress: number;
    completed: number;
    reviewed: number;
    total: number;
  };
  onFilterChange?: (filter: 'all' | 'IN_PROGRESS' | 'COMPLETED' | 'REVIEWED') => void;
  currentFilter?: string;
}

export function ComplianceResponseStats({ stats, onFilterChange, currentFilter }: ComplianceResponseStatsProps) {
  return (
    <div className="grid gap-4 md:grid-cols-4">
      {/* 전체 응답 */}
      <Card 
        className={`cursor-pointer hover:shadow-md transition-shadow ${
          currentFilter === 'all' ? 'ring-2 ring-blue-500' : ''
        }`}
        onClick={() => onFilterChange?.('all')}
      >
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">전체 응답</CardTitle>
          <FileText className="h-3 w-3 text-muted-foreground" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{stats.total}</div>
          <p className="text-xs text-muted-foreground">
            총 {stats.total}개 응답
          </p>
        </CardContent>
      </Card>

      {/* 진행중 */}
      <Card 
        className={`cursor-pointer hover:shadow-md transition-shadow ${
          currentFilter === 'IN_PROGRESS' ? 'ring-2 ring-orange-500' : ''
        }`}
        onClick={() => onFilterChange?.('IN_PROGRESS')}
      >
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">진행중</CardTitle>
          <Clock className="h-4 w-4 text-orange-500" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold text-orange-500">{stats.inProgress}</div>
          <p className="text-xs text-muted-foreground">
            작성 중인 응답
          </p>
        </CardContent>
      </Card>

      {/* 제출완료 */}
      <Card 
        className={`cursor-pointer hover:shadow-md transition-shadow ${
          currentFilter === 'COMPLETED' ? 'ring-2 ring-green-500' : ''
        }`}
        onClick={() => onFilterChange?.('COMPLETED')}
      >
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">제출완료</CardTitle>
          <CheckCircle className="h-4 w-4 text-green-500" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold text-green-500">{stats.completed}</div>
          <p className="text-xs text-muted-foreground">
            제출 완료된 응답
          </p>
        </CardContent>
      </Card>

      {/* 검토완료 */}
      <Card 
        className={`cursor-pointer hover:shadow-md transition-shadow ${
          currentFilter === 'REVIEWED' ? 'ring-2 ring-blue-500' : ''
        }`}
        onClick={() => onFilterChange?.('REVIEWED')}
      >
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <CardTitle className="text-sm font-medium">검토완료</CardTitle>
          <Eye className="h-4 w-4 text-blue-500" />
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold text-blue-500">{stats.reviewed}</div>
          <p className="text-xs text-muted-foreground">
            검토 완료된 응답
          </p>
        </CardContent>
      </Card>
    </div>
  );
}