// tabs/creatives.jsx — Thrsty Creative (ad-level) Performance

function CreativesTab({ ctx }) {
  const { campaign } = ctx;
  const all = ThrstyData.realCreatives();
  const ccy = ThrstyData.RAW_META()?.currencySymbol || '₹';
  const fmtFull = (v) => `${ccy}${Math.round(v).toLocaleString('en-IN')}`;

  const [sortKey, setSortKey] = React.useState('spend');
  const [sortDir, setSortDir] = React.useState('desc');

  const filtered = (campaign === 'all') ? all : all.filter(r => r.campaign === campaign);
  const rows = filtered.slice().sort((a, b) => {
    const av = a[sortKey], bv = b[sortKey];
    if (typeof av === 'string') return sortDir === 'asc' ? av.localeCompare(bv) : bv.localeCompare(av);
    return sortDir === 'asc' ? (av - bv) : (bv - av);
  });

  const totalSpend = filtered.reduce((a, r) => a + r.spend, 0) || 1;
  const totalLpvs = filtered.reduce((a, r) => a + r.lpvs, 0);
  const totalLinkClicks = filtered.reduce((a, r) => a + r.linkClicks, 0);
  const totalVideoViews = filtered.reduce((a, r) => a + r.videoViews, 0);

  // Best/worst flags
  const trafficAds = filtered.filter(r => r.lpvs > 0);
  const bestCostPerLpv = trafficAds.length ? trafficAds.slice().sort((a,b) => a.costPerLpv - b.costPerLpv)[0] : null;
  const worstCpc       = filtered.length ? filtered.slice().sort((a,b) => b.cpc - a.cpc)[0] : null;
  const bestCtr        = filtered.length ? filtered.slice().sort((a,b) => b.ctr - a.ctr)[0] : null;

  const sortBy = (key) => {
    if (key === sortKey) setSortDir(d => d === 'asc' ? 'desc' : 'asc');
    else { setSortKey(key); setSortDir(typeof rows[0]?.[key] === 'string' ? 'asc' : 'desc'); }
  };

  const TH = ({ k, num, children }) => (
    <th className={num ? 'num' : ''} style={{ cursor: 'pointer', userSelect: 'none' }} onClick={() => sortBy(k)}>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
        {children}
        {sortKey === k ? (sortDir === 'asc' ? <Icons.Up size={10}/> : <Icons.Down size={10}/>) : null}
      </span>
    </th>
  );

  return (
    <div className="content">
      <AIBanner insights={[
        `<b>${filtered.length}</b> creatives in scope. Total spend <b>${fmtFull(totalSpend)}</b>, link clicks <b>${totalLinkClicks.toLocaleString('en-IN')}</b>, LPVs <b>${totalLpvs.toLocaleString('en-IN')}</b>, video views <b>${totalVideoViews.toLocaleString('en-IN')}</b>.`,
        bestCtr ? `🏆 Highest CTR: <b>${bestCtr.ad}</b> at <b>${bestCtr.ctr.toFixed(2)}%</b> (CPC ${ccy}${bestCtr.cpc.toFixed(2)}, spend ${fmtFull(bestCtr.spend)}).` : '',
        bestCostPerLpv ? `💎 Lowest Cost/LPV: <b>${bestCostPerLpv.ad}</b> at <b>${ccy}${bestCostPerLpv.costPerLpv.toFixed(2)}</b> per LPV.` : '',
        worstCpc ? `⚠️ Highest CPC: <b>${worstCpc.ad}</b> at <b>${ccy}${worstCpc.cpc.toFixed(2)}</b> — review or pause.` : '',
      ].filter(Boolean)}/>

      <div className="card">
        <div className="card-head">
          <div className="card-head-info">
            <div className="card-title">Ad-level performance</div>
            <div className="card-sub">{filtered.length} ads · click any column header to sort{campaign === 'all' ? '' : ` · filtered to ${campaign}`}</div>
          </div>
        </div>
        <div style={{ overflowX: 'auto' }}>
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 70 }}>Preview</th>
                <TH k="campaign">Campaign</TH>
                <TH k="adset">Adset</TH>
                <TH k="ad">Ad</TH>
                <TH k="spend" num>Spend</TH>
                <TH k="impressions" num>Imp.</TH>
                <TH k="reach" num>Reach</TH>
                <TH k="linkClicks" num>Link Clicks</TH>
                <TH k="lpvs" num>LPVs</TH>
                <TH k="videoViews" num>Video Views</TH>
                <TH k="ctr" num>CTR</TH>
                <TH k="cpc" num>CPC</TH>
                <TH k="costPerLpv" num>Cost/LPV</TH>
                <TH k="frequency" num>Freq.</TH>
                <TH k="postEng" num>Post Eng.</TH>
                <TH k="saves" num>Saves</TH>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i}>
                  <td>
                    {r.preview ? (
                      <a href={r.preview} target="_blank" rel="noopener noreferrer"
                         className="btn btn-ghost"
                         style={{ padding: '4px 8px', fontSize: 11 }}
                         title="Open ad preview on Facebook">
                        <Icons.Eye size={12}/> View
                      </a>
                    ) : <span style={{ color: 'var(--ink-4)', fontSize: 11 }}>—</span>}
                  </td>
                  <td title={r.campaign}>{r.campaign.replace(/^LBLU_/,'')}</td>
                  <td>{r.adset}</td>
                  <td className="strong">{r.ad}</td>
                  <td className="num">{fmtFull(r.spend)}</td>
                  <td className="num">{r.impressions.toLocaleString('en-IN')}</td>
                  <td className="num">{r.reach.toLocaleString('en-IN')}</td>
                  <td className="num">{r.linkClicks.toLocaleString('en-IN')}</td>
                  <td className="num">{r.lpvs.toLocaleString('en-IN')}</td>
                  <td className="num">{r.videoViews.toLocaleString('en-IN')}</td>
                  <td className="num">{r.ctr.toFixed(2)}%</td>
                  <td className="num">{ccy}{r.cpc.toFixed(2)}</td>
                  <td className="num">{r.lpvs > 0 ? `${ccy}${r.costPerLpv.toFixed(2)}` : '—'}</td>
                  <td className="num">{r.frequency.toFixed(2)}x</td>
                  <td className="num">{r.postEng.toLocaleString('en-IN')}</td>
                  <td className="num">{r.saves}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

window.CreativesTab = CreativesTab;