import { useState, useEffect } from 'react';
import { X, Save, Key, User, Mail, Building2, Briefcase, Calendar, FileText, Palette } from 'lucide-react';
import { clsx } from 'clsx';
import { comms } from '@/communication';
import { UserInfoDetail } from '@/types';
import { useTheme, Theme } from '@/context/ThemeContext';

interface UserInfoDialogProps {
  isOpen: boolean;
  onClose: () => void;
  userId?: string;
  onSave?: () => void;
}

interface PasswordDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: (oldPassword: string, newPassword: string) => void;
}

function PasswordDialog({ isOpen, onClose, onConfirm }: PasswordDialogProps) {
  const [oldPassword, setOldPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [error, setError] = useState('');

  // ESC 키로 닫기
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && isOpen) {
        onClose();
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isOpen, onClose]);

  const handleSubmit = () => {
    if (!newPassword) {
      setError('새 비밀번호를 입력하세요.');
      return;
    }
    if (newPassword !== confirmPassword) {
      setError('새 비밀번호가 일치하지 않습니다.');
      return;
    }
    onConfirm(oldPassword, newPassword);
    setOldPassword('');
    setNewPassword('');
    setConfirmPassword('');
    setError('');
    onClose();
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[10001]">
      <div className="glass-effect-solid rounded-xl p-6 w-full max-w-sm">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-lg font-semibold text-white flex items-center gap-2">
            <Key className="w-5 h-5" />
            비밀번호 변경
          </h3>
          <button onClick={onClose} className="text-white/60 hover:text-white">
            <X className="w-5 h-5" />
          </button>
        </div>

        <div className="space-y-4">
          <div>
            <label className="block text-sm text-white/70 mb-1">기존 비밀번호</label>
            <input
              type="password"
              value={oldPassword}
              onChange={(e) => setOldPassword(e.target.value)}
              className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
              placeholder="기존 비밀번호"
            />
          </div>
          <div>
            <label className="block text-sm text-white/70 mb-1">새 비밀번호</label>
            <input
              type="password"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
              className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
              placeholder="새 비밀번호"
            />
          </div>
          <div>
            <label className="block text-sm text-white/70 mb-1">새 비밀번호 확인</label>
            <input
              type="password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
              placeholder="새 비밀번호 확인"
            />
          </div>

          {error && <p className="text-red-400 text-sm">{error}</p>}

          <div className="flex justify-end gap-2 mt-4">
            <button
              onClick={onClose}
              className="px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-white/70 hover:text-white transition-colors"
            >
              취소
            </button>
            <button
              onClick={handleSubmit}
              className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white transition-colors"
            >
              변경
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export function UserInfoDialog({ isOpen, onClose, userId, onSave }: UserInfoDialogProps) {
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [showPasswordDialog, setShowPasswordDialog] = useState(false);
  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
  const { theme, setTheme } = useTheme();

  const [formData, setFormData] = useState<UserInfoDetail>({
    Id: '',
    NameK: '',
    NameE: '',
    Dept: '',
    Grade: '',
    Email: '',
    Tel: '',
    Hp: '',
    DateIn: '',
    DateO: '',
    Memo: '',
    Process: '',
    State: '',
    UseJobReport: false,
    UseUserState: false,
    ExceptHoly: false,
    Level: 0,
  });

  useEffect(() => {
    if (isOpen) {
      loadUserInfo();
    }
  }, [isOpen, userId]);

  // ESC 키로 닫기 (비밀번호 다이얼로그가 열려있지 않을 때만)
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && isOpen && !showPasswordDialog) {
        onClose();
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isOpen, onClose, showPasswordDialog]);

  const loadUserInfo = async () => {
    setLoading(true);
    setMessage(null);
    try {
      const response = userId
        ? await comms.getUserInfoById(userId)
        : await comms.getCurrentUserInfo();

      if (response.Success && response.Data) {
        setFormData(response.Data);
      } else {
        setMessage({ type: 'error', text: response.Message || '사용자 정보를 불러올 수 없습니다.' });
      }
    } catch (error) {
      setMessage({ type: 'error', text: '사용자 정보 조회 중 오류가 발생했습니다.' });
    } finally {
      setLoading(false);
    }
  };

  const handleSave = async () => {
    setSaving(true);
    setMessage(null);
    try {
      const response = await comms.saveUserInfo(formData);
      if (response.Success) {
        setMessage({ type: 'success', text: '저장되었습니다.' });
        onSave?.();
        setTimeout(() => {
          onClose();
        }, 1000);
      } else {
        setMessage({ type: 'error', text: response.Message || '저장에 실패했습니다.' });
      }
    } catch (error) {
      setMessage({ type: 'error', text: '저장 중 오류가 발생했습니다.' });
    } finally {
      setSaving(false);
    }
  };

  const handleChangePassword = async (oldPassword: string, newPassword: string) => {
    try {
      const response = await comms.changePassword(oldPassword, newPassword);
      if (response.Success) {
        setMessage({ type: 'success', text: '비밀번호가 변경되었습니다.' });
      } else {
        setMessage({ type: 'error', text: response.Message || '비밀번호 변경에 실패했습니다.' });
      }
    } catch (error) {
      setMessage({ type: 'error', text: '비밀번호 변경 중 오류가 발생했습니다.' });
    }
  };

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

  const handleThemeChange = (newTheme: Theme) => {
    setTheme(newTheme);
  };

  if (!isOpen) return null;

  return (
    <>
      <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[10000]">
        <div className="glass-effect-solid rounded-xl w-full max-w-2xl max-h-[90vh] overflow-hidden">
          {/* Header */}
          <div className="flex items-center justify-between px-6 py-4 border-b border-white/10">
            <h2 className="text-xl font-semibold text-white flex items-center gap-2">
              <User className="w-6 h-6" />
              사용자 정보
            </h2>
            <button
              onClick={onClose}
              className="text-white/60 hover:text-white transition-colors"
            >
              <X className="w-6 h-6" />
            </button>
          </div>

          {/* Content */}
          <div className="p-6 overflow-y-auto max-h-[calc(90vh-140px)] custom-scrollbar">
            {loading ? (
              <div className="flex items-center justify-center py-12">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
              </div>
            ) : (
              <div className="space-y-6">
                {/* 테마 설정 섹션 */}
                <div className="bg-white/5 rounded-lg p-4 mb-6">
                  <h3 className="text-white font-medium mb-3 flex items-center gap-2">
                    <Palette className="w-4 h-4 text-purple-400" />
                    테마 설정
                  </h3>
                  <div className="grid grid-cols-3 gap-3">
                    <button
                      onClick={() => handleThemeChange('dark')}
                      className={clsx(
                        'px-4 py-3 rounded-lg border-2 transition-all flex flex-col items-center gap-2',
                        theme === 'dark'
                          ? 'border-blue-500 bg-blue-500/20 text-white'
                          : 'border-white/10 bg-white/5 text-white/50 hover:bg-white/10 hover:border-white/30'
                      )}
                    >
                      <div className="w-full h-2 rounded-full bg-gradient-to-r from-blue-600 to-purple-600"></div>
                      <span className="text-sm font-medium">기본 (Dark)</span>
                    </button>
                    <button
                      onClick={() => handleThemeChange('PSH_PINK')}
                      className={clsx(
                        'px-4 py-3 rounded-lg border-2 transition-all flex flex-col items-center gap-2',
                        theme === 'PSH_PINK'
                          ? 'border-pink-500 bg-pink-500/20 text-white'
                          : 'border-white/10 bg-white/5 text-white/50 hover:bg-white/10 hover:border-white/30'
                      )}
                    >
                      <div className="w-full h-2 rounded-full bg-gradient-to-r from-pink-500 to-rose-500"></div>
                      <span className="text-sm font-medium">발랄한 핑크</span>
                    </button>
                    <button
                      onClick={() => handleThemeChange('JW_SKY')}
                      className={clsx(
                        'px-4 py-3 rounded-lg border-2 transition-all flex flex-col items-center gap-2',
                        theme === 'JW_SKY'
                          ? 'border-sky-500 bg-sky-500/20 text-white'
                          : 'border-white/10 bg-white/5 text-white/50 hover:bg-white/10 hover:border-white/30'
                      )}
                    >
                      <div className="w-full h-2 rounded-full bg-gradient-to-r from-sky-400 to-blue-500"></div>
                      <span className="text-sm font-medium">시원한 하늘</span>
                    </button>
                  </div>
                </div>

                {/* 기본 정보 */}
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm text-white/70 mb-1 flex items-center gap-1">
                      <User className="w-4 h-4" />
                      사원번호
                    </label>
                    <input
                      type="text"
                      value={formData.Id}
                      disabled
                      className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white/50"
                    />
                  </div>
                  <div>
                    <label className="block text-sm text-white/70 mb-1">이름</label>
                    <input
                      type="text"
                      value={formData.NameK}
                      onChange={(e) => handleInputChange('NameK', e.target.value)}
                      className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
                      placeholder="이름"
                    />
                  </div>
                  <div>
                    <label className="block text-sm text-white/70 mb-1">영문이름</label>
                    <input
                      type="text"
                      value={formData.NameE}
                      onChange={(e) => handleInputChange('NameE', e.target.value)}
                      className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
                      placeholder="English Name"
                    />
                  </div>
                  <div>
                    <label className="block text-sm text-white/70 mb-1 flex items-center gap-1">
                      <Building2 className="w-4 h-4" />
                      부서
                    </label>
                    <input
                      type="text"
                      value={formData.Dept}
                      onChange={(e) => handleInputChange('Dept', e.target.value)}
                      className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
                      placeholder="부서"
                    />
                  </div>
                  <div>
                    <label className="block text-sm text-white/70 mb-1 flex items-center gap-1">
                      <Briefcase className="w-4 h-4" />
                      직책
                    </label>
                    <input
                      type="text"
                      value={formData.Grade}
                      onChange={(e) => handleInputChange('Grade', e.target.value)}
                      className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
                      placeholder="직책"
                    />
                  </div>
                  <div>
                    <label className="block text-sm text-white/70 mb-1">공정</label>
                    <input
                      type="text"
                      value={formData.Process}
                      onChange={(e) => handleInputChange('Process', e.target.value)}
                      className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
                      placeholder="공정"
                    />
                  </div>
                </div>

                {/* 이메일 */}
                <div>
                  <label className="block text-sm text-white/70 mb-1 flex items-center gap-1">
                    <Mail className="w-4 h-4" />
                    이메일
                  </label>
                  <input
                    type="email"
                    value={formData.Email}
                    onChange={(e) => handleInputChange('Email', e.target.value)}
                    className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
                    placeholder="email@example.com"
                  />
                </div>

                {/* 입/퇴사 정보 */}
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm text-white/70 mb-1 flex items-center gap-1">
                      <Calendar className="w-4 h-4" />
                      입사일
                    </label>
                    <input
                      type="text"
                      value={formData.DateIn}
                      onChange={(e) => handleInputChange('DateIn', e.target.value)}
                      className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
                      placeholder="YYYY-MM-DD"
                    />
                  </div>
                  <div>
                    <label className="block text-sm text-white/70 mb-1 flex items-center gap-1">
                      <Calendar className="w-4 h-4" />
                      퇴사일
                    </label>
                    <input
                      type="text"
                      value={formData.DateO}
                      onChange={(e) => handleInputChange('DateO', e.target.value)}
                      className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40"
                      placeholder="YYYY-MM-DD"
                    />
                  </div>
                </div>

                {/* 비고 */}
                <div>
                  <label className="block text-sm text-white/70 mb-1 flex items-center gap-1">
                    <FileText className="w-4 h-4" />
                    비고
                  </label>
                  <textarea
                    value={formData.Memo}
                    onChange={(e) => handleInputChange('Memo', e.target.value)}
                    rows={3}
                    className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 resize-none"
                    placeholder="비고"
                  />
                </div>

                {/* 옵션 체크박스 */}
                <div className="flex flex-wrap gap-6">
                  <label className="flex items-center gap-2 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={formData.UseJobReport}
                      onChange={(e) => handleInputChange('UseJobReport', e.target.checked)}
                      className="w-4 h-4 rounded border-white/20 bg-white/10 text-blue-600"
                    />
                    <span className="text-white/70">업무일지 사용</span>
                  </label>
                  <label className="flex items-center gap-2 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={formData.UseUserState}
                      onChange={(e) => handleInputChange('UseUserState', e.target.checked)}
                      className="w-4 h-4 rounded border-white/20 bg-white/10 text-blue-600"
                    />
                    <span className="text-white/70">계정 사용</span>
                  </label>
                  <label className="flex items-center gap-2 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={formData.ExceptHoly}
                      onChange={(e) => handleInputChange('ExceptHoly', e.target.checked)}
                      className="w-4 h-4 rounded border-white/20 bg-white/10 text-blue-600"
                    />
                    <span className="text-white/70">휴가 제외</span>
                  </label>
                </div>

                {/* 메시지 */}
                {message && (
                  <div
                    className={clsx(
                      'px-4 py-2 rounded-lg text-sm',
                      message.type === 'success' ? 'bg-green-600/20 text-green-400' : 'bg-red-600/20 text-red-400'
                    )}
                  >
                    {message.text}
                  </div>
                )}
              </div>
            )}
          </div>

          {/* Footer */}
          <div className="flex items-center justify-between px-6 py-4 border-t border-white/10">
            <button
              onClick={() => setShowPasswordDialog(true)}
              className="flex items-center gap-2 px-4 py-2 bg-yellow-600/20 hover:bg-yellow-600/30 text-yellow-400 rounded-lg transition-colors"
            >
              <Key className="w-4 h-4" />
              비밀번호 변경
            </button>
            <div className="flex gap-2">
              <button
                onClick={onClose}
                className="px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-white/70 hover:text-white transition-colors"
              >
                취소
              </button>
              <button
                onClick={handleSave}
                disabled={saving}
                className={clsx(
                  'flex items-center gap-2 px-4 py-2 rounded-lg transition-colors',
                  saving
                    ? 'bg-blue-600/50 text-white/50 cursor-not-allowed'
                    : 'bg-blue-600 hover:bg-blue-700 text-white'
                )}
              >
                <Save className="w-4 h-4" />
                {saving ? '저장 중...' : '저장'}
              </button>
            </div>
          </div>
        </div>
      </div>

      <PasswordDialog
        isOpen={showPasswordDialog}
        onClose={() => setShowPasswordDialog(false)}
        onConfirm={handleChangePassword}
      />
    </>
  );
}
