/* Meta Ads Manager mock — campaigns spinning up, budget bar filling. */
const { useState: useStateAds, useEffect: useEffectAds } = React;

const campaigns = [
  { name: "Diwali Sale · Bangalore", budget: 1800, status: "Active", roas: "4.2x" },
  { name: "Retarget — Cart Abandon", budget: 900, status: "Active", roas: "6.8x" },
  { name: "Lookalike — HSR 5km", budget: 1200, status: "Learning", roas: "2.1x" },
  { name: "WhatsApp CTWA — New", budget: 600, status: "Active", roas: "5.4x" },
];

function AdsStage() {
  const [n, setN] = useStateAds(1);
  useEffectAds(() => {
    const t = setInterval(() => setN(v => (v % campaigns.length) + 1), 1400);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="ads-stage">
      <div className="ads-head">
        <div className="ads-tabs">
          <span className="tab on">Campaigns</span>
          <span className="tab">Ad sets</span>
          <span className="tab">Ads</span>
        </div>
        <div className="ads-new">+ New</div>
      </div>
      <div className="ads-rows">
        <div className="ads-row header">
          <span>Campaign</span><span>Status</span><span>Budget</span><span>ROAS</span>
        </div>
        {campaigns.slice(0, n).map((c, i) => (
          <div key={c.name} className="ads-row" style={{ animationDelay: `${i * 80}ms` }}>
            <span className="name">
              <span className={`status-dot ${c.status === 'Learning' ? 'learn' : 'live'}`} />
              {c.name}
            </span>
            <span className={`pill ${c.status === 'Learning' ? 'learn' : 'live'}`}>{c.status}</span>
            <span className="budget">
              <span className="bval">₹{c.budget}</span>
              <span className="bbar"><span className="bfill" style={{ width: `${Math.min(100, c.budget / 20)}%` }} /></span>
            </span>
            <span className="roas">{c.roas}</span>
          </div>
        ))}
      </div>
      <style>{`
        .ads-stage { width: 100%; height: 100%; padding: 16px; display: flex; flex-direction: column; gap: 12px; font-family: var(--f-sans); }
        .ads-head { display: flex; justify-content: space-between; align-items: center; }
        .ads-tabs { display: flex; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 3px; }
        html.dark .ads-tabs { background: var(--paper-3); }
        .tab { padding: 5px 10px; font-size: 11.5px; color: var(--muted); border-radius: 6px; }
        .tab.on { background: var(--ink); color: var(--paper); }
        .ads-new { font-size: 11.5px; color: var(--accent-ink); background: var(--accent); padding: 6px 10px; border-radius: 6px; font-weight: 500; }
        .ads-rows { display: flex; flex-direction: column; gap: 2px; flex: 1; }
        .ads-row {
          display: grid; grid-template-columns: 2fr 1fr 1.3fr .7fr;
          gap: 8px; align-items: center;
          padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
          font-size: 12px; color: var(--ink);
          animation: ads-in .35s cubic-bezier(.2,.7,.2,1) both;
        }
        html.dark .ads-row { background: var(--paper-3); }
        .ads-row.header { background: transparent; border: none; color: var(--muted); font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; padding: 4px 12px; animation: none; }
        .ads-row .name { display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
        .status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
        .status-dot.live { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
        .status-dot.learn { background: #f59e0b; }
        .pill { font-size: 10.5px; font-weight: 500; padding: 3px 8px; border-radius: 999px; justify-self: start; }
        .pill.live { background: var(--accent-soft); color: var(--accent-ink); }
        html.dark .pill.live { color: #7ce3b0; }
        .pill.learn { background: #fef3c7; color: #78350f; }
        html.dark .pill.learn { background: #3a2a10; color: #f6c280; }
        .budget { display: flex; align-items: center; gap: 8px; }
        .bval { font-family: var(--f-mono); font-size: 11px; color: var(--muted); min-width: 42px; }
        .bbar { flex: 1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
        .bfill { display: block; height: 100%; background: var(--ink); animation: bar-fill 1.4s cubic-bezier(.2,.7,.2,1) both; }
        html.dark .bfill { background: var(--accent); }
        .roas { font-family: var(--f-serif); font-style: italic; font-size: 18px; }
        @keyframes ads-in { from { opacity: 0; transform: translateY(-4px);} to { opacity:1; transform:none;} }
        @keyframes bar-fill { from { width: 0;} }
      `}</style>
    </div>
  );
}

window.AdsStage = AdsStage;