// tabs/meta.jsx — Meta Ads tab

function MetaTab({ ctx }) {
  const { range, granularity, customStart, customEnd } = ctx;
  const { cur, prev } = SriSriData.realKPIs(range, customStart, customEnd);
  const series = SriSriData.realMetaSeries(range, granularity, customStart, customEnd);
  const campaigns = SriSriData.campaignBreakdown('meta', range, customStart, customEnd);

  const m = cur.meta, mp = prev.meta;
  const delta = (c, p) => p > 0 ? ((c - p) / p) * 100 : (c > 0 ? 100 : 0);
  const fmtINR = (v) => '₹' + Math.round(v).toLocaleString('en-IN');
  const fmtNum = (v) => Math.round(v).toLocaleString('en-IN');

  const insight = (() => {
    const cpl = m.leads > 0 ? m.spend/m.leads : 0;
    const ctrTrend = delta(m.ctr, mp.ctr);
    return `Meta delivered <b>${m.leads}</b> leads at <b>${fmtINR(cpl)}</b> CPL on <b>${fmtINR(m.spend)}</b> spend. CTR <b>${m.ctr.toFixed(2)}%</b> (${ctrTrend>=0?'+':''}${ctrTrend.toFixed(0)}% vs prev).`;
  })();

  return (
    <div className="content">
      <AIBanner insights={[insight]}/>

      <div className="grid grid-4">
        <KPI label="Spend" value={m.spend} format={fmtINR}
             delta={delta(m.spend, mp.spend)} prev={fmtINR(mp.spend)}
             color="#5B5BF0" icon="Wallet"/>
        <KPI label="Leads" value={m.leads} format={fmtNum}
             delta={delta(m.leads, mp.leads)} prev={fmtNum(mp.leads)}
             color="#FF8FB1" icon="Trophy"/>
        <KPI label="CPL" value={m.cpl} format={fmtINR}
             delta={delta(m.cpl, mp.cpl)} prev={fmtINR(mp.cpl)}
             color="#FFB876" icon="Tag"/>
        <KPI label="Clicks" value={m.clicks} format={fmtNum}
             delta={delta(m.clicks, mp.clicks)} prev={fmtNum(mp.clicks)}
             color="#6FD2C0" icon="Click"/>
        <KPI label="Impressions" value={m.impressions} format={fmtNum}
             delta={delta(m.impressions, mp.impressions)} prev={fmtNum(mp.impressions)}
             color="#87B6FF" icon="Eye"/>
        <KPI label="CTR" value={m.ctr.toFixed(2)} unit="%"
             delta={delta(m.ctr, mp.ctr)} prev={mp.ctr.toFixed(2)+'%'}
             color="#C39BF5" icon="Activity"/>
        <KPI label="CPC" value={m.cpc} format={fmtINR}
             delta={delta(m.cpc, mp.cpc)} prev={fmtINR(mp.cpc)}
             color="#F4D35E" icon="Tag"/>
        <KPI label="CPM" value={m.cpm} format={fmtINR}
             delta={delta(m.cpm, mp.cpm)} prev={fmtINR(mp.cpm)}
             color="#93E0A4" icon="Eye"/>
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <div className="card-title">Spend & Leads over time</div>
            <div className="card-sub">Daily / weekly / monthly view</div>
          </div>
        </div>
        <LineChart
          series={[
            { name: 'Spend', data: series.spend, color: '#5B5BF0' },
          ]}
          labels={series.labels}
          mode="area"
          height={220}
          formatY={fmtINR}
        />
        <div style={{ height: 16 }}/>
        <LineChart
          series={[
            { name: 'Leads', data: series.leads, color: '#FF8FB1' },
          ]}
          labels={series.labels}
          mode="line"
          height={180}
          formatY={fmtNum}
        />
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <div className="card-title">Campaign performance</div>
            <div className="card-sub">{campaigns.length} campaigns active in range</div>
          </div>
        </div>
        <table className="metrics">
          <thead>
            <tr>
              <th>Campaign</th><th>Spend</th><th>Impressions</th><th>Clicks</th>
              <th>CTR</th><th>CPC</th><th>Leads</th><th>CPL</th>
            </tr>
          </thead>
          <tbody>
            {campaigns.map(c => (
              <tr key={c.name}>
                <td className="trunc" title={c.name}>{c.name}</td>
                <td>{fmtINR(c.agg.spend)}</td>
                <td>{fmtNum(c.agg.impressions)}</td>
                <td>{fmtNum(c.agg.clicks)}</td>
                <td>{c.agg.ctr.toFixed(2)}%</td>
                <td>{c.agg.clicks > 0 ? fmtINR(c.agg.cpc) : '—'}</td>
                <td>{c.agg.leads}</td>
                <td>{c.agg.leads > 0 ? fmtINR(c.agg.cpl) : '—'}</td>
              </tr>
            ))}
            {campaigns.length === 0 && <tr><td colSpan="8" className="muted">No campaigns ran in this range</td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.MetaTab = MetaTab;