// screens-aptitude.jsx — Leadership aptitude test (SJT scale + timed reasoning)
const APT_SEC = 35; // detik per soal Part B

function AptitudeScreen({ t, lang, state, setState, onNext, layout }) {
  const D = window.APPDATA;

  const [phase, setPhase] = useState("intro"); // intro | sjt | reason
  const sjtAns = state.aptSjtAns || {};        // {idx: 1..5}
  const reAns = state.aptReAns || {};          // {idx: optIdx}
  const [warn, setWarn] = useState(false);
  const [rIdx, setRIdx] = useState(0);
  const [left, setLeft] = useState(APT_SEC);

  // Generate seed once on mount (also clears prior answers)
  useEffect(() => {
    const seed = Math.floor(Math.random() * 0xFFFFFFFF);
    setState((s) => ({ ...s, aptSjtAns: {}, aptReAns: {}, aptSeed: seed }));
  }, []);

  const seed = state.aptSeed || 1;
  const SJT = useMemo(() => seededShuffle(D.aptitudeSJT.map((_, i) => i), seed).map(i => D.aptitudeSJT[i]), [seed]);
  const RE  = useMemo(() => seededShuffle(D.aptitudeReason.map((_, i) => i), seed ^ 0xABCD1234).map(i => D.aptitudeReason[i]), [seed]);

  // Reset timer setiap ganti soal Part B
  useEffect(() => { if (phase === "reason") setLeft(APT_SEC); }, [rIdx]);

  // Countdown per soal Part B
  useEffect(() => {
    if (phase !== "reason") return;
    if (left <= 0) {
      if (rIdx < RE.length - 1) { setWarn(false); setRIdx((i) => i + 1); }
      else finish();
      return;
    }
    const tm = setTimeout(() => setLeft((l) => l - 1), 1000);
    return () => clearTimeout(tm);
  }, [phase, left]);

  function rate(i, v) {
    setWarn(false);
    setState((s) => ({ ...s, aptSjtAns: { ...(s.aptSjtAns || {}), [i]: v } }));
  }
  function answerRe(i, oi) {
    setState((s) => ({ ...s, aptReAns: { ...(s.aptReAns || {}), [i]: oi } }));
  }

  function toReason() {
    if (Object.keys(sjtAns).length < SJT.length) { setWarn(true); return; }
    setPhase("reason");
    window.scrollTo({ top: 0, behavior: "smooth" });
  }

  function finish() {
    // SJT competency: closeness to ideal (1 or 5)
    let pts = 0;
    SJT.forEach((q, i) => {
      const v = sjtAns[i];
      if (v !== undefined) pts += 4 - Math.abs(v - q.ideal); // 0..4
    });
    const sjtScore = Math.round((pts / (SJT.length * 4)) * 100);
    let correct = 0;
    RE.forEach((q, i) => { if (reAns[i] === q.a) correct++; });
    const reScore = Math.round((correct / RE.length) * 100);
    const overall = Math.round((sjtScore + reScore) / 2);
    const bands = D.aptitudeBands[lang];
    const band = bands.find((b) => overall >= b.min) || bands[bands.length - 1];
    setState((s) => ({ ...s, aptResult: overall, aptSjtScore: sjtScore, aptReScore: reScore, aptReCorrect: correct, aptBand: band.label, aptBandNote: band.note }));
    onNext({ aptResult: overall, aptSjtScore: sjtScore, aptReScore: reScore, aptBand: band.label, aptBandNote: band.note });
  }

  function submitConfirm() { if (confirm(t.iqConfirm)) finish(); }

  const fullbleed = layout === "fullbleed";
  const wrapClass = fullbleed ? "col-mid fadein" : "col-mid card card-pad fadein";

  // INTRO
  if (phase === "intro") {
    return (
      <div className="center-wrap">
        <div className="col-narrow card card-pad fadein tcenter">
          <div className="done-check" style={{ background: "var(--brand-soft)", color: "var(--brand)" }}>
            <Icon name="shield" size={40} />
          </div>
          <div className="eyebrow">{t.aptEyebrow}</div>
          <h1 className="title">{t.aptTitle}</h1>
          <p className="sub">{t.aptSub}</p>
          <div className="banner ok" style={{ marginTop: 16, textAlign: "left", background: "var(--brand-soft)", color: "var(--brand)", borderColor: "var(--brand-ring)" }}>
            <span className="bi"><Icon name="briefcase" size={18} /></span>
            <span>{t.aptWhy}</span>
          </div>
          <div style={{ textAlign: "left", display: "flex", flexDirection: "column", gap: 12, margin: "18px 0 8px" }}>
            {[t.aptInstr1, t.aptInstr2, t.aptInstr3].map((x, i) => (
              <div key={i} style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 14.5 }}>
                <span style={{ flex: "0 0 auto", width: 24, height: 24, borderRadius: 7, background: "var(--brand-soft)", color: "var(--brand)", display: "grid", placeItems: "center" }}>
                  <Icon name="check" size={14} />
                </span>{x}
              </div>
            ))}
          </div>
          <Button block lg iconR="arrow" onClick={() => setPhase("sjt")} style={{ marginTop: 16 }}>{t.aptStart}</Button>
        </div>
      </div>
    );
  }

  // PART A — SJT
  if (phase === "sjt") {
    const likertLabels = [t.likert1, t.likert2, t.likert3, t.likert4, t.likert5];
    return (
      <div className="center-wrap">
        <div className={wrapClass}>
          <div className="eyebrow">{t.aptEyebrow}</div>
          <h1 className="title" style={{ margin: "8px 0 0" }}>{t.aptTitle}</h1>
          <div className="apt-partbar" style={{ marginTop: 16 }}>
            <span className="pn">A</span>
            <span><span className="pt" style={{ display: "block" }}>{t.aptPartA}</span><span className="ps">{t.aptPartASub}</span></span>
            <span className="grow" style={{ flex: 1 }} />
            <span className="disc-prog">{Object.keys(sjtAns).length}/{SJT.length}</span>
          </div>

          {SJT.map((q, i) => (
            <div className={`sjt-card ${sjtAns[i] !== undefined ? "answered" : ""}`} key={i}>
              <div className="sjt-num">{t.aptScenario} {i + 1}/{SJT.length}</div>
              <div className="sjt-scn"><span className="ic"><Icon name="briefcase" size={16} /></span><span>{q.s[lang]}</span></div>
              <div className="sjt-act"><span className="tag">{t.aptAction}</span>{q.a[lang]}</div>
              <div className="likert">
                {[1, 2, 3, 4, 5].map((v) => (
                  <button key={v} className={`lk ${sjtAns[i] === v ? "on" : ""}`} onClick={() => rate(i, v)}>{v}</button>
                ))}
              </div>
              <div className="likert-ends"><span>{t.likert1}</span><span>{t.likert5}</span></div>
              <div className="likert-picked">{sjtAns[i] !== undefined ? likertLabels[sjtAns[i] - 1] : ""}</div>
            </div>
          ))}

          {warn && <div className="banner err-banner" style={{ marginTop: 4 }}><span className="bi"><Icon name="x" size={18} /></span><span>{t.aptAnswerAll}</span></div>}

          <div className="flexbtns">
            <span className="grow" />
            <Button lg iconR="arrow" onClick={toReason}>{t.aptToA}</Button>
          </div>
        </div>
      </div>
    );
  }

  // PART B — Reasoning (timed per soal)
  const q = RE[rIdx];
  const answered = Object.keys(reAns).length;
  const timerColor = left <= 9 ? "var(--danger)" : left <= 17 ? "#d97706" : "var(--brand)";
  const timerPct   = (left / APT_SEC) * 100;

  function nextRe() {
    setWarn(false);
    if (rIdx < RE.length - 1) setRIdx((i) => i + 1);
    else finish();
  }

  return (
    <div className="center-wrap">
      <div className={wrapClass}>
        <div className="apt-partbar" style={{ marginBottom: 16 }}>
          <span className="pn">B</span>
          <span><span className="pt" style={{ display: "block" }}>{t.aptPartB}</span><span className="ps">{t.aptReasoning}</span></span>
        </div>
        <div className="iq-bar" style={{ top: 70 }}>
          <div className="iq-track"><div className="iq-fill" style={{ width: ((rIdx + 1) / RE.length) * 100 + "%" }} /></div>
          <span className="disc-prog">{answered}/{RE.length}</span>
        </div>

        <div className="eyebrow" style={{ display:"flex", alignItems:"center", justifyContent:"space-between" }}>
          <span>{t.question} {rIdx + 1} / {RE.length}</span>
          <span style={{ display:"flex", alignItems:"center", gap:6, fontWeight:700, color:timerColor, fontSize:15 }}>
            <svg width="28" height="28" viewBox="0 0 36 36" style={{ transform:"rotate(-90deg)" }}>
              <circle cx="18" cy="18" r="15" fill="none" stroke="var(--line)" strokeWidth="3"/>
              <circle cx="18" cy="18" r="15" fill="none" stroke={timerColor} strokeWidth="3"
                strokeDasharray={`${2*Math.PI*15}`}
                strokeDashoffset={`${2*Math.PI*15*(1-timerPct/100)}`}
                style={{ transition:"stroke-dashoffset 1s linear, stroke .3s" }}/>
            </svg>
            {left}s
          </span>
        </div>
        <h2 className="iq-q" style={{ marginTop: 8 }}>{q.q[lang]}</h2>

        {q.figs && (
          <div className="iq-figs">
            {q.figs.map((fch, i) => <div className="iq-fig" key={i}>{fch}</div>)}
          </div>
        )}

        <div className="iq-opts">
          {q.opts.map((o, oi) => {
            const label = typeof o === "string" ? o : o[lang];
            return (
              <button key={oi} className={`iq-opt ${reAns[rIdx] === oi ? "on" : ""}`} onClick={() => answerRe(rIdx, oi)}>
                <span className="ol">{String.fromCharCode(65 + oi)}</span>{label}
              </button>
            );
          })}
        </div>

        <div className="iq-nums">
          {RE.map((_, i) => (
            <button key={i} className={`iq-num ${i === rIdx ? "cur" : ""} ${reAns[i] !== undefined ? "ans" : ""}`} disabled style={{ cursor: "default" }}>
              {i + 1}
            </button>
          ))}
        </div>

        <div className="flexbtns">
          <span className="grow" />
          {rIdx < RE.length - 1
            ? <Button iconR="arrow" onClick={nextRe}>{t.iqNext}</Button>
            : <Button iconR="check" onClick={submitConfirm}>{t.aptFinish}</Button>}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AptitudeScreen });