import React, { useState } from 'react';
import type { WallpaperType } from '../App';

interface Case3DesktopProps {
  onComplete: (type: WallpaperType) => void;
}

type Page =
  | 'home'
  | 'mail-inbox'
  | 'mail-real'
  | 'mail-phishing'
  | 'fake-gosuslugi'
  | 'gosuslugi';

const PAGE_URL: Record<Page, { url: string; secure: boolean }> = {
  'home':           { url: 'yandex.ru',                   secure: true  },
  'mail-inbox':     { url: 'mail.yandex.ru',              secure: true  },
  'mail-real':      { url: 'mail.yandex.ru',              secure: true  },
  'mail-phishing':  { url: 'mail.yandex.ru',              secure: true  },
  'fake-gosuslugi': { url: 'g0suslugi-confirm.ru/login',  secure: false },
  'gosuslugi':      { url: 'gosuslugi.ru',                secure: true  },
};

const Case3Desktop: React.FC<Case3DesktopProps> = ({ onComplete }) => {
  const [page, setPage] = useState<Page>('home');
  const [login, setLogin] = useState('');
  const [password, setPassword] = useState('');
  const [modal, setModal] = useState<'stolen' | 'success' | null>(null);

  const { url, secure } = PAGE_URL[page];

  const goTo = (p: Page) => { setPage(p); setLogin(''); setPassword(''); };

  return (
    <div style={s.root}>
      {/* Браузер */}
      <div style={s.browser}>
        {/* Хром */}
        <div style={s.chrome}>
          <button style={s.navBtn} onClick={() => goTo('home')}>⌂</button>
          <button style={s.navBtn} onClick={() => {
            if (page === 'fake-gosuslugi') goTo('mail-phishing');
            else if (page === 'mail-real' || page === 'mail-phishing') goTo('mail-inbox');
            else if (page === 'mail-inbox' || page === 'gosuslugi') goTo('home');
          }}>←</button>
          <div style={s.urlBar}>
            <span style={secure ? s.httpsIcon : s.httpIcon}>{secure ? '🔒' : '⚠'}</span>
            <span style={{ ...s.urlText, color: secure ? '#aaa' : '#f5a623' }}>{url}</span>
          </div>
        </div>

        {/* Закладки */}
        <div style={s.bookmarks}>
          <button style={s.bookmark} onClick={() => goTo('mail-inbox')}>📧 Почта</button>
          <button style={s.bookmark} onClick={() => goTo('gosuslugi')}>🏛 Госуслуги</button>
        </div>

        {/* Контент */}
        <div style={s.content}>
          {page === 'home' && <HomePage onGo={goTo} />}
          {page === 'mail-inbox' && <MailInbox onOpen={goTo} />}
          {page === 'mail-real' && <EmailReal onBack={() => goTo('mail-inbox')} onGosuslugi={() => goTo('gosuslugi')} />}
          {page === 'mail-phishing' && <EmailPhishing onBack={() => goTo('mail-inbox')} onLink={() => goTo('fake-gosuslugi')} />}
          {page === 'fake-gosuslugi' && (
            <FakeGosuslugi
              login={login} password={password}
              setLogin={setLogin} setPassword={setPassword}
              onSubmit={() => setModal('stolen')}
            />
          )}
          {page === 'gosuslugi' && (
            <RealGosuslugi
              login={login} password={password}
              setLogin={setLogin} setPassword={setPassword}
              onSubmit={() => setModal('success')}
            />
          )}
        </div>
      </div>

      {/* Модалки */}
      {modal === 'stolen' && (
        <div style={s.modalOverlay}>
          <div style={{ ...s.modal, borderColor: '#FF0040' }}>
            <div style={s.modalIcon}>💀</div>
            <div style={{ ...s.modalTitle, color: '#FF0040' }}>Аккаунт украден!</div>
            <div style={s.modalText}>
              Вы ввели логин и пароль на <b style={{ color: '#FF0040' }}>фишинговом сайте</b>.<br/>
              Домен <b>g0suslugi-confirm.ru</b> — подделка под госуслуги.<br/>
              Буква <b>o</b> заменена на цифру <b>0</b>.<br/><br/>
              Злоумышленник получил ваши данные и вошёл в ваш аккаунт.
            </div>
            <div style={s.modalHint}>
              💡 Правило: никогда не переходите по ссылкам из писем. Открывайте госуслуги только из закладок.
            </div>
            <button style={{ ...s.modalBtn, background: 'rgba(255,0,64,0.15)', border: '1px solid #FF0040', color: '#FF0040' }}
              onClick={() => { setModal(null); goTo('mail-phishing'); }}>
              Попробовать ещё раз
            </button>
          </div>
        </div>
      )}

      {modal === 'success' && (
        <div style={s.modalOverlay}>
          <div style={{ ...s.modal, borderColor: '#00FF41' }}>
            <div style={s.modalIcon}>🛡️</div>
            <div style={{ ...s.modalTitle, color: '#00FF41' }}>Всё верно!</div>
            <div style={s.modalText}>
              Вы открыли <b style={{ color: '#00FF41' }}>официальный сайт</b> госуслуг напрямую из закладок.<br/>
              Домен <b>gosuslugi.ru</b> — настоящий, соединение защищено HTTPS.<br/><br/>
              Ваши данные в безопасности.
            </div>
            <button style={{ ...s.modalBtn, background: '#00FF41', border: 'none', color: '#000' }}
              onClick={() => { setModal(null); onComplete('win10'); }}>
              Завершить кейс ✓
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

// ── Страницы ─────────────────────────────────────────

const HomePage: React.FC<{ onGo: (p: Page) => void }> = ({ onGo }) => (
  <div style={s.homePage}>
    <div style={s.yandexLogo}>Яндекс</div>
    <div style={s.homeHint}>Используйте закладки выше или откройте почту для проверки письма</div>
    <div style={s.homeIcons}>
      <button style={s.homeIcon} onClick={() => onGo('mail-inbox')}>
        <span style={{ fontSize: 32 }}>📧</span>
        <span>Почта</span>
      </button>
      <button style={s.homeIcon} onClick={() => onGo('gosuslugi')}>
        <span style={{ fontSize: 32 }}>🏛</span>
        <span>Госуслуги</span>
      </button>
    </div>
  </div>
);

const MailInbox: React.FC<{ onOpen: (p: Page) => void }> = ({ onOpen }) => (
  <div style={s.mailPage}>
    <div style={s.mailHeader}>Входящие <span style={{ color: '#00FFFF', fontSize: 12 }}>2 новых</span></div>
    {/* Фишинговое письмо — выглядит срочно, идёт первым */}
    <div style={{ ...s.emailRow, borderLeft: '3px solid #f5a623' }} onClick={() => onOpen('mail-phishing')}>
      <div style={s.emailFrom}>
        <span style={s.emailSender}>security@g0suslugi-confirm.ru</span>
        <span style={s.emailTime}>10:47</span>
      </div>
      <div style={s.emailSubject}>⚠ Требуется подтверждение аккаунта</div>
      <div style={s.emailPreview}>Ваш аккаунт будет заблокирован. Подтвердите данные в течение 24 часов...</div>
    </div>
    {/* Настоящее письмо */}
    <div style={{ ...s.emailRow, borderLeft: '3px solid rgba(0,255,255,0.3)' }} onClick={() => onOpen('mail-real')}>
      <div style={s.emailFrom}>
        <span style={s.emailSender}>noreply@gosuslugi.ru</span>
        <span style={s.emailTime}>09:12</span>
      </div>
      <div style={s.emailSubject}>Ваша заявка №2847 отклонена</div>
      <div style={s.emailPreview}>Заявка на получение справки была отклонена в связи с неполным пакетом...</div>
    </div>
  </div>
);

const EmailReal: React.FC<{ onBack: () => void; onGosuslugi: () => void }> = ({ onBack, onGosuslugi }) => (
  <div style={s.emailPage}>
    <button style={s.backLink} onClick={onBack}>← Входящие</button>
    <div style={s.emailFullFrom}>
      <b>От:</b> <span style={{ color: '#00FF41' }}>noreply@gosuslugi.ru</span>
    </div>
    <div style={s.emailFullSubject}>Ваша заявка №2847 отклонена</div>
    <div style={s.emailBody}>
      <p>Уважаемый пользователь,</p>
      <p>Ваша заявка на получение справки об отсутствии задолженностей (<b>№2847</b>) была отклонена.</p>
      <p><b>Причина:</b> неполный пакет документов. Отсутствует копия паспорта.</p>
      <p>Для повторной подачи заявки войдите на портал Госуслуги.</p>
      <p style={{ color: '#888', fontSize: 12 }}>Это автоматическое сообщение, не отвечайте на него.</p>
    </div>
    <div style={s.emailActions}>
      <span style={{ color: '#888', fontSize: 13 }}>Нужно войти на Госуслуги для повторной подачи</span>
      <button style={s.actionBtn} onClick={onGosuslugi}>Открыть Госуслуги из закладок →</button>
    </div>
  </div>
);

const EmailPhishing: React.FC<{ onBack: () => void; onLink: () => void }> = ({ onBack, onLink }) => (
  <div style={s.emailPage}>
    <button style={s.backLink} onClick={onBack}>← Входящие</button>
    <div style={{ ...s.emailFullFrom, color: '#f5a623' }}>
      <b>От:</b> <span style={{ color: '#f5a623' }}>security@g0suslugi-confirm.ru</span>
      <span style={s.suspiciousBadge}>⚠ Подозрительный отправитель</span>
    </div>
    <div style={s.emailFullSubject}>⚠ Требуется срочное подтверждение аккаунта</div>
    <div style={s.emailBody}>
      <p>Уважаемый пользователь,</p>
      <p>Мы зафиксировали <b style={{ color: '#FF0040' }}>подозрительную активность</b> в вашем аккаунте.</p>
      <p>В целях безопасности ваш аккаунт будет <b style={{ color: '#FF0040' }}>заблокирован через 24 часа</b>, если вы не подтвердите личность.</p>
      <p>Нажмите кнопку ниже для подтверждения:</p>
      <button style={s.phishingLink} onClick={onLink}>
        Подтвердить аккаунт →
      </button>
      <p style={{ color: '#555', fontSize: 11, marginTop: 20 }}>
        © Портал государственных услуг. Если вы не запрашивали это письмо — проигнорируйте его.
      </p>
    </div>
  </div>
);

const FakeGosuslugi: React.FC<{
  login: string; password: string;
  setLogin: (v: string) => void; setPassword: (v: string) => void;
  onSubmit: () => void;
}> = ({ login, password, setLogin, setPassword, onSubmit }) => (
  <div style={s.gosPage}>
    <div style={s.fakeWarning}>⚠ HTTP — незащищённое соединение</div>
    <div style={s.gosHeader}>
      <span style={{ fontSize: 28 }}>🏛</span>
      <span style={s.gosTitle}>Госуслуги</span>
    </div>
    <div style={s.gosSubtitle}>Подтверждение личности</div>
    <div style={s.loginForm}>
      <input style={s.input} placeholder="Логин или телефон" value={login} onChange={e => setLogin(e.target.value)} />
      <input style={s.input} type="password" placeholder="Пароль" value={password} onChange={e => setPassword(e.target.value)} />
      <button style={{ ...s.loginBtn, background: '#f5a623', color: '#000' }}
        onClick={() => { if (login && password) onSubmit(); }}
        disabled={!login || !password}>
        Подтвердить
      </button>
    </div>
    <div style={{ color: '#555', fontSize: 11, textAlign: 'center', marginTop: 12 }}>
      g0suslugi-confirm.ru
    </div>
  </div>
);

const RealGosuslugi: React.FC<{
  login: string; password: string;
  setLogin: (v: string) => void; setPassword: (v: string) => void;
  onSubmit: () => void;
}> = ({ login, password, setLogin, setPassword, onSubmit }) => (
  <div style={s.gosPage}>
    <div style={s.realSafe}>🔒 Безопасное соединение · gosuslugi.ru</div>
    <div style={s.gosHeader}>
      <span style={{ fontSize: 28 }}>🏛</span>
      <span style={s.gosTitle}>Госуслуги</span>
    </div>
    <div style={s.gosSubtitle}>Войдите в личный кабинет</div>
    <div style={s.loginForm}>
      <input style={s.input} placeholder="Логин или телефон" value={login} onChange={e => setLogin(e.target.value)} />
      <input style={s.input} type="password" placeholder="Пароль" value={password} onChange={e => setPassword(e.target.value)} />
      <button style={{ ...s.loginBtn, background: '#00FFFF', color: '#000' }}
        onClick={() => { if (login && password) onSubmit(); }}
        disabled={!login || !password}>
        Войти
      </button>
    </div>
    <div style={{ color: '#555', fontSize: 11, textAlign: 'center', marginTop: 12 }}>
      gosuslugi.ru · Официальный портал
    </div>
  </div>
);

// ── Стили ─────────────────────────────────────────────

const s: Record<string, React.CSSProperties> = {
  root: {
    minHeight: '100vh',
    background: '#0a0a0a',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: '24px 16px',
    fontFamily: "'Share Tech Mono', monospace",
  },
  browser: {
    width: '100%',
    maxWidth: 800,
    background: '#0d0d22',
    border: '1px solid rgba(0,255,255,0.2)',
    borderRadius: 10,
    overflow: 'hidden',
    boxShadow: '0 0 40px rgba(0,255,255,0.08)',
  },
  chrome: {
    background: '#080818',
    borderBottom: '1px solid rgba(0,255,255,0.15)',
    padding: '10px 12px',
    display: 'flex',
    alignItems: 'center',
    gap: 8,
  },
  navBtn: {
    background: 'transparent',
    border: '1px solid rgba(255,255,255,0.1)',
    color: '#888',
    borderRadius: 4,
    padding: '4px 8px',
    cursor: 'pointer',
    fontSize: 14,
  },
  urlBar: {
    flex: 1,
    background: '#0a0a1a',
    border: '1px solid rgba(0,255,255,0.15)',
    borderRadius: 4,
    padding: '6px 12px',
    display: 'flex',
    alignItems: 'center',
    gap: 8,
    fontSize: 13,
  },
  httpsIcon: { color: '#00FF41', fontSize: 14 },
  httpIcon: { color: '#f5a623', fontSize: 14 },
  urlText: { flex: 1 },
  bookmarks: {
    background: '#060612',
    borderBottom: '1px solid rgba(0,255,255,0.08)',
    padding: '6px 12px',
    display: 'flex',
    gap: 8,
  },
  bookmark: {
    background: 'transparent',
    border: '1px solid rgba(0,255,255,0.15)',
    color: '#888',
    borderRadius: 4,
    padding: '3px 10px',
    cursor: 'pointer',
    fontSize: 12,
    fontFamily: "'Share Tech Mono', monospace",
  },
  content: { minHeight: 420 },

  // Home
  homePage: {
    display: 'flex', flexDirection: 'column', alignItems: 'center',
    justifyContent: 'center', padding: 40, gap: 20,
  },
  yandexLogo: {
    fontSize: 48, fontWeight: 900, color: '#FF0040',
    fontFamily: "'Orbitron', monospace", letterSpacing: 2,
  },
  homeHint: { color: '#555', fontSize: 13, textAlign: 'center' },
  homeIcons: { display: 'flex', gap: 32, marginTop: 16 },
  homeIcon: {
    background: 'rgba(0,255,255,0.04)', border: '1px solid rgba(0,255,255,0.15)',
    borderRadius: 10, padding: '16px 24px', cursor: 'pointer',
    display: 'flex', flexDirection: 'column', alignItems: 'center',
    gap: 8, color: '#aaa', fontSize: 13, fontFamily: "'Share Tech Mono', monospace",
  },

  // Mail
  mailPage: { padding: 0 },
  mailHeader: {
    padding: '14px 20px', borderBottom: '1px solid rgba(0,255,255,0.1)',
    color: '#ccc', fontFamily: "'Orbitron', monospace", fontSize: 14,
    display: 'flex', alignItems: 'center', gap: 10,
  },
  emailRow: {
    padding: '14px 20px', borderBottom: '1px solid rgba(255,255,255,0.05)',
    cursor: 'pointer', transition: 'background 0.15s',
  },
  emailFrom: { display: 'flex', justifyContent: 'space-between', marginBottom: 4 },
  emailSender: { color: '#aaa', fontSize: 13, fontWeight: 'bold' },
  emailTime: { color: '#555', fontSize: 12 },
  emailSubject: { color: '#ddd', fontSize: 14, marginBottom: 3 },
  emailPreview: { color: '#555', fontSize: 12 },

  // Email view
  emailPage: { padding: 20 },
  backLink: {
    background: 'transparent', border: 'none', color: '#00FFFF',
    cursor: 'pointer', fontSize: 13, padding: 0, marginBottom: 16,
    fontFamily: "'Share Tech Mono', monospace",
  },
  emailFullFrom: { fontSize: 13, color: '#888', marginBottom: 6, display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' },
  emailFullSubject: { color: '#ddd', fontSize: 16, fontWeight: 'bold', marginBottom: 16, fontFamily: "'Orbitron', monospace" },
  emailBody: { color: '#aaa', fontSize: 14, lineHeight: 1.8, marginBottom: 20 },
  suspiciousBadge: {
    background: 'rgba(245,166,35,0.12)', border: '1px solid #f5a623',
    color: '#f5a623', fontSize: 11, borderRadius: 4, padding: '2px 8px',
  },
  phishingLink: {
    background: 'rgba(0,120,255,0.15)', border: '1px solid #0078ff',
    color: '#4da6ff', borderRadius: 6, padding: '10px 20px',
    cursor: 'pointer', fontSize: 14, fontFamily: "'Share Tech Mono', monospace",
    display: 'block', marginTop: 8,
  },
  emailActions: {
    borderTop: '1px solid rgba(0,255,255,0.1)',
    paddingTop: 16, display: 'flex', flexDirection: 'column', gap: 10,
  },
  actionBtn: {
    background: '#00FFFF', border: 'none', borderRadius: 6,
    padding: '10px 20px', color: '#000', cursor: 'pointer',
    fontSize: 13, fontFamily: "'Orbitron', monospace", fontWeight: 700,
    alignSelf: 'flex-start',
  },

  // Gosuslugi pages
  gosPage: { padding: 32, display: 'flex', flexDirection: 'column', alignItems: 'center' },
  fakeWarning: {
    background: 'rgba(245,166,35,0.12)', border: '1px solid #f5a623',
    color: '#f5a623', borderRadius: 6, padding: '8px 16px',
    fontSize: 12, marginBottom: 24, width: '100%', textAlign: 'center',
  },
  realSafe: {
    background: 'rgba(0,255,65,0.08)', border: '1px solid #00FF41',
    color: '#00FF41', borderRadius: 6, padding: '8px 16px',
    fontSize: 12, marginBottom: 24, width: '100%', textAlign: 'center',
  },
  gosHeader: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 6 },
  gosTitle: { color: '#00FFFF', fontFamily: "'Orbitron', monospace", fontSize: 22, fontWeight: 700 },
  gosSubtitle: { color: '#888', fontSize: 13, marginBottom: 24 },
  loginForm: { display: 'flex', flexDirection: 'column', gap: 12, width: '100%', maxWidth: 320 },
  input: {
    background: '#0a0a1a', border: '1px solid rgba(0,255,255,0.2)',
    borderRadius: 6, padding: '10px 14px', color: '#ccc',
    fontSize: 14, fontFamily: "'Share Tech Mono', monospace",
    outline: 'none',
  },
  loginBtn: {
    padding: '12px', borderRadius: 6, border: 'none',
    fontFamily: "'Orbitron', monospace", fontSize: 14, fontWeight: 700,
    cursor: 'pointer', transition: 'opacity 0.2s',
  },

  // Modals
  modalOverlay: {
    position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.8)',
    display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 200,
  },
  modal: {
    background: '#0d0d22', border: '2px solid',
    borderRadius: 12, padding: '32px 28px', maxWidth: 440, width: '90%',
    textAlign: 'center', boxShadow: '0 0 40px rgba(0,0,0,0.5)',
  },
  modalIcon: { fontSize: 48, marginBottom: 12 },
  modalTitle: { fontFamily: "'Orbitron', monospace", fontSize: 18, fontWeight: 700, marginBottom: 12 },
  modalText: { color: '#aaa', fontSize: 14, lineHeight: 1.7, marginBottom: 16 },
  modalHint: {
    background: 'rgba(0,255,255,0.06)', border: '1px solid rgba(0,255,255,0.2)',
    borderRadius: 6, padding: '10px 14px', color: '#888', fontSize: 13,
    marginBottom: 20, textAlign: 'left',
  },
  modalBtn: {
    padding: '12px 28px', borderRadius: 6, cursor: 'pointer',
    fontFamily: "'Orbitron', monospace", fontSize: 13, fontWeight: 700,
  },
};

export default Case3Desktop;
