// Result screen — shows niche score + verdict
const { useState: useStateR, useEffect: useEffectR, useRef: useRefR } = React;

const PAPA_URL = window.PAPA_TRACK_URL || 'assets/papa.mp3';

function Result({ score, onContinue }) {
  const [animScore, setAnimScore] = useStateR(0);
  const [revealed, setRevealed] = useStateR(false);
  const [playing, setPlaying] = useStateR(false);
  const [autoplaySrc, setAutoplaySrc] = useStateR(null);
  const audioRef = useRefR(null);

  const isMax = score >= 100;

  useEffectR(() => {
    let i = 0;
    const target = score;
    const step = () => {
      i += Math.max(1, Math.floor((target - i) / 8) + 1);
      if (i >= target) {
        setAnimScore(target);
        setRevealed(true);
        TP_Audio.play808(48, 1.2, 0.35);
        TP_Audio.playCrackle();
        if (target >= 100) {
          // Set src → autoPlay attribute on <audio> triggers playback
          setTimeout(() => {
            setAutoplaySrc(PAPA_URL);
            // belt-and-suspenders: also try programmatic play
            setTimeout(() => {
              if (audioRef.current) {
                audioRef.current.volume = 0.75;
                audioRef.current.play().then(() => setPlaying(true)).catch((e) => {
                  console.warn('autoplay blocked:', e);
                });
              }
            }, 100);
          }, 400);
        }
      } else {
        setAnimScore(i);
        if (i % 7 === 0) TP_Audio.playClick();
        setTimeout(step, 40);
      }
    };
    setTimeout(step, 400);
    return () => {
      if (audioRef.current) { audioRef.current.pause(); audioRef.current.currentTime = 0; }
    };
  }, [score]);

  const toggle = () => {
    if (!audioRef.current) return;
    if (!autoplaySrc) setAutoplaySrc(PAPA_URL);
    if (audioRef.current.paused) {
      audioRef.current.play().then(() => setPlaying(true)).catch(() => {});
    } else {
      audioRef.current.pause();
      setPlaying(false);
    }
  };

  const verdict = getVerdict(score);

  return (
    <div className="screen" style={{
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
      alignItems: 'center', padding: '100px 40px', position: 'relative',
      textAlign: 'center',
    }}>
      <CrossesBg count={40} seed={score} />

      <div className="mono" style={{ color: 'var(--lavender)', marginBottom: 20, position: 'relative', zIndex: 2 }}>
        ВЕРДИКТ ВЫНЕСЕН · SENTENCE PASSED
      </div>

      <div style={{ position: 'relative', zIndex: 2, display: 'flex', alignItems: 'baseline', gap: 20 }}>
        <div style={{
          fontFamily: 'var(--f-gothic)',
          fontWeight: 300,
          fontSize: 'clamp(180px, 26vw, 420px)',
          lineHeight: 0.85,
          color: score > 60 ? 'var(--lavender)' : 'var(--blood)',
          textShadow: `0 0 80px ${score > 60 ? 'rgba(201,168,255,0.5)' : 'rgba(220,60,60,0.5)'}`,
        }}>
          {animScore}
        </div>
        <div style={{
          fontFamily: 'var(--f-gothic)',
          fontWeight: 300,
          fontSize: 'clamp(60px, 8vw, 120px)',
          color: 'var(--ash)',
        }}>%</div>
      </div>

      <div className="mono" style={{ color: 'var(--ash)', marginTop: -10, marginBottom: 30, position: 'relative', zIndex: 2 }}>
        NICHE.INDEX — шкала темноты
      </div>

      <div style={{
        width: 'min(720px, 90%)',
        position: 'relative', zIndex: 2,
        marginBottom: 50,
      }}>
        <div className="progress" style={{ height: 6 }}>
          <div className="progress-fill" style={{ width: `${animScore}%` }} />
        </div>
        <div style={{
          display: 'flex', justifyContent: 'space-between',
          marginTop: 10, fontSize: 11, fontFamily: 'var(--f-mono)',
          color: 'var(--ash)', letterSpacing: '0.15em', textTransform: 'uppercase',
        }}>
          <span>0 · нормис терминальный</span>
          <span>50 · в пути</span>
          <span>100 · принц</span>
        </div>
      </div>

      <div style={{
        opacity: revealed ? 1 : 0,
        transition: 'opacity 1s',
        position: 'relative', zIndex: 2,
        maxWidth: 820,
      }}>
        <h2 className="glitch" data-text={verdict.title} style={{
          color: 'var(--bone)',
          marginBottom: 24,
        }}>{verdict.title}</h2>

        <p style={{
          fontFamily: 'var(--f-serif)',
          fontStyle: 'italic',
          fontSize: 'clamp(20px, 2.2vw, 28px)',
          lineHeight: 1.5,
          color: 'var(--bone)',
          marginBottom: 40,
          textWrap: 'pretty',
        }}>
          {verdict.text}
        </p>

        <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="btn blood" onClick={() => { TP_Audio.play808(42, 0.4, 0.3); onContinue(); }}>
            открыть доктрину →
          </button>
          <button className="btn" onClick={() => { TP_Audio.playClick(); location.reload(); }}>
            пройти заново
          </button>
        </div>

        {isMax && (
          <div style={{
            marginTop: 50,
            padding: 24,
            border: '1px solid var(--blood)',
            background: 'linear-gradient(180deg, rgba(58,26,92,0.4), rgba(10,5,18,0.6))',
            position: 'relative',
            animation: 'blink 2s infinite',
          }}>
            <div className="mono" style={{
              position: 'absolute', top: -10, left: 20,
              background: 'var(--void)', padding: '0 12px',
              color: 'var(--blood)', fontSize: 10,
            }}>
              {'✟︎'} HIDDEN TRACK UNLOCKED {'✟︎'}
            </div>
            <div style={{
              fontFamily: 'var(--f-gothic)',
              fontWeight: 300,
              fontSize: 28, color: 'var(--lavender)', marginBottom: 6,
            }}>
              тёмный принц, tewiq, FORTUNA 812
            </div>
            <div style={{
              fontFamily: 'var(--f-mono)', fontSize: 12, color: 'var(--ash)',
              letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 14,
            }}>
              — ПАПА —
            </div>
            <button
              className="btn blood"
              onClick={toggle}
              style={{ fontSize: 11 }}
            >
              {playing ? '■ пауза' : '▶ слушать'}
            </button>
          </div>
        )}
      </div>

      {/* Audio element — mounted at 100, autoplay when src is set */}
      {isMax && (
        <audio
          ref={audioRef}
          src={autoplaySrc || undefined}
          autoPlay
          preload="auto"
          onPlay={() => setPlaying(true)}
          onPause={() => setPlaying(false)}
          onEnded={() => setPlaying(false)}
        />
      )}

      {/* corner stamps */}
      <div className="mono" style={{
        position: 'absolute', top: 60, right: 40,
        color: 'var(--blood)', fontSize: 10, opacity: 0.6,
        border: '1px solid var(--blood)', padding: '6px 10px',
        transform: 'rotate(8deg)',
      }}>
        STAMPED · {new Date().getFullYear()}
      </div>
    </div>
  );
}

function getVerdict(score) {
  if (score < 20) return {
    title: "ты — пока тень массы",
    text: "ты выкладываешь stories с конфетти, ставишь лайки на мемы с 2М просмотров. но ты здесь, значит надежда есть. доктрина примет тебя. пересоберись. перестань доверять алгоритмам — они не знают тебя, они знают среднего."
  };
  if (score < 45) return {
    title: "ты трогаешь дверь",
    text: "нормис на 60%, но слышишь биты, которых другие не слышат. уже купил что-то винтажное, уже молчишь, когда играет чей-то плейлист. хороший знак. теперь — перестань притворяться."
  };
  if (score < 70) return {
    title: "ты в переходе",
    text: "полу-принц. у тебя уже есть пара людей, с которыми не стыдно говорить про музыку. одежда — не вопрос. но ты ещё оборачиваешься на чужое мнение. оборачиваться — главный грех нишевого."
  };
  if (score < 90) return {
    title: "принц без короны",
    text: "почти. ты знаешь артистов, которых не знают твои друзья. у тебя свой почерк. но ты ещё слегка делишься этим — чтобы тебя оценили. настоящий нишевый не делится. он просто есть."
  };
  return {
    title: "ты — и есть тёмный принц",
    text: "ты уже пришёл, читаешь этот гайд из вежливости. у тебя нет tiktok, ты не объясняешь свой вкус. но зачем ты здесь? — наверное, проверить, что мы всё делаем правильно. проходи, всё готово."
  };
}

window.Result = Result;