import { useState, useEffect } from 'react';
import { Search, RefreshCw, Users, Check, X, User, Save } 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 bg-black/60 flex items-center justify-center z-50" onClick={onClose}>
      <div
        className="glass-effect rounded-xl w-full max-w-2xl max-h-[90vh] overflow-hidden"
        onClick={(e) => e.stopPropagation()}
      >
        {/* 헤더 */}
        <div className="p-4 border-b border-white/10 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <User className="w-5 h-5 text-white/70" />
            <h2 className="text-lg font-semibold text-white">
              사용자 정보 {canEdit ? '' : '(읽기 전용)'}
            </h2>
          </div>
          <button
            onClick={onClose}
            className="text-white/60 hover:text-white transition-colors text-xl"
          >
            ×
          </button>
        </div>

        {/* 내용 */}
        <div className="p-4 overflow-auto max-h-[calc(90vh-120px)]">
          <div className="grid grid-cols-3 gap-4">
            {/* 사번 (읽기 전용) */}
            <div>
              <label className="block text-sm text-white/70 mb-1">사번</label>
              <input
                type="text"
                value={formData.id}
                disabled
                className="w-full px-3 py-2 bg-white/5 border border-white/20 rounded-lg text-white/50"
              />
            </div>

            {/* 성명 */}
            <div>
              <label className="block text-sm text-white/70 mb-1">성명</label>
              <input
                type="text"
                value={formData.name}
                onChange={(e) => handleChange('name', e.target.value)}
                disabled={!canEdit}
                className={clsx(
                  "w-full px-3 py-2 border border-white/20 rounded-lg text-white",
                  canEdit ? "bg-white/10" : "bg-white/5 text-white/50"
                )}
              />
            </div>

            {/* 영문명 */}
            <div>
              <label className="block text-sm text-white/70 mb-1">영문명</label>
              <input
                type="text"
                value={formData.nameE}
                onChange={(e) => handleChange('nameE', e.target.value)}
                disabled={!canEdit}
                className={clsx(
                  "w-full px-3 py-2 border border-white/20 rounded-lg text-white",
                  canEdit ? "bg-white/10" : "bg-white/5 text-white/50"
                )}
              />
            </div>

            {/* 직책 */}
            <div>
              <label className="block text-sm text-white/70 mb-1">직책</label>
              <input
                type="text"
                value={formData.grade}
                onChange={(e) => handleChange('grade', e.target.value)}
                disabled={!canEdit}
                className={clsx(
                  "w-full px-3 py-2 border border-white/20 rounded-lg text-white",
                  canEdit ? "bg-white/10" : "bg-white/5 text-white/50"
                )}
              />
            </div>

            {/* 공정 */}
            <div>
              <label className="block text-sm text-white/70 mb-1">공정</label>
              <input
                type="text"
                value={formData.processs}
                onChange={(e) => handleChange('processs', e.target.value)}
                disabled={!canEdit}
                className={clsx(
                  "w-full px-3 py-2 border border-white/20 rounded-lg text-white",
                  canEdit ? "bg-white/10" : "bg-white/5 text-white/50"
                )}
              />
            </div>

            {/* 상태 */}
            <div>
              <label className="block text-sm text-white/70 mb-1">상태</label>
              <input
                type="text"
                value={formData.state}
                onChange={(e) => handleChange('state', e.target.value)}
                disabled={!canEdit}
                className={clsx(
                  "w-full px-3 py-2 border border-white/20 rounded-lg text-white",
                  canEdit ? "bg-white/10" : "bg-white/5 text-white/50"
                )}
              />
            </div>

            {/* 이메일 */}
            <div>
              <label className="block text-sm text-white/70 mb-1">이메일</label>
              <input
                type="email"
                value={formData.email}
                onChange={(e) => handleChange('email', e.target.value)}
                disabled={!canEdit}
                className={clsx(
                  "w-full px-3 py-2 border border-white/20 rounded-lg text-white",
                  canEdit ? "bg-white/10" : "bg-white/5 text-white/50"
                )}
              />
            </div>

            {/* 전화 */}
            <div>
              <label className="block text-sm text-white/70 mb-1">전화</label>
              <input
                type="text"
                value={formData.tel}
                onChange={(e) => handleChange('tel', e.target.value)}
                disabled={!canEdit}
                className={clsx(
                  "w-full px-3 py-2 border border-white/20 rounded-lg text-white",
                  canEdit ? "bg-white/10" : "bg-white/5 text-white/50"
                )}
              />
            </div>

            {/* 입사일 */}
            <div>
              <label className="block text-sm text-white/70 mb-1">입사일</label>
              <input
                type="text"
                value={formData.indate}
                onChange={(e) => handleChange('indate', e.target.value)}
                disabled={!canEdit}
                placeholder="YYYY-MM-DD"
                className={clsx(
                  "w-full px-3 py-2 border border-white/20 rounded-lg text-white",
                  canEdit ? "bg-white/10" : "bg-white/5 text-white/50"
                )}
              />
            </div>

            {/* 퇴사일 */}
            <div>
              <label className="block text-sm text-white/70 mb-1">퇴사일</label>
              <input
                type="text"
                value={formData.outdate}
                onChange={(e) => handleChange('outdate', e.target.value)}
                disabled={!canEdit}
                placeholder="YYYY-MM-DD"
                className={clsx(
                  "w-full px-3 py-2 border border-white/20 rounded-lg text-white",
                  canEdit ? "bg-white/10" : "bg-white/5 text-white/50"
                )}
              />
            </div>

            {/* 레벨 */}
            <div>
              <label className="block text-sm text-white/70 mb-1">레벨</label>
              <select
                value={formData.level}
                onChange={(e) => handleChange('level', parseInt(e.target.value) || 0)}
                disabled={!canEditAdmin}
                className={clsx(
                  "w-full px-3 py-2 border border-white/20 rounded-lg text-white",
                  canEditAdmin ? "bg-white/10" : "bg-white/5 text-white/50"
                )}
              >
                {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((lv) => (
                  <option key={lv} value={lv} className="bg-gray-800 text-white">
                    {lv}
                  </option>
                ))}
              </select>
            </div>

            {/* 메모 */}
            <div className="col-span-3">
              <label className="block text-sm text-white/70 mb-1">메모</label>
              <textarea
                value={formData.memo}
                onChange={(e) => handleChange('memo', e.target.value)}
                disabled={!canEdit}
                rows={2}
                className={clsx(
                  "w-full px-3 py-2 border border-white/20 rounded-lg text-white resize-none",
                  canEdit ? "bg-white/10" : "bg-white/5 text-white/50"
                )}
              />
            </div>

            {/* 관리자 전용 설정 */}
            <div className="col-span-3 border-t border-white/10 pt-4 mt-2">
              <h3 className="text-sm font-medium text-white/80 mb-3">
                관리자 설정 {!canEditAdmin && '(관리자만 수정 가능)'}
              </h3>
              <div className="flex items-center gap-6">
                {/* 계정 사용 */}
                <label className={clsx(
                  "flex items-center gap-2 cursor-pointer",
                  !canEditAdmin && "opacity-50 cursor-not-allowed"
                )}>
                  <input
                    type="checkbox"
                    checked={formData.useUserState}
                    onChange={(e) => handleChange('useUserState', e.target.checked)}
                    disabled={!canEditAdmin}
                    className="w-4 h-4 rounded"
                  />
                  <span className="text-sm text-white">계정 사용</span>
                </label>

                {/* 일지 사용 */}
                <label className={clsx(
                  "flex items-center gap-2 cursor-pointer",
                  !canEditAdmin && "opacity-50 cursor-not-allowed"
                )}>
                  <input
                    type="checkbox"
                    checked={formData.useJobReport}
                    onChange={(e) => handleChange('useJobReport', e.target.checked)}
                    disabled={!canEditAdmin}
                    className="w-4 h-4 rounded"
                  />
                  <span className="text-sm text-white">일지 사용</span>
                </label>

                {/* 휴가 제외 */}
                <label className={clsx(
                  "flex items-center gap-2 cursor-pointer",
                  !canEditAdmin && "opacity-50 cursor-not-allowed"
                )}>
                  <input
                    type="checkbox"
                    checked={formData.exceptHoly}
                    onChange={(e) => handleChange('exceptHoly', e.target.checked)}
                    disabled={!canEditAdmin}
                    className="w-4 h-4 rounded"
                  />
                  <span className="text-sm text-white">휴가 제외</span>
                </label>
              </div>
            </div>
          </div>
        </div>

        {/* 푸터 */}
        <div className="p-4 border-t border-white/10 flex justify-end gap-2">
          <button
            onClick={onClose}
            className="px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-white transition-colors"
          >
            닫기
          </button>
          {canEdit && (
            <button
              onClick={handleSave}
              disabled={saving}
              className="flex items-center gap-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 rounded-lg text-white transition-colors"
            >
              <Save className="w-4 h-4" />
              {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 if (result && typeof result === 'object') {
        const r = result as { Success?: boolean; Message?: string };
        if (r.Success === false) {
          console.error('사용자 목록 조회 실패:', r.Message);
        }
        setUsers([]);
      } else {
        console.error('사용자 목록 응답이 배열이 아님:', result);
        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="h-full flex flex-col">
      {/* 헤더 */}
      <div className="glass-effect rounded-xl p-4 mb-4">
        <div className="flex items-center gap-4 flex-wrap">
          <div className="flex items-center gap-2">
            <label className="text-sm text-white/70">공정</label>
            <input
              type="text"
              value={process}
              onChange={(e) => setProcess(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && handleRefresh()}
              className="px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white w-24 text-center"
            />
          </div>

          <button
            onClick={handleRefresh}
            className="flex items-center gap-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white transition-colors"
          >
            <RefreshCw className="w-4 h-4" />
            새로고침
          </button>

          <div className="flex-1" />

          <div className="relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/40" />
            <input
              type="text"
              value={filter}
              onChange={(e) => setFilter(e.target.value)}
              placeholder="검색..."
              className="pl-9 pr-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 w-48"
            />
          </div>
        </div>
      </div>

      {/* 테이블 */}
      <div className="glass-effect rounded-xl flex-1 overflow-hidden flex flex-col">
        <div className="p-4 border-b border-white/10 flex items-center gap-2">
          <Users className="w-5 h-5 text-white/70" />
          <h2 className="text-lg font-semibold text-white">사용자 목록</h2>
          <span className="text-sm text-white/50">({filteredUsers.length}명)</span>
        </div>

        <div className="flex-1 overflow-auto">
          {loading ? (
            <div className="flex items-center justify-center h-32">
              <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-white"></div>
            </div>
          ) : (
            <table className="w-full text-sm">
              <thead className="bg-white/5 sticky top-0">
                <tr>
                  <th className="px-3 py-2 text-left font-medium text-white/70 w-24">사번</th>
                  <th className="px-3 py-2 text-left font-medium text-white/70 w-24">성명</th>
                  <th className="px-3 py-2 text-left font-medium text-white/70 w-20">직책</th>
                  <th className="px-3 py-2 text-left font-medium text-white/70">이메일</th>
                  <th className="px-3 py-2 text-left font-medium text-white/70 w-28">전화</th>
                  <th className="px-3 py-2 text-left font-medium text-white/70 w-20">공정</th>
                  <th className="px-3 py-2 text-left font-medium text-white/70 w-16">상태</th>
                  <th className="px-3 py-2 text-center font-medium text-white/70 w-12">Lv</th>
                  <th className="px-3 py-2 text-center font-medium text-white/70 w-16">계정</th>
                  <th className="px-3 py-2 text-center font-medium text-white/70 w-16">일지</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-white/5">
                {filteredUsers.map((user) => (
                  <tr
                    key={user.id}
                    onClick={() => handleRowClick(user)}
                    className={clsx(
                      'hover:bg-white/5 transition-colors cursor-pointer',
                      !user.useUserState && 'opacity-50'
                    )}
                  >
                    <td className="px-3 py-2 text-white font-mono">{user.id}</td>
                    <td className="px-3 py-2 text-white font-medium">{user.name}</td>
                    <td className="px-3 py-2 text-white/70">{user.grade}</td>
                    <td className="px-3 py-2">
                      {user.email ? (
                        <a
                          href={`mailto:${user.email}`}
                          className="text-blue-400 hover:text-blue-300 hover:underline"
                          onClick={(e) => e.stopPropagation()}
                        >
                          {user.email}
                        </a>
                      ) : (
                        <span className="text-white/70">-</span>
                      )}
                    </td>
                    <td className="px-3 py-2 text-white/70">{user.tel}</td>
                    <td className="px-3 py-2 text-white/70">{user.processs}</td>
                    <td className="px-3 py-2 text-white/70">{user.state}</td>
                    <td className="px-3 py-2 text-white text-center">{user.level}</td>
                    <td className="px-3 py-2 text-center">
                      {user.useUserState ? (
                        <Check className="w-4 h-4 text-green-400 mx-auto" />
                      ) : (
                        <X className="w-4 h-4 text-red-400 mx-auto" />
                      )}
                    </td>
                    <td className="px-3 py-2 text-center">
                      {user.useJobReport ? (
                        <Check className="w-4 h-4 text-green-400 mx-auto" />
                      ) : (
                        <X className="w-4 h-4 text-red-400 mx-auto" />
                      )}
                    </td>
                  </tr>
                ))}
                {filteredUsers.length === 0 && (
                  <tr>
                    <td colSpan={10} className="px-4 py-8 text-center text-white/50">
                      {users.length === 0 ? '공정을 입력하고 새로고침하세요.' : '검색 결과가 없습니다.'}
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          )}
        </div>
      </div>

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