/* Google Ads tab — tries live /api/google-refresh first, falls back to the window.__ADORE_GOOGLE snapshot.
   Goes fully live automatically once the Google API secrets are set (see GOOGLE-SETUP.md). */

function gMergeLive(snap, d) {
  // merge live totals + per-campaign metrics over the curated snapshot (keeps notes / search terms / insights)
  const byId = {}; (d.campaigns || []).forEach(c => byId[c.id] = c);
  const campaigns = (snap.campaigns || []).map(c => {
    const lv = byId[c.id]; if (!lv) return c;
    return { ...c, cost: lv.cost, clicks: lv.clicks, impressions: lv.impressions, ctr: lv.ctr,
             conversions: lv.conversions, costPerConv: lv.costPerConv, primaryStatus: lv.primaryStatus || c.primaryStatus };
  });
  const all = d.campaigns || [];
  const counts = {
    total: all.length,
    enabled_serving: all.filter(c => c.status === "ENABLED" && c.primaryStatus !== "ENDED").length,
    enabled_ended: all.filter(c => c.status === "ENABLED" && c.primaryStatus === "ENDED").length,
    paused: all.filter(c => c.status === "PAUSED").length,
    removed: all.filter(c => c.status === "REMOVED").length,
  };
  return { ...snap, totals: d.totals || snap.totals, campaigns,
           campaignCounts: all.length ? counts : snap.campaignCounts,
           asOf: (d.refreshedAt || "").slice(0, 10) || snap.asOf, range: d.range || snap.range, source: "live-api" };
}

const REC_STYLE = {
  cut:       { label: "CUT",       color: "var(--bad)" },
  scale:     { label: "SCALE",     color: "var(--ok)" },
  fix:       { label: "REBALANCE", color: "var(--warn)" },
  test:      { label: "TEST",      color: "var(--info)" },
  structure: { label: "STRUCTURE", color: "var(--t2)" },
  time:      { label: "TIMING",    color: "var(--t2)" },
};
const DEC = [["apply", "👍 Apply"], ["modify", "✍️ Modify"], ["skip", "👎 Skip"]];

// Deep-analysis action queue: review each rec, mark Apply/Modify/Skip + write feedback,
// then copy a request block to paste back to Claude. Decisions persist in localStorage.
function GoogleRecs({ recs, asOf }) {
  const LS_KEY = "adore_g_rec_decisions";
  const card = { background: "var(--panel)", border: "1px solid var(--line)", borderRadius: "var(--r)", boxShadow: "var(--shadow)" };
  const [state, setState] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem(LS_KEY)) || {}; } catch (e) { return {}; }
  });
  const [copied, setCopied] = React.useState(false);
  const [showReq, setShowReq] = React.useState(false);
  const setDec = (id, patch) => setState(s => {
    const next = { ...s, [id]: { ...(s[id] || {}), ...patch } };
    try { localStorage.setItem(LS_KEY, JSON.stringify(next)); } catch (e) {}
    return next;
  });
  if (!recs || !recs.length) return null;
  const decided = recs.filter(r => (state[r.id] || {}).decision);
  function buildRequest() {
    const lines = ["Claude — apply my Google Ads decisions from the dashboard:", ""];
    recs.forEach(r => {
      const d = state[r.id] || {};
      if (!d.decision) return;
      const tag = d.decision.toUpperCase();
      lines.push("[" + tag + "] " + r.id + " — " + r.title);
      if (d.feedback && d.feedback.trim()) lines.push("   ↳ " + d.feedback.trim());
    });
    if (decided.length === 0) lines.push("(no decisions marked yet)");
    lines.push("", "(from ads.adore-homes.com · Google tab · analysis " + (asOf || "") + ")");
    return lines.join("\n");
  }
  async function copyRequest() {
    const txt = buildRequest();
    try { await navigator.clipboard.writeText(txt); }
    catch (e) {
      const ta = document.createElement("textarea"); ta.value = txt;
      document.body.appendChild(ta); ta.select();
      try { document.execCommand("copy"); } catch (_) {}
      ta.remove();
    }
    setCopied(true); setShowReq(true); setTimeout(() => setCopied(false), 2500);
  }
  const lab = { font: "9.5px var(--mono)", letterSpacing: ".14em", textTransform: "uppercase", color: "var(--t3)", marginBottom: 3 };
  return (
    <div style={{ marginBottom: 26 }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 10, flexWrap: "wrap", margin: "4px 0 4px" }}>
        <h3 className="serif" style={{ fontSize: 18, margin: 0 }}>Recommendations &amp; action queue</h3>
        <span style={{ font: "11.5px var(--sans)", color: "var(--t3)" }}>
          Deep analysis of the live account. Mark each, add feedback, then copy the request for Claude to execute.
        </span>
      </div>
      <div style={{ display: "grid", gap: 12 }}>
        {recs.map(r => {
          const st = REC_STYLE[r.action] || REC_STYLE.structure;
          const d = state[r.id] || {};
          return (
            <div key={r.id} style={{ ...card, padding: "14px 16px", borderLeft: "4px solid " + st.color,
              opacity: d.decision === "skip" ? 0.6 : 1 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", marginBottom: 8 }}>
                <span style={{ font: "10px var(--mono)", fontWeight: 700, color: st.color, border: "1px solid " + st.color, borderRadius: 4, padding: "1px 6px" }}>{st.label}</span>
                <span style={{ font: "10.5px var(--mono)", color: "var(--t3)" }}>{r.id} · P{r.priority}</span>
                <span className="serif" style={{ fontSize: 16, color: "var(--t1)", flex: 1, minWidth: 200 }}>{r.title}</span>
                <span style={{ font: "10.5px var(--mono)", color: "var(--t3)" }}>{r.effort}</span>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14, marginBottom: 10 }} className="rec-grid">
                <div><div style={lab}>Finding</div><div style={{ font: "12.5px var(--sans)", color: "var(--t2)", lineHeight: 1.5 }}>{r.finding}</div></div>
                <div><div style={lab}>Recommended change</div><div style={{ font: "12.5px var(--sans)", color: "var(--t1)", lineHeight: 1.5 }}>{r.change}</div></div>
                <div><div style={lab}>Projected impact</div><div style={{ font: "12.5px var(--sans)", color: "var(--t2)", lineHeight: 1.5 }}>{r.impact}</div></div>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" }}>
                {DEC.map(([v, l]) => (
                  <button key={v} className={"chip" + (d.decision === v ? " on" : "")}
                    onClick={() => setDec(r.id, { decision: d.decision === v ? undefined : v })}>{l}</button>
                ))}
                <input className="input" value={d.feedback || ""} placeholder="Your feedback / changes for Claude (optional)…"
                  onChange={e => setDec(r.id, { feedback: e.target.value })}
                  style={{ flex: 1, minWidth: 220, padding: "7px 10px", fontSize: 12.5 }} />
              </div>
            </div>
          );
        })}
      </div>
      <div style={{ ...card, padding: "12px 16px", marginTop: 12, display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap", background: "var(--panel-2)" }}>
        <span style={{ font: "12.5px var(--sans)", color: "var(--t2)" }}>
          <b style={{ color: "var(--t1)" }}>{decided.length}</b> of {recs.length} marked
        </span>
        <button className="chip" style={{ background: "var(--accent)", color: "#fff", borderColor: "var(--accent)" }} onClick={copyRequest}>
          {copied ? "✓ Copied — paste to Claude" : "📋 Copy request for Claude"}
        </button>
        <button className="chip chip-ghost" onClick={() => setShowReq(s => !s)}>{showReq ? "Hide" : "Preview"} request</button>
        <span style={{ font: "11.5px var(--sans)", color: "var(--t3)" }}>Then paste it into Claude Code and I'll make the changes.</span>
      </div>
      {showReq && (
        <pre style={{ ...card, padding: "12px 16px", marginTop: 8, font: "12px var(--mono)", color: "var(--t1)", whiteSpace: "pre-wrap", lineHeight: 1.5 }}>{buildRequest()}</pre>
      )}
    </div>
  );
}

function GoogleTab() {
  const SNAP = window.__ADORE_GOOGLE;
  const [G, setG] = React.useState(SNAP);
  const [live, setLive] = React.useState({ loading: false, msg: null });
  const [range, setRange] = React.useState("30");
  const [from, setFrom] = React.useState("");
  const [to, setTo] = React.useState("");

  const refresh = React.useCallback(async (manual, rng, f, t) => {
    const r_ = rng !== undefined ? rng : "30";
    const qs = new URLSearchParams();
    if (f || t) { if (f) qs.set("from", f); if (t) qs.set("to", t); } else { qs.set("range", r_); }
    qs.set("d", new Date().toLocaleDateString("en-CA"));   // local date for correct "Today" (account tz)
    setLive({ loading: true, msg: null });
    try {
      const r = await fetch("/api/google-refresh?" + qs.toString());
      const d = await r.json();
      if (d && d.ok) { setG(gMergeLive(SNAP, d)); setLive({ loading: false, msg: "✓ live · " + (d.range || "") }); }
      else { setLive({ loading: false, msg: manual ? (d && d.error ? d.error : "Live not configured — showing snapshot.") : null }); }
    } catch (e) { setLive({ loading: false, msg: manual ? "Live not available — showing snapshot." : null }); }
    if (manual) setTimeout(() => setLive(s => ({ ...s, msg: null })), 5000);
  }, [SNAP]);

  React.useEffect(() => { refresh(false, "30"); }, [refresh]);   // auto-try live on open
  const pick = (v) => { setRange(v); setFrom(""); setTo(""); refresh(true, v); };

  if (!G) return <div className="card" style={{ padding: 20, color: "var(--t3)" }}>No Google data loaded.</div>;
  const t = G.totals || {};
  const isLive = G.source === "live-api";
  const recColor = { win: "var(--ok)", warn: "var(--warn)", stop: "var(--bad)", info: "var(--info)" };
  const recLabel = { win: "SCALE", warn: "REFRESH", stop: "PAUSE", info: "INSIGHT" };
  const card = { background: "var(--panel)", border: "1px solid var(--line)", borderRadius: "var(--r)", boxShadow: "var(--shadow)" };
  const kpis = [
    ["Spend", fmt.money(t.cost)], ["Conversions", fmt.int(t.conversions)],
    ["Cost / conv", fmt.money(t.costPerConv)], ["Clicks", fmt.int(t.clicks)],
    ["Impressions", fmt.int(t.impressions)], ["CTR", (t.ctr || 0) + "%"],
  ];
  return (
    <div className="view">
      <div style={{ display: "flex", alignItems: "baseline", gap: 12, flexWrap: "wrap", marginBottom: 4 }}>
        <h2 className="serif" style={{ margin: 0, fontSize: 24 }}>Google Ads · {G.accountName}</h2>
        <span style={{ font: "11px var(--mono)", color: "var(--t3)", letterSpacing: ".1em" }}>ACCT {G.account} · {G.range} · {G.asOf}</span>
        <span className={"mode-pill " + (isLive ? "live" : "")} style={{ marginLeft: 4 }}>
          <span className="dot"></span>{isLive ? "Live · Google API" : "Snapshot"}
        </span>
        <button className="chip chip-ghost" style={{ marginLeft: "auto" }} onClick={() => refresh(true)} disabled={live.loading}>
          <Ico d={I.refresh} s={13} cls={live.loading ? "spin" : ""} /> {live.loading ? "Refreshing…" : "Refresh from Google"}
        </button>
        {live.msg && <span style={{ font: "12px var(--mono)", color: "var(--t3)" }}>{live.msg}</span>}
      </div>

      {/* date range — same options as the Leads tab */}
      <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", margin: "10px 0 14px" }}>
        <span style={{ font: "11px var(--mono)", color: "var(--t3)", letterSpacing: ".08em", textTransform: "uppercase" }}>Date range</span>
        {[["today", "Today"], ["all", "All time"], ["7", "7 days"], ["30", "30 days"], ["90", "90 days"], ["120", "120 days"], ["150", "150 days"], ["180", "180 days"], ["365", "365 days"]].map(([v, lab]) => (
          <button key={v} className={"chip" + (range === v && !from && !to ? " on" : "")} disabled={live.loading}
            onClick={() => pick(v)}>{lab}</button>
        ))}
        <span style={{ color: "var(--t4)", margin: "0 2px" }}>·</span>
        <input type="date" className="input" value={from} max={to || undefined} disabled={live.loading}
          onChange={e => { setFrom(e.target.value); refresh(true, range, e.target.value, to); }}
          title="From date" style={{ padding: "6px 9px", fontSize: 12, width: 150, flex: "none" }} />
        <span style={{ color: "var(--t3)" }}>→</span>
        <input type="date" className="input" value={to} min={from || undefined} disabled={live.loading}
          onChange={e => { setTo(e.target.value); refresh(true, range, from, e.target.value); }}
          title="To date" style={{ padding: "6px 9px", fontSize: 12, width: 150, flex: "none" }} />
        {(from || to) && <button className="chip chip-ghost" disabled={live.loading} onClick={() => pick("30")}>Clear dates</button>}
      </div>

      <div style={{ font: "12.5px var(--sans)", color: "var(--t2)", marginBottom: 18 }}>
        {G.campaignCounts.enabled_serving} serving · {G.campaignCounts.enabled_ended} enabled-but-ended · {G.campaignCounts.paused} paused · {G.campaignCounts.removed} removed (of {G.campaignCounts.total}).
        {isLive ? " Live read via the Google Ads API." : " Snapshot via the Google Ads MCP — set creds (GOOGLE-SETUP.md) for live."}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(150px,1fr))", gap: 12, marginBottom: 22 }}>
        {kpis.map(([l, v], i) => (
          <div key={i} style={{ ...card, padding: "14px 16px", borderTop: "3px solid var(--gold)" }}>
            <div style={{ font: "10.5px var(--mono)", letterSpacing: ".14em", textTransform: "uppercase", color: "var(--t3)" }}>{l}</div>
            <div className="serif" style={{ fontSize: 26, marginTop: 6, color: "var(--t1)" }}>{v}</div>
          </div>
        ))}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(270px,1fr))", gap: 14, marginBottom: 24 }}>
        {(G.insights || []).map((it, i) => (
          <div key={i} style={{ ...card, padding: "14px 16px", borderLeft: `3px solid ${recColor[it.kind] || "var(--info)"}` }}>
            <div style={{ font: "10px var(--mono)", letterSpacing: ".14em", color: recColor[it.kind] || "var(--info)", marginBottom: 4 }}>{recLabel[it.kind] || "INSIGHT"}</div>
            <div className="serif" style={{ fontSize: 15, marginBottom: 4, color: "var(--t1)" }}>{it.title}</div>
            <div style={{ font: "12.5px var(--sans)", color: "var(--t2)", lineHeight: 1.5 }}>{it.body}</div>
          </div>
        ))}
      </div>

      <GoogleRecs recs={G.recommendations || []} asOf={G.analysisAsOf || G.asOf} />

      <h3 className="serif" style={{ fontSize: 16, margin: "4px 0 8px" }}>Top search terms (30d)</h3>
      <div style={{ ...card, overflow: "hidden", marginBottom: 22 }}>
        <table style={{ width: "100%", borderCollapse: "collapse", font: "13px var(--sans)" }}>
          <thead><tr style={{ background: "var(--panel-2)", color: "var(--t3)", textAlign: "left" }}>
            {["Search term", "Clicks", "Cost", "Conv", "CTR", ""].map((h, i) => <th key={i} style={{ padding: "10px 14px", font: "10.5px var(--mono)", letterSpacing: ".1em", textTransform: "uppercase" }}>{h}</th>)}
          </tr></thead>
          <tbody>{(G.topSearchTerms || []).map((s, i) => (
            <tr key={i} style={{ borderTop: "1px solid var(--line)" }}>
              <td style={{ padding: "9px 14px", color: "var(--t1)" }}>{s.term}</td>
              <td style={{ padding: "9px 14px", color: "var(--t2)" }}>{s.clicks}</td>
              <td style={{ padding: "9px 14px", color: "var(--t1)" }}>{fmt.money(s.cost)}</td>
              <td style={{ padding: "9px 14px", color: s.conv > 0 ? "var(--ok)" : "var(--t3)" }}>{s.conv}</td>
              <td style={{ padding: "9px 14px", color: "var(--t2)" }}>{s.ctr}%</td>
              <td style={{ padding: "9px 14px", font: "11px var(--sans)", color: s.flag ? "var(--warn)" : "var(--t4)" }}>{s.flag || ""}</td>
            </tr>))}</tbody>
        </table>
        {isLive && <div style={{ padding: "8px 14px", font: "11px var(--mono)", color: "var(--t4)" }}>Search terms shown from latest snapshot (live API returns campaign metrics; ask Claude to refresh terms).</div>}
      </div>

      <h3 className="serif" style={{ fontSize: 16, margin: "4px 0 8px" }}>Campaigns</h3>
      <div style={{ ...card, overflow: "hidden" }}>
        <table style={{ width: "100%", borderCollapse: "collapse", font: "13px var(--sans)" }}>
          <thead><tr style={{ background: "var(--panel-2)", color: "var(--t3)", textAlign: "left" }}>
            {["Campaign", "Type", "Status", "Spend", "Conv", "Note"].map((h, i) => <th key={i} style={{ padding: "10px 14px", font: "10.5px var(--mono)", letterSpacing: ".1em", textTransform: "uppercase" }}>{h}</th>)}
          </tr></thead>
          <tbody>{(G.campaigns || []).map((c, i) => (
            <tr key={i} style={{ borderTop: "1px solid var(--line)" }}>
              <td style={{ padding: "9px 14px", color: "var(--t1)", fontWeight: 600 }}>{c.name}</td>
              <td style={{ padding: "9px 14px", color: "var(--t2)" }}>{c.type}</td>
              <td style={{ padding: "9px 14px", color: c.primaryStatus === "LIMITED" ? "var(--warn)" : c.primaryStatus === "ENDED" ? "var(--bad)" : "var(--t2)" }}>{c.primaryStatus}</td>
              <td style={{ padding: "9px 14px", color: "var(--t1)" }}>{c.cost ? fmt.money(c.cost) : "—"}</td>
              <td style={{ padding: "9px 14px", color: c.conversions ? "var(--ok)" : "var(--t3)" }}>{c.conversions || "—"}</td>
              <td style={{ padding: "9px 14px", font: "11.5px var(--sans)", color: "var(--t2)", maxWidth: 280 }}>{c.note || ""}</td>
            </tr>))}</tbody>
        </table>
      </div>
    </div>
  );
}
window.GoogleTab = GoogleTab;