import { useState, useEffect, useRef } from 'react';
import { Card } from '../../shared/ui/Card';
import { Button } from '../../shared/ui/Button';
import { Input } from '../../shared/ui/Input';
import { apiClient } from '../../shared/api/client';
import { useAuth } from '../../shared/auth/AuthContext';
import { Save, Database, Server, CheckCircle2, AlertCircle, Key, RefreshCcw, ShieldAlert, Lock, Unlock, Clock } from 'lucide-react';

interface SystemSettings {
    session_timeout: number;
    encryption_key: string;
    subscriber_id: string;
    gitea_url: string;
    gitea_user: string;
    gitea_password: string;
    db_config: {
        host: string;
        user: string;
        password?: string;
        database: string;
        port: string;
    };
}

export function BasicSettingsPage() {
    const { user: currentUser } = useAuth();
    const [settings, setSettings] = useState<SystemSettings>({
        session_timeout: 60,
        encryption_key: '',
        subscriber_id: '',
        gitea_url: '',
        gitea_user: '',
        gitea_password: '',
        db_config: {
            host: '',
            user: '',
            password: '',
            database: '',
            port: '3306'
        }
    });

    const [testResult, setTestResult] = useState<{ success: boolean; message: string } | null>(null);
    const [isDbVerified, setIsDbVerified] = useState(false);
    const [saveResults, setSaveResults] = useState<{ [key: string]: { success: boolean; message: string } | null }>({
        security: null,
        encryption: null,
        repository: null,
        database: null
    });

    const [testing, setTesting] = useState(false);
    const [loading, setLoading] = useState(true);
    const [saving, setSaving] = useState(false);
    const [rotationStatus, setRotationStatus] = useState<{ currentKey: string; affectedCount: number } | null>(null);
    const [rotating, setRotating] = useState(false);

    // Supervisor Protection States
    const [isDbConfigUnlocked, setIsDbConfigUnlocked] = useState(false);
    const [isEncryptionUnlocked, setIsEncryptionUnlocked] = useState(false);
    const [isRepoUnlocked, setIsRepoUnlocked] = useState(false);
    const [verifyingTarget, setVerifyingTarget] = useState<'database' | 'encryption' | 'repository' | null>(null);

    const [showVerifyModal, setShowVerifyModal] = useState(false);
    const [verifyPassword, setVerifyPassword] = useState('');
    const [verifying, setVerifying] = useState(false);
    const [verifyError, setVerifyError] = useState('');
    const fetchedRef = useRef(false);

    useEffect(() => {
        if (fetchedRef.current) return;
        fetchedRef.current = true;
        fetchSettings();
        fetchEncryptionStatus();
    }, []);

    const fetchSettings = async () => {
        try {
            const res = await apiClient.get('/system/settings');
            const data = res.data;
            if (!data.db_config) {
                data.db_config = { host: '', user: '', password: '', database: '', port: '3306' };
            }
            setSettings(data);
            setIsDbVerified(true);
        } catch (error) {
            console.error('Failed to fetch settings', error);
        } finally {
            setLoading(false);
        }
    };

    const fetchEncryptionStatus = async () => {
        try {
            const res = await apiClient.get('/system/encryption/status');
            setRotationStatus({
                currentKey: res.data.current_key,
                affectedCount: Object.values(res.data.affected_records as Record<string, number>).reduce((a, b) => a + b, 0)
            });
        } catch (error) {
            console.error('Failed to fetch encryption status', error);
        }
    };

    const generateNewKey = () => {
        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()';
        let key = 'smartims_';
        for (let i = 0; i < 24; i++) {
            key += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        setSettings({ ...settings, encryption_key: key });
    };

    const handleRotateKey = async () => {
        if (!settings.encryption_key) {
            alert('새로운 암호화 키를 입력하거나 생성해 주세요.');
            return;
        }

        const confirmMsg = `암호화 키 변경 및 데이터 마이그레이션을 시작합니다.\n- 대상 레코드: 약 ${rotationStatus?.affectedCount || 0}건\n- 소요 시간: 데이터 양에 따라 수 초가 걸릴 수 있습니다.\n\n주의: 절차 진행 중에는 서버 연결이 일시적으로 끊길 수 있으며, 중간에 브라우저를 닫지 마십시오.\n진행하시겠습니까?`;

        if (!confirm(confirmMsg)) return;

        setRotating(true);
        setSaveResults(prev => ({ ...prev, encryption: null }));

        try {
            await apiClient.post('/system/encryption/rotate', { new_key: settings.encryption_key });
            setSaveResults(prev => ({
                ...prev,
                encryption: { success: true, message: '암호화 키 변경 및 데이터 마이그레이션 완료!' }
            }));
            fetchSettings();
            fetchEncryptionStatus();
            setTimeout(() => setSaveResults(prev => ({ ...prev, encryption: null })), 5000);
        } catch (error: any) {
            setSaveResults(prev => ({
                ...prev,
                encryption: { success: false, message: error.response?.data?.error || '재암호화 작업 중 오류가 발생했습니다.' }
            }));
        } finally {
            setRotating(false);
        }
    };

    const handleTestConnection = async () => {
        setTesting(true);
        setTestResult(null);
        try {
            const res = await apiClient.post('/system/test-db', settings.db_config);
            setTestResult({ success: true, message: res.data.message });
            setIsDbVerified(true);
        } catch (error: any) {
            setTestResult({ success: false, message: error.response?.data?.error || '접속 테스트에 실패했습니다.' });
            setIsDbVerified(false);
        } finally {
            setTesting(false);
        }
    };

    const handleOpenVerify = (target: 'database' | 'encryption' | 'repository') => {
        if (currentUser?.role !== 'supervisor') {
            alert('해당 권한이 없습니다. 최고관리자(Supervisor)만 접근 가능합니다.');
            return;
        }
        setVerifyingTarget(target);
        setShowVerifyModal(true);
    };

    const handleVerifySupervisor = async () => {
        setVerifying(true);
        setVerifyError('');
        try {
            const res = await apiClient.post('/verify-supervisor', { password: verifyPassword });
            if (res.data.success) {
                if (verifyingTarget === 'database') setIsDbConfigUnlocked(true);
                else if (verifyingTarget === 'encryption') setIsEncryptionUnlocked(true);
                else if (verifyingTarget === 'repository') setIsRepoUnlocked(true);

                setShowVerifyModal(false);
                setVerifyPassword('');
                setVerifyingTarget(null);
            }
        } catch (error: any) {
            setVerifyError(error.response?.data?.message || '인증에 실패했습니다. 비밀번호를 확인해주세요.');
        } finally {
            setVerifying(false);
        }
    };

    const handleSaveSection = async (section: 'security' | 'encryption' | 'database' | 'repository') => {
        if (section === 'database' && !isDbVerified) {
            alert('DB 접속 정보가 변경되었습니다. 저장 전 반드시 [연결 테스트]를 수행하십시오.');
            return;
        }

        let payload: any = {};
        const successMessage = section === 'database' ? 'DB 설정이 저장되었습니다.' : '설정이 성공적으로 저장되었습니다.';

        if (section === 'security') payload = { session_timeout: settings.session_timeout };
        else if (section === 'encryption') payload = { encryption_key: settings.encryption_key };
        else if (section === 'repository') payload = {
            gitea_url: settings.gitea_url,
            gitea_user: settings.gitea_user,
            gitea_password: settings.gitea_password
        };
        else if (section === 'database') {
            if (!confirm('DB 설정을 저장하면 서버가 재시작되어 접속이 끊길 수 있습니다. 진행하시겠습니까?')) return;
            payload = { db_config: settings.db_config };
        }

        setSaving(true);
        setSaveResults(prev => ({ ...prev, [section]: null }));

        try {
            await apiClient.post('/system/settings', payload);
            setSaveResults(prev => ({ ...prev, [section]: { success: true, message: successMessage } }));
            setTimeout(() => setSaveResults(prev => ({ ...prev, [section]: null })), 3000);
            if (section !== 'database') fetchSettings();
        } catch (error: any) {
            setSaveResults(prev => ({
                ...prev,
                [section]: { success: false, message: error.response?.data?.error || '저장 중 오류 발생' }
            }));
        } finally {
            setSaving(false);
        }
    };

    if (loading) return <div className="p-12 text-center text-slate-500">데이터를 불러오는 중...</div>;

    return (
        <div className="page-container p-6 max-w-5xl mx-auto">
            <div className="flex justify-between items-center mb-8">
                <div>
                    <h1 className="text-2xl font-bold text-slate-900">시스템 관리 - 기본 설정</h1>
                    <p className="text-slate-500 mt-1">플랫폼의 보안 및 인프라 환경을 섹션별로 관리합니다.</p>
                </div>
            </div>

            <div className="space-y-8">
                {/* v0.4.1.0 Info: Session Timeout relocation notice */}
                <Card className="p-4 bg-indigo-50 border-indigo-100 flex items-start gap-3">
                    <Clock className="text-indigo-600 mt-1" size={20} />
                    <div>
                        <h3 className="text-sm font-bold text-indigo-900">세션 관리 정책 변경 안내 (v0.4.1.0)</h3>
                        <p className="text-xs text-indigo-700 mt-1 leading-relaxed">
                            보안 강화 및 개인화 설정을 위해 전역 세션 로그아웃 설정이 <strong>개별 사용자 설정</strong>으로 이전되었습니다.<br />
                            좌측 메뉴 하단의 <strong>[기본 설정]</strong> 메뉴 또는 <strong>[사용자 관리]</strong> 메뉴에서 사용자별로 시간을 설정하실 수 있습니다.
                        </p>
                    </div>
                </Card>

                {/* Section 2: Encryption Master Key & Rotation (Supervisor Protected) */}
                <Card className="overflow-hidden border-slate-200 shadow-sm border-2 border-slate-100">
                    <div className="p-6 border-b border-slate-50 bg-slate-100/50 flex justify-between items-center">
                        <h2 className="text-lg font-bold text-slate-800 flex items-center gap-2">
                            <Key size={20} className="text-red-600" />
                            데이터 암호화 마스터 키 관리
                        </h2>
                        {!isEncryptionUnlocked && (
                            <Button size="sm" variant="secondary" onClick={() => handleOpenVerify('encryption')} icon={<Lock size={14} />}>
                                조회 / 변경
                            </Button>
                        )}
                        {isEncryptionUnlocked && (
                            <div className="flex items-center gap-2 text-red-700 bg-red-50 px-3 py-1 rounded-full text-xs font-bold ring-1 ring-red-200">
                                <Unlock size={14} /> 검증 완료: 최고관리자 모드
                            </div>
                        )}
                    </div>

                    {isEncryptionUnlocked ? (
                        <div className="animate-in fade-in duration-500">
                            <div className="p-6 space-y-6">
                                <div className="bg-slate-50 rounded-lg p-4 border border-slate-100 grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                                    <div>
                                        <span className="text-slate-500 font-bold block mb-1">현재 활성 키</span>
                                        <code className="bg-white p-2 rounded border border-slate-200 block truncate font-mono">{rotationStatus?.currentKey || '-'}</code>
                                    </div>
                                    <div>
                                        <span className="text-slate-500 font-bold block mb-1">영향 레코드</span>
                                        <div className="text-blue-600 font-bold flex items-center gap-2 mt-1">
                                            <Database size={16} /> {rotationStatus?.affectedCount || 0} 건
                                            <Button variant="secondary" size="sm" className="ml-2 h-7 text-[10px]" onClick={fetchEncryptionStatus} icon={<RefreshCcw size={12} />}>조회</Button>
                                        </div>
                                    </div>
                                </div>
                                <div className="flex gap-2 max-w-xl">
                                    <Input
                                        value={settings.encryption_key}
                                        onChange={e => setSettings({ ...settings, encryption_key: e.target.value })}
                                        placeholder="새로운 키 입력"
                                        className="font-mono flex-1"
                                    />
                                    <Button variant="secondary" onClick={generateNewKey} icon={<RefreshCcw size={14} />}>자동 생성</Button>
                                </div>
                            </div>
                            <div className="px-6 py-4 bg-slate-50/30 border-t border-slate-50 flex items-center justify-between">
                                <div className="flex-1">
                                    {saveResults.encryption && (
                                        <div className={`flex items-center gap-2 text-sm font-medium ${saveResults.encryption.success ? 'text-green-600' : 'text-red-600'}`}>
                                            {saveResults.encryption.success ? <CheckCircle2 size={16} /> : <AlertCircle size={16} />}
                                            {saveResults.encryption.message}
                                        </div>
                                    )}
                                </div>
                                <div className="flex gap-2">
                                    <Button variant="secondary" size="sm" onClick={() => setIsEncryptionUnlocked(false)}>닫기</Button>
                                    <Button
                                        className="bg-red-600 hover:bg-red-700"
                                        size="sm"
                                        onClick={handleRotateKey}
                                        disabled={rotating || !settings.encryption_key}
                                        icon={<RefreshCcw size={14} className={rotating ? 'animate-spin' : ''} />}
                                    >
                                        {rotating ? '재암호화 진행 중...' : '변경 및 마이그레이션 저장'}
                                    </Button>
                                </div>
                            </div>
                        </div>
                    ) : (
                        <div className="p-12 text-center text-slate-400 bg-slate-50/50">
                            <Lock className="mx-auto mb-3 opacity-20" size={48} />
                            <p className="text-sm font-medium">보안을 위해 암호화 설정은 최고관리자 인증 후 접근 가능합니다.</p>
                        </div>
                    )}
                </Card>

                {/* Section 2.5: Gitea Repository Update Settings */}
                <Card className="overflow-hidden border-slate-200 shadow-sm">
                    <div className="p-6 border-b border-slate-50 bg-slate-50/50">
                        <h2 className="text-lg font-bold text-slate-800 flex items-center gap-2">
                            <RefreshCcw size={20} className="text-emerald-600" />
                            시스템 업데이트 저장소 설정 (Gitea)
                        </h2>
                        {!isRepoUnlocked && (
                            <Button size="sm" variant="secondary" onClick={() => handleOpenVerify('repository')} icon={<Lock size={14} />}>
                                조회 / 변경
                            </Button>
                        )}
                        {isRepoUnlocked && (
                            <div className="flex items-center gap-2 text-emerald-700 bg-emerald-50 px-3 py-1 rounded-full text-xs font-bold ring-1 ring-emerald-200">
                                <Unlock size={14} /> 검증 완료: 최고관리자 모드
                            </div>
                        )}
                    </div>
                    {isRepoUnlocked ? (
                        <div className="animate-in fade-in duration-500">
                            <div className="p-6">
                                <p className="text-xs text-slate-500 mb-4">원격 저장소(Gitea)에서 최신 업데이트 태그를 가져오기 위한 주소 및 인증 정보를 설정합니다.</p>
                                <div className="space-y-4">
                                    <div className="space-y-1">
                                        <label className="text-sm font-medium text-slate-700">저장소 URL (Git 주소)</label>
                                        <Input
                                            value={settings.gitea_url}
                                            onChange={e => setSettings({ ...settings, gitea_url: e.target.value })}
                                            placeholder="https://gitea.example.com/org/repo.git"
                                        />
                                    </div>
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div className="space-y-1">
                                            <label className="text-sm font-medium text-slate-700">Gitea 접속 ID</label>
                                            <Input
                                                name="gitea_username_config"
                                                autoComplete="off"
                                                value={settings.gitea_user}
                                                onChange={e => setSettings({ ...settings, gitea_user: e.target.value })}
                                                placeholder="gitea_update_user"
                                            />
                                        </div>
                                        <div className="space-y-1">
                                            <label className="text-sm font-medium text-slate-700">Gitea 비밀번호 (또는 Token)</label>
                                            <Input
                                                type="password"
                                                name="gitea_password_config"
                                                autoComplete="new-password"
                                                value={settings.gitea_password}
                                                onChange={e => setSettings({ ...settings, gitea_password: e.target.value })}
                                                placeholder="••••••••"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="px-6 py-4 bg-slate-50/30 border-t border-slate-50 flex items-center justify-between">
                                <div className="flex-1">
                                    {saveResults.repository && (
                                        <div className={`flex items-center gap-2 text-sm font-medium ${saveResults.repository.success ? 'text-green-600' : 'text-red-600'}`}>
                                            {saveResults.repository.success ? <CheckCircle2 size={16} /> : <AlertCircle size={16} />}
                                            {saveResults.repository.message}
                                        </div>
                                    )}
                                </div>
                                <div className="flex gap-2">
                                    <Button variant="secondary" size="sm" onClick={() => setIsRepoUnlocked(false)}>닫기</Button>
                                    <Button size="sm" onClick={() => handleSaveSection('repository')} disabled={saving} icon={<Save size={14} />}>계정 저장</Button>
                                </div>
                            </div>
                        </div>
                    ) : (
                        <div className="p-12 text-center text-slate-400 bg-slate-50/50">
                            <Lock className="mx-auto mb-3 opacity-20" size={48} />
                            <p className="text-sm font-medium">보안을 위해 저장소 설정은 최고관리자 인증 후 접근 가능합니다.</p>
                        </div>
                    )}
                </Card>

                {/* Section 3: Database Infrastructure (Supervisor Protected) */}
                <Card className="overflow-hidden border-slate-200 shadow-sm border-2 border-slate-100">
                    <div className="p-6 border-b border-slate-50 bg-slate-100/50 flex justify-between items-center">
                        <h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
                            <ShieldAlert size={20} className="text-indigo-600" />
                            데이터베이스 인프라 구성
                        </h2>
                        {!isDbConfigUnlocked && (
                            <Button size="sm" variant="secondary" onClick={() => handleOpenVerify('database')} icon={<Lock size={14} />}>
                                조회 / 변경
                            </Button>
                        )}
                        {isDbConfigUnlocked && (
                            <div className="flex items-center gap-2 text-indigo-700 bg-indigo-50 px-3 py-1 rounded-full text-xs font-bold ring-1 ring-indigo-200">
                                <Unlock size={14} /> 검증 완료: 최고관리자 모드
                            </div>
                        )}
                    </div>

                    {isDbConfigUnlocked ? (
                        <div className="animate-in fade-in duration-500">
                            <div className="p-6 space-y-6">
                                <div className="p-4 bg-indigo-50 border border-indigo-100 rounded-lg flex gap-4 items-start">
                                    <AlertCircle className="text-indigo-600 shrink-0" size={20} />
                                    <div>
                                        <p className="text-sm font-bold text-indigo-900">물리적 인프라 수동 관리 모드</p>
                                        <p className="text-xs text-indigo-700 leading-relaxed mt-1">
                                            이 섹션의 설정을 잘못 변경하면 플랫폼 전체 접속이 불가능해질 수 있습니다.<br />
                                            반드시 접속 테스트 성공을 확인한 후에 저장하십시오.
                                        </p>
                                    </div>
                                </div>

                                <div className="grid grid-cols-2 gap-8">
                                    <div className="space-y-4">
                                        <div className="space-y-1">
                                            <label className="text-sm font-medium text-slate-700">DB 호스트 주소</label>
                                            <Input value={settings.db_config.host} onChange={e => { setSettings({ ...settings, db_config: { ...settings.db_config, host: e.target.value } }); setIsDbVerified(false); }} />
                                        </div>
                                        <div className="grid grid-cols-2 gap-4">
                                            <div className="space-y-1">
                                                <label className="text-sm font-medium text-slate-700">사용자 계정</label>
                                                <Input value={settings.db_config.user} onChange={e => { setSettings({ ...settings, db_config: { ...settings.db_config, user: e.target.value } }); setIsDbVerified(false); }} />
                                            </div>
                                            <div className="space-y-1">
                                                <label className="text-sm font-medium text-slate-700">비밀번호</label>
                                                <Input type="password" value={settings.db_config.password} onChange={e => { setSettings({ ...settings, db_config: { ...settings.db_config, password: e.target.value } }); setIsDbVerified(false); }} />
                                            </div>
                                        </div>
                                    </div>
                                    <div className="space-y-4">
                                        <div className="space-y-1">
                                            <label className="text-sm font-medium text-slate-700">스키마 이름 (Database)</label>
                                            <Input value={settings.db_config.database} onChange={e => { setSettings({ ...settings, db_config: { ...settings.db_config, database: e.target.value } }); setIsDbVerified(false); }} />
                                        </div>
                                        <div className="space-y-1">
                                            <label className="text-sm font-medium text-slate-700">접속 포트 (Port)</label>
                                            <Input type="number" value={settings.db_config.port} onChange={e => { setSettings({ ...settings, db_config: { ...settings.db_config, port: e.target.value } }); setIsDbVerified(false); }} />
                                        </div>
                                    </div>
                                </div>

                                <div className="p-4 bg-slate-50 border border-slate-100 rounded-lg flex justify-between items-center">
                                    <div className="text-sm font-medium">
                                        {testResult && (
                                            <span className={`flex items-center gap-1 ${testResult.success ? 'text-green-700' : 'text-red-700'}`}>
                                                {testResult.success ? <CheckCircle2 size={16} /> : <AlertCircle size={16} />} {testResult.message}
                                            </span>
                                        )}
                                        {!testResult && <span className="text-slate-500 italic">변경 시 반드시 접속 테스트를 수행하십시오.</span>}
                                    </div>
                                    <Button variant="secondary" size="sm" onClick={handleTestConnection} disabled={testing} icon={<Server size={14} />}>
                                        {testing ? '검증 중...' : '연결 테스트'}
                                    </Button>
                                </div>
                            </div>
                            <div className="px-6 py-4 bg-slate-100/30 border-t border-slate-100 flex items-center justify-between">
                                <div className="flex-1">
                                    {testResult && !testResult.success && <span className="text-xs text-red-600 font-bold">⚠️ 연결 실패 시 변경된 정보를 저장할 수 없습니다.</span>}
                                    {saveResults.database && (
                                        <div className={`text-sm font-medium ${saveResults.database.success ? 'text-green-600' : 'text-red-600'}`}>
                                            {saveResults.database.message}
                                        </div>
                                    )}
                                </div>
                                <div className="flex gap-2">
                                    <Button variant="secondary" size="sm" onClick={() => setIsDbConfigUnlocked(false)}>닫기</Button>
                                    <Button size="sm" className="bg-indigo-600" onClick={() => handleSaveSection('database')} disabled={saving || !isDbVerified} icon={<Save size={14} />}>정보 저장</Button>
                                </div>
                            </div>
                        </div>
                    ) : (
                        <div className="p-12 text-center text-slate-400 bg-slate-50/50">
                            <Lock className="mx-auto mb-3 opacity-20" size={48} />
                            <p className="text-sm font-medium">보안을 위해 인프라 설정은 최고관리자 인증 후 접근 가능합니다.</p>
                        </div>
                    )}
                </Card>
            </div>

            {/* Verification Modal */}
            {showVerifyModal && (
                <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm animate-in fade-in duration-300">
                    <Card className="w-full max-w-md shadow-2xl border-indigo-200 overflow-hidden">
                        <div className={`p-6 text-white ${verifyingTarget === 'encryption' ? 'bg-red-600' : 'bg-indigo-600'}`}>
                            <h3 className="text-lg font-bold flex items-center gap-2">
                                <ShieldAlert size={20} /> 최고관리자 권한 확인 ({verifyingTarget === 'encryption' ? '암호화 키' : verifyingTarget === 'repository' ? '저장소 설정' : '인프라 설정'})
                            </h3>
                            <p className="text-white/80 text-sm mt-1">민감 설정 접근을 위해 본인 확인이 필요합니다.</p>
                        </div>
                        <div className="p-6 space-y-4">
                            <div className="p-3 bg-red-50 border border-red-100 rounded text-xs text-red-800 leading-relaxed font-bold">
                                {verifyingTarget === 'encryption'
                                    ? "※ 경고: 암호화 키 변경은 시스템 내 모든 민감 데이터를 다시 암호화하는 중대한 작업입니다. 성공 시 기존 데이터를 새 키로 대체하며, 실패 시 데이터 유실의 위험이 있습니다."
                                    : verifyingTarget === 'repository'
                                        ? "※ 주의: 시스템 업데이트 저장소 정보 노출은 원본 소스 코드 유출로 이어질 수 있습니다."
                                        : "※ 경고: 인프라 설정은 데이터베이스 물리 접속 정보를 직접 수정하는 매우 위험한 작업입니다. 잘못된 입력은 시스템 중단으로 이어질 수 있습니다."}
                            </div>
                            <div>
                                <label className="block text-sm font-medium text-slate-700 mb-2">최고관리자 비밀번호</label>
                                <Input
                                    type="password"
                                    value={verifyPassword}
                                    onChange={e => setVerifyPassword(e.target.value)}
                                    placeholder="비밀번호를 입력하세요"
                                    onKeyDown={e => e.key === 'Enter' && handleVerifySupervisor()}
                                    autoFocus
                                />
                                {verifyError && <p className="text-xs text-red-600 mt-2 font-bold">{verifyError}</p>}
                            </div>
                        </div>
                        <div className="p-6 bg-slate-50 border-t border-slate-100 flex justify-end gap-2">
                            <Button variant="secondary" onClick={() => { setShowVerifyModal(false); setVerifyError(''); setVerifyPassword(''); setVerifyingTarget(null); }}>취소</Button>
                            <Button className={verifyingTarget === 'encryption' ? 'bg-red-600' : 'bg-indigo-600'} onClick={handleVerifySupervisor} disabled={verifying}>
                                {verifying ? '인증 중...' : '인증 및 조회'}
                            </Button>
                        </div>
                    </Card>
                </div>
            )}
        </div>
    );
}