/* pages/google.jsx — Google Ads platform page.
   Powered by Supabase via usePlatformData('google_ads'). KPIs, campaign table
   with manual tags, and search-terms table all hydrated from the same query. */

const { useState: useStateG, useMemo: useMemoG } = React;

function GooglePage({ lang, client, dateRange, syncTick }) {
  const D = window.MK_DATA;
  const { money, NF } = window.MK_FMT;
  const isEcom = client.type === "ecom";
  const accountId = (client.platforms.google && client.platforms.google.account_id) || "—";

  const { rows, status, error, refetch } = usePlatformData({
    table: 'google_ads', client, dateRange, syncTick
  });

  const kpis         = useMemoG(() => MakaliSel.googleKpis(rows),         [rows]);
  const rawCampaigns = useMemoG(() => MakaliSel.googleCampaigns(rows),    [rows]);
  const searchTerms  = useMemoG(() => MakaliSel.googleSearchTerms(rows),  [rows]);

  const daily = useMemoG(() => {
    const filled = MakaliAgg.fillDaily(rows.filter(r => !r.search_term), dateRange.from, dateRange.to, lang);
    const noTerm = rows.filter(r => !r.search_term);
    return {
      labels:  filled.labels,
      spend:   MakaliAgg.dailySeries(noTerm, filled.dates, 'spend'),
      revenue: MakaliAgg.dailySeries(noTerm, filled.dates, 'revenue'),
      leads:   MakaliAgg.dailySeries(noTerm, filled.dates, 'leads')
    };
  }, [rows, dateRange.from, dateRange.to, lang]);

  const initialTags = useMemoG(() => {
    const m = {};
    rawCampaigns.forEach(c => { m[c.name_pt] = c.tags || []; });
    return m;
  }, [rawCampaigns]);
  const [campTags, setCampTags] = useStateG(initialTags);
  React.useEffect(() => { setCampTags(initialTags); }, [initialTags]);

  const [campaignFilter, setCampaignFilter] = useStateG(null);
  const campaigns = rawCampaigns.map(c => ({ ...c, tags: campTags[c.name_pt] || [] }));
  const filtered = applyTagFilter(campaigns, campaignFilter);
  const updateCampaignTags = (name_pt, tags) =>
    setCampTags(prev => ({ ...prev, [name_pt]: tags }));

  return (
    <div className="canvas">
      <section className="plat-head">
        <div className="plat-mark google">
          <svg viewBox="0 0 24 24" width="32" height="32">
            <path d="M22 12.2c0-.78-.07-1.53-.2-2.25H12v4.25h5.6a4.8 4.8 0 0 1-2.08 3.15v2.62h3.36c1.96-1.82 3.12-4.5 3.12-7.77z" fill="#4285F4"/>
            <path d="M12 22.5c2.8 0 5.16-.92 6.88-2.5l-3.36-2.62c-.93.62-2.11 1-3.52 1-2.71 0-5-1.83-5.82-4.28H2.7v2.7A10 10 0 0 0 12 22.5z" fill="#34A853"/>
            <path d="M6.18 14.1a6.03 6.03 0 0 1 0-3.86V7.54H2.7a10 10 0 0 0 0 8.92l3.48-2.36z" fill="#FBBC05"/>
            <path d="M12 5.85c1.52 0 2.89.52 3.96 1.54l2.98-2.98C17.16 2.7 14.8 1.5 12 1.5A10 10 0 0 0 2.7 7.54l3.48 2.7C7 7.68 9.29 5.85 12 5.85z" fill="#EA4335"/>
          </svg>
        </div>
        <div>
          <h1 className="plat-head__title">GOOGLE ADS</h1>
          <div className="plat-head__sub">{accountId} · {lang === "pt" ? "Última sync há 2h" : "Last sync 2h ago"}</div>
        </div>
        <div className="plat-head__right">
          <div className="plat-account">
            <div className="plat-account__l">{t("ad-account", lang)}</div>
            <div className="plat-account__v">{accountId}</div>
          </div>
          <button className="btn"><Icon name="external" size={12}/> Google Ads</button>
        </div>
      </section>

      {status === 'loading' && <LoadingState lang={lang}/>}
      {status === 'error'   && <ErrorState   lang={lang} error={error} onRetry={refetch}/>}
      {status === 'empty'   && <EmptyState   lang={lang}/>}

      {status === 'ready' && (
        <>
          {isEcom ? (
            <section className="kpis">
              <KpiTile label={t("kpi.spend", lang)} icon="wallet" value={money(kpis.spend, {compact:true})} deltaCtx={t("vs.prior", lang)} sparkColor="#00E7FF"/>
              <KpiTile label={t("kpi.revenue", lang)} icon="trend-up" value={money(kpis.revenue, {compact:true})} deltaCtx={t("vs.prior", lang)} sparkColor="#2E79FF"/>
              <KpiTile label="ROAS" icon="target" value={(lang === "pt" ? kpis.roas.toFixed(2).replace(".", ",") : kpis.roas.toFixed(2)) + "×"} deltaCtx={t("vs.prior", lang)} sparkColor="#7600FF"/>
              <KpiTile label={t("kpi.conversions", lang)} icon="check" value={NF.num(kpis.conversions)} deltaCtx={t("vs.prior", lang)} sparkColor="#CE3EBA"/>
              <KpiTile label="CPC" icon="tag" value={money(kpis.cpc, {dec: 2})} deltaCtx={t("vs.prior", lang)} sparkColor="#00E7FF"/>
              <KpiTile label={t("kpi.impr-share", lang)} icon="eye" value={(kpis.impression_share * 100).toFixed(0) + "%"} deltaCtx={t("vs.prior", lang)} sparkColor="#FF7F00"/>
            </section>
          ) : (
            <section className="kpis">
              <KpiTile label={t("kpi.spend", lang)} icon="wallet" value={money(kpis.spend, {compact:true})} deltaCtx={t("vs.prior", lang)} sparkColor="#00E7FF"/>
              <KpiTile label={t("kpi.leads", lang)} icon="user-plus" value={NF.num(kpis.leads)} deltaCtx={t("vs.prior", lang)} sparkColor="#2E79FF"/>
              <KpiTile label="CPL" icon="tag" value={money(kpis.cpl)} deltaCtx={t("vs.prior", lang)} sparkColor="#7600FF"/>
              <KpiTile label={t("kpi.clicks", lang)} icon="mouse-pointer" value={NF.num(kpis.clicks)} deltaCtx={t("vs.prior", lang)} sparkColor="#CE3EBA"/>
              <KpiTile label="CPC" icon="credit-card" value={money(kpis.cpc, {dec: 2})} deltaCtx={t("vs.prior", lang)} sparkColor="#EF1166"/>
              <KpiTile label={t("kpi.conv-rate", lang)} icon="check" value={(lang === "pt" ? kpis.conversion_rate.toFixed(2).replace(".", ",") : kpis.conversion_rate.toFixed(2)) + "%"} deltaCtx={t("vs.prior", lang)} sparkColor="#FF7F00"/>
            </section>
          )}

          <section className="row-2">
            <div className="panel">
              <div className="panel__head">
                <div className="panel__head-l">
                  <h3 className="panel__title">{t("p.daily", lang)}</h3>
                  <p className="panel__sub">{lang === "pt" ? "Investimento Google + " + (isEcom ? "receita" : "leads") : "Google spend + " + (isEcom ? "revenue" : "leads")}</p>
                </div>
                <div className="panel__legend">
                  <div className="legend-item"><span className="sw" style={{background:"#00E7FF"}}/>Google {t("kpi.spend", lang)}</div>
                  <div className="legend-item"><span className="sw sw--line" style={{background:"#fff"}}/>{isEcom ? t("kpi.revenue", lang) : t("kpi.leads", lang)}</div>
                </div>
              </div>
              <StackedBarLine
                bars={[{ name: "Google " + t("kpi.spend", lang), color: "#00E7FF", data: daily.spend }]}
                line={{ name: isEcom ? t("kpi.revenue", lang) : t("kpi.leads", lang), color: "#fff", data: isEcom ? daily.revenue : daily.leads }}
                labels={daily.labels}
                yFormatLeft={(v) => money(v, {compact: true})}
                yFormatRight={(v) => isEcom ? money(v, {compact: true}) : Math.round(v)}
                height={260}
              />
            </div>

            <div className="panel">
              <div className="panel__head">
                <div className="panel__head-l">
                  <h3 className="panel__title">{lang === "pt" ? "Mix por tag" : "Mix by tag"}</h3>
                  <p className="panel__sub">{lang === "pt" ? "Investimento por tag manual" : "Spend per manual tag"}</p>
                </div>
              </div>
              {(() => {
                const byTag = new Map();
                campaigns.forEach(c => {
                  const ts = c.tags && c.tags.length ? c.tags : ["__untagged__"];
                  ts.forEach(tg => { byTag.set(tg, (byTag.get(tg) || 0) + c.spend); });
                });
                const palette = D.GOOGLE_CAMPAIGN_TAG_OPTIONS;
                const data = Array.from(byTag.entries())
                  .map(([id, value]) => {
                    if (id === "__untagged__") return { id, name: t("tag.untagged", lang), value, color: "#FF7F00" };
                    const o = palette.find(p => p.id === id);
                    return o ? { id, name: t(o.key, lang), value, color: o.color } : { id, name: id, value, color: "#6B6B6B" };
                  })
                  .sort((a, b) => b.value - a.value);
                const total = data.reduce((s,d) => s + d.value, 0);
                return total > 0 ? (
                  <Donut
                    data={data.map(d => ({ ...d, valLabel: money(d.value, {compact:true}) }))}
                    totalLabel={lang === "pt" ? "INVEST." : "SPEND"}
                    centerVal={money(total, {compact:true})}
                  />
                ) : null;
              })()}
            </div>
          </section>

          <section className="panel">
            <div className="panel__head">
              <div className="panel__head-l">
                <h3 className="panel__title">{t("p.campaigns", lang)}</h3>
                <p className="panel__sub">
                  {lang === "pt" ? "Ordenado por investimento" : "Sorted by spend"}
                  {" · "}
                  {t("tag.note-campaigns", lang)}
                </p>
              </div>
            </div>

            <TagFilterStrip
              value={campaignFilter}
              onChange={setCampaignFilter}
              options={D.GOOGLE_CAMPAIGN_TAG_OPTIONS}
              items={campaigns}
              lang={lang}
            />

            <div className="tbl-scroll"><table className="tbl">
              <thead>
                {isEcom ? (
                  <tr>
                    <th>{t("th.campaign", lang)}</th>
                    <th style={{minWidth: 180}}>Tags</th>
                    <th>{t("th.status", lang)}</th>
                    <th className="num">{t("th.spend", lang)}</th>
                    <th className="num">{t("th.revenue", lang)}</th>
                    <th className="num">{t("th.roas", lang)}</th>
                    <th className="num">{t("th.cpc", lang)}</th>
                    <th className="num">{t("th.delta", lang)}</th>
                  </tr>
                ) : (
                  <tr>
                    <th>{t("th.campaign", lang)}</th>
                    <th style={{minWidth: 180}}>Tags</th>
                    <th>{t("th.status", lang)}</th>
                    <th className="num">{t("th.spend", lang)}</th>
                    <th className="num">{t("th.leads", lang)}</th>
                    <th className="num">CPL</th>
                    <th className="num">{t("th.conv-rate", lang)}</th>
                    <th className="num">{t("th.delta", lang)}</th>
                  </tr>
                )}
              </thead>
              <tbody>
                {filtered.map((c, i) => (
                  <tr key={i}>
                    <td>
                      <div className="ch">
                        <span className="sq" style={{background: "#fff", color: "#000"}}>
                          <Icon name="google" size={14}/>
                        </span>
                        <div>
                          <div>{lang === "pt" ? c.name_pt : c.name_en}</div>
                          {c.sub && <div className="tbl__sub">{c.sub}</div>}
                        </div>
                      </div>
                    </td>
                    <td>
                      <TagPicker
                        tags={c.tags}
                        options={D.GOOGLE_CAMPAIGN_TAG_OPTIONS}
                        onChange={(tags) => updateCampaignTags(c.name_pt, tags)}
                        lang={lang}
                        size="sm"
                      />
                    </td>
                    <td><span className={"status " + c.status}><span className="dot"/>{t("st." + c.status, lang)}</span></td>
                    {isEcom ? (
                      <>
                        <td className="num">{money(c.spend, {compact: c.spend >= 1000})}</td>
                        <td className="num">{money(c.revenue, {compact: c.revenue >= 1000})}</td>
                        <td className="num">{(lang === "pt" ? c.roas.toFixed(2).replace(".", ",") : c.roas.toFixed(2)) + "×"}</td>
                        <td className="num">{money(c.cpc, {dec: 2})}</td>
                      </>
                    ) : (
                      <>
                        <td className="num">{money(c.spend, {compact: c.spend >= 1000})}</td>
                        <td className="num">{NF.num(c.leads)}</td>
                        <td className="num">{money(c.cpl, {dec: 0})}</td>
                        <td className="num">{(lang === "pt" ? c.convRate.toFixed(1).replace(".", ",") : c.convRate.toFixed(1)) + "%"}</td>
                      </>
                    )}
                    <td className={"delta " + c.dDir}>{c.delta}</td>
                  </tr>
                ))}
                {filtered.length === 0 && (
                  <tr><td colSpan={8} style={{textAlign:"center", color:"var(--fg-mute)", padding: 36}}>
                    {lang === "pt" ? "Nenhuma campanha com essa tag." : "No campaigns match this tag."}
                  </td></tr>
                )}
              </tbody>
            </table></div>
          </section>

          {isEcom && searchTerms.length > 0 && (
            <section className="panel">
              <div className="panel__head">
                <div className="panel__head-l">
                  <h3 className="panel__title">{t("p.search-terms", lang)}</h3>
                  <p className="panel__sub">{lang === "pt" ? "Termos com mais impressões" : "Top terms by impressions"}</p>
                </div>
                <button className="btn"><Icon name="search" size={12}/> {lang === "pt" ? "Buscar termos" : "Search terms"}</button>
              </div>
              <div className="tbl-scroll"><table className="tbl">
                <thead>
                  <tr>
                    <th>{t("th.term", lang)}</th>
                    <th className="num">{t("th.impr", lang)}</th>
                    <th className="num">{t("th.clicks", lang)}</th>
                    <th className="num">{t("th.ctr", lang)}</th>
                    <th className="num">{t("th.cpc", lang)}</th>
                    <th className="num">{t("th.conv", lang)}</th>
                    <th className="num">{t("th.roas", lang)}</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {searchTerms.slice(0, 8).map((s, i) => (
                    <tr key={i}>
                      <td>
                        <div style={{fontFamily: "var(--font-mono)", fontSize: 12.5, color: "#fff"}}>{s.term}</div>
                        <div className="tbl__sub">{s.status}</div>
                      </td>
                      <td className="num">{NF.num(s.impr)}</td>
                      <td className="num">{NF.num(s.clicks)}</td>
                      <td className="num">{(lang === "pt" ? s.ctr.toFixed(2).replace(".", ",") : s.ctr.toFixed(2)) + "%"}</td>
                      <td className="num">{money(s.cpc, {dec: 2})}</td>
                      <td className="num">{s.conv}</td>
                      <td className="num" style={{color: s.roas >= 3 ? "var(--mk-acqua)" : s.roas >= 1.5 ? "#fff" : "var(--mk-raspberry)"}}>
                        {(lang === "pt" ? s.roas.toFixed(1).replace(".", ",") : s.roas.toFixed(1)) + "×"}
                      </td>
                      <td style={{width: 32, textAlign: "right"}}><Icon name="more" size={14} style={{color: "var(--fg-mute)"}}/></td>
                    </tr>
                  ))}
                </tbody>
              </table></div>
            </section>
          )}
        </>
      )}
    </div>
  );
}
window.GooglePage = GooglePage;