/* pages/overview.jsx — AI weekly briefing + live performance summary.

   Two data sources:
   - overview_briefing table (narrative block) — written nightly by
     pipeline-overview.js.
   - the platform tables (meta_ads, google_ads, tiktok_ads, shopify) — read
     live for the selected date range to drive the KPI cards and charts.

   Every platform read degrades to zero when it has no rows for the period
   (disabled, pending like TikTok, or simply no data yet) — never an error. */

const { useEffect: useEffOv, useMemo: useMemoOv } = React;

/* --------------------------------------------------------------
   Date helpers — format the briefing's 7-day window into a short
   localised label used inside the narrative block.
   -------------------------------------------------------------- */
const MONTHS_PT = ['jan','fev','mar','abr','mai','jun','jul','ago','set','out','nov','dez'];
const MONTHS_EN = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

function formatWindow(weekStart, weekEnd, lang) {
  if (!weekStart || !weekEnd) return null;
  const s = new Date(weekStart + 'T00:00:00');
  const e = new Date(weekEnd   + 'T00:00:00');
  const months = lang === 'pt' ? MONTHS_PT : MONTHS_EN;
  const sd = s.getDate(), ed = e.getDate();
  const sm = months[s.getMonth()], em = months[e.getMonth()];
  if (s.getMonth() === e.getMonth()) {
    return lang === 'pt' ? `${sd}–${ed} ${sm}` : `${sm} ${sd}–${ed}`;
  }
  return lang === 'pt' ? `${sd} ${sm} – ${ed} ${em}` : `${sm} ${sd} – ${em} ${ed}`;
}

function formatEyebrow(weekStart, weekEnd, lang) {
  const win = formatWindow(weekStart, weekEnd, lang);
  if (!win) return null;
  return `${t("ov.eyebrow.range", lang)} · ${win.toUpperCase()}`;
}

/* --------------------------------------------------------------
   Card sentiment → visual treatment.
   -------------------------------------------------------------- */
const SENTIMENT_MAP = {
  positive: { cls: 'win',   labelKey: 'hi.win',   sparkColor: '#00E7FF', sparkDir: 'up'   },
  neutral:  { cls: 'watch', labelKey: 'hi.watch', sparkColor: '#FF7F00', sparkDir: 'up'   },
  alert:    { cls: 'alert', labelKey: 'hi.alert', sparkColor: '#EF1166', sparkDir: 'down' }
};

function OverviewPage({ lang, client, dateRange, syncTick }) {
  const { money, NF } = window.MK_FMT;

  // Narrative (weekly AI briefing) + live platform data for the selected period.
  const briefing = useBriefing({ client, syncTick });
  const meta    = usePlatformData({ table: 'meta_ads',   client, dateRange, syncTick });
  const google  = usePlatformData({ table: 'google_ads', client, dateRange, syncTick });
  const tiktok  = usePlatformData({ table: 'tiktok_ads', client, dateRange, syncTick });
  const shopify = usePlatformData({ table: 'shopify',    client, dateRange, syncTick });

  const platformLoading = [meta, google, tiktok, shopify].some(d => d.status === 'loading');
  const hasPlatformData = (meta.rows.length + google.rows.length + tiktok.rows.length + shopify.rows.length) > 0;

  /* ---- Live KPIs for the selected period ---- */
  const kpis = useMemoOv(() => {
    // Spend per ad platform — drop google search_term rows so spend isn't
    // double-counted against the campaign-level rows.
    const spendOf = (rows) => MakaliAgg.totals(rows.filter(r => !r.search_term), ['spend']).spend;
    const metaSpend   = spendOf(meta.rows);
    const googleSpend = spendOf(google.rows);
    const tiktokSpend = spendOf(tiktok.rows);
    const shp = MakaliSel.shopifyKpis(shopify.rows);
    return {
      investment: metaSpend + googleSpend + tiktokSpend,
      metaSpend, googleSpend, tiktokSpend,
      revenue:       shp.revenue,
      orders:        shp.orders,
      aov:           shp.aov,
      new_customers: shp.new_customers,
      repeat_rate:   shp.repeat_rate
    };
  }, [meta.rows, google.rows, tiktok.rows, shopify.rows]);

  /* ---- Channel mix (spend by platform) — only platforms with spend appear ---- */
  const channelMix = useMemoOv(() => (
    [
      { name: 'Meta',   value: kpis.metaSpend,   color: '#2E79FF' },
      { name: 'Google', value: kpis.googleSpend, color: '#00E7FF' },
      { name: 'TikTok', value: kpis.tiktokSpend, color: '#EF1166' }
    ]
      .filter(d => d.value > 0)
      .map(d => ({ ...d, valLabel: money(d.value, { compact: true }) }))
  ), [kpis, lang]);

  /* ---- Daily Investimento (bars) + Receita (line) ---- */
  const daily = useMemoOv(() => {
    const filled = MakaliAgg.fillDaily([], dateRange.from, dateRange.to, lang);
    const adRows = [
      ...meta.rows.filter(r => !r.search_term),
      ...google.rows.filter(r => !r.search_term),
      ...tiktok.rows.filter(r => !r.search_term)
    ];
    const shpOverall = shopify.rows.filter(r => !r.product_id);
    return {
      labels:  filled.labels,
      spend:   MakaliAgg.dailySeries(adRows,     filled.dates, 'spend'),
      revenue: MakaliAgg.dailySeries(shpOverall, filled.dates, 'revenue')
    };
  }, [meta.rows, google.rows, tiktok.rows, shopify.rows, dateRange.from, dateRange.to, lang]);

  /* ---- Narrative hydration ---- */
  const row      = briefing.row;
  const ready    = briefing.status === 'ready' && row;
  const eyebrow  = ready ? formatEyebrow(row.week_start, row.week_end, lang) : null;
  const headline = ready ? (lang === 'pt' ? row.headline_pt : row.headline_en) : null;
  const body     = ready ? (lang === 'pt' ? row.body_pt     : row.body_en)     : null;
  const cards    = ready && Array.isArray(row.cards) ? row.cards : [];
  const k        = (row && row.kpis) || {};
  const blendedRoas = num(k.blended_roas);

  /* ---- Whole-page empty / loading ---- */
  if (platformLoading && briefing.status === 'loading') {
    return <div className="canvas"><LoadingState lang={lang} label={t("ov.loading", lang)}/></div>;
  }
  if (!ready && !platformLoading && !hasPlatformData) {
    return (
      <div className="canvas">
        <EmptyState lang={lang} label={t("ov.empty.title", lang)} sublabel={t("ov.empty.sub", lang)}/>
      </div>
    );
  }

  return (
    <div className="canvas">
      {/* ============ NARRATIVE (weekly AI briefing) ============ */}
      {ready && (
        <section className="narrative">
          <div className="narr-main">
            <div className="narr-tag">
              <span className="sparkle"><Icon name="sparkles" size={9}/></span>
              <span>{eyebrow}</span>
            </div>
            <h1 className="narr-headline">
              <span className="accent">{headline}</span>
            </h1>
            <p className="narr-body">{body}</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>

          <div className="narr-side">
            <div className="hero-stat">
              <div className="hero-stat__eyebrow">
                <span>{client.type === "ecom" ? "MER · 7D" : "ROAS · 7D"}</span>
                <span className="ctx">blended</span>
              </div>
              <div className="hero-stat__val">
                <span className="gradient">
                  {lang === "pt" ? blendedRoas.toFixed(2).replace('.', ',') : blendedRoas.toFixed(2)}
                </span>
                <span className="unit">×</span>
              </div>
              <div className="hero-stat__foot">
                {lang === "pt"
                  ? `Receita ${money(num(k.total_revenue), {compact:true})} sobre investimento ${money(num(k.total_spend), {compact:true})}`
                  : `${money(num(k.total_revenue), {compact:true})} revenue on ${money(num(k.total_spend), {compact:true})} spend`}
              </div>
            </div>

            <div className="hero-stat hero-stat--compact">
              <div className="hero-stat__eyebrow">
                <span>{client.type === "ecom" ? (lang === "pt" ? "Conversões · 7D" : "Conversions · 7D") : (lang === "pt" ? "Leads · 7D" : "Leads · 7D")}</span>
                <span className="ctx">7d</span>
              </div>
              <div className="hero-stat__val">{NF.num(num(k.total_conversions))}</div>
              <span className="hero-stat__delta">
                <Icon name="arrow-up-right" size={11}/>
                {lang === "pt" ? "no período" : "in the period"}
              </span>
            </div>
          </div>
        </section>
      )}

      {/* ============ HIGHLIGHTS — Claude-generated cards ============ */}
      {ready && cards.length > 0 && (
        <section>
          <div className="page-head" style={{marginBottom: 14}}>
            <span className="page-head__eyebrow">{t("ov.section.matters", lang)}</span>
          </div>
          <div className="highlights">
            {cards.map((c, i) => {
              const meta2 = SENTIMENT_MAP[c.sentiment] || SENTIMENT_MAP.neutral;
              return (
                <article key={i} className={"highlight " + meta2.cls}>
                  <div className="highlight__head">
                    <span className="highlight__num">{String(i + 1).padStart(2, '0')}</span>
                    <span className="highlight__kind"><span className="dot"/>{t(meta2.labelKey, lang)}</span>
                  </div>
                  <h3 className="highlight__title">{lang === 'pt' ? c.title_pt : c.title_en}</h3>
                  <p className="highlight__body">{lang === 'pt' ? c.body_pt : c.body_en}</p>
                  <div className="highlight__stats">
                    <div>
                      <div className="highlight__stat-l">{lang === 'pt' ? 'Métrica' : 'Metric'}</div>
                      <div className="highlight__stat-v accent">{c.metric}</div>
                    </div>
                  </div>
                </article>
              );
            })}
          </div>
        </section>
      )}

      {/* ============ KPI ROW — live, selected period ============ */}
      <section>
        <div className="page-head" style={{marginBottom: 14}}>
          <span className="page-head__eyebrow">{t("ov.section.numbers", lang)}</span>
        </div>
        {platformLoading ? <LoadingState lang={lang}/> : (
          <div className="kpis">
            <KpiTile label={t("kpi.spend", lang)} icon="wallet"
              value={money(kpis.investment, {compact: true})} sparkColor="#7600FF"/>
            <KpiTile label={t("kpi.revenue", lang)} icon="trend-up"
              value={money(kpis.revenue, {compact: true})} sparkColor="#2E79FF"/>
            <KpiTile label={t("kpi.orders", lang)} icon="shopping"
              value={NF.num(kpis.orders)} sparkColor="#00E7FF"/>
            <KpiTile label={t("kpi.aov", lang)} icon="credit-card"
              value={money(kpis.aov)} sparkColor="#CE3EBA"/>
            <KpiTile label={t("kpi.new-cust", lang)} icon="user-plus"
              value={NF.num(kpis.new_customers)} sparkColor="#EF1166"/>
            <KpiTile label={t("kpi.repeat-rate", lang)} icon="sync"
              value={(lang === "pt" ? kpis.repeat_rate.toFixed(1).replace(".", ",") : kpis.repeat_rate.toFixed(1)) + "%"}
              sparkColor="#FF7F00"/>
          </div>
        )}
      </section>

      {/* ============ CHARTS — daily performance + channel mix ============ */}
      {!platformLoading && (
        <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">{client.currency || "BRL"}</p>
              </div>
              <div className="panel__legend">
                <div className="legend-item"><span className="sw" style={{background:"#7600FF"}}/>{t("kpi.spend", lang)}</div>
                <div className="legend-item"><span className="sw sw--line" style={{background:"#00E7FF"}}/>{t("kpi.revenue", lang)}</div>
              </div>
            </div>
            <StackedBarLine
              bars={[{ name: t("kpi.spend", lang), color: "#7600FF", data: daily.spend }]}
              line={{ name: t("kpi.revenue", lang), color: "#00E7FF", data: daily.revenue }}
              labels={daily.labels}
              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" ? "Investimento por canal" : "Spend by channel"}</p>
              </div>
            </div>
            {channelMix.length > 0 ? (
              <Donut
                data={channelMix}
                totalLabel={lang === "pt" ? "Investimento" : "Spend"}
                centerVal={money(kpis.investment, {compact: true})}
              />
            ) : (
              <EmptyState lang={lang} label={lang === "pt" ? "Sem investimento no período" : "No spend in the period"}/>
            )}
          </div>
        </section>
      )}
    </div>
  );
}

// Small numeric coerce — defined locally so this file has no mock-data dep.
function num(v, dflt = 0) {
  const n = Number(v);
  return Number.isFinite(n) ? n : dflt;
}

window.OverviewPage = OverviewPage;