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

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

const VERSIONS = [
  { v: 1, name: 'Windows XP',  img: '/images/windows_xp.jpg',  type: 'xp'    as WallpaperType },
  { v: 2, name: 'Windows 7',   img: '/images/windows_7.jpg',   type: 'win7'  as WallpaperType },
  { v: 3, name: 'Windows 10',  img: '/images/windows_10.jpg',  type: 'win10' as WallpaperType },
];

const Case1Desktop: React.FC<Case1DesktopProps> = ({ onComplete }) => {
  const [version, setVersion] = useState(1);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const current = VERSIONS[version - 1];

  const updateSystem = () => {
    if (version >= 3) return;
    setLoading(true);
    setTimeout(() => {
      setVersion(v => v + 1);
      setLoading(false);
    }, 2000);
  };

  const endDay = () => {
    if (version === 3) {
      onComplete(current.type);
    } else {
      setError(`Нельзя завершить кейс на ${current.name}. Устаревшая ОС содержит незакрытые уязвимости — обновите систему до Windows 10.`);
    }
  };

  return (
    <div className="day1-container">
      <img src={current.img} alt="wallpaper" className="day1-wallpaper" />

      {/* HUD-шапка */}
      <div className="day1-header">
        <div className="day1-header-content">
          <span className="day1-header-title">КЕЙС 1 — ОБНОВЛЕНИЕ СИСТЕМЫ</span>
          <span className="day1-header-sub">Устаревшее ПО = открытая дверь для атак</span>
        </div>
      </div>

      {/* Легенда */}
      <div className="day1-story">
        Ваша рабочая станция работает на <b style={{ color: '#f5a623' }}>{current.name}</b>.
        Производитель прекратил поддержку этой версии — патчи безопасности больше не выходят.
        <br />
        Злоумышленники активно эксплуатируют известные уязвимости необновлённых систем.
        <b style={{ color: '#00FF41' }}> Обновите ОС до актуальной версии, чтобы закрыть бреши.</b>
      </div>

      {/* Прогресс */}
      <div className="day1-progress">
        {VERSIONS.map((ver, i) => (
          <React.Fragment key={ver.v}>
            <div className={`day1-step ${version === ver.v ? 'active' : version > ver.v ? 'done' : ''}`}>
              <div className="day1-step-dot" />
              <span className="day1-step-label">{ver.name}</span>
            </div>
            {i < VERSIONS.length - 1 && (
              <div className={`day1-step-line ${version > ver.v ? 'done' : ''}`} />
            )}
          </React.Fragment>
        ))}
      </div>

      {/* Панель управления */}
      <div className="day1-panel">
        <div className="day1-version-info">Текущая версия</div>
        <div className="day1-version-name">{current.name}</div>

        <div className="day1-buttons">
          {version < 3 && (
            <button className="day1-update-btn" onClick={updateSystem} disabled={loading}>
              {loading ? '⟳ Обновление...' : `↑ Обновить систему`}
            </button>
          )}
          <button className="day1-end-btn" onClick={endDay}>
            {version === 3 ? '✓ Завершить кейс' : '→ Продолжить без обновления'}
          </button>
        </div>

        {loading && (
          <div className="day1-loading-bar">
            <div className="day1-loading-fill" />
          </div>
        )}
      </div>

      {error && (
        <div className="day1-modal-overlay">
          <div className="day1-modal">
            <div className="day1-modal-icon">⚠️</div>
            <div className="day1-modal-title">Небезопасно</div>
            <p className="day1-modal-text">{error}</p>
            <button className="day1-modal-btn" onClick={() => setError('')}>← Назад</button>
          </div>
        </div>
      )}
    </div>
  );
};

export default Case1Desktop;
