/* global React, window */
/* Intake tab for the Global Style / Color Test.
   Everything here is read out of window.GSC_DESIGN, which tools/emit_gsc.py
   builds from gsc-study.json — so the questionnaire shown is the one that was
   fielded, and the audience counts are the respondents that came back. */

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

function GscStudyPanel({ label, s }) {
  const geo = Object.keys(s.countries).map((c) => c + " " + s.countries[c]).join("  ·  ");
  return (
    <div className="gi-panel">
      <div className="gi-panel__t">{label} study<em>n = {s.n.toLocaleString()}</em></div>
      <div className="gi-kv">
        <div><span>Markets</span><b>{geo}</b></div>
        <div><span>Age split</span><b>{s.young}% 18-34 · {s.older}% 35-55</b></div>
        <div><span>Colorways</span><b>{s.products} tested</b></div>
      </div>
    </div>
  );
}

function GscProducts({ products }) {
  const groups = ["Men's", "Women's"];
  const img = (id) => (window.PRODUCT_IMAGES ? window.PRODUCT_IMAGES.url(id) : null);
  return (
    <React.Fragment>
      {groups.map((g) => {
        const list = products.filter((p) => p.gender === g);
        if (!list.length) return null;
        return (
          <React.Fragment key={g}>
            <div className="gi-sub">{g.toUpperCase()} — {list.length} COLORWAYS</div>
            <div className="gi-grid">
              {list.map((p) => (
                <div className="gi-prod" key={p.id}>
                  <div className="gi-prod__img">
                    {img(p.id) ? <img src={img(p.id)} alt={p.name} loading="lazy" /> : null}
                  </div>
                  <div className="gi-prod__n">{p.name}</div>
                  <div className="gi-prod__c">{p.design.toUpperCase()}</div>
                </div>
              ))}
            </div>
          </React.Fragment>
        );
      })}
    </React.Fragment>
  );
}

function GscQuestion({ q, note }) {
  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}
      {note && <div className="gi-q__note">{note}</div>}
    </div>
  );
}

function GscIntake() {
  const D = window.GSC_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">
            <GscPill icon="circle-check-filled" live>Closed · fielded {D.fielded}</GscPill>
            <GscPill icon="users">{D.n.toLocaleString()} runners</GscPill>
            <GscPill icon="world">{D.markets.join(" · ")}</GscPill>
            <GscPill icon="shirt">{D.products.length} colorways</GscPill>
            <GscPill icon="user">{D.owner}</GscPill>
          </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>
          <div className="gi-two">
            <GscStudyPanel label="Men's" s={D.studies["Men's"]} />
            <GscStudyPanel label="Women's" s={D.studies["Women's"]} />
          </div>
        </div>

        <div className="gi-card">
          <div className="gi-card__h"><span className="gi-card__t">Shopper segments</span>
            <span className="gi-card__s">The five reads the range plan is 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">Colorways tested</span>
            <span className="gi-card__s">{D.collection} · ${D.price} full price</span></div>
          <GscProducts products={D.products} />
        </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</span></div>
          <div className="gi-sub">SCREENER AND PROFILE — ASKED ONCE</div>
          {D.questions.map((q) => <GscQuestion key={q.id} q={q} />)}
          <div className="gi-sub">
            PER COLORWAY — ASKED {D.studies["Men's"].products} TIMES (MEN'S) / {D.studies["Women's"].products} TIMES (WOMEN'S)
          </div>
          {D.productQuestions.map((q) => (
            <GscQuestion key={q.id} q={q}
              note={q.id === "p1" ? "Rescaled to the 0-100 sentiment score every chart in this study reports: (mean − 1) ÷ 4 × 100." : null} />
          ))}
        </div>

      </div>
    </div>
  );
}

Object.assign(window, { GscIntake });