/* pages/overview.jsx — main intelligent summary page.
   AI narrative headline + contextual highlight cards + KPI row +
   daily performance chart + channel split. */

function OverviewPage({ lang, client, attribution }) {
  const D = window.MK_DATA;
  const { money, NF } = window.MK_FMT;

  // Pick the right narrative
  const narrKey = client.type + "_" + lang;
  const narr = D.NARRATIVES[narrKey] || D.NARRATIVES.ecom_pt;
  const highlights = client.type === "ecom" ? D.HIGHLIGHTS_ECOM : D.HIGHLIGHTS_LEAD;

  const days = lang === "pt" ? D.DAYS_30 : D.DAYS_30_EN;

  // KPIs differ by client type
  const kpis = client.type === "ecom" ? [
    { label: t("kpi.spend", lang),   icon: "wallet",    value: money(client.type === "ecom" ? 168000 : 84000, {compact:true}),
      delta: "+12,4%", deltaDir: "up", deltaCtx: t("vs.prior", lang), spark: D.SPARKS.upMix },
    { label: t("kpi.revenue", lang), icon: "trend-up",  value: money(528000, {compact:true}),
      delta: "+18,7%", deltaDir: "up", deltaCtx: t("vs.prior", lang), spark: D.SPARKS.upRevenue, sparkColor: "#2E79FF" },
    { label: t("kpi.orders", lang),  icon: "shopping",  value: NF.num(1842, {compact:false}),
      delta: "+14,2%", deltaDir: "up", deltaCtx: t("vs.prior", lang), spark: D.SPARKS.upOrders },
    { label: t("kpi.aov", lang),     icon: "credit-card", value: money(287),
      delta: "+3,9%",  deltaDir: "up", deltaCtx: t("vs.prior", lang), spark: D.SPARKS.flat, sparkColor: "#7600FF" },
    { label: t("kpi.new-cust", lang),icon: "user-plus", value: NF.num(1408),
      delta: "+9,1%",  deltaDir: "up", deltaCtx: t("vs.prior", lang), spark: D.SPARKS.upMix, sparkColor: "#CE3EBA" },
    { label: t("kpi.repeat-rate", lang), icon: "sync", value: "11,4%",
      delta: "−0,6pt", deltaDir: "down", deltaCtx: t("vs.prior", lang), spark: D.SPARKS.rate }
  ] : [
    { label: t("kpi.spend", lang),   icon: "wallet",     value: money(84000, {compact:true}),
      delta: "+6,2%",  deltaDir: "up", deltaCtx: t("vs.prior", lang), spark: D.SPARKS.upMix },
    { label: t("kpi.leads", lang),   icon: "user-plus",  value: NF.num(612),
      delta: "+18%",   deltaDir: "up", deltaCtx: t("vs.prior", lang), spark: D.SPARKS.upOrders, sparkColor: "#2E79FF" },
    { label: t("kpi.qual-leads", lang), icon: "check",   value: NF.num(232),
      delta: "−6%",    deltaDir: "down", deltaCtx: t("vs.prior", lang), spark: D.SPARKS.flat },
    { label: t("kpi.cpl", lang),     icon: "tag",        value: money(137),
      delta: "−31%",   deltaDir: "up", deltaCtx: t("vs.prior", lang), spark: D.SPARKS.downCac, sparkColor: "#00E7FF" },
    { label: t("kpi.cpql", lang),    icon: "target",     value: money(362),
      delta: "−18%",   deltaDir: "up", deltaCtx: t("vs.prior", lang), spark: D.SPARKS.downCac, sparkColor: "#7600FF" },
    { label: t("kpi.ctr", lang),     icon: "mouse-pointer", value: "2,84%",
      delta: "+0,4pt", deltaDir: "up", deltaCtx: t("vs.prior", lang), spark: D.SPARKS.rate, sparkColor: "#CE3EBA" }
  ];

  return (
    <div className="canvas">
      {/* ============ NARRATIVE BLOCK ============ */}
      <section className="narrative">
        {/* Left — the headline + body + meta */}
        <div className="narr-main">
          <div className="narr-tag">
            <span className="sparkle"><Icon name="sparkles" size={9}/></span>
            <span>{t("ov.eyebrow", lang)}</span>
          </div>
          <h1 className="narr-headline">
            {narr.headline_parts.map((p, i) => (
              <span key={i} className={p.style === "accent" ? "accent" : p.style === "glow" ? "glow" : ""}>{p.t}</span>
            ))}
          </h1>
          <p className="narr-body">
            {narr.body.map((seg, i) => {
              if (seg.b) return <b key={i}>{seg.t}</b>;
              if (seg.pos) return <span key={i} className="pos">{seg.t}</span>;
              if (seg.neg) return <span key={i} className="neg">{seg.t}</span>;
              return <React.Fragment key={i}>{seg.t}</React.Fragment>;
            })}
          </p>
          <div className="narr-meta">
            <span className="agent">
              <span className="badge"><Icon name="sparkles" size={11}/></span>
              {t("ov.filed-by", lang)}
            </span>
            <span>{t("ov.posted", lang)}</span>
            <span>{t("ov.reading", lang)}</span>
          </div>
        </div>

        {/* Right — pinned hero metric stack */}
        <div className="narr-side">
          <div className="hero-stat">
            <div className="hero-stat__eyebrow">
              <span>{client.type === "ecom" ? "MER · 30D" : (lang === "pt" ? "LEADS · 30D" : "LEADS · 30D")}</span>
              <span className="ctx">{lang === "pt" ? "blended" : "blended"}</span>
            </div>
            <div className="hero-stat__val">
              <span className="gradient">{narr.mer}</span>
              {client.type === "ecom" && <span className="unit">×</span>}
            </div>
            <span className={"hero-stat__delta " + (narr.mer_delta.startsWith("−") ? "down" : "")}>
              <Icon name={narr.mer_delta.startsWith("−") ? "arrow-down-right" : "arrow-up-right"} size={11}/>
              {narr.mer_delta} {t("vs.prior", lang)}
            </span>
            <div className="hero-stat__chart">
              <MiniSpark
                points={client.type === "ecom" ? [2.6, 2.8, 2.7, 2.9, 3.0, 2.95, 3.1, 3.05, 3.12, 3.14] : [380, 410, 440, 470, 500, 520, 555, 580, 600, 612]}
                color="#00E7FF" width={300} height={56} fill
              />
            </div>
            <div className="hero-stat__foot">
              {lang === "pt" ? "Meta · 3,5×" : "Target · 3.5×"}
              {client.type === "lead" && (lang === "pt" ? "Meta · 700/mês" : "Target · 700/mo")}
            </div>
          </div>

          <div className="hero-stat hero-stat--compact">
            <div className="hero-stat__eyebrow">
              <span>{narr.aov_sku}</span>
              <span className="ctx">{lang === "pt" ? "7d" : "7d"}</span>
            </div>
            <div className="hero-stat__val">
              {narr.aov_value}
            </div>
            <span className="hero-stat__delta">
              <Icon name="arrow-up-right" size={11}/>
              {narr.aov_subtext}
            </span>
          </div>
        </div>
      </section>

      {/* ============ HIGHLIGHTS ============ */}
      <section>
        <div className="page-head" style={{marginBottom: 14}}>
          <span className="page-head__eyebrow">{t("ov.section.matters", lang)}</span>
        </div>
        <div className="highlights">
          {highlights.map((h, i) => (
            <article key={i} className={"highlight " + h.kind}>
              <div className="highlight__head">
                <span className="highlight__num">{h.num}</span>
                <span className="highlight__kind">
                  <span className="dot"/>
                  {t("hi." + h.kind, lang)}
                </span>
              </div>
              <h3 className="highlight__title">{lang === "pt" ? h.title_pt : h.title_en}</h3>
              <p className="highlight__body">{lang === "pt" ? h.body_pt : h.body_en}</p>
              <div className="highlight__stats">
                <div>
                  <div className="highlight__stat-l">{lang === "pt" ? h.stat1_l_pt : h.stat1_l_en}</div>
                  <div className="highlight__stat-v accent">{lang === "pt" ? h.stat1_v : h.stat1_v_en}</div>
                </div>
                <div>
                  <div className="highlight__stat-l">{lang === "pt" ? h.stat2_l_pt : h.stat2_l_en}</div>
                  <div className="highlight__stat-v">{lang === "pt" ? h.stat2_v : h.stat2_v_en}</div>
                </div>
                <div className="highlight__spark">
                  <MiniSpark
                    points={h.spark}
                    color={h.kind === "win" ? "#00E7FF" : h.kind === "alert" ? "#EF1166" : "#FF7F00"}
                    down={h.kind === "alert"}
                    width={80} height={36}
                  />
                </div>
              </div>
              <div className="highlight__foot">
                <span>{lang === "pt" ? h.source_pt : h.source_en} · {lang === "pt" ? h.when_pt : h.when_en}</span>
                <span className="arrow"><Icon name="arrow-right" size={14}/></span>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* ============ KPI ROW ============ */}
      <section>
        <div className="page-head" style={{marginBottom: 14, display: "flex", justifyContent: "space-between", alignItems: "flex-end"}}>
          <span className="page-head__eyebrow">{t("ov.section.numbers", lang)}</span>
          <div style={{display:"flex", gap: 10}}>
            <button className="btn"><Icon name="download" size={12}/> {t("top.export", lang)}</button>
            <button className="btn btn--gradient"><Icon name="sync" size={12}/> {t("top.sync-now", lang)}</button>
          </div>
        </div>
        <div className="kpis">
          {kpis.map((k,i) => <KpiTile key={i} {...k}/>)}
        </div>
      </section>

      {/* ============ DAILY PERFORMANCE + CHANNEL SPLIT ============ */}
      <section className="row-2">
        <div className="panel">
          <div className="panel__head">
            <div className="panel__head-l">
              <h3 className="panel__title">{t("ov.section.daily", lang)}</h3>
              <p className="panel__sub">{lang === "pt" ? "30 dias · investimento + receita" : "30 days · spend + revenue"}</p>
            </div>
            <div className="panel__legend">
              <div className="legend-item"><span className="sw" style={{background:"#2E79FF"}}/>Meta {t("kpi.spend", lang)}</div>
              <div className="legend-item"><span className="sw" style={{background:"#00E7FF"}}/>Google {t("kpi.spend", lang)}</div>
              <div className="legend-item"><span className="sw sw--line" style={{background:"#fff"}}/>{t("kpi.revenue", lang)}</div>
            </div>
          </div>
          <StackedBarLine
            bars={[
              { name: "Meta " + t("kpi.spend", lang), color: "#2E79FF", data: D.SERIES.spend_meta },
              { name: "Google " + t("kpi.spend", lang), color: "#00E7FF", data: D.SERIES.spend_google }
            ]}
            line={{ name: t("kpi.revenue", lang), color: "#fff", data: D.SERIES.revenue }}
            labels={days}
            yFormatLeft={(v) => money(v, {compact: true})}
            yFormatRight={(v) => money(v, {compact: true})}
            height={280}
          />
        </div>

        <div className="panel">
          <div className="panel__head">
            <div className="panel__head-l">
              <h3 className="panel__title">{t("ov.section.channels", lang)}</h3>
              <p className="panel__sub">{lang === "pt" ? "30 dias · canais pagos" : "30 days · paid channels"}</p>
            </div>
          </div>
          <Donut
            data={[
              { name: "Meta Ads",    value: client.type === "ecom" ? 120400 : 58400, color: "#7600FF", valLabel: money(client.type === "ecom" ? 120400 : 58400, {compact:true}) },
              { name: "Google Ads",  value: client.type === "ecom" ? 47600 : 25600,  color: "#00E7FF", valLabel: money(client.type === "ecom" ? 47600 : 25600, {compact:true}) }
            ]}
            totalLabel={lang === "pt" ? "INVEST. TOTAL" : "TOTAL SPEND"}
            centerVal={money(client.type === "ecom" ? 168000 : 84000, {compact:true})}
          />
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap: 10, marginTop: 8}}>
            <div className="progress">
              <div className="progress__head">
                <span style={{color:"#7600FF", fontFamily:"var(--font-display)", fontWeight: 900, fontSize: 11, letterSpacing: ".18em"}}>META</span>
                <span className="v">{client.type === "ecom" ? "3,12×" : "—"}</span>
              </div>
              <div className="progress__bar">
                <div className="progress__bar-fill" style={{width: "72%", background: "linear-gradient(90deg, #7600FF 0%, #CE3EBA 100%)"}}/>
              </div>
              <div style={{display:"flex", justifyContent:"space-between", fontSize: 10.5, color: "var(--fg-mute)", fontFamily: "var(--font-mono)"}}>
                <span>{lang === "pt" ? "REC." : "REV."} {money(client.type === "ecom" ? 375600 : 0, {compact:true})}</span>
                <span>72% {t("of-spend", lang)}</span>
              </div>
            </div>
            <div className="progress">
              <div className="progress__head">
                <span style={{color:"#00E7FF", fontFamily:"var(--font-display)", fontWeight: 900, fontSize: 11, letterSpacing: ".18em"}}>GOOGLE</span>
                <span className="v">{client.type === "ecom" ? "3,21×" : "—"}</span>
              </div>
              <div className="progress__bar">
                <div className="progress__bar-fill" style={{width: "28%", background: "linear-gradient(90deg, #00E7FF 0%, #2E79FF 100%)"}}/>
              </div>
              <div style={{display:"flex", justifyContent:"space-between", fontSize: 10.5, color: "var(--fg-mute)", fontFamily: "var(--font-mono)"}}>
                <span>{lang === "pt" ? "REC." : "REV."} {money(client.type === "ecom" ? 152800 : 0, {compact:true})}</span>
                <span>28% {t("of-spend", lang)}</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.OverviewPage = OverviewPage;