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

const { useState: useStateCr } = React;

function CreativesTab({ ctx }) {
  const { range, customStart, customEnd } = ctx;
  const [sortKey, setSortKey] = useStateCr('cpl');
  const [sortDir, setSortDir] = useStateCr('asc');
  const [filterCampaign, setFilterCampaign] = useStateCr('all');
  const [filterAdset, setFilterAdset] = useStateCr('all');

  const allAds = EPData.realAds(range, customStart, customEnd);
  const campaigns = Array.from(new Set(allAds.map(a => a.campaign)));
  const adsets = Array.from(new Set(
    allAds.filter(a => filterCampaign === 'all' || a.campaign === filterCampaign).map(a => a.adset)
  ));

  let ads = allAds.filter(a =>
    (filterCampaign === 'all' || a.campaign === filterCampaign) &&
    (filterAdset === 'all' || a.adset === filterAdset)
  );

  // Sorting
  const getVal = (a, k) => {
    if (k === 'campaign') return a.campaign;
    if (k === 'adset')    return a.adset;
    if (k === 'ad')       return a.ad;
    return a.totals[k] || 0;
  };
  ads = ads.sort((a, b) => {
    const va = getVal(a, sortKey), vb = getVal(b, sortKey);
    if (typeof va === 'string') return sortDir === 'asc' ? va.localeCompare(vb) : vb.localeCompare(va);
    // CPL: 0 means no leads — push to bottom
    if (sortKey === 'cpl') {
      if (va === 0 && vb === 0) return 0;
      if (va === 0) return 1;
      if (vb === 0) return -1;
    }
    return sortDir === 'asc' ? va - vb : vb - va;
  });

  const setSort = (k) => {
    if (sortKey === k) setSortDir(sortDir === 'asc' ? 'desc' : 'asc');
    else { setSortKey(k); setSortDir(['ad','campaign','adset'].includes(k) ? 'asc' : (k === 'cpl' ? 'asc' : 'desc')); }
  };
  const sym = '₹';
  const fmtFull = (v) => `${sym}${Math.round(v).toLocaleString('en-IN')}`;

  // Aggregates for hero strip
  const totals = ads.reduce((a, x) => {
    a.spend += x.totals.spend; a.leads += x.totals.leads;
    a.impressions += x.totals.impressions; a.clicks += x.totals.clicks;
    return a;
  }, { spend: 0, leads: 0, impressions: 0, clicks: 0 });
  totals.cpl = totals.leads > 0 ? totals.spend / totals.leads : 0;
  totals.ctr = totals.impressions > 0 ? totals.clicks / totals.impressions * 100 : 0;
  totals.cpc = totals.clicks > 0 ? totals.spend / totals.clicks : 0;

  // Highlights
  const adsWithLeads = ads.filter(a => a.totals.leads > 0);
  const bestAd = adsWithLeads.length ? [...adsWithLeads].sort((a,b) => a.totals.cpl - b.totals.cpl)[0] : null;
  const worstAd = adsWithLeads.length ? [...ads].sort((a,b) => (b.totals.cpl || Infinity) - (a.totals.cpl || Infinity))[0] : null;
  const noLeadHighSpend = ads.filter(a => a.totals.leads === 0 && a.totals.spend > 1000)
    .sort((a,b) => b.totals.spend - a.totals.spend)[0];

  const SortHead = ({ k, label, num }) => (
    <th className={num ? 'num' : ''} style={{ cursor: 'pointer', userSelect: 'none' }} onClick={() => setSort(k)}>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
        {label}
        {sortKey === k && <span style={{ fontSize: 9 }}>{sortDir === 'asc' ? '▲' : '▼'}</span>}
      </span>
    </th>
  );

  return (
    <div className="content">
      <AIBanner insights={[
        bestAd ? `Best creative: <b>${bestAd.campaign.split('_').slice(-1)[0]} · ${bestAd.adset} · ${bestAd.ad}</b> — <b class="pos">${fmtFull(bestAd.totals.cpl)} CPL</b> on ${bestAd.totals.leads} leads.${noLeadHighSpend ? ` Worst spend-no-lead: <b>${noLeadHighSpend.adset}/${noLeadHighSpend.ad}</b> spent <b class="neg">${fmtFull(noLeadHighSpend.totals.spend)}</b> with 0 leads — pause candidate.` : ''}` : 'No leads recorded for the selected filters.',
      ]}/>

      <div className="grid grid-4">
        <KPI label="Ads in scope" value={ads.length} prev={ads.length} delta={0} icon="Layers" color="#5B5BF0" format={(v) => v}/>
        <KPI label="Combined spend" value={totals.spend} prev={totals.spend} delta={0} icon="Dollar" color="#FFB876" format={fmtFull}/>
        <KPI label="Combined leads" value={totals.leads} prev={totals.leads} delta={0} icon="Users" color="#34B27B" format={(v) => v.toLocaleString('en-IN')}/>
        <KPI label="Blended CPL"   value={totals.cpl} prev={totals.cpl} delta={0} icon="Bolt" color="#FF8FB1" format={(v) => v > 0 ? fmtFull(v) : '—'}/>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="card-head-info">
            <div className="card-title">Filters</div>
            <div className="card-sub">{ads.length} ads matching · sorted by {sortKey} {sortDir === 'asc' ? '↑' : '↓'}</div>
          </div>
        </div>
        <div className="row" style={{ gap: 8, flexWrap: 'wrap', padding: '4px 0' }}>
          <div className="seg">
            <div className={`seg-item ${filterCampaign === 'all' ? 'active' : ''}`} onClick={() => { setFilterCampaign('all'); setFilterAdset('all'); }}>All campaigns</div>
            {campaigns.map(c => (
              <div key={c} className={`seg-item ${filterCampaign === c ? 'active' : ''}`} onClick={() => { setFilterCampaign(c); setFilterAdset('all'); }}>{c.length > 25 ? c.slice(0,22) + '…' : c}</div>
            ))}
          </div>
          {filterCampaign !== 'all' && (
            <div className="seg">
              <div className={`seg-item ${filterAdset === 'all' ? 'active' : ''}`} onClick={() => setFilterAdset('all')}>All ad sets</div>
              {adsets.map(s => (
                <div key={s} className={`seg-item ${filterAdset === s ? 'active' : ''}`} onClick={() => setFilterAdset(s)}>{s}</div>
              ))}
            </div>
          )}
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="card-head-info">
            <div className="card-title">Creative performance</div>
            <div className="card-sub">Click any column to sort · CPL = 0 means no leads delivered</div>
          </div>
        </div>
        <table className="tbl">
          <thead>
            <tr>
              <SortHead k="campaign" label="Campaign"/>
              <SortHead k="adset"    label="Ad Set"/>
              <SortHead k="ad"       label="Ad"/>
              <SortHead k="spend"        label="Spend"        num/>
              <SortHead k="impressions"  label="Impressions"  num/>
              <SortHead k="clicks"       label="Clicks"       num/>
              <SortHead k="ctr"          label="CTR"          num/>
              <SortHead k="cpc"          label="CPC"          num/>
              <SortHead k="leads"        label="Leads"        num/>
              <SortHead k="cpl"          label="CPL"          num/>
            </tr>
          </thead>
          <tbody>
            {ads.length === 0 && (
              <tr><td colSpan="10" style={{ textAlign: 'center', padding: 24, color: 'var(--ink-3)' }}>No ads in this period match the filters.</td></tr>
            )}
            {ads.map((a, i) => {
              const t = a.totals;
              const cplGood = t.cpl > 0 && t.cpl < 500;
              const cplBad = t.cpl > 1000;
              const noLeadHighSpend = t.leads === 0 && t.spend > 1000;
              const shortCamp = a.campaign.replace('YRD_', '');
              return (
                <tr key={i}>
                  <td title={a.campaign}>{shortCamp.length > 22 ? shortCamp.slice(0,20) + '…' : shortCamp}</td>
                  <td>{a.adset}</td>
                  <td className="strong">{a.ad}</td>
                  <td className="num">{fmtFull(t.spend)}</td>
                  <td className="num">{t.impressions.toLocaleString('en-IN')}</td>
                  <td className="num">{t.clicks.toLocaleString('en-IN')}</td>
                  <td className="num">{t.ctr.toFixed(2)}%</td>
                  <td className="num">{fmtFull(t.cpc)}</td>
                  <td className="num">{t.leads.toLocaleString('en-IN')}</td>
                  <td className="num">
                    {t.cpl > 0
                      ? <span className={`badge ${cplGood ? 'pos' : cplBad ? 'neg' : ''}`}>{fmtFull(t.cpl)}</span>
                      : (noLeadHighSpend ? <span className="badge neg">no leads</span> : <span style={{ color: 'var(--ink-4)' }}>—</span>)}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.CreativesTab = CreativesTab;