'use client';

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { Search, X, Camera, Phone, Mail, Briefcase, Ticket, FileText, ExternalLink } from 'lucide-react';
import employeeService from '@/services/employeeService';
import apiClient from '@/services/apiClient';
import { useCommonCodes } from '@/hooks/useCommonCodes';
import { useAuthStore } from '@/stores';
import type { Employee, RoleCode, EmpStatus, DispatchStatus } from '@/types';
import EmployeeEditModal from '@/components/employees/EmployeeEditModal';

const statusColor: Record<string, string> = {
  ACTIVE: 'bg-status-resolved-bg text-status-resolved-text',
  ON_LEAVE: 'bg-status-pending-bg text-status-pending-text',
  RESIGNED: 'bg-status-critical-bg text-status-critical-text',
};

const initialColors = ['bg-indigo-500', 'bg-purple-500', 'bg-blue-500', 'bg-green-500', 'bg-orange-500', 'bg-pink-500'];

function getInitialColor(name: string, index: number) {
  return initialColors[index % initialColors.length];
}

export default function EmployeesPage() {
  const [filter, setFilter] = useState('all');
  const [employees, setEmployees] = useState<Employee[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const router = useRouter();
  const { user } = useAuthStore();

  const { codes: empStatusCodes, loading: statusCodesLoading } = useCommonCodes('EMP_STATUS');
  const { codes: empRoleCodes, loading: roleCodesLoading } = useCommonCodes('EMP_ROLE');

  const roleLabel = roleCodesLoading ? {} : Object.fromEntries(empRoleCodes.map((c) => [c.codeValue, c.codeName]));

  // Detail Modal State
  const [selectedEmployee, setSelectedEmployee] = useState<Employee | null>(null);
  const [editingEmployee, setEditingEmployee] = useState<Employee | null>(null);
  const [detailDispatch, setDetailDispatch] = useState<any[]>([]);
  const [detailEquipment, setDetailEquipment] = useState<any[]>([]);
  const [detailEmergencyContacts, setDetailEmergencyContacts] = useState<any[]>([]);
  const [detailLoading, setDetailLoading] = useState(false);

  // Emergency Contact Form State
  const [showContactModal, setShowContactModal] = useState(false);
  const [contactEditing, setContactEditing] = useState<any | null>(null); // null if creating
  const [contactRel, setContactRel] = useState('');
  const [contactName, setContactName] = useState('');
  const [contactPhone, setContactPhone] = useState('');
  const [contactSubmitting, setContactSubmitting] = useState(false);

  // Phone Reveal State
  const [showPhoneDialog, setShowPhoneDialog] = useState(false);
  const [phoneReason, setPhoneReason] = useState('');
  const [revealedPhone, setRevealedPhone] = useState('');

  const fetchEmployees = async () => {
    try {
      setLoading(true);
      const res = await employeeService.getAll({ size: 100 });
      setEmployees(res.data.content);
      setError(null);
    } catch (err) {
      setError('Failed to load employees. Please try again.');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (!user) return;

    if (user.roleCode === 'EMPLOYEE') {
      setError('Only managers and admins can view employee list.');
      setLoading(false);
      return;
    }

    fetchEmployees();
  }, [user]);

  const loadEmergencyContacts = async (empId: number) => {
    try {
      const res = await apiClient.get<any>(`/employees/${empId}/emergency-contacts`);
      if (res?.data) setDetailEmergencyContacts(res.data);
    } catch {
      setDetailEmergencyContacts([]);
    }
  };

  const openDetail = async (emp: Employee) => {
    setSelectedEmployee(emp);
    setDetailLoading(true);
    setDetailDispatch([]);
    setDetailEquipment([]);
    setDetailEmergencyContacts([]);
    setRevealedPhone('');
    setPhoneReason('');

    try {
      const [dispatchRes, equipRes, contactRes] = await Promise.all([
        employeeService.getDispatchHistories(emp.empId).catch(() => null),
        apiClient.get<any>(`/employees/${emp.empId}/equipment`).catch(() => null),
        apiClient.get<any>(`/employees/${emp.empId}/emergency-contacts`).catch(() => null),
      ]);

      if (dispatchRes?.data) setDetailDispatch(dispatchRes.data);
      if (equipRes?.data) setDetailEquipment(equipRes.data);
      if (contactRes?.data) setDetailEmergencyContacts(contactRes.data);
    } catch {
      // silently ignore
    }

    setDetailLoading(false);
  };

  const closeDetail = () => {
    setSelectedEmployee(null);
    setDetailDispatch([]);
    setDetailEquipment([]);
    setDetailEmergencyContacts([]);
    setDetailLoading(false);
    setShowPhoneDialog(false);
    setPhoneReason('');
    setRevealedPhone('');
    setShowContactModal(false);
    setContactEditing(null);
  };

  const openContactForm = (contact?: any) => {
    if (contact) {
      setContactEditing(contact);
      setContactRel(contact.relationship || '');
      setContactName(contact.contactName || '');
      setContactPhone(contact.phone || '');
    } else {
      setContactEditing(null);
      setContactRel('');
      setContactName('');
      setContactPhone('');
    }
    setShowContactModal(true);
  };

  const handleSaveContact = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedEmployee || !contactRel.trim() || !contactName.trim() || !contactPhone.trim()) return;

    setContactSubmitting(true);
    try {
      const payload = {
        relationship: contactRel.trim(),
        contactName: contactName.trim(),
        phone: contactPhone.trim(),
      };

      if (contactEditing?.contactId) {
        await apiClient.put(`/employees/${selectedEmployee.empId}/emergency-contacts/${contactEditing.contactId}`, payload);
      } else {
        await apiClient.post(`/employees/${selectedEmployee.empId}/emergency-contacts`, payload);
      }

      await loadEmergencyContacts(selectedEmployee.empId);
      setShowContactModal(false);
    } catch (err) {
      console.error('Failed to save emergency contact', err);
    } finally {
      setContactSubmitting(false);
    }
  };

  const handleDeleteContact = async (contactId: number) => {
    if (!selectedEmployee || !confirm('이 비상연락처를 삭제하시겠습니까?')) return;
    try {
      await apiClient.delete(`/employees/${selectedEmployee.empId}/emergency-contacts/${contactId}`);
      await loadEmergencyContacts(selectedEmployee.empId);
    } catch (err) {
      console.error('Failed to delete emergency contact', err);
    }
  };

  const [skillKeyword, setSkillKeyword] = useState('');
  const [skillResults, setSkillResults] = useState<Employee[]>([]);

  useEffect(() => {
    if (!skillKeyword.trim()) { setSkillResults([]); return; }
    const timer = setTimeout(() => {
      employeeService.search(skillKeyword.trim()).then((res) => {
        const empIds = new Set(res.data.map((r: any) => r.empId));
        setSkillResults(employees.filter((e) => empIds.has(e.empId)));
      }).catch(() => {});
    }, 300);
    return () => clearTimeout(timer);
  }, [skillKeyword, employees]);

  const displayList = skillKeyword.trim() ? skillResults : employees;
  const filtered = filter === 'all' ? displayList : displayList.filter((e) => e.empStatus === filter);

  const stats = [
    { label: '전체', value: employees.length, color: 'text-text-main' },
    { label: '재직', value: employees.filter((e) => e.empStatus === 'ACTIVE').length, color: 'text-status-resolved-text' },
    { label: '파견중', value: employees.filter((e) => e.dispatchStatus === 'DISPATCHED').length, color: 'text-status-pending-text' },
    { label: '휴직', value: employees.filter((e) => e.empStatus === 'ON_LEAVE').length, color: 'text-status-critical-text' },
  ];

  const formatDate = (dateStr: string | null) => {
    if (!dateStr) return '-';
    return new Date(dateStr).toLocaleDateString('ko-KR', { year: 'numeric', month: '2-digit', day: '2-digit' });
  };

  // ── Detail Modal ──
  if (selectedEmployee) {
    const emp = selectedEmployee;
    const currentDispatch = detailDispatch.find((d: any) => !d.endDate) || null;
    const activeEquipments = (detailEquipment || []).filter((eq: any) => !eq.returnedDate && eq.equipment);
    const canManageContacts = user?.roleCode === 'ADMIN' || user?.roleCode === 'MANAGER';

    return (
      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4" onClick={closeDetail}>
        <div
          className="bg-surface rounded-2xl shadow-xl max-w-lg w-full max-h-[85vh] overflow-y-auto animate-in fade-in zoom-in duration-200"
          onClick={(e) => e.stopPropagation()}
        >
          {/* Header */}
          <div className="sticky top-0 bg-surface rounded-t-2xl border-b border-border px-6 py-4 flex items-center justify-between z-10">
            <h3 className="font-outfit text-lg font-semibold text-text-main">직원 상세 정보</h3>
            <button
              onClick={closeDetail}
              className="p-1.5 text-text-muted hover:text-text-main hover:bg-gray-100 rounded-lg transition-all"
            >
              <X className="w-5 h-5" />
            </button>
          </div>

          {detailLoading ? (
            <div className="p-6 space-y-6">
              <div className="bg-white rounded-2xl border border-border p-5">
                <div className="flex items-center gap-4 mb-4">
                  <div className="w-16 h-16 rounded-full bg-gray-200 animate-pulse" />
                  <div className="space-y-2 flex-1">
                    <div className="h-5 w-32 bg-gray-200 rounded animate-pulse" />
                    <div className="h-4 w-24 bg-gray-200 rounded animate-pulse" />
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-3">
                  {[1, 2, 3, 4].map((i) => (
                    <div key={i} className="h-4 bg-gray-100 rounded animate-pulse" />
                  ))}
                </div>
              </div>
              <div className="bg-white rounded-2xl border border-border p-5">
                <div className="h-5 w-24 bg-gray-200 rounded mb-3 animate-pulse" />
                <div className="h-16 bg-gray-100 rounded-xl animate-pulse" />
              </div>
            </div>
          ) : (
            <div className="p-6 space-y-5">
              {/* Profile Card */}
              <div className="bg-white rounded-2xl border border-border p-5">
                <div className="flex items-center gap-4 mb-4">
                  {emp.profileImage ? (
                    <img
                      src={emp.profileImage}
                      alt={emp.name}
                      className="w-16 h-16 rounded-full object-cover border-2 border-border"
                    />
                  ) : (
                    <div className={`w-16 h-16 rounded-full ${getInitialColor(emp.name, 0)} flex items-center justify-center text-xl font-semibold text-white`}>
                      {emp.name[0]}
                    </div>
                  )}
                  <div className="flex-1 min-w-0">
                    <h4 className="font-outfit text-lg font-semibold text-text-main">{emp.name}</h4>
                    <div className="flex flex-wrap items-center gap-1.5 mt-1">
                      <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium bg-primary/10 text-primary">
                        {roleLabel[emp.roleCode] || emp.roleCode}
                      </span>
                      <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium ${statusColor[emp.empStatus]}`}>
                        {emp.empStatus === 'ACTIVE' ? '재직' : emp.empStatus === 'ON_LEAVE' ? '휴직' : '퇴사'}
                      </span>
                      {emp.dispatchStatus === 'DISPATCHED' && (
                        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium bg-blue-100 text-blue-600">
                          파견중
                        </span>
                      )}
                    </div>
                  </div>
                </div>

                {/* Contact & Personal Info */}
                <div className="grid grid-cols-2 gap-3 text-sm">
                  {emp.email && (
                    <div className="flex items-center gap-2 text-text-muted">
                      <Mail className="w-3.5 h-3.5 flex-shrink-0" />
                      <span className="truncate">{emp.email}</span>
                    </div>
                  )}
                  <div className="flex items-center gap-2 text-text-muted">
                    <Phone className="w-3.5 h-3.5 flex-shrink-0" />
                    {emp.phone ? (
                      revealedPhone ? (
                        <span>{revealedPhone}</span>
                      ) : (
                        <button
                          onClick={() => setShowPhoneDialog(true)}
                          className="text-xs text-primary hover:underline font-medium"
                        >
                          🔒 전화번호 보기
                        </button>
                      )
                    ) : (
                      <span>-</span>
                    )}
                  </div>
                </div>
              </div>

              {/* Emergency Contacts Section */}
              <div>
                <div className="flex items-center justify-between mb-2">
                  <h5 className="text-xs font-semibold text-text-muted uppercase tracking-wide flex items-center gap-1.5">
                    <Phone className="w-3.5 h-3.5" />
                    비상 연락망
                  </h5>
                  {canManageContacts && (
                    <button
                      onClick={() => openContactForm()}
                      className="text-xs font-medium text-primary hover:underline"
                    >
                      + 추가
                    </button>
                  )}
                </div>
                {detailEmergencyContacts.length === 0 ? (
                  <div className="bg-white rounded-2xl border border-border p-4 text-center text-xs text-text-muted">
                    등록된 비상연락처가 없습니다.
                  </div>
                ) : (
                  <div className="bg-white rounded-2xl border border-border divide-y divide-gray-100 overflow-hidden">
                    {detailEmergencyContacts.map((contact: any) => (
                      <div key={contact.contactId} className="p-3 flex items-center justify-between">
                        <div>
                          <p className="text-xs font-semibold text-text-main">
                            {contact.contactName} <span className="text-text-muted font-normal">({contact.relationship})</span>
                          </p>
                          <p className="text-xs text-text-muted mt-0.5">{contact.phone}</p>
                        </div>
                        {canManageContacts && (
                          <div className="flex items-center gap-1.5">
                            <button
                              onClick={() => openContactForm(contact)}
                              className="text-[11px] text-primary hover:underline"
                            >
                              수정
                            </button>
                            <span className="text-text-muted text-[10px]">·</span>
                            <button
                              onClick={() => handleDeleteContact(contact.contactId)}
                              className="text-[11px] text-status-critical hover:underline"
                            >
                              삭제
                            </button>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                )}
              </div>

              {/* Current Dispatch */}
              {currentDispatch && (
                <div>
                  <h5 className="text-xs font-semibold text-text-muted uppercase tracking-wide mb-2 flex items-center gap-1.5">
                    <Briefcase className="w-3.5 h-3.5" />
                    현재 파견
                  </h5>
                  <div className="bg-white rounded-2xl border border-border p-4">
                    <div className="flex items-center justify-between mb-2">
                      <p className="font-medium text-text-main">{currentDispatch.projectName || 'Project'}</p>
                      <span className="text-xs text-text-muted">
                        {formatDate(currentDispatch.startDate)} ~ 진행중
                      </span>
                    </div>
                    {currentDispatch.roleTitle && (
                      <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-indigo-50 text-indigo-600">
                        {currentDispatch.roleTitle}
                      </span>
                    )}
                  </div>
                </div>
              )}

              {/* Quick Links */}
              <div>
                <h5 className="text-xs font-semibold text-text-muted uppercase tracking-wide mb-2">빠른 이동</h5>
                <div className="grid grid-cols-2 gap-2">
                  <button
                    onClick={() => router.push(`/profile/${emp.empId}`)}
                    className="flex items-center justify-between px-3 py-2.5 rounded-xl bg-primary/5 border border-primary/20 text-sm font-medium text-primary hover:bg-primary/10 transition-all col-span-2"
                  >
                    <span className="flex items-center gap-2">
                      <ExternalLink className="w-4 h-4" />
                      프로필 바로가기 (관리자/통합 뷰)
                    </span>
                    <span>↗</span>
                  </button>
                  <button
                    onClick={() => router.push(`/dispatch?empId=${emp.empId}`)}
                    className="flex items-center gap-2 px-3 py-2.5 rounded-xl bg-white border border-border text-sm text-text-main hover:bg-gray-50 transition-all"
                  >
                    <Briefcase className="w-4 h-4 text-text-muted" />
                    파견이력
                  </button>
                  <button
                    onClick={() => router.push(`/itam?userId=${emp.empId}`)}
                    className="flex items-center gap-2 px-3 py-2.5 rounded-xl bg-white border border-border text-sm text-text-main hover:bg-gray-50 transition-all"
                  >
                    <Camera className="w-4 h-4 text-text-muted" />
                    지급장비
                  </button>
                  <button
                    onClick={() => router.push('/profile/portfolio')}
                    className="flex items-center gap-2 px-3 py-2.5 rounded-xl bg-white border border-border text-sm text-text-main hover:bg-gray-50 transition-all"
                  >
                    <FileText className="w-4 h-4 text-text-muted" />
                    포트폴리오
                  </button>
                  <button
                    onClick={() => router.push(`/issues?requesterId=${emp.empId}`)}
                    className="flex items-center gap-2 px-3 py-2.5 rounded-xl bg-white border border-border text-sm text-text-main hover:bg-gray-50 transition-all"
                  >
                    <Ticket className="w-4 h-4 text-text-muted" />
                    SR 티켓
                  </button>
                  <button
                    onClick={() => router.push(`/work-reports?userId=${emp.empId}`)}
                    className="flex items-center gap-2 px-3 py-2.5 rounded-xl bg-white border border-border text-sm text-text-main hover:bg-gray-50 transition-all col-span-2"
                  >
                    <FileText className="w-4 h-4 text-text-muted" />
                    업무보고서
                  </button>
                </div>
              </div>

              {/* Assigned Equipment */}
              <div>
                <h5 className="text-xs font-semibold text-text-muted uppercase tracking-wide mb-2 flex items-center gap-1.5">
                  <ExternalLink className="w-3.5 h-3.5" />
                  지급 장비
                </h5>
                {activeEquipments.length === 0 ? (
                  <div className="bg-white rounded-2xl border border-border p-4 text-center text-sm text-text-muted">
                    현재 지급된 장비가 없습니다.
                  </div>
                ) : (
                  <div className="bg-white rounded-2xl border border-border overflow-hidden">
                    <table className="w-full text-left text-sm">
                      <thead>
                        <tr className="bg-gray-50/50">
                          <th className="py-2 px-3 text-[10px] font-semibold text-text-muted uppercase">자산코드</th>
                          <th className="py-2 px-3 text-[10px] font-semibold text-text-muted uppercase">모델명</th>
                          <th className="py-2 px-3 text-[10px] font-semibold text-text-muted uppercase">제조사</th>
                          <th className="py-2 px-3 text-[10px] font-semibold text-text-muted uppercase">지급일</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-gray-100">
                        {activeEquipments.map((eq: any) => (
                          <tr key={eq.assignmentId} className="hover:bg-gray-50">
                            <td className="py-2 px-3 font-mono text-xs">{eq.equipment?.assetCode || '-'}</td>
                            <td className="py-2 px-3">{eq.equipment?.modelName || '-'}</td>
                            <td className="py-2 px-3">{eq.equipment?.manufacturer || '-'}</td>
                            <td className="py-2 px-3 text-xs text-text-muted">{formatDate(eq.assignedDate)}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
              </div>
            </div>
          )}
        </div>

        {/* Emergency Contact Modal */}
        {showContactModal && (
          <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 backdrop-blur-sm p-4" onClick={() => setShowContactModal(false)}>
            <form
              onSubmit={handleSaveContact}
              className="bg-surface rounded-2xl shadow-xl max-w-sm w-full p-6 animate-in fade-in zoom-in duration-200"
              onClick={(e) => e.stopPropagation()}
            >
              <h4 className="font-outfit text-lg font-semibold text-text-main mb-4">
                {contactEditing ? '비상연락처 수정' : '비상연락처 추가'}
              </h4>
              <div className="space-y-3 mb-5">
                <div>
                  <label className="block text-xs font-semibold text-text-muted mb-1">관계 (예: 부, 모, 배우자)</label>
                  <input
                    type="text"
                    required
                    value={contactRel}
                    onChange={(e) => setContactRel(e.target.value)}
                    className="w-full border border-border rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                    placeholder="관계 입력"
                  />
                </div>
                <div>
                  <label className="block text-xs font-semibold text-text-muted mb-1">성명</label>
                  <input
                    type="text"
                    required
                    value={contactName}
                    onChange={(e) => setContactName(e.target.value)}
                    className="w-full border border-border rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                    placeholder="성명 입력"
                  />
                </div>
                <div>
                  <label className="block text-xs font-semibold text-text-muted mb-1">연락처</label>
                  <input
                    type="text"
                    required
                    value={contactPhone}
                    onChange={(e) => setContactPhone(e.target.value)}
                    className="w-full border border-border rounded-xl px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                    placeholder="010-0000-0000"
                  />
                </div>
              </div>
              <div className="flex justify-end gap-2">
                <button
                  type="button"
                  onClick={() => setShowContactModal(false)}
                  className="px-4 py-2 rounded-xl text-sm text-text-muted hover:bg-gray-100 transition-all"
                >
                  취소
                </button>
                <button
                  type="submit"
                  disabled={contactSubmitting}
                  className="px-4 py-2 rounded-xl text-sm font-medium bg-primary text-white hover:bg-primary/90 transition-all disabled:opacity-50"
                >
                  {contactSubmitting ? '저장 중...' : '저장'}
                </button>
              </div>
            </form>
          </div>
        )}

        {/* Phone Reveal Dialog */}
        {showPhoneDialog && (
          <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 backdrop-blur-sm p-4" onClick={() => { setShowPhoneDialog(false); setPhoneReason(''); }}>
            <div className="bg-surface rounded-2xl shadow-xl max-w-sm w-full p-6 animate-in fade-in zoom-in duration-200" onClick={(e) => e.stopPropagation()}>
              <h4 className="font-outfit text-lg font-semibold text-text-main mb-2">전화번호 조회</h4>
              <p className="text-sm text-text-muted mb-4">조회 사유를 입력해주세요.</p>
              <textarea
                value={phoneReason}
                onChange={(e) => setPhoneReason(e.target.value)}
                className="w-full border border-border rounded-xl p-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none h-24 mb-4"
                placeholder="예: 업무 관련 연락 필요"
              />
              <div className="flex justify-end gap-2">
                <button
                  onClick={() => { setShowPhoneDialog(false); setPhoneReason(''); }}
                  className="px-4 py-2 rounded-xl text-sm text-text-muted hover:bg-gray-100 transition-all"
                >
                  취소
                </button>
                <button
                  onClick={async () => {
                    if (!selectedEmployee || !phoneReason.trim()) return;
                    try {
                      const token = localStorage.getItem('accessToken');
                      const res = await fetch(`/api/v1/employees/${selectedEmployee.empId}/request-phone`, {
                        method: 'POST',
                        headers: {
                          'Content-Type': 'application/json',
                          ...(token ? { Authorization: `Bearer ${token}` } : {}),
                        },
                        body: JSON.stringify({ reason: phoneReason }),
                      });
                      const data = await res.json();
                      if (data.success && data.data?.phone) {
                        setRevealedPhone(data.data.phone);
                        setShowPhoneDialog(false);
                        setPhoneReason('');
                      }
                    } catch {
                      // silently ignore
                    }
                  }}
                  disabled={!phoneReason.trim()}
                  className="px-4 py-2 rounded-xl text-sm font-medium bg-primary text-white hover:bg-primary/90 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  조회
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }

  if (loading) {
    return (
      <div className="p-4 sm:p-6 lg:p-8">
        <div className="max-w-7xl mx-auto">
          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mb-6 sm:mb-8">
            <div>
              <h2 className="font-outfit text-2xl sm:text-3xl font-semibold text-text-main tracking-tight">Employees</h2>
              <p className="text-text-muted mt-1 text-sm">Manage employee records, dispatch status, and role assignments.</p>
            </div>
            <div className="h-10 w-32 bg-gray-200 rounded-xl animate-pulse" />
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
            {[1, 2, 3, 4].map((i) => (
              <div key={i} className="bg-surface rounded-2xl p-5 border border-border">
                <div className="h-3 w-12 bg-gray-200 rounded mb-2 animate-pulse" />
                <div className="h-7 w-16 bg-gray-200 rounded animate-pulse" />
              </div>
            ))}
          </div>

          <div className="bg-surface rounded-2xl border border-border shadow-card overflow-hidden">
            <div className="px-6 py-4 border-b border-border flex items-center justify-between">
              <div className="flex space-x-2">
                {[1, 2, 3, 4].map((i) => (
                  <div key={i} className="h-8 w-16 bg-gray-200 rounded-lg animate-pulse" />
                ))}
              </div>
              <div className="h-9 w-48 bg-gray-200 rounded-lg animate-pulse" />
            </div>
            <div className="p-6">
              {[1, 2, 3, 4, 5].map((i) => (
                <div key={i} className="flex items-center py-4 border-b border-gray-100 last:border-0">
                  <div className="w-8 h-8 rounded-full bg-gray-200 mr-3 animate-pulse" />
                  <div className="flex-1 h-4 bg-gray-200 rounded animate-pulse" />
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="p-4 sm:p-6 lg:p-8">
        <div className="max-w-7xl mx-auto">
          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mb-6 sm:mb-8">
            <div>
              <h2 className="font-outfit text-2xl sm:text-3xl font-semibold text-text-main tracking-tight">Employees</h2>
              <p className="text-text-muted mt-1 text-sm">Manage employee records, dispatch status, and role assignments.</p>
            </div>
          </div>
          <div className="bg-status-critical-bg border border-status-critical text-status-critical-text rounded-2xl p-6 sm:p-8 text-center">
            <p className="font-medium">{error}</p>
          </div>
        </div>
      </div>
    );
  }

  if (employees.length === 0) {
    return (
      <div className="p-4 sm:p-6 lg:p-8">
        <div className="max-w-7xl mx-auto">
          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mb-6 sm:mb-8">
            <div>
              <h2 className="font-outfit text-2xl sm:text-3xl font-semibold text-text-main tracking-tight">Employees</h2>
              <p className="text-text-muted mt-1 text-sm">Manage employee records, dispatch status, and role assignments.</p>
            </div>
          </div>
          <div className="bg-surface rounded-2xl border border-border shadow-card p-12 text-center">
            <p className="text-text-muted text-lg">No employees found</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="p-4 sm:p-6 lg:p-8">
      <div className="max-w-7xl mx-auto">
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mb-6 sm:mb-8">
          <div>
            <h2 className="font-outfit text-2xl sm:text-3xl font-semibold text-text-main tracking-tight">Employees</h2>
            <p className="text-text-muted mt-1 text-sm">Manage employee records, dispatch status, and role assignments.</p>
          </div>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
          {stats.map((s) => (
            <div key={s.label} className="bg-surface rounded-2xl p-5 border border-border">
              <p className="text-xs text-text-muted font-medium mb-1">{s.label}</p>
              <p className={`font-outfit text-2xl font-semibold ${s.color}`}>{s.value}</p>
            </div>
          ))}
        </div>

        <div className="bg-surface rounded-2xl border border-border shadow-card overflow-hidden">
          <div className="px-4 sm:px-6 py-4 border-b border-border flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
            <div className="flex flex-wrap items-center gap-2">
              <button
                key="all"
                onClick={() => setFilter('all')}
                className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
                  filter === 'all' ? 'bg-primary text-white' : 'text-text-muted hover:bg-gray-100'
                }`}
              >
                전체
              </button>
              {statusCodesLoading ? (
                <span className="text-xs text-text-muted">Loading...</span>
              ) : (
                empStatusCodes.map((code) => (
                  <button
                    key={code.codeValue}
                    onClick={() => setFilter(code.codeValue)}
                    className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
                      filter === code.codeValue ? 'bg-primary text-white' : 'text-text-muted hover:bg-gray-100'
                    }`}
                  >
                    {code.codeName}
                  </button>
                ))
              )}
            </div>
            <div className="relative w-full sm:w-56">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" />
              <input
                value={skillKeyword}
                onChange={(e) => setSkillKeyword(e.target.value)}
                className="w-full pl-9 pr-3 py-1.5 rounded-lg bg-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                placeholder="Search by name or skill..."
              />
            </div>
          </div>

          <div className="overflow-x-auto">
            {/* Desktop table */}
            <div className="hidden md:block">
              <table className="w-full text-left">
                <thead>
                  <tr className="bg-gray-50/50">
                    <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">이름</th>
                    <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">권한</th>
                    <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">상태</th>
                    <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">이메일</th>
                    <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">액션</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-100 text-sm">
                  {filtered.map((emp, idx) => (
                    <tr
                      key={emp.empId}
                      onClick={() => openDetail(emp)}
                      className="hover:bg-gray-50 transition-colors cursor-pointer"
                    >
                      <td className="py-4 px-4 sm:px-6">
                        <div className="flex items-center">
                          <div className={`w-8 h-8 rounded-full ${getInitialColor(emp.name, idx)} flex items-center justify-center text-xs font-medium text-white mr-3 flex-shrink-0`}>
                            {emp.name[0]}
                          </div>
                          <div className="min-w-0">
                            <p className="font-medium text-text-main truncate">{emp.name}</p>
                            <p className="text-xs text-text-muted truncate">{emp.email}</p>
                          </div>
                        </div>
                      </td>
                      <td className="py-4 px-4 sm:px-6">
                        <span className="text-xs font-medium text-text-muted">{roleLabel[emp.roleCode] || emp.roleCode}</span>
                      </td>
                      <td className="py-4 px-4 sm:px-6">
                        <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${statusColor[emp.empStatus]}`}>
                          {emp.empStatus === 'ACTIVE' ? '재직' : emp.empStatus === 'ON_LEAVE' ? '휴직' : '퇴사'}
                          {emp.dispatchStatus === 'DISPATCHED' && (
                            <span className="ml-1.5 px-1.5 py-0.5 rounded bg-blue-100 text-blue-600 text-[10px]">파견중</span>
                          )}
                        </span>
                      </td>
                      <td className="py-4 px-4 sm:px-6 text-text-muted truncate max-w-[150px] sm:max-w-none">{emp.email}</td>
                      <td className="py-4 px-4 sm:px-6">
                        <span className="text-xs text-text-muted hover:text-primary transition-colors">상세 →</span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* Mobile cards */}
            <div className="md:hidden space-y-3">
              {filtered.map((emp, idx) => (
                <div
                  key={emp.empId}
                  onClick={() => openDetail(emp)}
                  className="bg-surface rounded-2xl border border-border p-4 space-y-2 cursor-pointer hover:bg-gray-50 transition-colors"
                >
                  <div className="flex items-center justify-between gap-3">
                    <div className="flex items-center gap-3 flex-1">
                      <div className={`w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-semibold ${getInitialColor(emp.name, idx)}`}>
                        {emp.name.charAt(0)}
                      </div>
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium text-text-main truncate">{emp.name}</p>
                        <p className="text-xs text-text-muted truncate">{roleLabel[emp.roleCode] || emp.roleCode}</p>
                      </div>
                    </div>
                    <div>
                      <span className={`text-[10px] font-medium px-2.5 py-1 rounded-full ${statusColor[emp.empStatus] || 'bg-gray-100 text-gray-600'}`}>
                        {emp.empStatus === 'ACTIVE' ? '재직' : emp.empStatus === 'ON_LEAVE' ? '휴직' : '퇴사'}
                      </span>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-2 text-xs text-text-muted">
                    <div className="truncate">Email: {emp.email}</div>
                    <div>상태: {emp.dispatchStatus === 'DISPATCHED' ? '파견중' : '대기'}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Employee Edit Modal */}
      <EmployeeEditModal
        isOpen={!!editingEmployee}
        onClose={() => setEditingEmployee(null)}
        employee={editingEmployee}
        onSuccess={() => {
          fetchEmployees();
        }}
      />
    </div>
  );
}