/* global React, window */
/* Intake tab for the DSG Store Strategy Research study.
   Everything here is read out of window.DSG_DESIGN, which tools/emit_dsg.py
   builds from dsg-study.json — so the questionnaire shown is the one that was
   fielded, and the audience counts are the respondents that came back.

   The gi-* classes come from gsc/gsc.css, which the page already loads. This
   study has no product block: it is attitudinal, so where the Global Style
   test shows colorways this one shows the routing that shapes every base. */

function DsgPill({ icon, children, live }) {
  return (
    <span className={"gi-pill" + (live ? " gi-pill--live" : "")}>
      {icon && <i className={"ti ti-" + icon}></i>}{children}
    </span>
  );
}

/* The bases the reader has to hold in their head. This study routes hard —
   only DSG-familiar respondents saw the retailer block, only buyers saw the
   purchase block — so a percentage means nothing without the base under it. */
function DsgRouting({ D }) {
  const asked = D.questions.map((q) => q.id);
  const rows = [
    { label: "Everyone", note: "Screener, activewear habits, brand awareness, store appetite" },
    { label: "Brand aware", note: "Relationship with the Brand, where they first came across it" },
    { label: "DSG consumer", note: "Dick's / House of Sport familiarity, trust, purchase history" },
    { label: "Bought at DSG", note: "How the purchase happened, why there, what followed" },
  ];
  const keys = ["all", "brandaware", "dsg", "buyers"];
  const byKey = {};
  (D.segments || []).forEach((s) => { byKey[s.key] = s; });
  byKey.all = { n: D.n, pct: 100 };
  return (
    <table className="gi-seg">
      <thead><tr><th>Base</th><th>Respondents</th><th>What they were asked</th></tr></thead>
      <tbody>
        {rows.map((r, i) => {
          const s = byKey[keys[i]] || { n: 0, pct: 0 };
          return (
            <tr key={r.label}>
              <td><b>{r.label}</b></td>
              <td className="gi-seg__n">{s.n.toLocaleString()} · {s.pct}%</td>
              <td className="gi-seg__rule">{r.note}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

function DsgQuestion({ q }) {
  return (
    <div className="gi-q">
      <div className="gi-q__h">
        <span className="gi-q__n">{q.num}</span>
        <span className="gi-q__t">{q.title}</span>
        <span className="gi-q__ty">{q.type}</span>
      </div>
      {q.options && q.options.length ? (
        <div className="gi-q__o">{q.options.map((o) => <span key={o}>{o}</span>)}</div>
      ) : null}
    </div>
  );
}

function DsgIntake() {
  const D = window.DSG_DESIGN;
  if (!D) return <div style={{ padding: 24, color: "#636c79", fontSize: 13 }}>Loading intake…</div>;
  return (
    <div className="gi" data-screen-label="Study intake">
      <div className="gi__in">

        <div className="gi-hero">
          <div className="gi-hero__k">STUDY BRIEF</div>
          <h1 className="gi-hero__h">{D.name}</h1>
          <div className="gi-hero__m">
            <DsgPill icon="circle-check-filled" live>Closed · fielded {D.fielded}</DsgPill>
            <DsgPill icon="users">{D.n.toLocaleString()} consumers</DsgPill>
            <DsgPill icon="world">{D.markets.join(" · ")}</DsgPill>
            <DsgPill icon="help-circle">{D.questions.length} questions</DsgPill>
            <DsgPill icon="user">{D.owner}</DsgPill>
          </div>
          <p className="gi-hero__brief">{D.brief}</p>
        </div>

        <div className="gi-card">
          <div className="gi-card__h"><span className="gi-card__t">Objectives</span>
            <span className="gi-card__s">What this study has to answer</span></div>
          <ol className="gi-obj">
            {D.objectives.map((o, i) => (
              <li key={i}><b>{String(i + 1).padStart(2, "0")}</b><span>{o}</span></li>
            ))}
          </ol>
        </div>

        <div className="gi-card">
          <div className="gi-card__h"><span className="gi-card__t">Audience</span>
            <span className="gi-card__s">{D.audienceLine} · {D.quota}</span></div>
          <DsgRouting D={D} />
        </div>

        <div className="gi-card">
          <div className="gi-card__h"><span className="gi-card__t">Segments</span>
            <span className="gi-card__s">The reads the recommendations are built on</span></div>
          <table className="gi-seg">
            <thead><tr><th>Segment</th><th>Respondents</th><th>Defined as</th></tr></thead>
            <tbody>
              {D.segments.map((s, i) => (
                <tr key={s.key}>
                  <td><b>{s.label}</b></td>
                  <td className="gi-seg__n">{s.n.toLocaleString()} · {s.pct}%</td>
                  <td className="gi-seg__rule">{(D.segmentDefs[i] || {}).rule}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="gi-card">
          <div className="gi-card__h"><span className="gi-card__t">De-identification</span>
            <span className="gi-card__s">Applied at ingest, before any file the demo reads</span></div>
          <ol className="gi-obj">
            {D.anonymisation.map((a, i) => (
              <li key={i}><b>{String(i + 1).padStart(2, "0")}</b><span>{a}</span></li>
            ))}
          </ol>
        </div>

        <div className="gi-card">
          <div className="gi-card__h"><span className="gi-card__t">Survey design</span>
            <span className="gi-card__s">As fielded · {D.coverage}</span></div>
          {D.questions.map((q) => <DsgQuestion key={q.id} q={q} />)}
        </div>

      </div>
    </div>
  );
}

Object.assign(window, { DsgIntake });