import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { Badge } from "../ui/badge";
import { UserCheck, Coffee, Plane } from "lucide-react";

export function HRStatusWidget() {
  // Mock 데이터 (실제로는 API에서 가져옴)
  const hr = {
    totalEmployees: 145,
    attendanceRate: 94.5
  };
  
  const vacationAndTrip = {
    currentVacation: {
      onLeave: 8
    },
    businessTrips: {
      ongoing: 5
    },
    recentActivity: [
      { employee: '김철수', type: '연차', period: '2024-10-28 ~ 10-29', status: '진행중' },
      { employee: '이영희', type: '출장', period: '2024-10-27 ~ 10-30', status: '진행중' },
      { employee: '박민수', type: '반차', period: '2024-10-28 오후', status: '진행중' }
    ]
  };

  return (
    <Card className="border border-border/20 bg-card rounded-xl">
      <CardHeader>
        <CardTitle className="flex items-center space-x-3">
          <div className="w-6 h-6 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
            <UserCheck className="h-4 w-4 text-blue-600 dark:text-blue-400" />
          </div>
          <span>인사 현황</span>
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {/* 출근 현황 */}
          <div className="grid grid-cols-2 gap-3">
            <div className="p-3 bg-green-50 dark:bg-green-950/20 rounded-lg">
              <p className="text-sm text-muted-foreground">총 인원</p>
              <p className="text-2xl">{hr.totalEmployees}명</p>
            </div>
            <div className="p-3 bg-blue-50 dark:bg-blue-950/20 rounded-lg">
              <p className="text-sm text-muted-foreground">출근율</p>
              <p className="text-2xl text-blue-600">{hr.attendanceRate}%</p>
            </div>
          </div>

          {/* 휴가/출장 */}
          <div className="space-y-2">
            <div className="flex items-center justify-between p-3 bg-muted/50 dark:bg-muted/20 rounded-lg">
              <div className="flex items-center space-x-2">
                <Coffee className="h-4 w-4 text-orange-600" />
                <span className="text-sm">휴가 사용중</span>
              </div>
              <Badge variant="secondary">{vacationAndTrip.currentVacation.onLeave}명</Badge>
            </div>
            <div className="flex items-center justify-between p-3 bg-muted/50 dark:bg-muted/20 rounded-lg">
              <div className="flex items-center space-x-2">
                <Plane className="h-4 w-4 text-blue-600" />
                <span className="text-sm">출장중</span>
              </div>
              <Badge variant="secondary">{vacationAndTrip.businessTrips.ongoing}명</Badge>
            </div>
          </div>

          {/* 최근 활동 */}
          <div className="space-y-2">
            <h4 className="text-sm font-medium">최근 활동</h4>
            {vacationAndTrip.recentActivity.slice(0, 3).map((activity: any, index: number) => (
              <div key={index} className="text-sm p-2 bg-muted/30 dark:bg-muted/10 rounded">
                <div className="flex justify-between">
                  <span className="text-foreground">{activity.employee}</span>
                  <Badge 
                    variant="outline" 
                    className={activity.status === '진행중' ? 'bg-blue-50' : 'bg-gray-50'}
                  >
                    {activity.type}
                  </Badge>
                </div>
                <p className="text-xs text-muted-foreground mt-1">{activity.period}</p>
              </div>
            ))}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
