// Test screen — 7 questions. Score = how нишевый you are.
const { useState: useStateQ, useMemo: useMemoQ } = React;

const QUESTIONS = [
  {
    q: "что в твоём плейлисте в топе за последние 30 дней?",
    opts: [
      { t: "что-то с радио / чарта spotify", v: 0 },
      { t: "то, что слушают все друзья", v: 20 },
      { t: "артист с ~50к слушателей", v: 70 },
      { t: "рип с soundcloud 2018, автор удалился", v: 100 },
    ],
  },
  {
    q: "твой образ на выход в пятницу вечером",
    opts: [
      { t: "джинсы zara + белые кроссы", v: 0 },
      { t: "oversize худи, техника спорт-шик", v: 30 },
      { t: "винтаж, кожа, цепь, хвост", v: 75 },
      { t: "чёрное на чёрном, balaclava, крест", v: 100 },
    ],
  },
  {
    q: "где ты сидишь дольше всего",
    opts: [
      { t: "tiktok / reels / shorts", v: 0 },
      { t: "instagram + youtube", v: 25 },
      { t: "telegram-каналы и pinterest", v: 75 },
      { t: "discord-сервера и rym / last.fm", v: 100 },
    ],
  },
  {
    q: "как ты относишься к тренду, когда его все повторяют",
    opts: [
      { t: "обожаю, снимаю тоже", v: 0 },
      { t: "норм, если кайфово", v: 30 },
      { t: "уже выгорел(а), раздражает", v: 70 },
      { t: "я слышал(а) это два года назад", v: 100 },
    ],
  },
  {
    q: "твой стандартный заказ в кофейне",
    opts: [
      { t: "латте карамельный", v: 0 },
      { t: "флэт или капучино", v: 40 },
      { t: "фильтр / v60, чёрный", v: 80 },
      { t: "не пью кофе с сетевых, только у знакомого баристы", v: 100 },
    ],
  },
  {
    q: "фото в профиле",
    opts: [
      { t: "селфи в зеркало", v: 0 },
      { t: "хорошее фото с друзьями", v: 30 },
      { t: "размытый кадр, спина, стоп-кадр с vhs", v: 85 },
      { t: "нет аватара / чёрный квадрат / ангел плачет", v: 100 },
    ],
  },
  {
    q: "что ты ответишь незнакомцу на вопрос \"какую музыку слушаешь?\"",
    opts: [
      { t: "\"всё подряд\"", v: 10 },
      { t: "\"рэп, попсу\"", v: 25 },
      { t: "\"всё равно не знаешь\"", v: 85 },
      { t: "отвернусь молча и уйду", v: 100 },
    ],
  },
];

function Test({ onDone, setNicheScore }) {
  const [idx, setIdx] = useStateQ(0);
  const [answers, setAnswers] = useStateQ([]);
  const [transitioning, setTransitioning] = useStateQ(false);

  const q = QUESTIONS[idx];
  const progress = (idx / QUESTIONS.length) * 100;

  const pick = (opt) => {
    if (transitioning) return;
    TP_Audio.play808(65 + opt.v * 0.4, 0.25, 0.25);
    TP_Audio.playCrackle();
    setTransitioning(true);
    const next = [...answers, opt.v];
    setAnswers(next);
    setTimeout(() => {
      if (idx + 1 >= QUESTIONS.length) {
        const score = Math.round(next.reduce((a, b) => a + b, 0) / next.length);
        setNicheScore(score);
        onDone(score);
      } else {
        setIdx(idx + 1);
        setTransitioning(false);
      }
    }, 420);
  };

  return (
    <div className="screen" style={{
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
      maxWidth: 1100, margin: '0 auto', position: 'relative',
      padding: '100px 40px 80px',
      opacity: transitioning ? 0.3 : 1,
      transition: 'opacity 0.3s',
    }}>
      <BgVideo opacity={0.22} blur={2} />
      <CrossesBg count={15} seed={idx + 1} />

      {/* Top meta */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        marginBottom: 30, position: 'relative', zIndex: 2,
      }}>
        <div className="mono" style={{ color: 'var(--lavender)' }}>
          ЭКЗАМЕН · QUESTION {String(idx + 1).padStart(2, '0')} / {String(QUESTIONS.length).padStart(2, '0')}
        </div>
        <div className="mono" style={{ color: 'var(--ash)' }}>
          соври — узнаем
        </div>
      </div>

      <div className="progress" style={{ marginBottom: 60, position: 'relative', zIndex: 2 }}>
        <div className="progress-fill" style={{ width: `${progress}%` }} />
      </div>

      <div style={{ position: 'relative', zIndex: 2 }}>
        <div style={{
          fontFamily: 'var(--f-gothic)',
          fontWeight: 300,
          fontSize: 'clamp(36px, 5.5vw, 72px)',
          lineHeight: 1.05,
          color: 'var(--bone)',
          marginBottom: 50,
          maxWidth: 900,
          textWrap: 'pretty',
        }}>
          <span className="cross-text" style={{ color: 'var(--lavender)', marginRight: 12 }}>{'✟︎'}</span>
          {q.q}
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, maxWidth: 760 }}>
          {q.opts.map((opt, i) => (
            <OptionRow key={`${idx}-${i}`} opt={opt} i={i} onPick={pick} />
          ))}
        </div>
      </div>
    </div>
  );
}

function OptionRow({ opt, i, onPick }) {
  const [hover, setHover] = useStateQ(false);
  const letters = ['A', 'B', 'C', 'D', 'E'];
  return (
    <div
      onMouseEnter={() => { setHover(true); TP_Audio.playHover(); }}
      onMouseLeave={() => setHover(false)}
      onClick={() => onPick(opt)}
      style={{
        border: `1px solid ${hover ? 'var(--lavender)' : 'rgba(201,168,255,0.15)'}`,
        padding: 'clamp(14px, 2.5vw, 20px) clamp(16px, 3vw, 24px)',
        display: 'flex',
        alignItems: 'center',
        gap: 'clamp(12px, 2vw, 24px)',
        background: hover ? 'rgba(58,26,92,0.35)' : 'transparent',
        transition: 'all 0.2s',
        transform: hover ? 'translateX(8px)' : 'none',
        fontFamily: 'var(--f-serif)',
        fontSize: 'clamp(16px, 2.4vw, 22px)',
        color: hover ? 'var(--white)' : 'var(--bone)',
        position: 'relative',
      }}
    >
      <span className="mono" style={{
        color: hover ? 'var(--blood)' : 'var(--ash)',
        fontSize: 14,
        minWidth: 24,
      }}>
        {letters[i]}
      </span>
      <span style={{ flex: 1, textWrap: 'pretty' }}>{opt.t}</span>
      <span style={{
        color: 'var(--lavender)',
        fontSize: 20,
        opacity: hover ? 1 : 0,
        transform: hover ? 'translateX(0)' : 'translateX(-10px)',
        transition: 'all 0.2s',
      }}>→</span>
    </div>
  );
}

window.Test = Test;