import React, { useState } from 'react';
import CybersecMenu from './cases/CybersecMenu';
import Case1Desktop from './cases/Case1Desktop';
import Case2Desktop from './cases/Case2Desktop';
import Case3Desktop from './cases/Case3Desktop';
import Case4Desktop from './cases/Case4Desktop';
import Case5Desktop from './cases/Case5Desktop';
import ChatterboxTTS from './components/deepfake/ChatterboxTTS';
import MyQuize from './components/MyQuize';
import CyberSecurityArticle from './components/CyberSecurityArticle';

export type WallpaperType = 'xp' | 'win7' | 'win10';

type OverlayType = 'case1' | 'case2' | 'case3' | 'case4' | 'case5' | 'deepfake' | 'quiz' | 'wiki' | null;

const PROGRESS_KEY = 'cybersec_progress';

const loadProgress = (): Record<string, boolean> => {
  try { return JSON.parse(localStorage.getItem(PROGRESS_KEY) || '{}'); }
  catch { return {}; }
};

const App: React.FC = () => {
  const [overlay, setOverlay] = useState<OverlayType>(null);
  const [completedItems, setCompletedItems] = useState<Record<string, boolean>>(loadProgress);

  const markComplete = (key: string) => {
    setCompletedItems(prev => {
      const next = { ...prev, [key]: true };
      localStorage.setItem(PROGRESS_KEY, JSON.stringify(next));
      return next;
    });
  };

  const close = () => setOverlay(null);

  const handleSelectLevel = (level: number | string) => {
    const map: Record<string | number, OverlayType> = {
      1: 'case1', 2: 'case2', 3: 'case3', 4: 'case4', 5: 'case5',
      'deepfake': 'deepfake',
    };
    setTimeout(() => setOverlay(map[level] ?? null), 1200);
  };

  return (
    <div style={{ width: '100vw', height: '100vh', overflow: 'hidden', position: 'relative' }}>
      <CybersecMenu
        onSelectLevel={handleSelectLevel}
        onOpenWiki={() => { markComplete('wiki'); setTimeout(() => setOverlay('wiki'), 1200); }}
        onOpenQuiz={() => { markComplete('quiz'); setTimeout(() => setOverlay('quiz'), 1200); }}
        completedItems={completedItems}
      />

      {overlay && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 50000,
          background: 'rgba(0,0,0,0.85)',
          overflowY: 'auto',
        }}>
          <div style={{ position: 'relative', minHeight: '100%' }}>
            <button onClick={close} style={{
              position: 'sticky', top: 16, float: 'right', marginRight: 24, zIndex: 1,
              background: 'rgba(0,0,0,0.8)', border: '1px solid #00FF41',
              color: '#00FF41', fontFamily: 'Orbitron, monospace',
              fontSize: 12, letterSpacing: 2, padding: '6px 14px',
              cursor: 'pointer',
            }}>✕ ЗАКРЫТЬ</button>
            <div style={{ clear: 'both' }} />

            {overlay === 'case1' && <Case1Desktop onComplete={() => { markComplete('1'); close(); }} />}
            {overlay === 'case2' && <Case2Desktop onComplete={() => { markComplete('2'); close(); }} />}
            {overlay === 'case3' && <Case3Desktop onComplete={() => { markComplete('3'); close(); }} />}
            {overlay === 'case4' && <Case4Desktop onComplete={() => { markComplete('4'); close(); }} />}
            {overlay === 'case5' && <Case5Desktop onComplete={() => { markComplete('5'); close(); }} />}
            {overlay === 'deepfake' && <ChatterboxTTS onComplete={() => { markComplete('deepfake'); close(); }} />}
            {overlay === 'quiz' && <MyQuize />}
            {overlay === 'wiki' && <CyberSecurityArticle />}
          </div>
        </div>
      )}
    </div>
  );
};

export default App;
