import React, { useState } from 'react';
import './Yandex.css';

const YandexApp: React.FC = () => {
  const [currentPage, setCurrentPage] = useState<'yandex' | 'email' | 'gosuslugi' | 'fakeSite' | 'telelitra' | 'searchResults'>('yandex');
  const [selectedEmail, setSelectedEmail] = useState<number | null>(null);
  const [login, setLogin] = useState('');
  const [password, setPassword] = useState('');
  const [showPhishingModal, setShowPhishingModal] = useState(false);
  const [showSuccessModal, setShowSuccessModal] = useState(false);
  const [showVirusModal, setShowVirusModal] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [showFakeSiteWarning, setShowFakeSiteWarning] = useState(false);

  const emails = [
    { id: 1, from: 'security@bank.ru', subject: 'Ваш аккаунт Госуслуги заблокирован', body: 'Уважаемый клиент! Ваш аккаунт был заблокирован. Для разблокировки перейдите по ссылке и подтвердите данные.' },
    { id: 2, from: 'noreply@gosuslugi.ru', subject: 'Подтверждение записи на портале Госуслуги', body: 'Ваша запись подтверждена. Для просмотра перейдите на сайт госуслуг.' }
  ];

  const handlePhishingSubmit = () => {
    if (login && password) {
      setShowPhishingModal(true);
    }
  };

  const handleGosuslugiLogin = () => {
    if (login && password) {
      setShowSuccessModal(true);
    }
  };

  const handleSearch = () => {
    if (searchQuery.toLowerCase().includes('телелитр')) {
      setCurrentPage('searchResults');
    } else {
      alert('Ничего не найдено. Попробуйте найти "ТелеЛитр"');
    }
  };

  const handleFakeLink = () => {
    setCurrentPage('fakeSite');
  };

  const handleOfficialLink = () => {
    setCurrentPage('telelitra');
  };

  const handleDownloadVirus = () => {
    setShowVirusModal(true);
  };

  const MailIcon = () => (
    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
      <path d="M22 7L12 13L2 7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
    </svg>
  );

  const GosuslugiIcon = () => (
    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
      <path d="M2 17L12 22L22 17" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
      <path d="M2 12L12 17L22 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
    </svg>
  );

  const BackIcon = () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M15 18L9 12L15 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );

  const EmailIcon = () => (
    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4Z" stroke="#666" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
      <path d="M22 7L12 13L2 7" stroke="#666" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
    </svg>
  );

  const WarningIcon = () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 8V12M12 16H12.01M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );

  const SecureIcon = () => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 2L3 7L12 12L21 7L12 2Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M12 12V21" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
      <path d="M18 9.5V12C18 16 15 19 12 19C9 19 6 16 6 12V9.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  );

  if (currentPage === 'yandex') {
    return (
      <div className="app">
        <div className="yandex-page">
          <h1 className="yandex-logo">Яндекс</h1>
          <div className="search-container">
            <input 
              type="text" 
              placeholder="Найти..." 
              className="yandex-search" 
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
            />
            <button className="yandex-btn" onClick={handleSearch}>Найти</button>
          </div>
          
          <div className="services-icons">
            <div className="service-icon" onClick={() => setCurrentPage('email')}>
              <div className="icon-circle">
                <MailIcon />
              </div>
              <span>Почта</span>
            </div>
            <div className="service-icon" onClick={() => setCurrentPage('gosuslugi')}>
              <div className="icon-circle">
                <GosuslugiIcon />
              </div>
              <span>Госуслуги</span>
            </div>
          </div>
          
          <p className="yandex-hint">Найдется всё. Например, ТелеЛитр</p>
        </div>
      </div>
    );
  }

  // Страница результатов поиска
  if (currentPage === 'searchResults') {
    return (
      <div className="app">
        <div className="header-with-back">
          <button className="back-btn" onClick={() => setCurrentPage('yandex')}>
            <BackIcon />
            Назад к поиску
          </button>
        </div>
        <div className="search-results-page">
          <div className="search-info">
            <p>Результаты поиска: <strong>ТелеЛитр</strong></p>
            <p className="results-count">Найдено 2 результата</p>
          </div>
          
          <div className="search-results-list">
            {/* Официальный сайт */}
            <div className="search-result official" onClick={handleOfficialLink}>
              <div className="result-icon">🔒</div>
              <div className="result-content">
                <div className="result-title">ТелеЛитр - Официальный сайт</div>
                <div className="result-url">https://tele-litra.gov.ru</div>
                <div className="result-description">Крупнейшая библиотека электронных книг. Более 1 миллиона книг. Официальный сайт с лицензионными книгами.</div>
                <div className="result-badge secure">Защищенное соединение</div>
              </div>
            </div>

            {/* Поддельный сайт */}
            <div className="search-result fake" onClick={handleFakeLink}>
              <div className="result-icon">⚠️</div>
              <div className="result-content">
                <div className="result-title">ТелеЛитр - Скачать бесплатно</div>
                <div className="result-url">http://tele-litra-free.download</div>
                <div className="result-description">Скачай любую книгу бесплатно без регистрации! Все книги в открытом доступе.</div>
                <div className="result-badge dangerous">Незащищенное соединение</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // Страница Госуслуг
  if (currentPage === 'gosuslugi') {
    return (
      <div className="app">
        <div className="header-with-back">
          <button className="back-btn" onClick={() => setCurrentPage('yandex')}>
            <BackIcon />
            Назад к Яндекс
          </button>
        </div>
        <div className="gosuslugi-page">
          <div className="gosuslugi-header">
            <GosuslugiIcon />
            <h1 className="gosuslugi-title">Госуслуги</h1>
          </div>
          <p className='colorGos'>Добро пожаловать на портал государственных услуг</p>
          <div className="login-form">
            <input 
              type="text" 
              placeholder="Логин" 
              className="input-field" 
              value={login}
              onChange={(e) => setLogin(e.target.value)}
            />
            <input 
              type="password" 
              placeholder="Пароль" 
              className="input-field" 
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
            <button className="login-btn" onClick={handleGosuslugiLogin}>Войти</button>
          </div>
          <p className="gosuslugi-note">Официальный сайт. Ваши данные в безопасности</p>
        </div>

        {showSuccessModal && (
          <div className="modal-overlay">
            <div className="modal success-modal">
              <h3 className="success-title">Поздравляем!</h3>
              <p>Вы успешно вошли на официальный сайт Госуслуг!</p>
              <p>Все ваши данные в безопасности. Вы выполнили задание правильно!</p>
              <div className="modal-data success-data">
                <strong>Ваши данные:</strong><br/>
                Логин: {login}<br/>
                Пароль: {password}
              </div>
              <button onClick={() => { setShowSuccessModal(false); setCurrentPage('yandex'); }} className="modal-btn success-btn">Отлично!</button>
            </div>
          </div>
        )}
      </div>
    );
  }
  if (currentPage === 'fakeSite') {
    return (
      <div className="app">
        <div className="header-with-back warning-header">
          <div className="warning-badge">
            <WarningIcon />
            <span>Незащищенное соединение</span>
          </div>
          <button className="back-btn" onClick={() => setCurrentPage('searchResults')}>
            <BackIcon />
            Назад к результатам
          </button>
        </div>
        <div className="fake-site-page">
          <div className="fake-site-content">
            <h1 className="fake-title"> ТелеЛитр - НЕОФИЦИАЛЬНЫЙ САЙТ</h1>
            <div className="warning-box">
              <p> ВНИМАНИЕ! Этот сайт не имеет защищенного SSL-сертификата!</p>
              <p>Ваше соединение не зашифровано. Данные могут быть перехвачены злоумышленниками.</p>
              <p>Адресная строка: <span className="fake-url">http://tele-litra-free.download</span> (не защищено)</p>
            </div>
            <div className="download-section">
              <p>Для скачивания книг установите наше приложение:</p>
              <button className="download-btn" onClick={handleDownloadVirus}>
                📥 Скачать TeleLitru_Installer.exe
              </button>
            </div>
          </div>
        </div>

        {showVirusModal && (
          <div className="modal-overlay">
            <div className="modal virus-modal">
              <div className="virus-icon">🦠</div>
              <h3 className="virus-title">О НЕТ! ВЫ СКАЧАЛИ ВИРУС!</h3>
              <p>Вы скачали файл с поддельного сайта. Это вредоносное ПО!</p>
              <p>Никогда не скачивайте файлы с непроверенных сайтов и не переходите по подозрительным ссылкам!</p>
              <div className="modal-data virus-data">
                <strong>Что произошло:</strong><br/>
                - Ваш компьютер заражен трояном<br/>
                - Данные могли быть украдены<br/>
                - Рекомендуется немедленно запустить антивирус<br/>
                - Не вводите пароли на подозрительных сайтах
              </div>
              <button onClick={() => { setShowVirusModal(false); setCurrentPage('yandex'); }} className="modal-btn virus-btn">Я понял, больше так не буду</button>
            </div>
          </div>
        )}
      </div>
    );
  }
  if (currentPage === 'telelitra') {
    return (
      <div className="app">
        <div className="header-with-back secure-header">
          <div className="secure-badge">
            <SecureIcon />
            <span>Защищенное соединение</span>
          </div>
          <button className="back-btn" onClick={() => setCurrentPage('searchResults')}>
            <BackIcon />
            Назад к результатам
          </button>
        </div>
        <div className="telelitra-page">
          <div className="telelitra-content">
            <h1 className="telelitra-title">✅ ТелеЛитр - Официальный сайт</h1>
            <div className="secure-box">
              <p>🔒 SSL Сертификат подтвержден (Let's Encrypt)</p>
              <p>Адресная строка: <span className="secure-url">https://tele-litra.gov.ru</span> (защищено)</p>
              <p>Ваше соединение зашифровано. Сайт официальный и безопасный.</p>
            </div>
            <div className="info-section">
              <h2>Добро пожаловать в ТелеЛитр!</h2>
              <p>Крупнейшая официальная библиотека электронных книг.</p>
              <div className="features">
                <div className="feature">📚 Более 1 миллиона лицензионных книг</div>
                <div className="feature">🎧 Аудиокниги от официальных издательств</div>
                <div className="feature">📱 Официальное мобильное приложение</div>
                <div className="feature">⭐ Рейтинги и отзывы читателей</div>
                <div className="feature">💰 Бесплатные книги по школьной программе</div>
                <div className="feature">🎓 Образовательные материалы</div>
              </div>
              <button className="register-btn" onClick={() => alert('Добро пожаловать на официальный сайт ТелеЛитр! Здесь безопасно.')}>
                Зарегистрироваться
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // Детали письма
  if (selectedEmail) {
    const email = emails.find(e => e.id === selectedEmail);
    return (
      <div className="app">
        <div className="header-with-back">
          <button className="back-btn" onClick={() => { setSelectedEmail(null); setCurrentPage('email'); }}>
            <BackIcon />
            Назад к письмам
          </button>
          <button className="back-btn yandex-back" onClick={() => setCurrentPage('yandex')}>
            🏠 На главную
          </button>
        </div>
        <div className="email-detail">
          <div className="email-detail-header">
            <EmailIcon />
            <h3>{email?.subject}</h3>
          </div>
          <p className="email-from"><strong>От:</strong> {email?.from}</p>
          <p className="email-body">{email?.body}</p>
          
          {selectedEmail === 1 && (
            <div className="phishing-form">
              <h4>⚠️ Внимание! Подтвердите данные</h4>
              <input 
                type="text" 
                placeholder="Логин" 
                value={login} 
                onChange={(e) => setLogin(e.target.value)} 
                className="input-field" 
              />
              <input 
                type="password" 
                placeholder="Пароль" 
                value={password} 
                onChange={(e) => setPassword(e.target.value)} 
                className="input-field" 
              />
              <button onClick={handlePhishingSubmit} className="phishing-btn">Подтвердить</button>
            </div>
          )}

          {selectedEmail === 2 && (
            <div className="gosuslugi-link">
              <button onClick={() => setCurrentPage('gosuslugi')} className="gosuslugi-nav-btn">
                <GosuslugiIcon />
                Перейти на сайт Госуслуг
              </button>
            </div>
          )}
        </div>

        {showPhishingModal && (
          <div className="modal-overlay">
            <div className="modal">
              <h3 className="modal-title">😱 О нет! Ваши данные украдены!</h3>
              <p>Вы ввели логин и пароль на поддельном сайте.</p>
              <p>Никогда не переходите по подозрительным ссылкам из писем!</p>
              <div className="modal-data">
                <strong>Украденные данные:</strong><br/>
                Логин: {login}<br/>
                Пароль: {password}
              </div>
              <button onClick={() => { setShowPhishingModal(false); setCurrentPage('yandex'); }} className="modal-btn">Понятно</button>
            </div>
          </div>
        )}
      </div>
    );
  }

  // Список писем
  return (
    <div className="app">
      <div className="header-with-back">
        <button className="back-btn" onClick={() => setCurrentPage('yandex')}>
          <BackIcon />
          Назад к Яндекс
        </button>
      </div>
      <div className="email-list">
        <h2>Входящие</h2>
        {emails.map(email => (
          <div key={email.id} className="email-item" onClick={() => setSelectedEmail(email.id)}>
            <div className="email-icon">
              <EmailIcon />
            </div>
            <div className="email-info">
              <strong>{email.from}</strong>
              <p>{email.subject}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default YandexApp;