import React, { useState, useEffect } from 'react';

// ==========================================
// ТИПЫ
// ==========================================
interface Option {
  id: string;
  text: string;
  correct: boolean;
}

interface Question {
  id: number;
  title: string;
  scenario: string;
  type: 'single' | 'multiple';
  options: Option[];
  explanation: string;
  cwe: string;
  owasp: string;
  analysis: Record<string, string>;
}

interface QuizProps {
  questions: Question[];
  title: string;
  testId: string;
  onBack: () => void;
  onComplete?: (testId: string) => void;
}

interface MainMenuProps {
  onSelect: (id: 'scenarios' | 'basics') => void;
  completedTests: Record<string, boolean>;
}

type ViewType = 'menu' | 'scenarios' | 'basics';

// ==========================================
// ДАННЫЕ: КВИЗ 1 (Сценарии)
// ==========================================
const QUESTIONS_SCENARIOS: Question[] = [
  {
    id: 1,
    title: "🎁 Фишинг через 'подарок'",
    scenario: "Ты получаешь сообщение в Telegram:\n\"🎁 Тебе подарили Telegram Premium — активируй по ссылке\"",
    type: "multiple",
    options: [
      { id: 'A', text: "Перейти и ввести логин — это же от друга", correct: false },
      { id: 'B', text: "Проверить ссылку и домен", correct: true },
      { id: 'C', text: "Перейти, но не вводить данные", correct: false },
      { id: 'D', text: "Игнорировать сообщение", correct: true }
    ],
    explanation: "Такие атаки — массовые. Часто приходят с взломанных аккаунтов друзей.",
    cwe: "CWE-601 + CWE-522",
    owasp: "A07 Auth Failures",
    analysis: { A: "❌ Доверие к источнику = ошибка", C: "❌ Переход уже риск" }
  },
  {
    id: 2,
    title: "🔔 Подозрительный вход",
    scenario: "Email: \"Обнаружен вход в ваш аккаунт. Срочно подтвердите данные.\"",
    type: "single",
    options: [
      { id: 'A', text: "Перейти по ссылке и проверить", correct: false },
      { id: 'B', text: "Зайти через официальный сайт вручную", correct: true },
      { id: 'C', text: "Ответить на письмо", correct: false },
      { id: 'D', text: "Позвонить по номеру из письма", correct: false }
    ],
    explanation: "Классическая приманка. Всегда заходите через официальный сайт.",
    cwe: "CWE-640",
    owasp: "A02 / A07",
    analysis: { A: "❌ Фишинг", C: "❌ Раскрытие данных", D: "❌ Vishing" }
  },
  {
    id: 3,
    title: "💉 SQL-инъекция",
    scenario: "Форма логина:\nТы вводишь: ' OR 1=1 --",
    type: "single",
    options: [
      { id: 'A', text: "Ничего", correct: false },
      { id: 'B', text: "Ошибка", correct: false },
      { id: 'C', text: "Вход без пароля", correct: true },
      { id: 'D', text: "Блокировка", correct: false }
    ],
    explanation: "SQL Injection — если input не валидируется, код выполняется.",
    cwe: "CWE-89",
    owasp: "A03 Injection",
    analysis: {}
  },
  {
    id: 4,
    title: "🌐 Фейковый сайт",
    scenario: "Ты видишь сайт: paypaI.com (буква i вместо l)",
    type: "single",
    options: [
      { id: 'A', text: "Это безопасно", correct: false },
      { id: 'B', text: "Это фишинг", correct: true },
      { id: 'C', text: "Это редирект", correct: false },
      { id: 'D', text: "Это CDN", correct: false }
    ],
    explanation: "Подмена домена — стандартная техника.",
    cwe: "CWE-290",
    owasp: "A10 / A07",
    analysis: {}
  },
  {
    id: 5,
    title: "🎫 Бесплатные билеты",
    scenario: "Сайт предлагает бесплатные билеты, нужно оплатить \"доставку\"",
    type: "single",
    options: [
      { id: 'A', text: "Это маркетинг", correct: false },
      { id: 'B', text: "Это фишинг", correct: true },
      { id: 'C', text: "Это ошибка", correct: false },
      { id: 'D', text: "Легальный сервис", correct: false }
    ],
    explanation: "Слишком хорошо, чтобы быть правдой — это фишинг.",
    cwe: "CWE-840",
    owasp: "A04 Insecure Design",
    analysis: {}
  },
  {
    id: 6,
    title: "📱 Ввод кода из SMS",
    scenario: "Тебя просят ввести код из SMS \"для подтверждения\"",
    type: "single",
    options: [
      { id: 'A', text: "Это нормально", correct: false },
      { id: 'B', text: "Попытка захвата аккаунта", correct: true },
      { id: 'C', text: "Это CAPTCHA", correct: false },
      { id: 'D', text: "Проверка сети", correct: false }
    ],
    explanation: "Перехват 2FA. Никогда не сообщайте коды третьим лицам.",
    cwe: "CWE-287",
    owasp: "A07",
    analysis: {}
  },
  {
    id: 7,
    title: "📝 Форма с лишними полями",
    scenario: "Сайт просит: логин, пароль, email, телефон, карту",
    type: "single",
    options: [
      { id: 'A', text: "Нормально", correct: false },
      { id: 'B', text: "Избыточный сбор данных", correct: true },
      { id: 'C', text: "Требование безопасности", correct: false },
      { id: 'D', text: "Баг", correct: false }
    ],
    explanation: "Data harvesting — сбор больше данных, чем нужно.",
    cwe: "CWE-200",
    owasp: "A01",
    analysis: {}
  },
  {
    id: 8,
    title: "📧 HTML вложение",
    scenario: "Письмо с вложением .html вместо ссылки",
    type: "single",
    options: [
      { id: 'A', text: "Безопасно", correct: false },
      { id: 'B', text: "Это фишинг", correct: true },
      { id: 'C', text: "Это архив", correct: false },
      { id: 'D', text: "Это ошибка", correct: false }
    ],
    explanation: "Фишинг через HTML вложения обходит фильтры.",
    cwe: "CWE-494",
    owasp: "A08",
    analysis: {}
  }
];

// ==========================================
// ДАННЫЕ: КВИЗ 2 (Базовый)
// ==========================================
const QUESTIONS_BASICS: Question[] = [
  {
    id: 1,
    title: "🎣 Определение",
    scenario: "Вид интернет-мошенничества, цель которого — украсть конфиденциальные данные пользователя через поддельные сайты, письма или сообщения, маскирующиеся под надежные источники.",
    type: "single",
    options: [
      { id: 'A', text: "Скиминг", correct: false },
      { id: 'B', text: "Фишинг", correct: true },
      { id: 'C', text: "Буллинг", correct: false },
      { id: 'D', text: "Тимбилдинг", correct: false }
    ],
    explanation: "Фишинг (phishing) — это мошенничество с использованием социальной инженерии.",
    cwe: "CWE- deception",
    owasp: "Social Engineering",
    analysis: { A: "Скиминг — кража данных с карты", C: "Буллинг — травля", D: "Тимбилдинг — командообразование" }
  },
  {
    id: 2,
    title: "🔗 Поддельная ссылка",
    scenario: "Какая из ссылок является фишинговой (ложной)?",
    type: "single",
    options: [
      { id: 'A', text: "https://www.google.com/", correct: false },
      { id: 'B', text: "https://www.gosuslugi.ru/", correct: false },
      { id: 'C', text: "https://chat.deepseek.com/", correct: false },
      { id: 'D', text: "http://g0v.war", correct: true }
    ],
    explanation: "g0v.war — подозрительный домен, HTTP вместо HTTPS, опечатка в gov.",
    cwe: "CWE-602",
    owasp: "A07",
    analysis: { D: "❌ HTTP, подмена букв (0 вместо o), подозрительная зона .war" }
  },
  {
    id: 3,
    title: "🖥️ Безопасная ОС",
    scenario: "Какая из версий Windows является самой безопасной?",
    type: "single",
    options: [
      { id: 'A', text: "Windows 11", correct: true },
      { id: 'B', text: "Windows XP", correct: false },
      { id: 'C', text: "Windows 7", correct: false },
      { id: 'D', text: "Windows 10", correct: false }
    ],
    explanation: "Windows 11 имеет TPM 2.0, Secure Boot и последние патчи безопасности.",
    cwe: "CWE-1104",
    owasp: "A06",
    analysis: { B: "XP не поддерживается с 2014", C: "Windows 7 не поддерживается с 2020", D: "Windows 10 устаревает" }
  },
  {
    id: 4,
    title: "🐴 Вредоносное ПО",
    scenario: "Вредоносное ПО, маскирующееся под легитимное приложение для обмана пользователя и проникновения в систему?",
    type: "single",
    options: [
      { id: 'A', text: "Вирус", correct: false },
      { id: 'B', text: "Троян", correct: true },
      { id: 'C', text: "Червь", correct: false },
      { id: 'D', text: "Кейлоггер", correct: false }
    ],
    explanation: "Троянский конь маскируется под полезную программу.",
    cwe: "CWE-507",
    owasp: "A08",
    analysis: { A: "Вирус прикрепляется к файлам", C: "Червь распространяется по сети", D: "Кейлоггер — тип трояна" }
  },
  {
    id: 5,
    title: "🔑 Парольная безопасность",
    scenario: "Выберите наименее надёжный пароль из предложенных:",
    type: "single",
    options: [
      { id: 'A', text: "fR97#7HFf", correct: false },
      { id: 'B', text: "123456!", correct: true },
      { id: 'C', text: "abcdefg", correct: false },
      { id: 'D', text: "4YUI&Y4", correct: false }
    ],
    explanation: "123456! — самый популярный пароль в мире, легко брутфорсится.",
    cwe: "CWE-521",
    owasp: "A07",
    analysis: { B: "❌ В топе самых популярных паролей" }
  },
  {
    id: 6,
    title: "📋 Персональные данные",
    scenario: "Любая информация, относящаяся прямо или косвенно к определенному физическому лицу, позволяющая его идентифицировать:",
    type: "single",
    options: [
      { id: 'A', text: "Новости", correct: false },
      { id: 'B', text: "Персональные данные", correct: true },
      { id: 'C', text: "Военная тайна", correct: false },
      { id: 'D', text: "Паспортные данные", correct: false }
    ],
    explanation: "Персональные данные — широкое понятие (имя, адрес, телефон, IP).",
    cwe: "CWE-359",
    owasp: "A01",
    analysis: { D: "Паспортные данные — подмножество ПДн" }
  },
  {
    id: 7,
    title: "📶 Wi-Fi безопасность",
    scenario: "Безопасно ли пользоваться публичными точками доступа Wi-Fi?",
    type: "single",
    options: [
      { id: 'A', text: "Да", correct: false },
      { id: 'B', text: "Нет", correct: true },
      { id: 'C', text: "Да, если включено шифрование", correct: false },
      { id: 'D', text: "Нет, если включено шифрование", correct: false }
    ],
    explanation: "Публичный Wi-Fi опасен (MITM-атаки). Лучше использовать VPN.",
    cwe: "CWE-319",
    owasp: "A02",
    analysis: { C: "Шифрование не защищает от фальшивых точек (Evil Twin)" }
  },
  {
    id: 8,
    title: "🔒 Протоколы безопасности",
    scenario: "Какое из перечисленных соединений НЕ является безопасным?",
    type: "single",
    options: [
      { id: 'A', text: "VPN", correct: false },
      { id: 'B', text: "TLS", correct: false },
      { id: 'C', text: "HTTP", correct: true },
      { id: 'D', text: "HTTPS", correct: false }
    ],
    explanation: "HTTP передаёт данные в открытом виде. HTTPS = HTTP + TLS/SSL.",
    cwe: "CWE-319",
    owasp: "A02",
    analysis: { C: "❌ Нет шифрования" }
  }
];

// ==========================================
// СТИЛИ
// ==========================================
const styles: Record<string, React.CSSProperties> = {
  container: {
    minHeight: '100vh',
    backgroundColor: '#0a0a0a',
    padding: '20px',
    fontFamily: 'system-ui, -apple-system, sans-serif',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  },
  card: {
    backgroundColor: '#0d0d22',
    borderRadius: '8px',
    border: '1px solid rgba(0,255,255,0.2)',
    maxWidth: '600px',
    width: '100%',
    overflow: 'hidden',
    boxShadow: '0 0 30px rgba(0,255,255,0.1)'
  },
  menu: {
    textAlign: 'center',
    padding: '40px'
  },
  menuTitle: {
    color: '#00FFFF',
    fontSize: '32px',
    fontWeight: 'bold',
    marginBottom: '16px',
    fontFamily: "'Orbitron', monospace"
  },
  menuSubtitle: {
    color: '#888',
    marginBottom: '40px',
    fontSize: '16px',
    fontFamily: "'Share Tech Mono', monospace"
  },
  menuButton: {
    display: 'block',
    width: '100%',
    padding: '20px',
    marginBottom: '16px',
    borderRadius: '6px',
    border: '1px solid rgba(0,255,255,0.3)',
    backgroundColor: '#0a0a1a',
    color: '#ccc',
    fontSize: '18px',
    fontWeight: '600',
    cursor: 'pointer',
    transition: 'all 0.2s',
    textAlign: 'left',
    position: 'relative',
    fontFamily: "'Orbitron', monospace"
  },
  menuButtonCompleted: {
    borderColor: '#00FF41',
    backgroundColor: 'rgba(0,255,65,0.05)'
  },
  completedBadge: {
    position: 'absolute',
    right: '20px',
    top: '50%',
    transform: 'translateY(-50%)',
    backgroundColor: '#00FF41',
    color: '#000',
    width: '32px',
    height: '32px',
    borderRadius: '50%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '18px',
    boxShadow: '0 2px 8px rgba(0,255,65,0.4)'
  },
  header: {
    padding: '24px',
    borderBottom: '1px solid rgba(0,255,255,0.15)',
    backgroundColor: '#0d0d22'
  },
  progressBar: {
    height: '4px',
    backgroundColor: 'rgba(0,255,255,0.1)',
    borderRadius: '2px',
    marginBottom: '16px',
    overflow: 'hidden'
  },
  progressFill: {
    height: '100%',
    backgroundColor: '#00FFFF',
    transition: 'width 0.3s ease'
  },
  meta: {
    display: 'flex',
    justifyContent: 'space-between',
    color: '#888',
    fontSize: '14px',
    marginBottom: '8px',
    fontFamily: "'Share Tech Mono', monospace"
  },
  title: {
    color: '#00FFFF',
    fontSize: '20px',
    fontWeight: 'bold',
    marginBottom: '8px',
    fontFamily: "'Orbitron', monospace"
  },
  scenario: {
    color: '#ccc',
    fontSize: '16px',
    lineHeight: '1.5',
    whiteSpace: 'pre-line',
    fontFamily: "'Share Tech Mono', monospace"
  },
  hint: {
    color: '#888',
    fontSize: '13px',
    marginBottom: '12px',
    fontStyle: 'italic'
  },
  options: {
    padding: '24px',
    display: 'flex',
    flexDirection: 'column',
    gap: '12px'
  },
  option: {
    padding: '16px',
    borderRadius: '6px',
    border: '1px solid rgba(0,255,255,0.2)',
    backgroundColor: '#0a0a1a',
    color: '#ccc',
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
    gap: '12px',
    transition: 'all 0.2s',
    textAlign: 'left',
    fontSize: '15px'
  },
  optionSelected: {
    borderColor: '#FF00FF',
    backgroundColor: 'rgba(255,0,255,0.1)'
  },
  optionCorrect: {
    borderColor: '#00FF41',
    backgroundColor: 'rgba(0,255,65,0.12)'
  },
  optionWrong: {
    borderColor: '#FF0040',
    backgroundColor: 'rgba(255,0,64,0.12)'
  },
  optionDisabled: {
    opacity: 0.6,
    cursor: 'default'
  },
  badge: {
    width: '28px',
    height: '28px',
    borderRadius: '50%',
    backgroundColor: 'rgba(0,255,255,0.1)',
    color: '#00FFFF',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontWeight: 'bold',
    fontSize: '13px',
    flexShrink: 0
  },
  explanation: {
    padding: '24px',
    borderTop: '1px solid rgba(0,255,255,0.15)',
    backgroundColor: 'rgba(0,0,0,0.3)'
  },
  explanationCorrect: {
    backgroundColor: 'rgba(0,255,65,0.08)'
  },
  explanationWrong: {
    backgroundColor: 'rgba(255,0,64,0.08)'
  },
  resultTitle: {
    fontWeight: 'bold',
    fontSize: '18px',
    marginBottom: '8px',
    display: 'flex',
    alignItems: 'center',
    gap: '8px'
  },
  explanationText: {
    color: '#aaa',
    lineHeight: '1.6',
    marginBottom: '12px',
    fontFamily: "'Share Tech Mono', monospace"
  },
  tags: {
    display: 'flex',
    gap: '8px',
    flexWrap: 'wrap',
    marginBottom: '16px'
  },
  tag: {
    backgroundColor: 'rgba(0,255,255,0.08)',
    color: '#00FFFF',
    padding: '4px 10px',
    borderRadius: '6px',
    fontSize: '12px',
    fontFamily: 'monospace',
    border: '1px solid rgba(0,255,255,0.3)'
  },
  analysis: {
    backgroundColor: 'rgba(0,0,0,0.3)',
    padding: '12px',
    borderRadius: '8px',
    fontSize: '13px',
    color: '#888',
    marginBottom: '16px'
  },
  button: {
    width: '100%',
    padding: '14px',
    borderRadius: '6px',
    border: 'none',
    backgroundColor: '#00FFFF',
    color: '#000',
    fontWeight: 'bold',
    fontSize: '16px',
    cursor: 'pointer',
    transition: 'background 0.2s',
    fontFamily: "'Orbitron', monospace"
  },
  buttonDisabled: {
    backgroundColor: 'rgba(0,255,255,0.1)',
    color: '#444',
    cursor: 'not-allowed'
  },
  backButton: {
    marginTop: '20px',
    padding: '10px 20px',
    backgroundColor: 'transparent',
    border: '1px solid rgba(0,255,255,0.3)',
    color: '#888',
    borderRadius: '8px',
    cursor: 'pointer',
    fontSize: '14px',
    fontFamily: "'Orbitron', monospace"
  },
  completionStatus: {
    marginTop: '8px',
    fontSize: '14px',
    color: '#00FF41',
    fontWeight: 'bold',
    fontFamily: "'Share Tech Mono', monospace"
  }
};

// ==========================================
// КОМПОНЕНТ: КВИЗ
// ==========================================
const Quiz: React.FC<QuizProps> = ({ questions, title, testId, onBack, onComplete }) => {
  const [current, setCurrent] = useState<number>(0);
  const [selected, setSelected] = useState<string[]>([]);
  const [showResult, setShowResult] = useState<boolean>(false);
  const [score, setScore] = useState<number>(0);
  const [answers, setAnswers] = useState<{ correct: boolean }[]>([]);

  // === ФИНАЛЬНЫЙ ЭКРАН ===
  if (current >= questions.length) {
    const percent: number = Math.round((score / questions.length) * 100);
    const isPerfect: boolean = percent === 100;
    
    return (
      <div style={styles.container}>
        <div style={styles.card}>
          <div style={{ textAlign: 'center', padding: '40px' }}>
            <div style={{ fontSize: '48px', marginBottom: '16px' }}>
              {isPerfect ? '🏆' : percent >= 50 ? '🛡️' : '⚠️'}
            </div>
            
            <h2 style={{ color: '#f8fafc', marginBottom: '8px' }}>
              {title} — завершён!
            </h2>

            {isPerfect && (
              <div style={{
                backgroundColor: 'rgba(0,255,65,0.1)',
                border: '1px solid #00FF41',
                borderRadius: '12px',
                padding: '12px',
                marginBottom: '20px',
                color: '#00FF41',
                fontWeight: 'bold'
              }}>
                ✓ Все ответы правильные!
              </div>
            )}

            <div style={{
              fontSize: '56px',
              fontWeight: 'bold',
              color: '#00FFFF',
              marginBottom: '8px'
            }}>
              {percent}%
            </div>

            <div style={{ color: '#888', marginBottom: '32px' }}>
              Правильно: {score} из {questions.length}
            </div>

            <div style={{
              display: 'grid',
              gridTemplateColumns: `repeat(${questions.length}, 1fr)`,
              gap: '6px',
              marginBottom: '32px',
              maxWidth: '300px',
              margin: '0 auto 32px'
            }}>
              {answers.map((ans, i) => (
                <div 
                  key={i} 
                  style={{
                    height: '8px',
                    borderRadius: '4px',
                    backgroundColor: ans.correct ? '#22c55e' : '#ef4444'
                  }}
                  title={`Вопрос ${i + 1}`}
                />
              ))}
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
              <button 
                onClick={() => {
                  setCurrent(0);
                  setSelected([]);
                  setShowResult(false);
                  setScore(0);
                  setAnswers([]);
                }}
                style={styles.button}
              >
                Пройти снова
              </button>
              
              <button
                onClick={onBack}
                style={styles.backButton}
              >
                ← В главное меню
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  const question: Question = questions[current];
  const isMultiple: boolean = question.type === 'multiple';
  const progress: number = ((current) / questions.length) * 100;

  const handleSelect = (id: string): void => {
    if (showResult) return;
    
    if (isMultiple) {
      setSelected(prev => 
        prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]
      );
    } else {
      setSelected([id]);
    }
  };

  const checkAnswer = (): void => {
    const correctIds: string[] = question.options.filter(o => o.correct).map(o => o.id);
    const isCorrect: boolean = 
      selected.length === correctIds.length && 
      selected.every(id => correctIds.includes(id));
    
    if (isCorrect) setScore(s => s + 1);
    setAnswers(prev => [...prev, { correct: isCorrect }]);
    setShowResult(true);
  };

  const finishQuiz = (): void => {
    const correctIds: string[] = question.options.filter(o => o.correct).map(o => o.id);
    const lastCorrect: boolean = selected.length === correctIds.length && 
      selected.every(id => correctIds.includes(id));
    
    const finalAnswers: { correct: boolean }[] = [...answers, { correct: lastCorrect }];
    const finalScore: number = score + (lastCorrect ? 1 : 0);
    
    setAnswers(finalAnswers);
    setScore(finalScore);
    
    const allCorrect: boolean = finalAnswers.every(a => a.correct);
    if (allCorrect && onComplete) {
      onComplete(testId);
    }
    
    setCurrent(questions.length);
  };

  const nextQuestion = (): void => {
    if (current < questions.length - 1) {
      setCurrent(c => c + 1);
      setSelected([]);
      setShowResult(false);
    }
  };

  const getOptionStyle = (option: Option): React.CSSProperties => {
    const base: React.CSSProperties = { ...styles.option };
    
    if (!showResult) {
      if (selected.includes(option.id)) {
        return { ...base, ...styles.optionSelected };
      }
      return base;
    }
    
    if (option.correct) {
      return { ...base, ...styles.optionCorrect };
    }
    if (selected.includes(option.id) && !option.correct) {
      return { ...base, ...styles.optionWrong };
    }
    return { ...base, ...styles.optionDisabled };
  };

  const isCorrect: boolean = showResult && answers.length > 0 && answers[answers.length - 1]?.correct;

  return (
    <div style={styles.container}>
      <div style={styles.card}>
        <div style={styles.header}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
            <span style={{ color: '#00FFFF', fontWeight: 'bold' }}>{title}</span>
            <button onClick={onBack} style={{ ...styles.backButton, margin: 0 }}>✕</button>
          </div>
          <div style={styles.progressBar}>
            <div style={{ ...styles.progressFill, width: `${progress}%` }} />
          </div>
          <div style={styles.meta}>
            <span>Вопрос {current + 1} из {questions.length}</span>
            <span>Правильно: {score}</span>
          </div>
          <h2 style={styles.title}>{question.title}</h2>
          <p style={styles.scenario}>{question.scenario}</p>
        </div>

        <div style={styles.options}>
          {isMultiple && (
            <div style={styles.hint}>⚡ Можно выбрать несколько вариантов</div>
          )}
          
          {question.options.map(option => (
            <button
              key={option.id}
              onClick={() => handleSelect(option.id)}
              style={getOptionStyle(option)}
              disabled={showResult}
            >
              <span style={styles.badge}>{option.id}</span>
              <span style={{ flex: 1 }}>{option.text}</span>
              {showResult && option.correct && <span>✓</span>}
              {showResult && selected.includes(option.id) && !option.correct && <span>✗</span>}
            </button>
          ))}
        </div>

        {showResult ? (
          <div style={{
            ...styles.explanation,
            ...(isCorrect ? styles.explanationCorrect : styles.explanationWrong)
          }}>
            <div style={{
              ...styles.resultTitle,
              color: isCorrect ? '#00FF41' : '#FF0040'
            }}>
              <span>{isCorrect ? '✅' : '❌'}</span>
              <span>{isCorrect ? 'Правильно!' : 'Ошибка'}</span>
            </div>
            
            <p style={styles.explanationText}>{question.explanation}</p>
            
            {Object.keys(question.analysis).length > 0 && (
              <div style={styles.analysis}>
                {Object.entries(question.analysis).map(([k, v]) => (
                  <div key={k}>{v}</div>
                ))}
              </div>
            )}
            
            <div style={styles.tags}>
              <span style={styles.tag}>{question.cwe}</span>
              <span style={styles.tag}>{question.owasp}</span>
            </div>
            
            <button 
              onClick={current === questions.length - 1 ? finishQuiz : nextQuestion}
              style={styles.button}
            >
              {current === questions.length - 1 ? 'Завершить тест' : 'Следующий вопрос →'}
            </button>
          </div>
        ) : (
          <div style={{ padding: '0 24px 24px' }}>
            <button 
              onClick={checkAnswer}
              disabled={selected.length === 0}
              style={{
                ...styles.button,
                ...(selected.length === 0 ? styles.buttonDisabled : {})
              }}
            >
              Проверить ответ
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

// ==========================================
// КОМПОНЕНТ: ГЛАВНОЕ МЕНЮ
// ==========================================
const MainMenu: React.FC<MainMenuProps> = ({ onSelect, completedTests }) => {
  const [hovered, setHovered] = useState<number | null>(null);

  const tests = [
    {
      id: 'scenarios' as const,
      icon: '🎯',
      title: 'Сценарии атак',
      desc: '8 реальных кейсов с разбором CWE/OWASP',
      color: '#3b82f6'
    },
    {
      id: 'basics' as const,
      icon: '📝',
      title: 'Базовый тест',
      desc: '8 вопросов на знание терминов и протоколов',
      color: '#8b5cf6'
    }
  ];

  return (
    <div style={styles.container}>
      <div style={styles.card}>
        <div style={styles.menu}>
          <div style={{ fontSize: '64px', marginBottom: '16px' }}>🛡️</div>
          <h1 style={styles.menuTitle}>Кибербезопасность</h1>
          <p style={styles.menuSubtitle}>Выберите режим прохождения</p>
          
          {tests.map((test, index) => {
            const isCompleted = completedTests[test.id];
            const isHovered = hovered === index;
            
            return (
              <button
                key={test.id}
                style={{
                  ...styles.menuButton,
                  ...(isCompleted ? styles.menuButtonCompleted : {}),
                  ...(isHovered && !isCompleted ? { borderColor: test.color || '#00FFFF', transform: 'translateY(-2px)' } : {})
                }}
                onMouseEnter={() => setHovered(index)}
                onMouseLeave={() => setHovered(null)}
                onClick={() => onSelect(test.id)}
              >
                <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
                  <div style={{ fontSize: '32px' }}>{test.icon}</div>
                  <div style={{ flex: 1, textAlign: 'left' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                      <span>{test.title}</span>
                      {isCompleted && <span style={{ color: '#22c55e' }}>✓</span>}
                    </div>
                    <div style={{ fontSize: '13px', color: '#888', marginTop: '4px', fontWeight: 'normal' }}>
                      {test.desc}
                    </div>
                    {isCompleted && (
                      <div style={styles.completionStatus}>Выполнено! Все ответы правильные</div>
                    )}
                  </div>
                </div>
                {isCompleted && (
                  <div style={styles.completedBadge}>✓</div>
                )}
              </button>
            );
          })}

          <div style={{ marginTop: '24px', color: '#64748b', fontSize: '12px' }}>
            {Object.values(completedTests).filter(Boolean).length} из 2 тестов пройдено идеально
          </div>
        </div>
      </div>
    </div>
  );
};

// ==========================================
// ГЛАВНЫЙ КОМПОНЕНТ
// ==========================================
const MyQuize: React.FC = () => {
  const [currentView, setCurrentView] = useState<ViewType>('menu');
  const [completedTests, setCompletedTests] = useState<Record<string, boolean>>({
    scenarios: false,
    basics: false
  });

  useEffect(() => {
    const saved = localStorage.getItem('cyberquiz_completed');
    if (saved) {
      setCompletedTests(JSON.parse(saved));
    }
  }, []);

  const handleComplete = (testId: string): void => {
    setCompletedTests(prev => {
      const updated = { ...prev, [testId]: true };
      localStorage.setItem('cyberquiz_completed', JSON.stringify(updated));
      return updated;
    });
  };

  if (currentView === 'scenarios') {
    return <Quiz 
      questions={QUESTIONS_SCENARIOS} 
      title="Сценарии атак" 
      testId="scenarios"
      onBack={() => setCurrentView('menu')} 
      onComplete={handleComplete}
    />;
  }

  if (currentView === 'basics') {
    return <Quiz 
      questions={QUESTIONS_BASICS} 
      title="Базовый тест" 
      testId="basics"
      onBack={() => setCurrentView('menu')} 
      onComplete={handleComplete}
    />;
  }

  return <MainMenu 
    onSelect={setCurrentView} 
    completedTests={completedTests}
  />;
};

export default MyQuize;
