/* global React, window, fmt, Icon */
// =====================================================================
// Google Ads view — reports, campaign & ad performance, keywords,
// search terms, and hybrid recommendations (analysis now, native later).
// Reads window.googleRaw populated by data-supabase.jsx fetchAll().
// =====================================================================

const { useState: useSG, useMemo: useMG } = React;

const G_PRODUCTS = [
  { id: "all",     es: "Todos",   en: "All",     color: "var(--wm-blue)" },
  { id: "solar",   es: "Solar",   en: "Solar",   color: "var(--wm-orange)" },
  { id: "roofing", es: "Roofing", en: "Roofing", color: "var(--wm-blue-vibrant, #2f6fed)" },
  { id: "water",   es: "Water",   en: "Water",   color: "#1aa6c2" },
  { id: "storage", es: "Anker",   en: "Anker",   color: "#7c5cd0" },
];
const G_PROD_COLOR = { solar: "var(--wm-orange)", roofing: "#2f6fed", water: "#1aa6c2", storage: "#7c5cd0", other: "var(--wm-fg-muted)" };
const G_PROD_LABEL = { solar: "Solar", roofing: "Roofing", water: "Water", storage: "Anker", other: "Otros" };

function gMoney(n) {
  if (window.fmt && fmt.money) return fmt.money(Number(n || 0), { compact: true });
  return "$" + Math.round(Number(n || 0)).toLocaleString("en-US");
}
const gNum = (n) => Number(n || 0).toLocaleString("en-US");
const gPct = (frac) => (Number(frac || 0) * 100).toFixed(2) + "%";

function GoogleProductBadge({ product }) {
  const color = G_PROD_COLOR[product] || G_PROD_COLOR.other;
  return (
    <span style={{
      display: "inline-block", padding: "2px 8px", borderRadius: 999, fontSize: 10,
      fontWeight: 800, color: "#fff", background: color, letterSpacing: "0.02em",
    }}>{G_PROD_LABEL[product] || product || "—"}</span>
  );
}

function GoogleView({ lang }) {
  const t = window.i18n?.[lang] || { common: {} };
  const c = t.common || {};
  const es = lang === "es";
  const [prod, setProd] = useSG("all");
  const raw = window.googleRaw || { daily: [], ads: [], keywords: [], searchTerms: [], recs: [], range: null };

  const pf = (row) => prod === "all" || row.product === prod;

  // ----- Campaign aggregates from daily (respects global date window) -----
  const camps = useMG(() => {
    const m = new Map();
    for (const d of raw.daily) {
      if (!pf(d)) continue;
      const k = d.campaign_ext_id;
      const a = m.get(k) || {
        ext_id: k, name: d.campaign_name, product: d.product, status: d.campaign_status,
        type: d.campaign_type, impressions: 0, clicks: 0, cost: 0, conversions: 0,
      };
      a.impressions += Number(d.impressions || 0);
      a.clicks += Number(d.clicks || 0);
      a.cost += Number(d.cost || 0);
      a.conversions += Number(d.conversions || 0);
      m.set(k, a);
    }
    return [...m.values()].sort((x, y) => y.cost - x.cost);
  }, [raw, prod]);

  const kpis = useMG(() => {
    const k = camps.reduce((acc, x) => {
      acc.cost += x.cost; acc.clicks += x.clicks; acc.impressions += x.impressions; acc.conversions += x.conversions;
      return acc;
    }, { cost: 0, clicks: 0, impressions: 0, conversions: 0 });
    k.ctr = k.impressions ? k.clicks / k.impressions : 0;
    k.cpc = k.clicks ? k.cost / k.clicks : 0;
    k.cpl = k.conversions ? k.cost / k.conversions : null;
    return k;
  }, [camps]);

  const byProduct = useMG(() => {
    const m = new Map();
    for (const x of camps) {
      const p = x.product || "other";
      const a = m.get(p) || { product: p, cost: 0, conversions: 0, clicks: 0 };
      a.cost += x.cost; a.conversions += x.conversions; a.clicks += x.clicks;
      m.set(p, a);
    }
    return [...m.values()].sort((a, b) => b.cost - a.cost);
  }, [camps]);

  const ads = useMG(() => raw.ads.filter(pf).slice(0, 50), [raw, prod]);
  const keywords = useMG(() => raw.keywords.filter(pf).slice(0, 50), [raw, prod]);
  const terms = useMG(() => raw.searchTerms.filter(pf).slice(0, 50), [raw, prod]);
  const recs = useMG(() => {
    const order = { high: 0, good: 1, info: 2, critical: -1 };
    return raw.recs.filter(pf).sort((a, b) => (order[a.severity] ?? 3) - (order[b.severity] ?? 3));
  }, [raw, prod]);

  const empty = !raw.daily.length && !raw.ads.length;
  const rng = raw.range ? `${raw.range.from} → ${raw.range.to}` : "";

  const recStyle = (sev) => sev === "good"
    ? { color: "var(--op-green)", bg: "rgba(27,138,90,0.10)", icon: "trending-up" }
    : sev === "high"
    ? { color: "var(--op-red)", bg: "rgba(181,48,31,0.10)", icon: "alert-triangle" }
    : { color: "var(--wm-blue)", bg: "rgba(29,66,155,0.08)", icon: "info" };

  return (
    <div className="grid" style={{ gap: 18 }}>
      <div className="section-head">
        <div>
          <span className="head-accent" />
          <h2 className="section-title">
            {es ? <>Google Ads — <span className="wm-weight-black">rendimiento y oportunidades</span></>
                : <>Google Ads — <span className="wm-weight-black">performance & opportunities</span></>}
          </h2>
          <p className="section-sub">
            {es ? "Cuenta Windmar · atribución por nombre de campaña. " : "Windmar account · product by campaign name. "}
            {rng && <b>{es ? "Campañas: " : "Campaigns: "}{rng}</b>}
          </p>
        </div>
        {/* Product filter chips */}
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
          {G_PRODUCTS.map(p => (
            <button key={p.id} onClick={() => setProd(p.id)}
              className="tab" style={{
                padding: "4px 10px", fontSize: 11, fontWeight: 800,
                borderColor: prod === p.id ? p.color : "var(--wm-border)",
                color: prod === p.id ? "#fff" : "var(--wm-fg-muted)",
                background: prod === p.id ? p.color : "transparent",
              }}>{es ? p.es : p.en}</button>
          ))}
        </div>
      </div>

      {empty && (
        <div className="card" style={{ padding: 24, textAlign: "center", color: "var(--wm-fg-muted)" }}>
          <Icon name="search" size={20} />
          <div style={{ fontWeight: 800, color: "var(--wm-blue)", marginTop: 8 }}>
            {es ? "Esperando la primera ingesta de Google Ads" : "Waiting for the first Google Ads ingest"}
          </div>
          <div style={{ fontSize: 11, marginTop: 4 }}>
            {es ? "El cron /api/cron/google_ads_ingest poblará esta vista." : "The /api/cron/google_ads_ingest cron will populate this view."}
          </div>
        </div>
      )}

      {!empty && <>
        {/* KPI cards */}
        <div className="grid grid-4" style={{ gap: 14 }}>
          {[
            { label: c.spend || (es ? "Gasto" : "Spend"), val: gMoney(kpis.cost), icon: "dollar-sign" },
            { label: es ? "Conversiones" : "Conversions", val: gNum(Math.round(kpis.conversions)), icon: "target" },
            { label: "CPL", val: kpis.cpl != null ? gMoney(kpis.cpl) : "—", icon: "user-plus" },
            { label: "CTR", val: gPct(kpis.ctr), icon: "mouse-pointer-click" },
          ].map((k, i) => (
            <div key={i} className="card" style={{ padding: 14 }}>
              <div className="card-sub" style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <Icon name={k.icon} size={12} /> {k.label.toUpperCase()}
              </div>
              <div style={{ fontSize: 24, fontWeight: 900, color: "var(--wm-blue)", marginTop: 4, fontVariantNumeric: "tabular-nums" }}>{k.val}</div>
            </div>
          ))}
        </div>

        {/* Product split + spend bars */}
        <div className="card">
          <div className="card-head"><h3 className="card-title"><Icon name="layers" size={14} />{es ? "Gasto por producto" : "Spend by product"}</h3></div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 8 }}>
            {byProduct.map(p => {
              const max = Math.max(...byProduct.map(x => x.cost), 1);
              return (
                <div key={p.product}>
                  <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 3, fontSize: 12 }}>
                    <span style={{ display: "flex", gap: 8, alignItems: "center" }}><GoogleProductBadge product={p.product} /></span>
                    <span className="muted tnum">{gMoney(p.cost)} · {gNum(Math.round(p.conversions))} conv · {gNum(p.clicks)} clics</span>
                  </div>
                  <div style={{ height: 18, background: "var(--wm-bg-muted)", borderRadius: 6, overflow: "hidden" }}>
                    <div style={{ height: "100%", width: (p.cost / max) * 100 + "%", background: G_PROD_COLOR[p.product] || "var(--wm-blue)" }} />
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Recommendations */}
        <div className="card card--flush">
          <div style={{ padding: "14px 16px 0" }} className="card-head">
            <h3 className="card-title"><Icon name="lightbulb" size={14} />{es ? "Sugerencias y recomendaciones" : "Suggestions & recommendations"}</h3>
            <span className="muted" style={{ fontSize: 11 }}>{recs.length} {es ? "abiertas" : "open"}</span>
          </div>
          <div style={{ padding: "10px 16px 14px", display: "grid", gap: 8 }}>
            {recs.length === 0 && <div className="muted" style={{ fontSize: 12 }}>{es ? "Sin sugerencias en este momento." : "No suggestions right now."}</div>}
            {recs.slice(0, 40).map((r, i) => {
              const st = recStyle(r.severity);
              const native = r.source === "google";
              return (
                <div key={i} style={{ display: "flex", gap: 10, padding: "10px 12px", borderRadius: 10, background: st.bg, alignItems: "flex-start" }}>
                  <Icon name={st.icon} size={15} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 800, fontSize: 13, color: st.color, display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
                      {r.title}
                      <GoogleProductBadge product={r.product} />
                      <span style={{ fontSize: 9, fontWeight: 700, padding: "1px 6px", borderRadius: 4, background: native ? "#4285F4" : "var(--wm-bg-muted)", color: native ? "#fff" : "var(--wm-fg-muted)" }}>
                        {native ? "Google" : (es ? "Análisis" : "Analysis")}
                      </span>
                    </div>
                    {r.rationale && <div className="muted" style={{ fontSize: 11, marginTop: 2 }}>{r.rationale}</div>}
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Campaign performance */}
        <div className="card card--flush">
          <div style={{ padding: "14px 16px 0" }} className="card-head">
            <h3 className="card-title"><Icon name="list-tree" size={14} />{es ? "Rendimiento de campañas" : "Campaign performance"}</h3>
          </div>
          <div className="table-scroll">
            <table className="table">
              <thead><tr>
                <th>{c.campaign || (es ? "Campaña" : "Campaign")}</th>
                <th>{es ? "Producto" : "Product"}</th>
                <th>{c.status || (es ? "Estado" : "Status")}</th>
                <th className="num">{c.spend || (es ? "Gasto" : "Spend")}</th>
                <th className="num">{es ? "Clics" : "Clicks"}</th>
                <th className="num">CTR</th>
                <th className="num">{es ? "Conv." : "Conv."}</th>
                <th className="num">CPL</th>
              </tr></thead>
              <tbody>
                {camps.map(cm => {
                  const ctr = cm.impressions ? cm.clicks / cm.impressions : 0;
                  const cpl = cm.conversions ? cm.cost / cm.conversions : null;
                  return (
                    <tr key={cm.ext_id}>
                      <td><b>{cm.name}</b><br/><span className="muted" style={{ fontSize: 10 }}>{cm.type || ""} · {cm.ext_id}</span></td>
                      <td><GoogleProductBadge product={cm.product} /></td>
                      <td><span className="muted" style={{ fontSize: 11 }}>{cm.status || "—"}</span></td>
                      <td className="num tnum">{gMoney(cm.cost)}</td>
                      <td className="num tnum">{gNum(cm.clicks)}</td>
                      <td className="num tnum">{gPct(ctr)}</td>
                      <td className="num tnum">{gNum(Math.round(cm.conversions))}</td>
                      <td className="num tnum">{cpl != null ? gMoney(cpl) : "—"}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>

        {/* Two-column: Ads + Keywords */}
        <div className="grid grid-cols-23" style={{ gap: 16 }}>
          <div className="card card--flush">
            <div style={{ padding: "14px 16px 0" }} className="card-head">
              <h3 className="card-title"><Icon name="megaphone" size={14} />{es ? "Anuncios (ventana de ingesta)" : "Ads (ingest window)"}</h3>
            </div>
            <div className="table-scroll" style={{ maxHeight: 380 }}>
              <table className="table">
                <thead><tr>
                  <th>{es ? "Anuncio / grupo" : "Ad / group"}</th><th>{es ? "Tipo" : "Type"}</th>
                  <th className="num">{es ? "Gasto" : "Spend"}</th><th className="num">{es ? "Conv." : "Conv."}</th><th className="num">CTR</th>
                </tr></thead>
                <tbody>
                  {ads.map((a, i) => (
                    <tr key={a.ad_id || i}>
                      <td><b style={{ fontSize: 12 }}>{a.ad_group_name || a.campaign_name || a.ad_id}</b><br/>
                        <span className="muted" style={{ fontSize: 10 }}>{a.campaign_name || ""}</span></td>
                      <td><span className="muted" style={{ fontSize: 10 }}>{(a.ad_type || "").replace(/_/g, " ")}</span></td>
                      <td className="num tnum">{gMoney(a.cost)}</td>
                      <td className="num tnum">{gNum(Math.round(a.conversions))}</td>
                      <td className="num tnum">{gPct(a.ctr)}</td>
                    </tr>
                  ))}
                  {ads.length === 0 && <tr><td colSpan={5} className="muted" style={{ fontSize: 11 }}>{es ? "Sin datos." : "No data."}</td></tr>}
                </tbody>
              </table>
            </div>
          </div>

          <div className="card card--flush">
            <div style={{ padding: "14px 16px 0" }} className="card-head">
              <h3 className="card-title"><Icon name="key" size={14} />{es ? "Keywords (top por gasto)" : "Keywords (top by spend)"}</h3>
            </div>
            <div className="table-scroll" style={{ maxHeight: 380 }}>
              <table className="table">
                <thead><tr>
                  <th>{es ? "Keyword" : "Keyword"}</th><th>{es ? "Match" : "Match"}</th><th className="num">QS</th>
                  <th className="num">{es ? "Gasto" : "Spend"}</th><th className="num">{es ? "Conv." : "Conv."}</th>
                </tr></thead>
                <tbody>
                  {keywords.map((k, i) => (
                    <tr key={k.keyword_id || i}>
                      <td><b style={{ fontSize: 12 }}>{k.keyword_text}</b><br/><span className="muted" style={{ fontSize: 10 }}>{k.campaign_name || ""}</span></td>
                      <td><span className="muted" style={{ fontSize: 10 }}>{k.match_type || ""}</span></td>
                      <td className="num tnum">{k.quality_score ?? "—"}</td>
                      <td className="num tnum">{gMoney(k.cost)}</td>
                      <td className="num tnum">{gNum(Math.round(k.conversions))}</td>
                    </tr>
                  ))}
                  {keywords.length === 0 && <tr><td colSpan={5} className="muted" style={{ fontSize: 11 }}>{es ? "Sin datos." : "No data."}</td></tr>}
                </tbody>
              </table>
            </div>
          </div>
        </div>

        {/* Search terms */}
        <div className="card card--flush">
          <div style={{ padding: "14px 16px 0" }} className="card-head">
            <h3 className="card-title"><Icon name="search" size={14} />{es ? "Términos de búsqueda" : "Search terms"}</h3>
            <span className="muted" style={{ fontSize: 11 }}>{es ? "Fuente de keywords a añadir / negativizar" : "Source for add / negative keywords"}</span>
          </div>
          <div className="table-scroll" style={{ maxHeight: 360 }}>
            <table className="table">
              <thead><tr>
                <th>{es ? "Término" : "Term"}</th><th>{es ? "Estado" : "Status"}</th><th>{es ? "Campaña" : "Campaign"}</th>
                <th className="num">{es ? "Gasto" : "Spend"}</th><th className="num">{es ? "Clics" : "Clicks"}</th><th className="num">{es ? "Conv." : "Conv."}</th>
              </tr></thead>
              <tbody>
                {terms.map((s, i) => (
                  <tr key={i}>
                    <td><b style={{ fontSize: 12 }}>{s.search_term}</b></td>
                    <td><span className="muted" style={{ fontSize: 10 }}>{s.status || ""}</span></td>
                    <td><span className="muted" style={{ fontSize: 10 }}>{s.campaign_name || ""}</span></td>
                    <td className="num tnum">{gMoney(s.cost)}</td>
                    <td className="num tnum">{gNum(s.clicks)}</td>
                    <td className="num tnum">{gNum(Math.round(s.conversions))}</td>
                  </tr>
                ))}
                {terms.length === 0 && <tr><td colSpan={6} className="muted" style={{ fontSize: 11 }}>{es ? "Sin datos." : "No data."}</td></tr>}
              </tbody>
            </table>
          </div>
        </div>
      </>}
    </div>
  );
}