'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import {
  Users,
  UserCheck,
  Palmtree,
  Clock,
  UserX,
  ChevronRight,
} from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { CollapsibleDashboardCard } from '../components';
import type { DailyAttendanceData } from '../types';

interface DailyAttendanceSectionProps {
  data: DailyAttendanceData;
}

export function DailyAttendanceSection({ data }: DailyAttendanceSectionProps) {
  const router = useRouter();
  const [statusFilter, setStatusFilter] = useState('all');

  const filteredEmployees = data.employees.filter(
    (emp) => statusFilter === 'all' || emp.status === statusFilter
  );

  const statusBadgeClass = (status: string) => {
    switch (status) {
      case '출근': return 'text-green-600 border-green-200 bg-green-50 dark:text-green-400 dark:border-green-800 dark:bg-green-900/30';
      case '휴가': return 'text-blue-600 border-blue-200 bg-blue-50 dark:text-blue-400 dark:border-blue-800 dark:bg-blue-900/30';
      case '지각': return 'text-orange-600 border-orange-200 bg-orange-50 dark:text-orange-400 dark:border-orange-800 dark:bg-orange-900/30';
      case '결근': return 'text-red-600 border-red-200 bg-red-50 dark:text-red-400 dark:border-red-800 dark:bg-red-900/30';
      default: return 'text-muted-foreground border-border bg-muted/50';
    }
  };

  return (
    <CollapsibleDashboardCard
      icon={<Users style={{ color: '#ffffff' }} className="h-5 w-5" />}
      title="당일 근태 현황"
      subtitle="오늘의 출근 현황"
      rightElement={
        <Button
          variant="ghost"
          size="sm"
          onClick={(e) => { e.stopPropagation(); router.push('/hr/attendance-management'); }}
          className="text-white hover:bg-white/10 gap-1 text-xs"
        >
          근태관리
          <ChevronRight className="h-3 w-3" />
        </Button>
      }
    >
        {/* 요약 카드 4개 */}
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
          <div className="rounded-lg border p-3 text-center bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-800">
            <div className="flex items-center justify-center gap-1 mb-1">
              <UserCheck className="h-3.5 w-3.5 text-green-500" />
              <span className="text-xs font-medium text-green-600 dark:text-green-400">출근</span>
            </div>
            <span className="text-xl font-bold text-foreground">{data.present}명</span>
          </div>
          <div className="rounded-lg border p-3 text-center bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-800">
            <div className="flex items-center justify-center gap-1 mb-1">
              <Palmtree className="h-3.5 w-3.5 text-blue-500" />
              <span className="text-xs font-medium text-blue-600 dark:text-blue-400">휴가</span>
            </div>
            <span className="text-xl font-bold text-foreground">{data.onLeave}명</span>
          </div>
          <div className="rounded-lg border p-3 text-center bg-orange-50 dark:bg-orange-900/30 border-orange-200 dark:border-orange-800">
            <div className="flex items-center justify-center gap-1 mb-1">
              <Clock className="h-3.5 w-3.5 text-orange-500" />
              <span className="text-xs font-medium text-orange-600 dark:text-orange-400">지각</span>
            </div>
            <span className="text-xl font-bold text-foreground">{data.late}명</span>
          </div>
          <div className="rounded-lg border p-3 text-center bg-red-50 dark:bg-red-900/30 border-red-200 dark:border-red-800">
            <div className="flex items-center justify-center gap-1 mb-1">
              <UserX className="h-3.5 w-3.5 text-red-500" />
              <span className="text-xs font-medium text-red-600 dark:text-red-400">결근</span>
            </div>
            <span className="text-xl font-bold text-foreground">{data.absent}명</span>
          </div>
        </div>

        {/* 테이블 */}
        <div className="border border-border rounded-lg overflow-hidden">
          <div className="p-3 bg-muted/50 border-b border-border space-y-2">
            <h4 className="text-sm font-semibold text-foreground">직원 근태 목록</h4>
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-full h-8 text-xs">
                <SelectValue placeholder="상태" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">전체</SelectItem>
                <SelectItem value="출근">출근</SelectItem>
                <SelectItem value="휴가">휴가</SelectItem>
                <SelectItem value="지각">지각</SelectItem>
                <SelectItem value="결근">결근</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="overflow-x-auto">
            <table className="w-full text-sm min-w-[400px]">
              <thead>
                <tr className="bg-muted/50 border-b border-border">
                  <th className="px-4 py-2 text-center text-muted-foreground font-medium w-12">No</th>
                  <th className="px-4 py-2 text-left text-muted-foreground font-medium">부서</th>
                  <th className="px-4 py-2 text-left text-muted-foreground font-medium">직급</th>
                  <th className="px-4 py-2 text-left text-muted-foreground font-medium">이름</th>
                  <th className="px-4 py-2 text-center text-muted-foreground font-medium">상태</th>
                </tr>
              </thead>
              <tbody>
                {filteredEmployees.map((emp, idx) => (
                  <tr key={emp.id} className="border-b border-border last:border-b-0 hover:bg-muted/50">
                    <td className="px-4 py-2 text-center text-muted-foreground">{idx + 1}</td>
                    <td className="px-4 py-2 text-muted-foreground">{emp.department}</td>
                    <td className="px-4 py-2 text-muted-foreground">{emp.position}</td>
                    <td className="px-4 py-2 text-foreground font-medium">{emp.name}</td>
                    <td className="px-4 py-2 text-center">
                      <Badge variant="outline" className={statusBadgeClass(emp.status)}>
                        {emp.status}
                      </Badge>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
    </CollapsibleDashboardCard>
  );
}
