'use client';

import React, { useState, useEffect, useRef } from 'react';
import { useRouter } from 'next/navigation';
import { Search, Plus, MoreHorizontal, X, Pencil, Trash2, AlertTriangle, Upload, Camera, Link as LinkIcon, Clock, MapPin, Briefcase } 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, DispatchHistory, Project, EquipmentAssignment } from '@/types';

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]));

  // Add Employee Modal State
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [modalError, setModalError] = useState<string | null>(null);
  const [formData, setFormData] = useState({
    loginId: '',
    name: '',
    email: '',
    roleCode: 'EMPLOYEE' as RoleCode,
    empStatus: 'ACTIVE' as EmpStatus,
    dispatchStatus: 'WAITING' as DispatchStatus,
  });

  // Edit Modal State
  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
  const [isUpdating, setIsUpdating] = useState(false);
  const [editModalError, setEditModalError] = useState<string | null>(null);
  const [editingEmployee, setEditingEmployee] = useState<Employee | null>(null);

  // Edit Modal - Section data
  const [editBasic, setEditBasic] = useState({
    name: '',
    email: '',
    phone: '',
    joinedDate: '',
    birthDate: '',
    education: '',
    major: '',
    graduationDate: '',
    residence: '',
    profileImage: '',
  });
  const [editStatus, setEditStatus] = useState({
    empStatus: 'ACTIVE' as EmpStatus,
    leftDate: '',
  });
  const [editRole, setEditRole] = useState<RoleCode>('EMPLOYEE');
  const [editDispatchStatus, setEditDispatchStatus] = useState<DispatchStatus>('WAITING');

  // Edit Modal - Fetched data
  const [equipmentList, setEquipmentList] = useState<EquipmentAssignment[]>([]);
  const [dispatchHistories, setDispatchHistories] = useState<DispatchHistory[]>([]);
  const [projects, setProjects] = useState<Project[]>([]);
  const [editLoading, setEditLoading] = useState(false);

  // Profile image upload
  const fileInputRef = useRef<HTMLInputElement>(null);

  // Confirmation dialogs within edit modal
  const [showRoleConfirm, setShowRoleConfirm] = useState(false);
  const [pendingRole, setPendingRole] = useState<RoleCode | null>(null);
  const [showStatusConfirm, setShowStatusConfirm] = useState(false);
  const [pendingStatus, setPendingStatus] = useState<EmpStatus | null>(null);

  // Delete Confirmation State
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [deletingEmployee, setDeletingEmployee] = useState<Employee | null>(null);
  const [isDeleting, setIsDeleting] = useState(false);

  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 handleOpenModal = () => {
    setIsModalOpen(true);
    setFormData({
      loginId: '',
      name: '',
      email: '',
      roleCode: 'EMPLOYEE',
      empStatus: 'ACTIVE',
      dispatchStatus: 'WAITING',
    });
    setModalError(null);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
    setFormData({
      loginId: '',
      name: '',
      email: '',
      roleCode: 'EMPLOYEE',
      empStatus: 'ACTIVE',
      dispatchStatus: 'WAITING',
    });
    setModalError(null);
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!formData.loginId.trim() || !formData.name.trim()) {
      setModalError('Login ID and Name are required.');
      return;
    }

    setIsSubmitting(true);
    setModalError(null);

    try {
      await employeeService.create(formData);
      alert('Employee added successfully!');
      handleCloseModal();
      await fetchEmployees();
    } catch (err: any) {
      setModalError(err.response?.data?.message || 'Failed to add employee. Please try again.');
    } finally {
      setIsSubmitting(false);
    }
  };

  // Edit handlers
  const handleEdit = async (emp: Employee) => {
    setEditingEmployee(emp);
    setEditModalError(null);
    setEditLoading(true);

    // Populate basic info
    setEditBasic({
      name: emp.name,
      email: emp.email || '',
      phone: emp.phone || '',
      joinedDate: emp.joinedDate || '',
      birthDate: emp.birthDate || '',
      education: emp.education || '',
      major: emp.major || '',
      graduationDate: emp.graduationDate || '',
      residence: emp.residence || '',
      profileImage: emp.profileImage || '',
    });
    setEditStatus({
      empStatus: emp.empStatus,
      leftDate: emp.leftDate || '',
    });
    setEditRole(emp.roleCode);
    setEditDispatchStatus(emp.dispatchStatus);

    // Fetch related data in parallel
    try {
      const [equipRes, dispatchRes, projectsRes] = await Promise.allSettled([
        apiClient.get<any>(`/employees/${emp.empId}/equipment`),
        employeeService.getDispatchHistories(emp.empId),
        apiClient.get<any>('/projects'),
      ]);

      if (equipRes.status === 'fulfilled' && equipRes.value.success) {
        setEquipmentList(equipRes.value.data || []);
      } else {
        setEquipmentList([]);
      }

      if (dispatchRes.status === 'fulfilled' && dispatchRes.value.success) {
        setDispatchHistories(dispatchRes.value.data || []);
      } else {
        setDispatchHistories([]);
      }

      if (projectsRes.status === 'fulfilled' && projectsRes.value.success) {
        setProjects(projectsRes.value.data || []);
      } else {
        setProjects([]);
      }
    } catch (err) {
      console.error('Failed to load edit modal data:', err);
    } finally {
      setEditLoading(false);
    }

    setIsEditModalOpen(true);
  };

  const handleCloseEditModal = () => {
    setIsEditModalOpen(false);
    setEditingEmployee(null);
    setEditModalError(null);
    setEquipmentList([]);
    setDispatchHistories([]);
    setProjects([]);
    setShowRoleConfirm(false);
    setShowStatusConfirm(false);
    setPendingRole(null);
    setPendingStatus(null);
  };

  const handleBasicInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setEditBasic((prev) => ({ ...prev, [name]: value }));
  };

  const handleProfileImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file || !editingEmployee) return;

    try {
      const form = new FormData();
      form.append('file', file);
      const uploadRes = await fetch('/api/v1/files/upload', { method: 'POST', body: form });
      const uploadData = await uploadRes.json();
      if (uploadData.success && uploadData.data) {
        await employeeService.updateProfileImage(editingEmployee.empId, uploadData.data);
        setEditBasic((prev) => ({ ...prev, profileImage: uploadData.data }));
        // Update local employee list
        setEmployees((prev) =>
          prev.map((emp) =>
            emp.empId === editingEmployee.empId ? { ...emp, profileImage: uploadData.data } : emp
          )
        );
      }
    } catch (err: any) {
      setEditModalError(err.message || 'Failed to upload profile image.');
    }
    // Reset input
    if (fileInputRef.current) fileInputRef.current.value = '';
  };

  const handleRemoveProfileImage = async () => {
    if (!editingEmployee) return;
    try {
      await employeeService.updateProfileImage(editingEmployee.empId, '');
      setEditBasic((prev) => ({ ...prev, profileImage: '' }));
      setEmployees((prev) =>
        prev.map((emp) =>
          emp.empId === editingEmployee.empId ? { ...emp, profileImage: null } : emp
        )
      );
    } catch (err: any) {
      setEditModalError(err.message || 'Failed to remove profile image.');
    }
  };

  const handleSaveBasicInfo = async () => {
    if (!editingEmployee) return;
    if (!editBasic.name.trim()) {
      setEditModalError('Name is required.');
      return;
    }

    setIsUpdating(true);
    setEditModalError(null);

    try {
      const updateData: Record<string, unknown> = {
        name: editBasic.name,
        email: editBasic.email,
        phone: editBasic.phone,
        joinedDate: editBasic.joinedDate,
        birthDate: editBasic.birthDate,
        education: editBasic.education,
        major: editBasic.major,
        graduationDate: editBasic.graduationDate,
        residence: editBasic.residence,
        profileImage: editBasic.profileImage,
      };
      await employeeService.update(editingEmployee.empId, updateData as Partial<Employee>);
      // Update local list
      setEmployees((prev) =>
        prev.map((emp) =>
          emp.empId === editingEmployee.empId
            ? { ...emp, ...editBasic, profileImage: editBasic.profileImage }
            : emp
        )
      );
      alert('Basic information updated successfully!');
    } catch (err: any) {
      setEditModalError(err.message || 'Failed to update basic information.');
    } finally {
      setIsUpdating(false);
    }
  };

  const handleSaveStatus = async () => {
    if (!editingEmployee) return;

    if (editStatus.empStatus === 'RESIGNED' && !editStatus.leftDate) {
      setEditModalError('Left date is required when changing to RESIGNED status.');
      return;
    }

    setIsUpdating(true);
    setEditModalError(null);

    try {
      await apiClient.put(`/employees/${editingEmployee.empId}/status`, {
        empStatus: editStatus.empStatus,
        leftDate: editStatus.empStatus === 'RESIGNED' ? editStatus.leftDate : null,
      });
      setEmployees((prev) =>
        prev.map((emp) =>
          emp.empId === editingEmployee.empId
            ? { ...emp, empStatus: editStatus.empStatus, leftDate: editStatus.empStatus === 'RESIGNED' ? editStatus.leftDate : null }
            : emp
        )
      );
      setShowStatusConfirm(false);
      setPendingStatus(null);
      alert('Employee status updated successfully!');
    } catch (err: any) {
      setEditModalError(err.message || 'Failed to update employee status.');
    } finally {
      setIsUpdating(false);
    }
  };

  const handleStatusChange = (newStatus: EmpStatus) => {
    if (newStatus === editingEmployee?.empStatus) return;
    if (newStatus === 'RESIGNED') {
      setPendingStatus(newStatus);
      setShowStatusConfirm(true);
    } else {
      setEditStatus((prev) => ({ ...prev, empStatus: newStatus }));
      // Auto-save for non-resigned changes
      setEditStatus((prev) => ({ ...prev, empStatus: newStatus }));
      // Trigger save
      setTimeout(() => {
        handleSaveStatus();
      }, 0);
    }
  };

  const confirmStatusChange = () => {
    if (pendingStatus) {
      setEditStatus((prev) => ({ ...prev, empStatus: pendingStatus }));
      setShowStatusConfirm(false);
      setTimeout(() => {
        handleSaveStatus();
      }, 0);
    }
  };

  const handleRoleChange = (newRole: RoleCode) => {
    if (newRole === editingEmployee?.roleCode) return;
    setPendingRole(newRole);
    setShowRoleConfirm(true);
  };

  const confirmRoleChange = async () => {
    if (!editingEmployee || !pendingRole) return;
    setIsUpdating(true);
    setEditModalError(null);
    setShowRoleConfirm(false);

    try {
      await apiClient.put(`/employees/${editingEmployee.empId}/role`, { roleCode: pendingRole });
      setEditRole(pendingRole);
      setEmployees((prev) =>
        prev.map((emp) =>
          emp.empId === editingEmployee.empId ? { ...emp, roleCode: pendingRole! } : emp
        )
      );
      alert('Role updated successfully!');
    } catch (err: any) {
      setEditModalError(err.message || 'Failed to update role.');
    } finally {
      setIsUpdating(false);
      setPendingRole(null);
    }
  };

  const handleDispatchStatusChange = async (newStatus: DispatchStatus) => {
    if (!editingEmployee || newStatus === editingEmployee.dispatchStatus) return;
    setIsUpdating(true);
    setEditModalError(null);

    try {
      await apiClient.put(`/employees/${editingEmployee.empId}/dispatch-status`, { dispatchStatus: newStatus });
      setEditDispatchStatus(newStatus);
      setEmployees((prev) =>
        prev.map((emp) =>
          emp.empId === editingEmployee.empId ? { ...emp, dispatchStatus: newStatus } : emp
        )
      );
    } catch (err: any) {
      setEditModalError(err.message || 'Failed to update dispatch status.');
    } finally {
      setIsUpdating(false);
    }
  };

  // Delete handlers
  const handleDelete = (emp: Employee) => {
    setDeletingEmployee(emp);
    setIsDeleteDialogOpen(true);
  };

  const handleCloseDeleteDialog = () => {
    setIsDeleteDialogOpen(false);
    setDeletingEmployee(null);
  };

  const handleDeleteConfirm = async () => {
    if (!deletingEmployee) return;

    setIsDeleting(true);

    try {
      await employeeService.delete(deletingEmployee.empId);
      alert('Employee deleted successfully!');
      handleCloseDeleteDialog();
      await fetchEmployees();
    } catch (err: any) {
      alert(err.response?.data?.message || 'Failed to delete employee. Please try again.');
      handleCloseDeleteDialog();
    } finally {
      setIsDeleting(false);
    }
  };

  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' });
  };

  const currentDispatch = dispatchHistories.find((d) => !d.endDate) || null;
  const pastDispatches = dispatchHistories.filter((d) => d.endDate);

  const getProjectById = (projectId: number) => {
    return projects.find((p) => p.projectId === projectId) || null;
  };

  // Add Employee Modal
  if (isModalOpen) {
    return (
      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
        <div className="bg-surface rounded-2xl shadow-xl max-w-md w-full mx-4 p-6 relative animate-in fade-in zoom-in duration-200">
          <button
            onClick={handleCloseModal}
            className="absolute top-4 right-4 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>
          
          <h3 className="font-outfit text-xl font-semibold text-text-main mb-1">Add Employee</h3>
          <p className="text-text-muted text-sm mb-6">Create a new employee account</p>
          
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-text-main mb-1.5">
                Login ID <span className="text-status-critical-text">*</span>
              </label>
              <input
                type="text"
                name="loginId"
                value={formData.loginId}
                onChange={handleInputChange}
                required
                className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
                placeholder="Enter login ID"
              />
            </div>
            
            <div>
              <label className="block text-sm font-medium text-text-main mb-1.5">
                Name <span className="text-status-critical-text">*</span>
              </label>
              <input
                type="text"
                name="name"
                value={formData.name}
                onChange={handleInputChange}
                required
                className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
                placeholder="Enter full name"
              />
            </div>
            
            <div>
              <label className="block text-sm font-medium text-text-main mb-1.5">Email</label>
              <input
                type="email"
                name="email"
                value={formData.email}
                onChange={handleInputChange}
                className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
                placeholder="email@example.com"
              />
            </div>
            
            <div>
              <label className="block text-sm font-medium text-text-main mb-1.5">Role</label>
              <select
                name="roleCode"
                value={formData.roleCode}
                onChange={handleInputChange}
                className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
              >
                {roleCodesLoading ? (
                  <option value="">Loading roles...</option>
                ) : (
                  empRoleCodes.map((code) => (
                    <option key={code.codeValue} value={code.codeValue}>
                      {code.codeName} ({code.codeValue})
                    </option>
                  ))
                )}
              </select>
            </div>
            
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-text-main mb-1.5">Employee Status</label>
                <select
                  name="empStatus"
                  value={formData.empStatus}
                  onChange={handleInputChange}
                  className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
                >
                  {statusCodesLoading ? (
                    <option value="">Loading status...</option>
                  ) : (
                    empStatusCodes.map((code) => (
                      <option key={code.codeValue} value={code.codeValue}>
                        {code.codeName} ({code.codeValue})
                      </option>
                    ))
                  )}
                </select>
              </div>
              
              <div>
                <label className="block text-sm font-medium text-text-main mb-1.5">Dispatch Status</label>
                <select
                  name="dispatchStatus"
                  value={formData.dispatchStatus}
                  onChange={handleInputChange}
                  className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
                >
                  <option value="WAITING">대기 (WAITING)</option>
                  <option value="DISPATCHED">파견중 (DISPATCHED)</option>
                </select>
              </div>
            </div>
            
            {modalError && (
              <div className="bg-status-critical-bg border border-status-critical text-status-critical-text rounded-xl px-4 py-3 text-sm">
                {modalError}
              </div>
            )}
            
            <div className="flex gap-3 pt-4">
              <button
                type="button"
                onClick={handleCloseModal}
                disabled={isSubmitting}
                className="flex-1 px-4 py-2.5 rounded-xl border border-border text-text-main text-sm font-medium hover:bg-gray-100 transition-all disabled:opacity-50"
              >
                Cancel
              </button>
              <button
                type="submit"
                disabled={isSubmitting}
                className="flex-1 px-4 py-2.5 rounded-xl bg-primary hover:bg-primary-hover text-white text-sm font-semibold shadow-soft transition-all disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {isSubmitting ? 'Adding...' : 'Add Employee'}
              </button>
            </div>
          </form>
        </div>
      </div>
    );
  }

  // Edit Employee Modal - REDESIGNED
  if (isEditModalOpen) {
    return (
      <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/50 backdrop-blur-sm overflow-y-auto">
        <div className="bg-surface rounded-2xl shadow-xl max-w-3xl w-full mx-4 my-8 relative animate-in fade-in zoom-in duration-200">
          {/* 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">
            <div>
              <h3 className="font-outfit text-xl font-semibold text-text-main">Edit Employee</h3>
              <p className="text-text-muted text-sm">{editingEmployee?.name} ({editingEmployee?.loginId})</p>
            </div>
            <button
              onClick={handleCloseEditModal}
              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>

          {editModalError && (
            <div className="mx-6 mt-4 bg-status-critical-bg border border-status-critical text-status-critical-text rounded-xl px-4 py-3 text-sm">
              {editModalError}
            </div>
          )}

          {editLoading ? (
            <div className="p-6 space-y-6">
              {[1, 2, 3, 4].map((i) => (
                <div key={i} className="bg-white rounded-2xl border border-border p-5">
                  <div className="h-5 w-32 bg-gray-200 rounded mb-4 animate-pulse" />
                  <div className="grid grid-cols-2 gap-4">
                    {[1, 2, 3, 4].map((j) => (
                      <div key={j} className="h-10 bg-gray-100 rounded-xl animate-pulse" />
                    ))}
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="p-6 space-y-6">
              {/* SECTION 1: 기본 정보 */}
              <div className="bg-white rounded-2xl border border-border p-5">
                <h4 className="font-outfit text-base font-semibold text-text-main mb-4 flex items-center gap-2">
                  <span className="w-1.5 h-5 bg-primary rounded-full" />
                  기본 정보
                </h4>

                {/* Profile Image */}
                <div className="flex items-center gap-4 mb-5">
                  <div className="relative">
                    {editBasic.profileImage ? (
                      <img
                        src={editBasic.profileImage}
                        alt={editBasic.name}
                        className="w-16 h-16 rounded-full object-cover border-2 border-border"
                      />
                    ) : (
                      <div className={`w-16 h-16 rounded-full ${getInitialColor(editBasic.name, 0)} flex items-center justify-center text-xl font-semibold text-white`}>
                        {editBasic.name[0]}
                      </div>
                    )}
                  </div>
                  <div className="flex gap-2">
                    <input
                      ref={fileInputRef}
                      type="file"
                      accept="image/*"
                      onChange={handleProfileImageUpload}
                      className="hidden"
                    />
                    <button
                      type="button"
                      onClick={() => fileInputRef.current?.click()}
                      className="flex items-center gap-1.5 px-3 py-2 rounded-xl border border-border text-sm font-medium text-text-main hover:bg-gray-50 transition-all"
                    >
                      <Camera className="w-4 h-4" />
                      Upload
                    </button>
                    {editBasic.profileImage && (
                      <button
                        type="button"
                        onClick={handleRemoveProfileImage}
                        className="flex items-center gap-1.5 px-3 py-2 rounded-xl border border-border text-sm font-medium text-status-critical-text hover:bg-red-50 transition-all"
                      >
                        <X className="w-4 h-4" />
                        Remove
                      </button>
                    )}
                  </div>
                </div>

                {/* Basic Info Fields */}
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-xs font-medium text-text-muted mb-1">Name *</label>
                    <input
                      type="text"
                      name="name"
                      value={editBasic.name}
                      onChange={handleBasicInputChange}
                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
                    />
                  </div>
                  <div>
                    <label className="block text-xs font-medium text-text-muted mb-1">Email</label>
                    <input
                      type="email"
                      name="email"
                      value={editBasic.email}
                      onChange={handleBasicInputChange}
                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
                    />
                  </div>
                  <div>
                    <label className="block text-xs font-medium text-text-muted mb-1">Phone</label>
                    <input
                      type="tel"
                      name="phone"
                      value={editBasic.phone}
                      onChange={handleBasicInputChange}
                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
                      placeholder="010-0000-0000"
                    />
                  </div>
                  <div>
                    <label className="block text-xs font-medium text-text-muted mb-1">Joined Date</label>
                    <input
                      type="date"
                      name="joinedDate"
                      value={editBasic.joinedDate}
                      onChange={handleBasicInputChange}
                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
                    />
                  </div>
                  <div>
                    <label className="block text-xs font-medium text-text-muted mb-1">Birth Date</label>
                    <input
                      type="date"
                      name="birthDate"
                      value={editBasic.birthDate}
                      onChange={handleBasicInputChange}
                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
                    />
                  </div>
                  <div>
                    <label className="block text-xs font-medium text-text-muted mb-1">Education</label>
                    <select
                      name="education"
                      value={editBasic.education}
                      onChange={handleBasicInputChange}
                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
                    >
                      <option value="">Select education</option>
                      <option value="HIGH_SCHOOL">High School</option>
                      <option value="ASSOCIATE">Associate</option>
                      <option value="BACHELOR">Bachelor</option>
                      <option value="MASTER">Master</option>
                      <option value="DOCTORATE">Doctorate</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-xs font-medium text-text-muted mb-1">Major</label>
                    <input
                      type="text"
                      name="major"
                      value={editBasic.major}
                      onChange={handleBasicInputChange}
                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
                    />
                  </div>
                  <div>
                    <label className="block text-xs font-medium text-text-muted mb-1">Graduation Date</label>
                    <input
                      type="date"
                      name="graduationDate"
                      value={editBasic.graduationDate}
                      onChange={handleBasicInputChange}
                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
                    />
                  </div>
                  <div className="col-span-2">
                    <label className="block text-xs font-medium text-text-muted mb-1">Residence</label>
                    <input
                      type="text"
                      name="residence"
                      value={editBasic.residence}
                      onChange={handleBasicInputChange}
                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
                    />
                  </div>
                </div>

                <div className="flex justify-end mt-4 pt-4 border-t border-border">
                  <button
                    type="button"
                    onClick={handleSaveBasicInfo}
                    disabled={isUpdating}
                    className="px-5 py-2.5 rounded-xl bg-primary hover:bg-primary-hover text-white text-sm font-semibold shadow-soft transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    {isUpdating ? 'Saving...' : 'Save Basic Info'}
                  </button>
                </div>
              </div>

              {/* SECTION 2: 상태 & 권한 */}
              <div className="bg-white rounded-2xl border border-border p-5">
                <h4 className="font-outfit text-base font-semibold text-text-main mb-4 flex items-center gap-2">
                  <span className="w-1.5 h-5 bg-secondary rounded-full" />
                  상태 & 권한
                </h4>

                <div className="grid grid-cols-3 gap-4">
                  {/* Employee Status */}
                  <div>
                    <label className="block text-xs font-medium text-text-muted mb-1">Employee Status</label>
                    <select
                      value={editStatus.empStatus}
                      onChange={(e) => handleStatusChange(e.target.value as EmpStatus)}
                      className={`w-full px-3 py-2.5 rounded-xl border text-sm font-medium focus:outline-none focus:ring-2 transition-all ${
                        editStatus.empStatus === 'ACTIVE'
                          ? 'bg-status-resolved-bg border-status-resolved text-status-resolved-text focus:ring-status-resolved'
                          : editStatus.empStatus === 'ON_LEAVE'
                          ? 'bg-status-pending-bg border-status-pending text-status-pending-text focus:ring-status-pending'
                          : 'bg-status-critical-bg border-status-critical text-status-critical-text focus:ring-status-critical'
                      }`}
                    >
                      <option value="ACTIVE">재직 (ACTIVE)</option>
                      <option value="ON_LEAVE">휴직 (ON_LEAVE)</option>
                      <option value="RESIGNED">퇴사 (RESIGNED)</option>
                    </select>
                  </div>

                  {/* Role */}
                  <div>
                    <label className="block text-xs font-medium text-text-muted mb-1">Role</label>
                    <select
                      value={editRole}
                      onChange={(e) => handleRoleChange(e.target.value as RoleCode)}
                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
                    >
                      {roleCodesLoading ? (
                        <option value="">Loading...</option>
                      ) : (
                        empRoleCodes.map((code) => (
                          <option key={code.codeValue} value={code.codeValue}>
                            {code.codeName}
                          </option>
                        ))
                      )}
                    </select>
                  </div>

                  {/* Dispatch Status */}
                  <div>
                    <label className="block text-xs font-medium text-text-muted mb-1">Dispatch Status</label>
                    <select
                      value={editDispatchStatus}
                      onChange={(e) => handleDispatchStatusChange(e.target.value as DispatchStatus)}
                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
                    >
                      <option value="WAITING">대기 (WAITING)</option>
                      <option value="DISPATCHED">파견중 (DISPATCHED)</option>
                    </select>
                  </div>
                </div>

                {/* Left Date (shown when RESIGNED) */}
                {editStatus.empStatus === 'RESIGNED' && (
                  <div className="mt-4 p-4 bg-status-critical-bg rounded-xl border border-status-critical/20">
                    <label className="block text-xs font-medium text-status-critical-text mb-1">Left Date *</label>
                    <input
                      type="date"
                      value={editStatus.leftDate}
                      onChange={(e) => setEditStatus((prev) => ({ ...prev, leftDate: e.target.value }))}
                      className="w-full px-3 py-2.5 rounded-xl bg-white border border-status-critical/30 text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-status-critical transition-all"
                    />
                  </div>
                )}
              </div>

              {/* SECTION 3: 현재 지급 장비 */}
              <div className="bg-white rounded-2xl border border-border p-5">
                <h4 className="font-outfit text-base font-semibold text-text-main mb-4 flex items-center gap-2">
                  <span className="w-1.5 h-5 bg-tertiary rounded-full" />
                  현재 지급 장비
                </h4>

                {equipmentList.length === 0 ? (
                  <div className="text-center py-6 text-text-muted text-sm">
                    No equipment currently assigned.
                  </div>
                ) : (
                  <div className="overflow-x-auto">
                    <table className="w-full text-left text-sm">
                      <thead>
                        <tr className="border-b border-border">
                          <th className="py-2 px-3 text-xs font-semibold text-text-muted uppercase">자산코드</th>
                          <th className="py-2 px-3 text-xs font-semibold text-text-muted uppercase">모델명</th>
                          <th className="py-2 px-3 text-xs font-semibold text-text-muted uppercase">제조사</th>
                          <th className="py-2 px-3 text-xs font-semibold text-text-muted uppercase">시리얼번호</th>
                          <th className="py-2 px-3 text-xs font-semibold text-text-muted uppercase">지급일</th>
                          <th className="py-2 px-3 text-xs font-semibold text-text-muted uppercase">상태</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-gray-100">
                        {equipmentList
                          .filter((eq) => !eq.returnedDate)
                          .map((eq) => (
                            <tr key={eq.assignmentId} className="hover:bg-gray-50">
                              <td className="py-2.5 px-3 font-mono text-xs">{eq.equipment?.assetCode || '-'}</td>
                              <td className="py-2.5 px-3">{eq.equipment?.modelName || '-'}</td>
                              <td className="py-2.5 px-3">{eq.equipment?.manufacturer || '-'}</td>
                              <td className="py-2.5 px-3 font-mono text-xs">{eq.equipment?.serialNumber || '-'}</td>
                              <td className="py-2.5 px-3">{formatDate(eq.assignedDate)}</td>
                              <td className="py-2.5 px-3">
                                <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-status-pending-bg text-status-pending-text">
                                  사용중
                                </span>
                              </td>
                            </tr>
                          ))}
                      </tbody>
                    </table>
                  </div>
                )}

                <div className="mt-3 flex items-center gap-1.5 text-xs text-text-muted">
                  <LinkIcon className="w-3.5 h-3.5" />
                  <button
                    onClick={() => router.push('/itam')}
                    className="text-primary hover:underline"
                  >
                    Manage equipment in ITAM →
                  </button>
                </div>
              </div>

              {/* SECTION 4: 파견 정보 */}
              <div className="bg-white rounded-2xl border border-border p-5">
                <h4 className="font-outfit text-base font-semibold text-text-main mb-4 flex items-center gap-2">
                  <span className="w-1.5 h-5 bg-status-open rounded-full" />
                  파견 정보
                </h4>

                {/* Current Dispatch */}
                {currentDispatch ? (
                  <div className="mb-5 p-4 bg-status-open-bg rounded-xl border border-status-open/20">
                    <div className="flex items-center gap-2 mb-2">
                      <Briefcase className="w-4 h-4 text-status-open" />
                      <span className="text-sm font-semibold text-text-main">현재 파견중</span>
                    </div>
                    <div className="grid grid-cols-2 gap-3 text-sm">
                      <div>
                        <span className="text-xs text-text-muted">프로젝트</span>
                        <p className="font-medium text-text-main">{currentDispatch.projectName || '-'}</p>
                      </div>
                      <div>
                        <span className="text-xs text-text-muted">역할</span>
                        <p className="font-medium text-text-main">{currentDispatch.roleTitle || '-'}</p>
                      </div>
                      <div>
                        <span className="text-xs text-text-muted">기간</span>
                        <p className="font-medium text-text-main">
                          {formatDate(currentDispatch.startDate)} ~ 진행중
                        </p>
                      </div>
                      <div>
                        <span className="text-xs text-text-muted">근무지</span>
                        <p className="font-medium text-text-main flex items-center gap-1">
                          <MapPin className="w-3 h-3" />
                          {getProjectById(currentDispatch.projectId)?.workAddress || '-'}
                        </p>
                      </div>
                    </div>
                  </div>
                ) : (
                  <div className="mb-5 p-4 bg-gray-50 rounded-xl text-center text-sm text-text-muted">
                    현재 파견된 프로젝트가 없습니다.
                  </div>
                )}

                {/* Dispatch History */}
                {pastDispatches.length > 0 && (
                  <div>
                    <h5 className="text-sm font-semibold text-text-main mb-3 flex items-center gap-1.5">
                      <Clock className="w-4 h-4 text-text-muted" />
                      파견 이력 ({pastDispatches.length})
                    </h5>
                    <div className="space-y-2">
                      {pastDispatches.map((dh) => (
                        <div
                          key={dh.dispatchId}
                          className="flex items-center justify-between p-3 rounded-xl border border-border hover:bg-gray-50 transition-all"
                        >
                          <div className="flex-1 min-w-0">
                            <p className="text-sm font-medium text-text-main truncate">{dh.projectName || 'Project'}</p>
                            <p className="text-xs text-text-muted">{dh.roleTitle}</p>
                          </div>
                          <div className="text-right flex-shrink-0 ml-4">
                            <p className="text-xs text-text-muted">
                              {formatDate(dh.startDate)} ~ {formatDate(dh.endDate)}
                            </p>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                <div className="mt-3 flex items-center gap-1.5 text-xs text-text-muted">
                  <LinkIcon className="w-3.5 h-3.5" />
                  <button
                    onClick={() => router.push(`/profile/${editingEmployee?.empId}`)}
                    className="text-primary hover:underline"
                  >
                    View full portfolio →
                  </button>
                </div>
              </div>
            </div>
          )}

          {/* Modal Footer */}
          <div className="sticky bottom-0 bg-surface rounded-b-2xl border-t border-border px-6 py-4 flex justify-end gap-3">
            <button
              type="button"
              onClick={handleCloseEditModal}
              disabled={isUpdating}
              className="px-5 py-2.5 rounded-xl border border-border text-text-main text-sm font-medium hover:bg-gray-100 transition-all disabled:opacity-50"
            >
              Close
            </button>
          </div>
        </div>

        {/* Role Change Confirmation Dialog */}
        {showRoleConfirm && (
          <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm">
            <div className="bg-surface rounded-2xl shadow-xl max-w-sm w-full mx-4 p-6 animate-in fade-in zoom-in duration-200">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-10 h-10 rounded-full bg-status-pending-bg flex items-center justify-center flex-shrink-0">
                  <AlertTriangle className="w-5 h-5 text-status-pending-text" />
                </div>
                <div>
                  <h4 className="font-outfit text-lg font-semibold text-text-main">Confirm Role Change</h4>
                  <p className="text-text-muted text-sm">Change role for {editingEmployee?.name}?</p>
                </div>
              </div>
              <div className="bg-gray-50 rounded-xl px-4 py-3 mb-5">
                <p className="text-sm text-text-main">
                  Role will change from{' '}
                  <span className="font-semibold">{roleLabel[editingEmployee?.roleCode || 'EMPLOYEE'] || editingEmployee?.roleCode}</span>
                  {' '}to{' '}
                  <span className="font-semibold">{roleLabel[pendingRole || 'EMPLOYEE'] || pendingRole}</span>
                </p>
              </div>
              <div className="flex gap-3">
                <button
                  onClick={() => { setShowRoleConfirm(false); setPendingRole(null); }}
                  className="flex-1 px-4 py-2.5 rounded-xl border border-border text-text-main text-sm font-medium hover:bg-gray-100 transition-all"
                >
                  Cancel
                </button>
                <button
                  onClick={confirmRoleChange}
                  className="flex-1 px-4 py-2.5 rounded-xl bg-primary hover:bg-primary-hover text-white text-sm font-semibold shadow-soft transition-all"
                >
                  Confirm
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Status Change Confirmation Dialog (for RESIGNED) */}
        {showStatusConfirm && (
          <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm">
            <div className="bg-surface rounded-2xl shadow-xl max-w-sm w-full mx-4 p-6 animate-in fade-in zoom-in duration-200">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-10 h-10 rounded-full bg-status-critical-bg flex items-center justify-center flex-shrink-0">
                  <AlertTriangle className="w-5 h-5 text-status-critical-text" />
                </div>
                <div>
                  <h4 className="font-outfit text-lg font-semibold text-text-main">Confirm Status Change</h4>
                  <p className="text-text-muted text-sm">Change status to RESIGNED?</p>
                </div>
              </div>
              <div className="bg-status-critical-bg border border-status-critical/20 rounded-xl px-4 py-3 mb-5">
                <p className="text-sm text-status-critical-text">
                  This will mark <span className="font-semibold">{editingEmployee?.name}</span> as resigned.
                  Please ensure the left date is set.
                </p>
              </div>
              <div className="flex gap-3">
                <button
                  onClick={() => { setShowStatusConfirm(false); setPendingStatus(null); }}
                  className="flex-1 px-4 py-2.5 rounded-xl border border-border text-text-main text-sm font-medium hover:bg-gray-100 transition-all"
                >
                  Cancel
                </button>
                <button
                  onClick={confirmStatusChange}
                  className="flex-1 px-4 py-2.5 rounded-xl bg-status-critical hover:bg-status-critical-hover text-white text-sm font-semibold shadow-soft transition-all"
                >
                  Confirm Resignation
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }

  // Delete Confirmation Dialog
  if (isDeleteDialogOpen) {
    return (
      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
        <div className="bg-surface rounded-2xl shadow-xl max-w-md w-full mx-4 p-6 relative animate-in fade-in zoom-in duration-200">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-12 h-12 rounded-full bg-status-critical-bg flex items-center justify-center flex-shrink-0">
              <AlertTriangle className="w-6 h-6 text-status-critical-text" />
            </div>
            <div>
              <h3 className="font-outfit text-xl font-semibold text-text-main">Delete Employee</h3>
              <p className="text-text-muted text-sm">This action cannot be undone</p>
            </div>
          </div>
          
          <div className="bg-gray-50 rounded-xl px-4 py-3 mb-6">
            <p className="text-sm text-text-main">
              Are you sure you want to delete <span className="font-semibold">{deletingEmployee?.name}</span>?
            </p>
            <p className="text-xs text-text-muted mt-1">
              This will soft-delete the employee record and remove their access to the system.
            </p>
          </div>
          
          <div className="flex gap-3">
            <button
              type="button"
              onClick={handleCloseDeleteDialog}
              disabled={isDeleting}
              className="flex-1 px-4 py-2.5 rounded-xl border border-border text-text-main text-sm font-medium hover:bg-gray-100 transition-all disabled:opacity-50"
            >
              Cancel
            </button>
            <button
              type="button"
              onClick={handleDeleteConfirm}
              disabled={isDeleting}
              className="flex-1 px-4 py-2.5 rounded-xl bg-status-critical hover:bg-status-critical-hover text-white text-sm font-semibold shadow-soft transition-all disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {isDeleting ? 'Deleting...' : 'Delete'}
            </button>
          </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>
            <button onClick={handleOpenModal} className="w-full sm:w-auto bg-primary hover:bg-primary-hover text-white px-5 py-2.5 rounded-xl text-sm font-semibold shadow-soft transition-all flex items-center justify-center">
              <Plus className="w-4 h-4 mr-2" />
              Add Employee
            </button>
          </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>
          <button onClick={handleOpenModal} className="w-full sm:w-auto bg-primary hover:bg-primary-hover text-white px-5 py-2.5 rounded-xl text-sm font-semibold shadow-soft transition-all flex items-center justify-center">
            <Plus className="w-4 h-4 mr-2" />
            Add Employee
          </button>
        </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} className="hover:bg-gray-50 transition-colors">
                      <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">
                        {user?.roleCode === 'ADMIN' && (
                          <div className="flex items-center gap-1">
                            <button
                              onClick={() => handleEdit(emp)}
                              className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
                              title="Edit"
                            >
                              <Pencil className="w-3.5 h-3.5 text-text-muted hover:text-primary" />
                            </button>
                            <button
                              onClick={() => handleDelete(emp)}
                              className="p-1.5 hover:bg-red-50 rounded-lg transition-colors"
                              title="Delete"
                            >
                              <Trash2 className="w-3.5 h-3.5 text-text-muted hover:text-status-critical-text" />
                            </button>
                          </div>
                        )}
                        {user?.roleCode !== 'ADMIN' && (
                          <button
                            onClick={() => router.push(`/profile/${emp.empId}`)}
                            className="p-1.5 text-text-muted hover:text-primary hover:bg-gray-100 rounded-lg transition-all"
                            title="View Profile"
                          >
                            <MoreHorizontal className="w-4 h-4" />
                          </button>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* Mobile cards */}
            <div className="md:hidden space-y-3">
              {filtered.map((emp, idx) => (
                <div key={emp.empId} className="bg-surface rounded-2xl border border-border p-4 space-y-2">
                  <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>
                    <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 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>
                  {user?.roleCode === 'ADMIN' && (
                    <div className="flex items-center gap-2 pt-2 border-t border-gray-100">
                      <button
                        onClick={() => handleEdit(emp)}
                        className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium text-text-muted hover:bg-gray-100 transition-all"
                      >
                        <Pencil className="w-3.5 h-3.5" />
                        Edit
                      </button>
                      <button
                        onClick={() => handleDelete(emp)}
                        className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium text-status-critical-text hover:bg-red-50 transition-all"
                      >
                        <Trash2 className="w-3.5 h-3.5" />
                        Delete
                      </button>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}