// tabs/overview.jsx — Event Plus Overview (account-level)

function OverviewTab({ ctx }) {
  const { range, granularity, compare, customStart, customEnd } = ctx;
  const ser = EPData.realSeries(range, granularity, customStart, customEnd);
  const { cur, prev } = EPData.realKPIs(range, customStart, customEnd);
  const labels = ser.labels;

  const sym = '₹';
  const fmtMoney  = (v) => `${sym}${v >= 1000 ? (v/1000).toFixed(v >= 10000 ? 0 : 1) + 'k' : v.toFixed(0)}`;
  const fmtFull   = (v) => `${sym}${Math.round(v).toLocaleString('en-IN')}`;
  const pct = (c, p) => p > 0 ? ((c - p) / p) * 100 : 0;

  const kpis = [
    { label: 'Spend',     value: cur.spend, prev: prev.spend, delta: pct(cur.spend, prev.spend),
      icon: 'Dollar', color: '#5B5BF0', format: fmtFull,
      sparkData: EPData.realSparkline('spend', 14) },
    { label: 'Leads',     value: cur.leads, prev: prev.leads, delta: pct(cur.leads, prev.leads),
      icon: 'Users', color: '#34B27B', format: (v) => v.toLocaleString('en-IN'),
      sparkData: EPData.realSparkline('leads', 14) },
    { label: 'CPL',       value: cur.cpl, prev: prev.cpl, delta: pct(cur.cpl, prev.cpl),
      icon: 'Bolt', color: '#FFB876', format: (v) => v > 0 ? fmtFull(v) : '—',
      sparkData: EPData.realSparkline('cpl', 14) },
    { label: 'Reach',     value: cur.reach, prev: prev.reach, delta: pct(cur.reach, prev.reach),
      icon: 'Eye', color: '#87B6FF', format: (v) => v.toLocaleString('en-IN') },
    { label: 'Impressions', value: cur.impressions, prev: prev.impressions, delta: pct(cur.impressions, prev.impressions),
      icon: 'Eye', color: '#9B7CFF', format: (v) => v.toLocaleString('en-IN') },
    { label: 'Clicks',    value: cur.clicks, prev: prev.clicks, delta: pct(cur.clicks, prev.clicks),
      icon: 'Click', color: '#C39BF5', format: (v) => v.toLocaleString('en-IN') },
    { label: 'CTR',       value: cur.ctr, prev: prev.ctr, delta: pct(cur.ctr, prev.ctr),
      unit: '%', icon: 'Click', color: '#6FD2C0', format: (v) => v.toFixed(2),
      sparkData: EPData.realSparkline('ctr', 14) },
    { label: 'CPC',       value: cur.cpc, prev: prev.cpc, delta: pct(cur.cpc, prev.cpc),
      icon: 'Dollar', color: '#FF8FB1', format: (v) => fmtFull(v),
      sparkData: EPData.realSparkline('cpc', 14) },
  ];

  const series = [
    { name: 'Spend', data: ser.spend, color: '#5B5BF0' },
    { name: 'Leads', data: ser.leads, color: '#34B27B', axis: 'right' },
  ];

  // Funnel: impressions → clicks → link clicks → leads
  const funnel = [
    { stage: 'Impressions', value: cur.impressions, share: 100 },
    { stage: 'Clicks', value: cur.clicks, share: cur.impressions ? cur.clicks / cur.impressions * 100 : 0 },
    { stage: 'Link Clicks', value: cur.linkClicks, share: cur.impressions ? cur.linkClicks / cur.impressions * 100 : 0 },
    { stage: 'Leads', value: cur.leads, share: cur.impressions ? cur.leads / cur.impressions * 100 : 0 },
  ];

  // Engagement mix: video views, link clicks, msg conversations, leads
  const engagementMix = [
    { label: 'Video Views', value: cur.videoViews },
    { label: 'Link Clicks', value: cur.linkClicks },
    { label: 'Msg Convos',  value: cur.msgConvos },
    { label: 'Leads',       value: cur.leads },
  ].filter(d => d.value > 0);

  return (
    <div className="content">
      <AIBanner insights={[
        `Spent <b>${fmtFull(cur.spend)}</b> driving <b>${cur.leads.toLocaleString('en-IN')} leads</b> at <b class="${cur.cpl < 600 ? 'pos' : 'neg'}">CPL ${cur.cpl > 0 ? fmtFull(cur.cpl) : '—'}</b>. CTR <b>${cur.ctr.toFixed(2)}%</b>, CPC <b>${fmtFull(cur.cpc)}</b>, frequency <b>${cur.frequency.toFixed(2)}</b>.`,
        `Funnel: <b>${cur.impressions.toLocaleString('en-IN')}</b> impressions → <b>${cur.clicks.toLocaleString('en-IN')}</b> clicks → <b>${cur.linkClicks.toLocaleString('en-IN')}</b> link clicks → <b>${cur.leads}</b> leads. Click-to-lead rate: <b>${cur.linkClicks > 0 ? (cur.leads / cur.linkClicks * 100).toFixed(2) : 0}%</b>.`,
        `Top-of-funnel signal: <b>${cur.videoViews.toLocaleString('en-IN')}</b> video views and <b>${cur.msgConvos.toLocaleString('en-IN')}</b> messaging conversations started — feeds retargeting.`,
      ]}/>

      <div className="grid grid-4">
        {kpis.slice(0, 4).map((k, i) => <KPI key={i} {...k}/>)}
      </div>
      <div className="grid grid-4">
        {kpis.slice(4).map((k, i) => <KPI key={i} {...k}/>)}
      </div>

      <div className="grid grid-2-1">
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Spend vs Leads</div>
              <div className="card-sub">{EPData.RANGES[range].label} · {granularity}</div>
            </div>
          </div>
          <LineChart series={series} labels={labels} height={260} formatY={fmtMoney}/>
        </div>
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Engagement mix</div>
              <div className="card-sub">{EPData.RANGES[range].label}</div>
            </div>
          </div>
          <Donut
            data={engagementMix}
            colors={['#5B5BF0','#34B27B','#FFB876','#FF8FB1']}
            height={180}
            formatV={(v) => v.toLocaleString('en-IN')}
          />
        </div>
      </div>

      <div className="grid grid-1-1">
        <div className="card">
          <div className="card-head">
            <div className="card-head-info">
              <div className="card-title">Funnel — Impression → Lead</div>
              <div className="card-sub">{EPData.RANGES[range].label}</div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, padding: '8px 0' }}>
            {funnel.map((f, i) => (
              <div key={i}>
                <div className="row between" style={{ marginBottom: 6 }}>
                  <span style={{ fontWeight: 600 }}>{f.stage}</span>
                  <span style={{ fontSize: 12 }}>
                    <b>{f.value.toLocaleString('en-IN')}</b>
                    <span style={{ color: 'var(--ink-3)', marginLeft: 8 }}>{f.share.toFixed(2)}%</span>
                  </span>
                </div>
                <div className="minibar"><span style={{ width: `${Math.max(2, f.share)}%`, background: ['#5B5BF0','#87B6FF','#34B27B','#FFB876'][i] }}/></div>
              </div>
            ))}
          </div>
        </div>
        <MetricsTable
          title="Headline metrics"
          sub={`${EPData.RANGES[range].label} · ${EPData.RANGES[range].sub}`}
          rows={[
            { m: 'Spend',       cur: cur.spend,       prev: prev.spend,       fmt: fmtFull, inv: true },
            { m: 'Leads',       cur: cur.leads,       prev: prev.leads,       fmt: (v) => v.toLocaleString('en-IN') },
            { m: 'CPL',         cur: cur.cpl,         prev: prev.cpl,         fmt: (v) => v > 0 ? fmtFull(v) : '—', inv: true },
            { m: 'Impressions', cur: cur.impressions, prev: prev.impressions, fmt: (v) => v.toLocaleString('en-IN') },
            { m: 'Reach',       cur: cur.reach,       prev: prev.reach,       fmt: (v) => v.toLocaleString('en-IN') },
            { m: 'Clicks',      cur: cur.clicks,      prev: prev.clicks,      fmt: (v) => v.toLocaleString('en-IN') },
            { m: 'Link Clicks', cur: cur.linkClicks,  prev: prev.linkClicks,  fmt: (v) => v.toLocaleString('en-IN') },
            { m: 'CTR',         cur: cur.ctr,         prev: prev.ctr,         fmt: (v) => `${v.toFixed(2)}%` },
            { m: 'CPC',         cur: cur.cpc,         prev: prev.cpc,         fmt: fmtFull, inv: true },
            { m: 'CPM',         cur: cur.cpm,         prev: prev.cpm,         fmt: fmtFull, inv: true },
            { m: 'Frequency',   cur: cur.frequency,   prev: prev.frequency,   fmt: (v) => v.toFixed(2) },
            { m: 'Video Views', cur: cur.videoViews,  prev: prev.videoViews,  fmt: (v) => v.toLocaleString('en-IN') },
          ]}
        />
      </div>
    </div>
  );
}

window.OverviewTab = OverviewTab;