/* Banyan Pharmacy — Pilots (consumer-product A/B; the "next" capability) */

function PilotChart({ series }) {
  const W = 640, H = 260, padL = 44, padR = 20, padT = 18, padB = 38;
  const ymax = 15, ymin = 0;
  const xs = (i) => padL + (i / (series.length - 1)) * (W - padL - padR);
  const ys = (v) => padT + (1 - (v - ymin) / (ymax - ymin)) * (H - padT - padB);
  const line = (key) => series.map((d, i) => `${i === 0 ? "M" : "L"} ${xs(i)} ${ys(d[key])}`).join(" ");
  const yticks = [0, 5, 10, 15];
  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{ display: "block", width: "100%", height: "auto" }}>
      {yticks.map((t) => (
        <g key={t}>
          <line x1={padL} y1={ys(t)} x2={W - padR} y2={ys(t)} stroke="var(--rule-soft)" strokeWidth="1" />
          <text x={padL - 10} y={ys(t) + 4} textAnchor="end" style={{ fontFamily: "var(--font-mono)", fontSize: 11, fill: "var(--fade)" }}>{t}%</text>
        </g>
      ))}
      {series.map((d, i) => (
        <text key={i} x={xs(i)} y={H - 12} textAnchor="middle" style={{ fontFamily: "var(--font-sans)", fontSize: 12, fill: "var(--mute)" }}>{d.week}</text>
      ))}
      {/* control */}
      <path d={line("control")} fill="none" stroke="var(--mute)" strokeWidth="2" strokeDasharray="5 4" />
      {series.map((d, i) => <circle key={"c" + i} cx={xs(i)} cy={ys(d.control)} r="3.5" fill="var(--mute)" />)}
      {/* test */}
      <path d={line("test")} fill="none" stroke="var(--clay)" strokeWidth="2.5" />
      {series.map((d, i) => <circle key={"t" + i} cx={xs(i)} cy={ys(d.test)} r="4" fill="var(--clay)" stroke="var(--stone-soft)" strokeWidth="1.5" />)}
      {/* end labels */}
      <text x={xs(series.length - 1)} y={ys(series[series.length - 1].test) - 10} textAnchor="end" style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600, fill: "var(--clay-deep)" }}>{series[series.length - 1].test}%</text>
      <text x={xs(series.length - 1)} y={ys(series[series.length - 1].control) + 18} textAnchor="end" style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600, fill: "var(--mute)" }}>{series[series.length - 1].control}%</text>
    </svg>
  );
}

function PilotsPage() {
  const app = useApp();
  const p = D.pilot;
  const focus = app.loopFocus && app.loopFocus.kind === "pilot";
  return (
    <main className="page page-narrow">
      <div className="ph">
        <div>
          <h1>Pilots</h1>
          <div className="sub">Consumer-product experiments — <span style={{ color: "var(--body)" }}>as Terrace reads sell-through</span>. The “next” capability, beyond availability.</div>
        </div>
      </div>

      <div className={cx("card pad", focus && "focus-glow")} style={{ transition: "box-shadow 200ms" }}>
        <div className="flex ic jb g12 wrap">
          <div className="flex ic g12">
            <span className="iconbtn" style={{ width: 40, height: 40, color: "var(--clay)" }}><Icons.flask size={20} /></span>
            <div>
              <div className="flex ic g8"><span style={{ fontSize: 19, fontWeight: 600, letterSpacing: "-0.015em" }}>{p.product}</span><span className="pill clay"><span className="dot" />Roll out</span></div>
              <div className="store-sub">{p.metric} · {p.weeks} weeks · <span className="mono">{p.id}</span></div>
            </div>
          </div>
          <div className="lift-badge">
            <span className="lb-v">+{p.lift}%</span>
            <span className="muted" style={{ fontSize: 13 }}>attach-rate lift</span>
          </div>
        </div>

        <p className="mt16" style={{ maxWidth: 620 }}>{p.summary}</p>

        <div className="flex ic g16 wrap mt16">
          <span className="tag"><b style={{ fontWeight: 600 }}>{p.testStores.length}</b>&nbsp;test stores</span>
          <span className="tag"><b style={{ fontWeight: 600 }}>{p.controlCount}</b>&nbsp;control stores</span>
          <window.Prov muted>reads sell-through, not stock</window.Prov>
        </div>
      </div>

      <section className="section">
        <SectionHead title="Attach-rate over time" action={<div className="pc-legend"><span><i className="test" />Test</span><span><i className="ctrl" />Control</span></div>} />
        <div className="pilot-chart"><PilotChart series={p.series} /></div>
      </section>

      <section className="section">
        <SectionHead title="Test stores" count={p.testStores.length} />
        <div className="card"><div className="list">
          {p.testStores.map((id) => {
            const st = D.storeById[id];
            return (
              <div key={id} className="row bare click" onClick={() => app.nav({ name: "store", id })}>
                <div className="main"><div className="title" style={{ fontSize: 14 }}>{st.locality}</div><div className="meta">{st.region}</div></div>
                <div className="right"><window.FormatBadge format={st.format} /></div>
              </div>
            );
          })}
        </div></div>
      </section>

      <div className="card pad mt24" style={{ borderLeft: "3px solid var(--clay)" }}>
        <div className="flex ic g10">
          <Icons.check size={18} style={{ color: "var(--clay)" }} />
          <div>
            <div style={{ fontWeight: 600, fontSize: 15 }}>Decision · {p.decision}</div>
            <div className="store-sub mt4">A consistent +{p.lift}% attach-rate over {p.weeks} weeks against control. Retention is the next conversation — once loyalty data is in.</div>
          </div>
        </div>
      </div>
    </main>
  );
}

window.Pages = window.Pages || {};
window.Pages.Pilots = PilotsPage;