/* eslint-disable */
// Scenario player (Module 6), commitment picker (Module 7), comparison & completion.

const { useState: sUseState, useEffect: sUseEffect } = React;

/* ==================================================================
   SCENARIO PLAYER — Module 6
================================================================== */
function ScenarioPlayer({ scenarios }) {
  const [idx, setIdx] = sUseState(0);
  const [picks, setPicks] = sUseState({});
  const [phase, setPhase] = sUseState("choose"); // choose | reveal

  const cur = scenarios[idx];
  const myPick = picks[cur.id];
  const myOpt = cur.options.find((o) => o.id === myPick);

  function pick(id) {
    if (phase === "reveal") return;
    setPicks((p) => ({ ...p, [cur.id]: id }));
  }
  function reveal() {
    if (!myPick) return;
    setPhase("reveal");
  }
  function next() {
    if (idx < scenarios.length - 1) {
      setIdx(idx + 1);
      setPhase("choose");
      window.scrollTo({ top: document.querySelector(".scenario-player").offsetTop - 80, behavior: "smooth" });
    }
  }
  function prev() {
    if (idx > 0) {
      setIdx(idx - 1);
      setPhase(picks[scenarios[idx - 1].id] ? "reveal" : "choose");
    }
  }

  const bestCount = Object.entries(picks).filter(([k, v]) => {
    const sc = scenarios.find((s) => s.id === k);
    const o = sc?.options.find((o) => o.id === v);
    return o?.quality === "best";
  }).length;

  return (
    <div className="scenario-player">
      <div className="scenario-tabs">
        {scenarios.map((s, i) => (
          <button
            key={s.id}
            className={`scenario-tab ${i === idx ? "active" : ""} ${picks[s.id] ? "done" : ""}`}
            onClick={() => { setIdx(i); setPhase(picks[s.id] ? "reveal" : "choose"); }}
          >
            <span className="mono">{String(i + 1).padStart(2, "0")}</span>
            <span className="dot"></span>
          </button>
        ))}
        <div style={{ flex: 1 }}></div>
        <span className="mono" style={{ fontSize: 11, color: "var(--fg-mute)", letterSpacing: "0.18em" }}>
          {idx + 1} / {scenarios.length} · {bestCount} BEST
        </span>
      </div>

      <div className="scenario-card">
        <div className="scenario-head">
          <div>
            <span className="eyebrow">SCENARIO {String(idx + 1).padStart(2, "0")}</span>
            <h3 className="display display-md" style={{ fontSize: 36, marginTop: 8 }}>{cur.title}</h3>
          </div>
          <ImgSlot label={`scenario · ${cur.id}`} src={cur.image} aspect="4 / 3" style={{ width: 260 }} />
        </div>

        <p className="scenario-setup">{cur.setup}</p>

        <div className="scenario-options">
          <span className="eyebrow eyebrow-dim">WHAT WOULD YOU DO?</span>
          {cur.options.map((o) => {
            const active = myPick === o.id;
            const revealed = phase === "reveal";
            let cls = "";
            if (revealed) {
              if (o.quality === "best") cls = "best";
              else if (active && o.quality !== "best") cls = "missed";
              else if (o.quality === "poor") cls = "poor";
              else cls = "ok";
            } else if (active) cls = "picked";
            return (
              <button key={o.id} className={`scenario-opt ${cls}`} onClick={() => pick(o.id)}>
                <span className="mcq-letter mono">{o.id.toUpperCase()}</span>
                <span style={{ flex: 1 }}>{o.text}</span>
                {revealed && o.quality === "best" && <span className="mcq-mark">★ BEST</span>}
                {revealed && active && o.quality !== "best" && <span className="mcq-mark">YOUR PICK</span>}
              </button>
            );
          })}
        </div>

        {phase === "reveal" && (
          <div className="scenario-reveal fade-up">
            <div className="reveal-block">
              <span className="eyebrow">WHAT GOOD LOOKS LIKE</span>
              <p>{cur.goodLooks}</p>
            </div>
            <div className="reveal-block reveal-block-accent">
              <span className="eyebrow">WHY IT WORKS</span>
              <p>{cur.whyItWorks}</p>
            </div>
          </div>
        )}

        <div className="scenario-controls">
          <button className="btn btn-ghost btn-sm" disabled={idx === 0} onClick={prev}>
            ← PREV
          </button>
          {phase === "choose" ? (
            <button className="btn btn-primary" disabled={!myPick} onClick={reveal}>
              REVEAL THE ANSWER <span className="arr">→</span>
            </button>
          ) : idx < scenarios.length - 1 ? (
            <button className="btn btn-primary" onClick={next}>
              NEXT SCENARIO <span className="arr">→</span>
            </button>
          ) : (
            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--accent)" }}>
              ALL SIX COMPLETE · {bestCount} BEST RESPONSES
            </span>
          )}
        </div>
      </div>
    </div>
  );
}

/* ==================================================================
   COMMITMENT PICKER — Module 7
================================================================== */
function CommitmentPicker() {
  const data = window.CARE_CODE_DATA;
  const [picked, setPicked] = sUseState(
    () => Number(localStorage.getItem("cc-commitment")) || null
  );
  const [name, setName] = sUseState(localStorage.getItem("cc-name") || "");
  const [signed, setSigned] = sUseState(!!localStorage.getItem("cc-signed"));

  sUseEffect(() => {
    if (picked != null) {
      localStorage.setItem("cc-commitment", String(picked));
      // Mirror to central server (admin view)
      try {
        const state = JSON.parse(localStorage.getItem("carecode-state-v1") || "{}");
        const empNo = state?.user?.employeeNumber;
        if (empNo && window.CareCodeAPI) {
          window.CareCodeAPI.saveResults(empNo, {
            commitment: data.commitments[picked] || null,
          });
        }
      } catch (e) {}
    }
  }, [picked]);
  sUseEffect(() => {
    if (name) localStorage.setItem("cc-name", name);
  }, [name]);

  function sign() {
    localStorage.setItem("cc-signed", "1");
    localStorage.setItem("cc-signed-date", new Date().toISOString());
    setSigned(true);
  }

  return (
    <div className="commit-picker">
      <span className="eyebrow">YOUR COMMITMENT · PICK ONE</span>
      <p className="lead" style={{ marginTop: 8, marginBottom: 24 }}>
        Read the list. Pick the one that is the biggest change for you — not the easiest.
      </p>

      <div className="commit-list">
        {data.commitments.map((c, i) => (
          <button
            key={i}
            className={`commit-row ${picked === i ? "picked" : ""}`}
            onClick={() => !signed && setPicked(i)}
            disabled={signed}
          >
            <span className="mono commit-num">{String(i + 1).padStart(2, "0")}</span>
            <span className="commit-text">{c}</span>
            <span className="commit-check">
              {picked === i ? "✓" : ""}
            </span>
          </button>
        ))}
      </div>

      <div className="commit-sign">
        <div className="commit-sign-row">
          <div className="commit-name">
            <span className="eyebrow eyebrow-dim">YOUR SIGNATURE</span>
            <input
              type="text"
              placeholder="Write your name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              disabled={signed}
            />
            <div className="commit-sign-line"></div>
          </div>
          <div className="commit-date">
            <span className="eyebrow eyebrow-dim">DATE</span>
            <span className="display display-sm" style={{ fontSize: 22 }}>
              {new Date().toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" })}
            </span>
          </div>
        </div>

        <button
          className="btn btn-primary btn-lg"
          disabled={picked == null || name.trim().length < 2 || signed}
          onClick={sign}
        >
          {signed ? "✓ COMMITMENT SIGNED" : "SIGN MY COMMITMENT"} {!signed && <span className="arr">→</span>}
        </button>
      </div>
    </div>
  );
}

/* ==================================================================
   COMPARISON SCREEN — Pre vs Post
================================================================== */
function ComparisonScreen({ pretest, posttest, onGo }) {
  const data = window.CARE_CODE_DATA;
  const qs = data.pretest.questions;

  const preScore = qs.filter((q) => q.kind === "mcq" && pretest?.[q.id] === q.correct).length;
  const postScore = qs.filter((q) => q.kind === "mcq" && posttest?.[q.id] === q.correct).length;
  const totalMcq = qs.filter((q) => q.kind === "mcq").length;

  const preScale = Number(pretest?.q5) || 0;
  const postScale = Number(posttest?.q5) || 0;
  const scaleDelta = postScale - preScale;

  return (
    <div className="comparison-screen">
      <section className="hero-section">
        <div className="container">
          <span className="eyebrow fade-up">HOW YOUR THINKING CHANGED</span>
          <h1 className="display display-xl fade-up d1" style={{ marginTop: 16 }}>
            BEFORE
            <span style={{ color: "var(--accent)" }}> · </span>
            AFTER
          </h1>
          <p className="lead fade-up d2" style={{ marginTop: 24, maxWidth: 640 }}>
            Same five questions, two hours apart. The difference is you.
          </p>
        </div>
      </section>

      <div className="container" style={{ paddingTop: 56, paddingBottom: 120 }}>
        {/* Scoreboard */}
        <div className="compare-scoreboard">
          <div className="compare-score-cell">
            <span className="eyebrow eyebrow-dim">PRE-TEST · MCQ</span>
            <div className="compare-big-num"><BigCounter target={preScore} value={0} />/{totalMcq}</div>
            <span className="mute body-sm">your baseline</span>
          </div>
          <div className="compare-divider">
            <div className="compare-divider-line"></div>
            <span className="mono">VS</span>
            <div className="compare-divider-line"></div>
          </div>
          <div className="compare-score-cell compare-score-cell-after">
            <span className="eyebrow">POST-TEST · MCQ</span>
            <div className="compare-big-num accent"><BigCounter target={postScore} value={0} />/{totalMcq}</div>
            <span className="accent body-sm">after the code</span>
          </div>
        </div>

        {/* Noticing scale */}
        <div className="compare-scale">
          <div className="compare-scale-head spread">
            <span className="eyebrow">NOTICING · 1 → 10</span>
            <span className="mono dim">
              {scaleDelta >= 0 ? "+" : ""}{scaleDelta} POINTS
            </span>
          </div>
          <div className="scale-rail">
            <div className="scale-marks">
              {Array.from({ length: 10 }).map((_, i) => (
                <div key={i} className="scale-mark"></div>
              ))}
            </div>
            <div
              className="scale-pin scale-pin-pre"
              style={{ left: `${((preScale - 1) / 9) * 100}%` }}
            >
              <span className="pin-label">PRE · {preScale || "—"}</span>
              <span className="pin-dot"></span>
            </div>
            <div
              className="scale-pin scale-pin-post"
              style={{ left: `${((postScale - 1) / 9) * 100}%` }}
            >
              <span className="pin-dot"></span>
              <span className="pin-label">POST · {postScale || "—"}</span>
            </div>
            <div
              className="scale-arc"
              style={{
                left: `${((Math.min(preScale, postScale) - 1) / 9) * 100}%`,
                width: `${(Math.abs(postScale - preScale) / 9) * 100}%`,
              }}
            ></div>
          </div>
        </div>

        {/* Question-by-question */}
        <div className="compare-questions">
          <DiagDivider label="QUESTION BY QUESTION" />
          {qs.map((q, i) => (
            <CompareQ key={q.id} q={q} pre={pretest?.[q.id]} post={posttest?.[q.id]} idx={i} />
          ))}
        </div>

        <div className="row" style={{ justifyContent: "center", marginTop: 64, gap: 16 }}>
          <button className="btn btn-ghost" onClick={() => onGo("dashboard")}>← BACK TO CURRICULUM</button>
          <button className="btn btn-primary btn-lg" onClick={() => onGo("completion")}>
            VIEW YOUR CERTIFICATE <span className="arr">→</span>
          </button>
        </div>
      </div>
    </div>
  );
}

function CompareQ({ q, pre, post, idx }) {
  function fmt(ans) {
    if (ans == null || ans === "") return <span className="mute">—</span>;
    if (q.kind === "mcq") {
      const opt = q.options.find((o) => o.id === ans);
      return <span>{opt?.text}</span>;
    }
    if (q.kind === "scale") return <span className="display display-sm" style={{ fontSize: 28 }}>{ans}</span>;
    return <span>{ans}</span>;
  }
  const preRight = q.kind === "mcq" && pre === q.correct;
  const postRight = q.kind === "mcq" && post === q.correct;
  return (
    <div className="compare-q">
      <div className="compare-q-num mono">Q{idx + 1}</div>
      <div className="compare-q-body">
        <p className="compare-q-prompt">{q.prompt}</p>
        <div className="compare-q-cols">
          <div className={`compare-q-col ${preRight ? "right" : ""}`}>
            <span className="eyebrow eyebrow-dim">YOU SAID · BEFORE</span>
            {fmt(pre)}
          </div>
          <div className={`compare-q-col compare-q-col-after ${postRight ? "right" : ""}`}>
            <span className="eyebrow">YOU SAID · AFTER</span>
            {fmt(post)}
          </div>
        </div>
        {q.rationale && (
          <div className="compare-q-rationale">
            <span className="eyebrow">WHAT THE CODE SAYS</span>
            <p>{q.rationale}</p>
          </div>
        )}
      </div>
    </div>
  );
}

/* ==================================================================
   COMPLETION SCREEN — Certificate
================================================================== */
function CompletionScreen({ onGo }) {
  const data = window.CARE_CODE_DATA;
  const name = localStorage.getItem("cc-name") || "Colleague";
  const commitIdx = Number(localStorage.getItem("cc-commitment"));
  const commitment = data.commitments[commitIdx] || data.commitments[0];
  const date = new Date().toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" });

  return (
    <div className="completion-screen">
      <div className="container" style={{ paddingTop: 64, paddingBottom: 96 }}>
        <div className="row" style={{ justifyContent: "center" }}>
          <span className="eyebrow fade-up">CERTIFICATION OF COMPLETION</span>
        </div>
        <h1 className="display display-xl fade-up d1" style={{ textAlign: "center", marginTop: 24 }}>
          THE CARE
          <br />
          <span style={{ color: "var(--accent)" }}>CODE</span>
        </h1>

        <div className="certificate fade-up d3">
          <div className="cert-corner cert-corner-tl"></div>
          <div className="cert-corner cert-corner-tr"></div>
          <div className="cert-corner cert-corner-bl"></div>
          <div className="cert-corner cert-corner-br"></div>

          <div className="cert-inner">
            <div className="cert-row">
              <span className="eyebrow eyebrow-dim">AWARDED TO</span>
              <p className="display display-md" style={{ fontSize: 48, marginTop: 8 }}>{name}</p>
            </div>

            <p className="cert-statement">
              For completing the seven modules of <span className="accent">The Care Code</span> —
              and for committing to the work of anticipating customer needs, listening for what matters,
              and creating moments that are remembered.
            </p>

            <div className="cert-commitment">
              <span className="eyebrow">MY COMMITMENT, STARTING NEXT SHIFT</span>
              <p>"{commitment}"</p>
            </div>

            <div className="cert-foot">
              <div>
                <span className="eyebrow eyebrow-dim">DATE</span>
                <p className="mono">{date}</p>
              </div>
              <div>
                <span className="eyebrow eyebrow-dim">CERTIFICATION ID</span>
                <p className="mono">CC-{btoa(name + date).replace(/[^A-Z0-9]/gi, "").slice(0, 8).toUpperCase()}</p>
              </div>
              <div style={{ textAlign: "right" }}>
                <span className="eyebrow eyebrow-dim">VALIDATED BY</span>
                <p className="display display-sm" style={{ fontSize: 18 }}>Frontline Training</p>
              </div>
            </div>
          </div>
        </div>

        <div className="row" style={{ justifyContent: "center", marginTop: 48, gap: 16 }}>
          <button className="btn btn-ghost" onClick={() => onGo("dashboard")}>← BACK TO CURRICULUM</button>
          <button className="btn btn-primary btn-lg" onClick={() => window.print()}>
            PRINT CERTIFICATE <span className="arr">→</span>
          </button>
        </div>

        <p className="completion-foot mute" style={{ textAlign: "center", marginTop: 80, maxWidth: 560, marginLeft: "auto", marginRight: "auto" }}>
          This training was not about rules. It was about waking up to the people in front of you.
          Now go do it. Your next shift is your first chance to be the colleague that customers remember.
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { ScenarioPlayer, CommitmentPicker, ComparisonScreen, CompletionScreen });