// tabs/creative.jsx — Meta ad-level performance with thumbnails

const { useState: useStateC } = React;

function CreativeTab({ ctx }) {
  const { range, customStart, customEnd } = ctx;
  const ads = SriSriData.creativeBreakdown(range, customStart, customEnd);
  const [sortBy, setSortBy] = useStateC('spend');
  const [view, setView]     = useStateC('grid'); // grid | table
  const [minSpend, setMinSpend] = useStateC(0);

  const fmtINR = (v) => '₹' + Math.round(v).toLocaleString('en-IN');
  const fmtNum = (v) => Math.round(v).toLocaleString('en-IN');

  const filtered = ads.filter(a => a.agg.spend >= minSpend);
  const sorted = [...filtered].sort((a, b) => {
    if (sortBy === 'spend')      return b.agg.spend - a.agg.spend;
    if (sortBy === 'leads')      return b.agg.leads - a.agg.leads;
    if (sortBy === 'cpl')        return (a.agg.cpl || 9e9) - (b.agg.cpl || 9e9);
    if (sortBy === 'ctr')        return b.agg.ctr - a.agg.ctr;
    if (sortBy === 'clicks')     return b.agg.clicks - a.agg.clicks;
    return 0;
  });

  const totals = ads.reduce((a, c) => ({
    spend: a.spend + c.agg.spend, leads: a.leads + c.agg.leads,
    impressions: a.impressions + c.agg.impressions, clicks: a.clicks + c.agg.clicks,
  }), { spend: 0, leads: 0, impressions: 0, clicks: 0 });

  const avgCpl = totals.leads > 0 ? totals.spend / totals.leads : 0;

  const insight = ads.length > 0
    ? `<b>${ads.length}</b> distinct ads ran in range with combined <b>${fmtINR(totals.spend)}</b> spend → <b>${totals.leads}</b> leads. Top performer: <b>${sorted[0]?.ad_name?.slice(0,60) || '—'}</b> with <b>${sorted[0]?.agg?.leads || 0}</b> leads at <b>${sorted[0]?.agg?.leads > 0 ? fmtINR(sorted[0].agg.cpl) : '—'}</b> CPL.`
    : `No Meta ad-level data in this range.`;

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

      <div className="grid grid-4">
        <KPI label="Active Ads" value={ads.length} format={fmtNum}
             delta={0} prev={fmtNum(ads.length)} color="#5B5BF0" icon="Layers"/>
        <KPI label="Total Spend" value={totals.spend} format={fmtINR}
             delta={0} prev={fmtINR(totals.spend)} color="#FFB876" icon="Wallet"/>
        <KPI label="Total Leads" value={totals.leads} format={fmtNum}
             delta={0} prev={fmtNum(totals.leads)} color="#FF8FB1" icon="Trophy"/>
        <KPI label="Avg CPL" value={avgCpl} format={fmtINR}
             delta={0} prev={fmtINR(avgCpl)} color="#6FD2C0" icon="Tag"/>
      </div>

      <div className="card">
        <div className="card-head" style={{ alignItems: 'center' }}>
          <div>
            <div className="card-title">Creative leaderboard</div>
            <div className="card-sub">Sorted by {sortBy} · {sorted.length} of {ads.length} ads</div>
          </div>
          <div className="row" style={{ gap: 8 }}>
            <div className="seg">
              <div className={`seg-item ${view==='grid'?'active':''}`} onClick={() => setView('grid')}>Grid</div>
              <div className={`seg-item ${view==='table'?'active':''}`} onClick={() => setView('table')}>Table</div>
            </div>
            <div className="seg">
              {['spend','leads','cpl','ctr','clicks'].map(k => (
                <div key={k} className={`seg-item ${sortBy===k?'active':''}`} onClick={() => setSortBy(k)}>{k.toUpperCase()}</div>
              ))}
            </div>
          </div>
        </div>

        {view === 'grid' && (
          <div className="creative-grid">
            {sorted.map(a => (
              <div key={a.ad_id} className="creative-card">
                <div className="creative-thumb">
                  {a.thumbnail_url
                    ? <img src={a.thumbnail_url} alt={a.ad_name} loading="lazy" onError={(e)=>{e.target.style.display='none'}}/>
                    : <div className="creative-thumb-empty">No preview</div>}
                </div>
                <div className="creative-body">
                  <div className="creative-name" title={a.ad_name}>{a.ad_name}</div>
                  <div className="creative-meta" title={a.campaign_name}>{a.campaign_name}</div>
                  <div className="creative-stats">
                    <div><span>Spend</span><b>{fmtINR(a.agg.spend)}</b></div>
                    <div><span>Leads</span><b>{a.agg.leads}</b></div>
                    <div><span>CPL</span><b>{a.agg.leads > 0 ? fmtINR(a.agg.cpl) : '—'}</b></div>
                    <div><span>CTR</span><b>{a.agg.ctr.toFixed(2)}%</b></div>
                    <div><span>Clicks</span><b>{fmtNum(a.agg.clicks)}</b></div>
                    <div><span>Impr</span><b>{fmtNum(a.agg.impressions)}</b></div>
                  </div>
                </div>
              </div>
            ))}
            {sorted.length === 0 && <div style={{ padding: 30, textAlign: 'center', color: 'var(--ink-3)' }}>No ads in this range</div>}
          </div>
        )}

        {view === 'table' && (
          <table className="metrics">
            <thead>
              <tr>
                <th></th><th>Ad</th><th>Campaign</th><th>Spend</th>
                <th>Impr</th><th>Clicks</th><th>CTR</th><th>Leads</th><th>CPL</th>
              </tr>
            </thead>
            <tbody>
              {sorted.map(a => (
                <tr key={a.ad_id}>
                  <td>{a.thumbnail_url ? <img src={a.thumbnail_url} alt="" style={{ width: 40, height: 40, borderRadius: 6, objectFit: 'cover' }}/> : <div style={{width:40,height:40,background:'var(--surface-2)',borderRadius:6}}/>}</td>
                  <td className="trunc" title={a.ad_name}>{a.ad_name}</td>
                  <td className="trunc" title={a.campaign_name} style={{ maxWidth: 200 }}>{a.campaign_name}</td>
                  <td>{fmtINR(a.agg.spend)}</td>
                  <td>{fmtNum(a.agg.impressions)}</td>
                  <td>{fmtNum(a.agg.clicks)}</td>
                  <td>{a.agg.ctr.toFixed(2)}%</td>
                  <td>{a.agg.leads}</td>
                  <td>{a.agg.leads > 0 ? fmtINR(a.agg.cpl) : '—'}</td>
                </tr>
              ))}
              {sorted.length === 0 && <tr><td colSpan="9" className="muted">No ads in this range</td></tr>}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}

window.CreativeTab = CreativeTab;