import { useState, useEffect } from 'react';
import { Search, RefreshCw, Users, Check, X, User as UserIcon, Save, Settings, Shield, Mail } from 'lucide-react';
import { clsx } from 'clsx';
import { comms } from '@/communication';
import { GroupUser, UserLevelInfo, UserFullData } from '@/types';

// 사용자 상세 다이얼로그 Props
interface UserDetailDialogProps {
  user: GroupUser;
  levelInfo: UserLevelInfo | null;
  onClose: () => void;
  onSave: () => void;
}

// 사용자 상세 다이얼로그 컴포넌트
function UserDetailDialog({ user, levelInfo, onClose, onSave }: UserDetailDialogProps) {
  const [formData, setFormData] = useState<UserFullData>({
    id: user.id,
    name: user.name || '',
    nameE: user.nameE || '',
    grade: user.grade || '',
    email: user.email || '',
    tel: user.tel || '',
    hp: user.hp || '',
    indate: user.indate || '',
    outdate: user.outdate || '',
    memo: user.memo || '',
    processs: user.processs || '',
    state: user.state || '',
    level: user.level || 1,
    useUserState: user.useUserState || false,
    useJobReport: user.useJobReport || false,
    exceptHoly: user.exceptHoly || false,
  });
  const [saving, setSaving] = useState(false);

  // 편집 가능 여부: 관리자(level >= 5) 또는 본인
  const isSelf = levelInfo?.CurrentUserId === user.id;
  const canEdit = levelInfo?.CanEdit || isSelf;
  const canEditAdmin = levelInfo?.CanEdit || false; // 관리자 전용 필드

  const handleChange = (field: keyof UserFullData, value: string | number | boolean) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  const handleSave = async () => {
    if (!canEdit) return;

    setSaving(true);
    try {
      const result = await comms.saveUserFull(formData);
      if (result.Success) {
        onSave();
        onClose();
      } else {
        alert(result.Message || '저장에 실패했습니다.');
      }
    } catch (error) {
      console.error('저장 실패:', error);
      alert('저장 중 오류가 발생했습니다.');
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      {/* 배경 오버레이 */}
      <div
        className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in"
        onClick={onClose}
      />

      {/* 다이얼로그 콘텐트 */}
      <div className="relative w-full max-w-3xl bg-[#1a1c1e] border border-white/10 rounded-3xl shadow-2xl overflow-hidden animate-scale-in flex flex-col max-h-[90vh]">
        <div className="px-6 py-5 border-b border-white/10 flex items-center justify-between bg-white/[0.02] shrink-0">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-primary-500/20 rounded-xl text-primary-400">
              <UserIcon className="w-5 h-5" />
            </div>
            <div>
              <h3 className="text-xl font-bold text-white tracking-tight">
                사용자 정보 {canEdit ? '' : '(읽기 전용)'}
              </h3>
              <p className="text-white/30 text-[10px] uppercase font-bold tracking-widest mt-0.5">
                User Profile Management
              </p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="p-2 hover:bg-white/10 rounded-xl text-white/40 hover:text-white transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        <div className="p-6 overflow-y-auto custom-scrollbar flex-1">
          <div className="space-y-8">
            {/* 기본 인사 정보 */}
            <section className="space-y-4">
              <div className="flex items-center gap-3 mb-2">
                <UserIcon className="w-4 h-4 text-primary-500" />
                <h4 className="text-sm font-bold text-white/70 uppercase tracking-tighter">인사 정보</h4>
                <div className="flex-1 h-px bg-white/5"></div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5">
                  <label className="text-[10px] font-bold text-white/30 uppercase pl-1">사번</label>
                  <input
                    type="text"
                    value={formData.id}
                    disabled
                    className="w-full bg-transparent border-none text-sm text-white/50 focus:outline-none"
                  />
                </div>
                <div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
                  <label className="text-[10px] font-bold text-white/30 uppercase pl-1">성명</label>
                  <input
                    type="text"
                    value={formData.name}
                    onChange={(e) => handleChange('name', e.target.value)}
                    disabled={!canEdit}
                    className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
                  />
                </div>
                <div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
                  <label className="text-[10px] font-bold text-white/30 uppercase pl-1">영문명</label>
                  <input
                    type="text"
                    value={formData.nameE}
                    onChange={(e) => handleChange('nameE', e.target.value)}
                    disabled={!canEdit}
                    className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
                  <label className="text-[10px] font-bold text-white/30 uppercase pl-1">직책</label>
                  <input
                    type="text"
                    value={formData.grade}
                    onChange={(e) => handleChange('grade', e.target.value)}
                    disabled={!canEdit}
                    className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
                  />
                </div>
                <div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
                  <label className="text-[10px] font-bold text-white/30 uppercase pl-1">공정</label>
                  <input
                    type="text"
                    value={formData.processs}
                    onChange={(e) => handleChange('processs', e.target.value)}
                    disabled={!canEdit}
                    className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
                  />
                </div>
                <div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
                  <label className="text-[10px] font-bold text-white/30 uppercase pl-1">상태</label>
                  <input
                    type="text"
                    value={formData.state}
                    onChange={(e) => handleChange('state', e.target.value)}
                    disabled={!canEdit}
                    className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
                  />
                </div>
              </div>
            </section>

            {/* 연락처 및 일정 */}
            <section className="space-y-4">
              <div className="flex items-center gap-3 mb-2">
                <Shield className="w-4 h-4 text-primary-500" />
                <h4 className="text-sm font-bold text-white/70 uppercase tracking-tighter">연락처 및 근태 정보</h4>
                <div className="flex-1 h-px bg-white/5"></div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
                  <label className="text-[10px] font-bold text-white/30 uppercase pl-1">이메일</label>
                  <input
                    type="email"
                    value={formData.email}
                    onChange={(e) => handleChange('email', e.target.value)}
                    disabled={!canEdit}
                    className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
                  />
                </div>
                <div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
                  <label className="text-[10px] font-bold text-white/30 uppercase pl-1">연락처</label>
                  <input
                    type="text"
                    value={formData.tel}
                    onChange={(e) => handleChange('tel', e.target.value)}
                    disabled={!canEdit}
                    className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
                  <label className="text-[10px] font-bold text-white/30 uppercase pl-1">입사일</label>
                  <input
                    type="text"
                    value={formData.indate}
                    onChange={(e) => handleChange('indate', e.target.value)}
                    disabled={!canEdit}
                    placeholder="YYYY-MM-DD"
                    className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
                  />
                </div>
                <div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
                  <label className="text-[10px] font-bold text-white/30 uppercase pl-1">퇴사일</label>
                  <input
                    type="text"
                    value={formData.outdate}
                    onChange={(e) => handleChange('outdate', e.target.value)}
                    disabled={!canEdit}
                    placeholder="YYYY-MM-DD"
                    className="w-full bg-transparent border-none text-sm text-white focus:outline-none placeholder:text-white/10"
                  />
                </div>
              </div>
            </section>

            {/* 관리자 권한 및 메모 */}
            <section className="space-y-4">
              <div className="flex items-center gap-3 mb-2">
                <Settings className="w-4 h-4 text-primary-500" />
                <h4 className="text-sm font-bold text-white/70 uppercase tracking-tighter">시스템 설정 및 메모</h4>
                <div className="flex-1 h-px bg-white/5"></div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div className="space-y-1.5 px-3 py-2 bg-white/5 rounded-2xl border border-white/5">
                  <label className="text-[10px] font-bold text-white/30 uppercase pl-1">권한 레벨</label>
                  <select
                    value={formData.level}
                    onChange={(e) => handleChange('level', parseInt(e.target.value) || 0)}
                    disabled={!canEditAdmin}
                    className="w-full bg-transparent border-none text-sm text-white focus:outline-none cursor-pointer"
                  >
                    {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((lv) => (
                      <option key={lv} value={lv} className="bg-[#1a1c1e] text-white">
                        Level {lv}
                      </option>
                    ))}
                  </select>
                </div>

                <div className="md:col-span-3 flex items-center gap-6 px-4">
                  {[
                    { id: 'useUserState', label: '계정 활성', checked: formData.useUserState },
                    { id: 'useJobReport', label: '일지 사용', checked: formData.useJobReport },
                    { id: 'exceptHoly', label: '휴가 제외', checked: formData.exceptHoly },
                  ].map((item) => (
                    <label
                      key={item.id}
                      className={clsx(
                        "flex items-center gap-2 cursor-pointer transition-opacity",
                        !canEditAdmin && "opacity-40 cursor-not-allowed"
                      )}
                    >
                      <input
                        type="checkbox"
                        checked={item.checked}
                        onChange={(e) => handleChange(item.id as any, e.target.checked)}
                        disabled={!canEditAdmin}
                        className="w-4 h-4 rounded border-white/20 bg-white/5 text-primary-500 focus:ring-primary-500/50 focus:ring-offset-0"
                      />
                      <span className="text-sm text-white/70 font-medium">{item.label}</span>
                    </label>
                  ))}
                </div>
              </div>

              <div className="space-y-1.5 px-3 py-3 bg-white/5 rounded-2xl border border-white/5 focus-within:border-primary-500/30 transition-colors">
                <label className="text-[10px] font-bold text-white/30 uppercase pl-1">비고 및 특이사항</label>
                <textarea
                  value={formData.memo}
                  onChange={(e) => handleChange('memo', e.target.value)}
                  disabled={!canEdit}
                  rows={3}
                  className="w-full bg-transparent border-none text-sm text-white focus:outline-none resize-none placeholder:text-white/10 mt-1"
                  placeholder="사용자 관련 특이사항을 입력하세요"
                />
              </div>
            </section>
          </div>
        </div>

        {/* 푸터 버튼 */}
        <div className="px-6 py-5 bg-white/[0.02] border-t border-white/10 flex items-center justify-end gap-3 shrink-0">
          <button
            onClick={onClose}
            className="px-5 py-2 text-white/40 hover:text-white font-bold text-xs transition-colors"
          >
            취소
          </button>
          {canEdit && (
            <button
              onClick={handleSave}
              disabled={saving}
              className="flex items-center gap-2 px-6 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-xl font-bold text-xs shadow-lg shadow-primary-500/20 transition-all disabled:opacity-50 active:scale-95"
            >
              <Save className="w-3.5 h-3.5" />
              {saving ? '저장 중...' : '사용자 정보 저장'}
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

export function UserListPage() {
  const [users, setUsers] = useState<GroupUser[]>([]);
  const [process, setProcess] = useState('%');
  const [loading, setLoading] = useState(false);
  const [filter, setFilter] = useState('');
  const [levelInfo, setLevelInfo] = useState<UserLevelInfo | null>(null);
  const [selectedUser, setSelectedUser] = useState<GroupUser | null>(null);

  useEffect(() => {
    loadLevelInfo();
    loadUsers();
  }, []);

  const loadLevelInfo = async () => {
    try {
      const result = await comms.getCurrentUserLevel();
      if (result.Success && result.Data) {
        setLevelInfo(result.Data);
      }
    } catch (error) {
      console.error('권한 정보 로드 실패:', error);
    }
  };

  const loadUsers = async () => {
    setLoading(true);
    try {
      const result = await comms.getUserList(process);
      if (Array.isArray(result)) {
        setUsers(result);
      } else {
        setUsers([]);
      }
    } catch (error) {
      console.error('사용자 목록 로드 실패:', error);
      setUsers([]);
    } finally {
      setLoading(false);
    }
  };

  const handleRefresh = () => {
    loadUsers();
  };

  const handleRowClick = (user: GroupUser) => {
    setSelectedUser(user);
  };

  const filteredUsers = users.filter(
    (u) =>
      (u.id ?? '').toLowerCase().includes(filter.toLowerCase()) ||
      (u.name ?? '').toLowerCase().includes(filter.toLowerCase()) ||
      (u.email ?? '').toLowerCase().includes(filter.toLowerCase()) ||
      (u.tel ?? '').toLowerCase().includes(filter.toLowerCase())
  );

  return (
    <div className="space-y-6 animate-fade-in pb-4 h-full">
      {/* 사용자 목록 단일 카드 */}
      <div className="glass-effect rounded-3xl overflow-hidden shadow-2xl border border-white/10 flex flex-col h-full max-h-[calc(100vh-140px)]">
        <div className="px-6 py-4 border-b border-white/10 flex flex-col md:flex-row items-center justify-between gap-4 bg-white/[0.02]">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-primary-500/20 rounded-lg">
              <Users className="w-5 h-5 text-primary-400" />
            </div>
            <div>
              <h3 className="text-lg font-bold text-white tracking-tight">사용자 목록</h3>
              <p className="text-white/30 text-[10px] uppercase font-bold tracking-widest mt-0.5">
                Organizational Directory
              </p>
            </div>
          </div>

          <div className="flex items-center gap-3">
            {/* 공정 필터 */}
            <div className="flex items-center gap-2 bg-white/5 px-3 py-1.5 rounded-xl border border-white/10">
              <span className="text-[10px] text-white/30 font-bold uppercase whitespace-nowrap">공정</span>
              <input
                type="text"
                value={process}
                onChange={(e) => setProcess(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && handleRefresh()}
                className="bg-transparent border-none text-xs text-white p-0 w-16 text-center focus:outline-none focus:ring-0 font-bold"
              />
            </div>

            {/* 검색창 */}
            <div className="relative group w-48 md:w-64">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-white/40 group-focus-within:text-primary-400 transition-colors" />
              <input
                type="text"
                value={filter}
                onChange={(e) => setFilter(e.target.value)}
                placeholder="ID, 성명, 정보 검색..."
                className="w-full bg-white/5 border border-white/10 rounded-xl pl-9 pr-4 py-1.5 text-xs text-white placeholder-white/20 focus:outline-none focus:ring-1 focus:ring-primary-500/50 transition-all backdrop-blur-sm h-[40px]"
              />
            </div>

            {/* 개수 */}
            <div className="flex items-center gap-2 bg-white/5 px-3 py-1.5 rounded-xl border border-white/10 h-[40px]">
              <span className="text-primary-400 font-bold text-sm">{filteredUsers.length}</span>
              <span className="text-white/40 text-[10px] uppercase">명</span>
            </div>

            {/* 새로고침 */}
            <button
              onClick={handleRefresh}
              disabled={loading}
              className="p-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl text-white/70 hover:text-white transition-all disabled:opacity-50 h-[40px] w-[40px] flex items-center justify-center"
              title="새로고침"
            >
              <RefreshCw className={clsx("w-4 h-4", loading && "animate-spin")} />
            </button>
          </div>
        </div>

        {/* 테이블 헤더 */}
        <div className="bg-white/5 px-6 py-3 border-b border-white/5 flex items-center text-[10px] font-bold text-white/30 uppercase tracking-widest shrink-0">
          <div className="w-12 text-center">ID</div>
          <div className="w-32 px-4">성명/직책</div>
          <div className="flex-1 px-4">이메일/연락처</div>
          <div className="w-24 px-4 text-center">공정</div>
          <div className="w-20 text-center">레벨</div>
          <div className="w-16 text-center">계정</div>
          <div className="w-16 text-center">일지</div>
        </div>

        <div className="flex-1 overflow-y-auto custom-scrollbar divide-y divide-white/5">
          {loading ? (
            <div className="py-20 text-center">
              <RefreshCw className="w-10 h-10 mx-auto mb-4 animate-spin text-primary-500/50" />
              <p className="text-white/50 font-medium text-sm">사용자 정보를 불러오는 중...</p>
            </div>
          ) : filteredUsers.length === 0 ? (
            <div className="py-32 text-center">
              <Users className="w-16 h-16 mx-auto text-white/10 mb-4" />
              <p className="text-white/30 text-base font-bold">등록된 사용자가 없습니다</p>
              <p className="text-white/10 text-[10px] mt-2 uppercase tracking-[0.2em]">No personnel records found</p>
            </div>
          ) : (
            filteredUsers.map((user) => (
              <div
                key={user.id}
                onClick={() => handleRowClick(user)}
                className={clsx(
                  "px-6 py-3 hover:bg-white/[0.03] transition-all cursor-pointer group flex items-center",
                  !user.useUserState && "opacity-40 grayscale-[0.5]"
                )}
              >
                {/* ID */}
                <div className="w-12 text-center text-xs font-mono text-white/40 group-hover:text-primary-400 Transition-colors">
                  {user.id}
                </div>

                {/* 성명/직책 */}
                <div className="w-32 px-4 flex flex-col">
                  <div className="text-sm font-bold text-white group-hover:text-primary-300 transition-colors">
                    {user.name}
                  </div>
                  <div className="text-[10px] text-white/30 font-medium uppercase tracking-tighter">
                    {user.grade || '-'}
                  </div>
                </div>

                {/* 정보 */}
                <div className="flex-1 px-4 flex flex-col">
                  <div className="flex items-center gap-1.5 text-xs text-white/60">
                    <Mail className="w-3 h-3 text-white/20" />
                    {user.email || '-'}
                  </div>
                  <div className="text-[10px] text-white/30 mt-0.5">
                    {user.tel || user.hp || ''}
                  </div>
                </div>

                {/* 공정 */}
                <div className="w-24 px-4 text-center">
                  <span className="px-2 py-0.5 bg-white/5 border border-white/5 rounded-md text-[10px] text-white/50 font-bold uppercase">
                    {user.processs || '-'}
                  </span>
                </div>

                {/* 레벨 */}
                <div className="w-20 text-center font-mono text-xs text-white/40">
                  Lv.{user.level}
                </div>

                {/* 계정 상태 */}
                <div className="w-16 flex justify-center">
                  <div className={clsx(
                    "w-6 h-6 rounded-lg flex items-center justify-center transition-colors",
                    user.useUserState ? "bg-green-500/10 text-green-400" : "bg-red-500/10 text-red-500"
                  )}>
                    {user.useUserState ? <Check className="w-3.5 h-3.5" /> : <X className="w-3.5 h-3.5" />}
                  </div>
                </div>

                {/* 일지 사용 */}
                <div className="w-16 flex justify-center">
                  <div className={clsx(
                    "w-6 h-6 rounded-lg flex items-center justify-center transition-colors",
                    user.useJobReport ? "bg-primary-500/10 text-primary-400" : "bg-white/5 text-white/10"
                  )}>
                    {user.useJobReport ? <Check className="w-3.5 h-3.5" /> : <X className="w-3.5 h-3.5" />}
                  </div>
                </div>
              </div>
            ))
          )}
        </div>

        {/* 푸터 */}
        <div className="px-6 py-2 flex items-center justify-between bg-white/[0.02] border-t border-white/5 shrink-0">
          <div className="text-white/20 text-[9px] font-bold uppercase tracking-[0.2em] py-2">
            System Directory Access <span className="text-white/5 mx-2">/</span>
            Level <span className="text-primary-400/50 font-mono tracking-normal">{levelInfo?.CurrentUserId || 'Unknown'}</span>
          </div>
          <div className="text-[9px] text-white/10 italic">
            Reference date: {new Date().toLocaleDateString()}
          </div>
        </div>
      </div>

      {/* 사용자 상세 다이얼로그 */}
      {selectedUser && (
        <UserDetailDialog
          user={selectedUser}
          levelInfo={levelInfo}
          onClose={() => setSelectedUser(null)}
          onSave={() => loadUsers()}
        />
      )}
    </div>
  );
}