// Paid ads — boost posts and view campaign performance alongside organic.

function AdsPage() {
  const hub = window.useClearCast();
  const data = hub.data || {};
  const campaigns = data.adCampaigns || [];
  const [name, setName] = React.useState("");
  const [objective, setObjective] = React.useState("traffic");
  const [budget, setBudget] = React.useState("");
  const [busy, setBusy] = React.useState(false);

  const totalSpend = campaigns.reduce((s, c) => s + (c.spend || 0), 0);
  const totalConv = campaigns.reduce((s, c) => s + (c.conversions || 0), 0);
  const totalRev = campaigns.reduce((s, c) => s + (c.revenue || 0), 0);
  const roas = totalSpend ? (totalRev / totalSpend).toFixed(2) : "—";

  const launch = async () => {
    const b = Number(budget);
    if (!name.trim()) { hub.toast("Name your campaign"); return; }
    if (!Number.isFinite(b) || b <= 0) { hub.toast("Enter a budget"); return; }
    setBusy(true);
    try { await hub.actions.createAdCampaign({ name: name.trim(), objective, budget: b }); setName(""); setBudget(""); }
    finally { setBusy(false); }
  };

  return (
    <div className="page ads-page">
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 16 }}>
        {[["Total spend", `$${totalSpend.toLocaleString()}`], ["Conversions", totalConv.toLocaleString()], ["Revenue", `$${totalRev.toLocaleString()}`], ["ROAS", `${roas}×`]].map(([l, v]) => (
          <div key={l} className="card" style={{ padding: 14 }}><div className="muted" style={{ fontSize: 11.5 }}>{l}</div><div style={{ fontSize: 22, fontWeight: 750, marginTop: 2 }}>{v}</div></div>
        ))}
      </div>

      <div className="card" style={{ padding: 20, marginBottom: 16 }}>
        <h3 style={{ margin: "0 0 4px", fontSize: 15 }}>Boost a post / new campaign</h3>
        <div className="muted" style={{ fontSize: 12.5, marginBottom: 14 }}>Promote your best content and track spend, conversions, and ROAS next to your organic results.</div>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          <input className="input" placeholder="Campaign name" value={name} onChange={(e) => setName(e.target.value)} style={{ flex: 1, minWidth: 180 }} />
          <select className="input" value={objective} onChange={(e) => setObjective(e.target.value)} style={{ width: 150 }}>
            <option value="awareness">Awareness</option>
            <option value="traffic">Traffic</option>
            <option value="engagement">Engagement</option>
            <option value="conversions">Conversions</option>
          </select>
          <input className="input" type="number" placeholder="Budget $" value={budget} onChange={(e) => setBudget(e.target.value)} style={{ width: 120 }} />
          <button className="btn btn-primary" disabled={busy} onClick={launch}><Icon.TrendUp width="14" height="14" /> Launch</button>
        </div>
      </div>

      <div style={{ display: "grid", gap: 10 }}>
        {campaigns.map((c) => (
          <div key={c.id} className="card" style={{ padding: 14 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap", marginBottom: 10 }}>
              <b style={{ fontSize: 14 }}>{c.name}</b>
              <span className="pill" style={{ padding: "1px 7px", fontSize: 10, textTransform: "capitalize" }}>{c.objective}</span>
              <span className={`pill ${c.status === "active" ? "ok" : "warn"}`} style={{ padding: "1px 7px", fontSize: 10, textTransform: "capitalize" }}>{c.status}</span>
              <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
                <button className="btn btn-sm" onClick={() => hub.actions.toggleAdCampaign(c.id)}>{c.status === "active" ? "Pause" : "Resume"}</button>
                <button className="btn btn-sm" onClick={() => hub.actions.deleteAdCampaign(c.id)} style={{ color: "var(--danger)" }}>Delete</button>
              </div>
            </div>
            <div style={{ display: "flex", gap: 20, fontSize: 12.5, flexWrap: "wrap" }}>
              <span><b>${c.spend}</b> <span className="muted">/ ${c.budget} spent</span></span>
              <span><b>{(c.impressions || 0).toLocaleString()}</b> <span className="muted">impr</span></span>
              <span><b>{(c.clicks || 0).toLocaleString()}</b> <span className="muted">clicks</span></span>
              <span><b>{c.conversions}</b> <span className="muted">conv</span></span>
              <span><b style={{ color: c.roas >= 1 ? "var(--accent-2)" : "var(--warn)" }}>{c.roas}×</b> <span className="muted">ROAS</span></span>
            </div>
          </div>
        ))}
        {!campaigns.length && <div className="card" style={{ padding: 28, textAlign: "center" }}><div className="muted" style={{ fontSize: 13 }}>No campaigns yet — launch one above to start boosting.</div></div>}
      </div>
      <div className="muted" style={{ fontSize: 11.5, marginTop: 14, textAlign: "center" }}>Ad delivery runs through Meta/TikTok/Google Ads once those ad accounts are connected.</div>
    </div>
  );
}

window.AdsPage = AdsPage;