/* ===========================================================================
   screen-analysis.jsx — full creative teardown (one scrollable page)
   props: store  (reads store.analysisId)
   Order mirrors the source report: hooks · ads · angles/formats/gaps ·
   best performers · scripts for Alli.
   =========================================================================== */
const AN = window.STUDIO;

function AnalysisAdCard({ ad }) {
  return (
    <div className="ad-card" style={{ cursor: "default" }}>
      <AdThumb ad={ad}/>
      <div className="ad-foot">
        <div className="ad-advertiser">
          <span className="sponsor-ava" style={{ background: advColor(ad.advertiser) }}>{ad.advertiser[0]}</span>
          {ad.advertiser}
          <span style={{ marginLeft: "auto", fontFamily: "var(--mono)", fontSize: 10, color: "var(--ink-faint)", textTransform: "uppercase" }}>{ad.line}</span>
        </div>
        <div className="ad-copy">{ad.copy}</div>
        <div className="ad-cta">{ad.cta} →</div>
      </div>
    </div>
  );
}

function AnalysisPage({ store, go }) {
  const c = AN.competitors.find((x) => x.id === store.analysisId) || AN.competitors[0];
  const tab = store.analysisTab || "ads";
  const setTab = store.setAnalysisTab;
  const TABS = [
    ["ads", "The ads", AN.ads.length],
    ["hooks", "Top hooks", AN.hooks.length],
    ["patterns", "Patterns & openings", AN.gaps.length],
    ["best", "Best performers", AN.best.length],
    ["scripts", "Scripts for Alli", AN.scripts.length],
  ];

  return (
    <div className="an-page">
      <div className="an-hero">
        <div className="an-hero-inner">
          <button className="btn ghost sm" style={{ marginBottom: 14, marginLeft: -6 }} onClick={() => store.goDashboard()}>
            <Icon name="arrowLeft" size={15}/> All analyses
          </button>
          <div className="eyebrow"><Icon name="sparkle" size={13}/> Creative analysis</div>
          <div className="an-vs" style={{ marginTop: 8 }}>SuperMush <span className="vs">vs</span> {c.name}</div>
          <p className="page-desc" style={{ marginTop: 10 }}>{AN.ads.length} top-running ads · {AN.hooks.length} hook patterns · {AN.scripts.length} scripts ready for Alli.</p>
          <p style={{ fontSize: 14.5, color: "var(--ink-soft)", lineHeight: 1.6, maxWidth: 760, marginTop: 14 }}>
            Grüns is running a <b>dual-product strategy</b> centered on parent pain points and convenience. The adult greens line (128 days running) leads with “no mess, no mixing, no gagging” and heavy discounting. The Kids line dominates recent spend, targeting busy parents with humor, relatable POV copy, and benefit stacking — amplified by influencer partnerships (Nurse John, Shannon Tripp).
          </p>
          <div style={{ display: "flex", gap: 8, marginTop: 16, flexWrap: "wrap" }}>
            <Chip tone="olive" dot="#3f9d6b">Analyzed</Chip>
            <Chip tone="ghost">{c.handle}</Chip>
            <Chip tone="ghost">{c.category}</Chip>
          </div>
        </div>
      </div>

      <div className="an-tabs-wrap">
        <div className="an-tabs-inner">
          {TABS.map(([k, label, n]) => (
            <button key={k} className={`tab ${tab === k ? "active" : ""}`} onClick={() => setTab(k)}>
              {label} <span style={{ color: "var(--ink-faint)", fontWeight: 500 }}>{n}</span>
            </button>
          ))}
        </div>
      </div>

      <div className="an-body">
        {tab === "hooks" && (
          <div className="an-block wiz-anim">
            <h2 className="an-block-title">Top hooks</h2>
            <p className="an-block-sub">{AN.hooks.length} recurring patterns — the angle worth stealing, with an AI read on each. Each card shows the actual ads using that hook.</p>
            <div className="grid-2">{AN.hooks.map((h, i) => {
              const matchedAds = (h.matching_ad_ids || []).map((id) => AN.ads.find((a) => a.id === id)).filter(Boolean);
              return <HookCard key={h.id} hook={h} rank={i + 1} ads={matchedAds}/>;
            })}</div>
          </div>
        )}

        {tab === "ads" && (
          <div className="an-block wiz-anim">
            <h2 className="an-block-title">The ads</h2>
            <p className="an-block-sub">{AN.ads.length} top-running creatives, longest first.</p>
            <div className="ad-grid">{AN.ads.map((a) => <AnalysisAdCard key={a.id} ad={a}/>)}</div>
          </div>
        )}

        {tab === "patterns" && (
          <div className="an-block wiz-anim">
            <h2 className="an-block-title">Patterns &amp; openings</h2>
            <p className="an-block-sub">What recurs, what carries it, and where the white space is.</p>
            <div className="an-cols">
              <div className="card card-pad">
                <div className="section-label"><Icon name="angle" size={13}/> Recurring angles</div>
                {AN.angles.map((a) => <AngleRow key={a.title} a={a}/>)}
              </div>
              <div className="card card-pad">
                <div className="section-label"><Icon name="image" size={13}/> Format patterns</div>
                {AN.formats.map((f) => <FormatRow key={f.title} f={f}/>)}
              </div>
            </div>
            <div className="card card-pad" style={{ marginTop: 18, background: "var(--accent-soft)", border: "none" }}>
              <div className="section-label" style={{ color: "var(--accent)" }}><Icon name="gap" size={13}/> Gaps SuperMush could fill</div>
              <ol className="an-note-block" style={{ margin: 0, paddingLeft: 18 }}>
                {AN.gaps.map((g, i) => <li key={i}>{g}</li>)}
              </ol>
            </div>
          </div>
        )}

        {tab === "best" && (
          <div className="an-block wiz-anim">
            <h2 className="an-block-title">Best performers</h2>
            <p className="an-block-sub">Longevity + distinctiveness — if they keep spending behind an ad, it's converting.</p>
            <div className="grid-2">{AN.best.map((b, i) => <BestCard key={i} b={b}/>)}</div>
          </div>
        )}

        {tab === "scripts" && (
          <div className="an-block wiz-anim">
            <h2 className="an-block-title">Scripts for Alli</h2>
            <p className="an-block-sub">{AN.scripts.length} talking-head clips, flipped from these hooks for the mushroom category. {AN.scripts.filter(s => s.generated).length} have generated creative — click any card for the full hook / body / CTA breakdown, or send straight to her shot list.</p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 20 }}>
              {AN.scripts.map((s) => <ScriptGridCard key={s.id} s={s} store={store}/>)}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { AnalysisPage });