// Pet MBTI — Test page. Exports: TestPage
const TC = window.PM_C;
const TS = window.PM_STR;
const { PawIcon, Btn } = window;

// 7-point scale, 16p-style: green agree (left) → neutral → orange disagree (right)
// value maps: strongly agree +3 ... strongly disagree -3
const SCALE = [
  { v: 3,  d: 46, col: '#6FBF73', ring: '#6FBF73' },
  { v: 2,  d: 38, col: '#8FCB7E', ring: '#8FCB7E' },
  { v: 1,  d: 30, col: '#B7D488', ring: '#B7D488' },
  { v: 0,  d: 26, col: '#CFC3AE', ring: '#B9A88E' },
  { v: -1, d: 30, col: '#F0C57E', ring: '#EAB765' },
  { v: -2, d: 38, col: '#EFA765', ring: '#EFA765' },
  { v: -3, d: 46, col: '#EC8A55', ring: '#EC8A55' },
];

function ScaleRow({ value, onPick }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 'clamp(8px, 2.4vw, 20px)' }}>
      <span className="pm-scale-label" style={{ fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 15, color: '#5CA362', width: 62, textAlign: 'right' }}>{TS.agree}</span>
      {SCALE.map((s) => {
        const on = value === s.v;
        return (
          <button key={s.v} onClick={() => onPick(s.v)} aria-label={'value ' + s.v} className="pm-dot"
            style={{ width: s.d, height: s.d, borderRadius: 999, cursor: 'pointer', flexShrink: 0,
              background: on ? s.col : 'transparent',
              border: `2.5px solid ${on ? s.col : s.ring}`,
              boxShadow: on ? `0 6px 16px ${s.col}66` : 'none',
              transition: 'transform .14s ease, background .14s ease, box-shadow .14s ease', padding: 0 }} />
        );
      })}
      <span className="pm-scale-label" style={{ fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 15, color: '#D07E42', width: 62, textAlign: 'left' }}>{TS.disagree}</span>
    </div>
  );
}

function TestPage({ answers, onAnswer, onFinish, onHome, index, setIndex }) {
  const Q = window.PM_QUESTIONS;
  const total = Q.length;
  const q = Q[index];
  const answered = answers.filter((a) => a !== null && a !== undefined).length;
  const progress = answered / total;
  const C2 = TC;

  const pick = (v) => {
    onAnswer(index, v);
    // auto-advance
    setTimeout(() => {
      if (index + 1 < total) setIndex(index + 1);
    }, 260);
  };

  const allDone = answers.length === total && answers.every((a) => a !== null && a !== undefined);

  return (
    <main style={{ minHeight: 'calc(100vh - 68px)', display: 'flex', flexDirection: 'column' }}>
      {/* progress */}
      <div style={{ position: 'sticky', top: 68, zIndex: 20, background: C2.bg, padding: '0 0 2px' }}>
        <div style={{ height: 8, background: C2.line }}>
          <div style={{ height: '100%', width: (progress * 100) + '%', background: `linear-gradient(90deg, ${C2.paw}, ${C2.pawDeep})`,
            borderRadius: '0 999px 999px 0', transition: 'width .4s cubic-bezier(.2,.7,.3,1)' }} />
        </div>
      </div>

      {/* counter — spans the nav width so Home / 1·12 line up under Paws / Take the test */}
      <div style={{ maxWidth: 1160, width: '100%', margin: '0 auto', padding: '18px 28px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <button onClick={() => (index > 0 ? setIndex(index - 1) : onHome())} className="pm-back" style={{
            border: 'none', background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6,
            fontFamily: "'Nunito', sans-serif", fontWeight: 800, fontSize: 14, color: C2.muted, padding: 6 }}>
            ← {index > 0 ? TS.back : TS.home}
          </button>
          <span style={{ fontFamily: "'Fredoka', sans-serif", fontWeight: 600, fontSize: 15, color: C2.muted }}>
            {index + 1} <span style={{ color: C2.line }}>/</span> {total}
          </span>
        </div>
      </div>

      <div style={{ flex: 1, maxWidth: 760, width: '100%', margin: '0 auto', padding: '4px 24px 40px',
        display: 'flex', flexDirection: 'column' }}>
        {/* question */}
        <div key={index} className="pm-qcard pm-pop" style={{ marginTop: 22, flex: 1, display: 'flex', flexDirection: 'column',
          justifyContent: 'center', alignItems: 'center', textAlign: 'center', minHeight: 260 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, background: C2.panelAlt, borderRadius: 999,
            padding: '6px 15px', marginBottom: 22 }}>
            <PawIcon size={15} color={C2.paw} />
            <span style={{ fontFamily: "'Nunito', sans-serif", fontWeight: 800, fontSize: 12.5, color: C2.ink2, letterSpacing: '.4px' }}>{TS.thinking}</span>
          </div>
          <h2 style={{ margin: 0, fontFamily: "'Fredoka', sans-serif", fontWeight: 500, fontSize: 'clamp(24px, 4.2vw, 36px)',
            lineHeight: 1.22, color: C2.ink, maxWidth: 620, textWrap: 'balance' }}>
            “{q.text}”
          </h2>
        </div>

        {/* scale */}
        <div style={{ marginTop: 30 }}>
          <ScaleRow value={answers[index]} onPick={pick} />
        </div>

        {/* footer nav */}
        <div style={{ marginTop: 34, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12, minHeight: 52 }}>
          {allDone
            ? <Btn size="lg" onClick={onFinish} color={C2.pawDeep}>{TS.seeType} <span style={{ fontSize: 22, marginTop: -2 }}>→</span></Btn>
            : (index + 1 < total
                ? <span style={{ fontFamily: "'Nunito', sans-serif", fontWeight: 700, fontSize: 13.5, color: C2.muted }}>
                    {answers[index] != null ? TS.nextOne : TS.pickScale}
                  </span>
                : <Btn size="lg" onClick={onFinish} color={C2.pawDeep} disabled={answers[index] == null}>{TS.seeType} →</Btn>)}
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { TestPage });