/* pages/analytics.jsx — Google Analytics page.
   Powered by Supabase via usePlatformData('google_analytics'). */

const { useMemo: useMemoA } = React;

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

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

  const kpis    = useMemoA(() => MakaliSel.gaKpis(rows),    [rows]);
  const sources = useMemoA(() => MakaliSel.gaSources(rows), [rows]);
  const geo     = useMemoA(() => MakaliSel.gaGeo(rows),     [rows]);
  const devices = useMemoA(() => MakaliSel.gaDevices(rows), [rows]);
  const pages   = useMemoA(() => MakaliSel.gaPages(rows),   [rows]);

  const daily = useMemoA(() => {
    const filled = MakaliAgg.fillDaily(rows, dateRange.from, dateRange.to, lang);
    return {
      labels:   filled.labels,
      sessions: MakaliAgg.dailySeries(rows, filled.dates, 'sessions')
    };
  }, [rows, dateRange.from, dateRange.to, lang]);

  const totalSessions    = kpis.sessions;
  const totalGeoSessions = geo.reduce((s, r) => s + r.sessions, 0);

  return (
    <div className="canvas">
      <section className="plat-head">
        <div className="plat-mark ga">
          <svg viewBox="0 0 24 24" width="32" height="32">
            <rect x="3" y="14" width="4" height="7" rx="1.5" fill="#fff"/>
            <rect x="10" y="9" width="4" height="12" rx="1.5" fill="#fff"/>
            <rect x="17" y="3" width="4" height="18" rx="1.5" fill="#fff"/>
          </svg>
        </div>
        <div>
          <h1 className="plat-head__title">GOOGLE ANALYTICS</h1>
          <div className="plat-head__sub">{accountId} · GA4 · {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("property", lang)}</div>
            <div className="plat-account__v">{accountId}</div>
          </div>
          <button className="btn"><Icon name="external" size={12}/> Analytics</button>
        </div>
      </section>

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

      {status === 'ready' && (
        <>
          <section className="kpis">
            <KpiTile label={t("kpi.sessions", lang)} icon="globe" value={NF.num(kpis.sessions, {compact:true})} deltaCtx={t("vs.prior", lang)} sparkColor="#00E7FF"/>
            <KpiTile label={lang === "pt" ? "Usuários" : "Users"} icon="users" value={NF.num(kpis.users, {compact:true})} deltaCtx={t("vs.prior", lang)} sparkColor="#2E79FF"/>
            <KpiTile label={t("kpi.conv-rate", lang)} icon="zap" value={(lang === "pt" ? kpis.conversion_rate.toFixed(2).replace(".", ",") : kpis.conversion_rate.toFixed(2)) + "%"} deltaCtx={t("vs.prior", lang)} sparkColor="#7600FF"/>
            <KpiTile label={t("kpi.bounce", lang)} icon="trend-up" value={(lang === "pt" ? kpis.bounce_rate.toFixed(1).replace(".", ",") : kpis.bounce_rate.toFixed(1)) + "%"} deltaCtx={t("vs.prior", lang)} sparkColor="#CE3EBA"/>
            <KpiTile label={t("kpi.conversions", lang)} icon="check" value={NF.num(kpis.conversions)} deltaCtx={t("vs.prior", lang)} sparkColor="#EF1166"/>
            <KpiTile label={isEcom ? t("kpi.revenue", lang) : t("kpi.cpa", lang)}
              icon={isEcom ? "wallet" : "tag"}
              value={isEcom ? money(kpis.revenue, {compact:true}) : (kpis.conversions > 0 ? money(kpis.revenue / kpis.conversions) : money(0))}
              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">{lang === "pt" ? "Sessões por dia" : "Sessions by day"}</h3>
                  <p className="panel__sub">GA4</p>
                </div>
                <div className="panel__legend">
                  <div className="legend-item"><span className="sw sw--line" style={{background:"#00E7FF"}}/>{lang === "pt" ? "Sessões" : "Sessions"}</div>
                </div>
              </div>
              <AreaChart
                data={daily.sessions}
                labels={daily.labels}
                color="#00E7FF"
                height={260}
                yFormat={v => NF.num(v, {compact: v >= 1000})}
              />
            </div>

            <div className="panel">
              <div className="panel__head">
                <div className="panel__head-l">
                  <h3 className="panel__title">{t("p.traffic-src", lang)}</h3>
                </div>
              </div>
              {sources.length > 0 ? (
                <Donut
                  data={sources.map(s => ({ name: s.name, value: s.value, color: s.color, valLabel: NF.num(s.value, {compact:true}) }))}
                  totalLabel={lang === "pt" ? "SESSÕES" : "SESSIONS"}
                  centerVal={NF.num(totalSessions, {compact:true})}
                />
              ) : null}
            </div>
          </section>

          {(geo.length > 0 || devices.length > 0) && (
            <section className="row-2">
              {geo.length > 0 && (
                <div className="panel">
                  <div className="panel__head">
                    <div className="panel__head-l">
                      <h3 className="panel__title">{t("p.geo", lang)}</h3>
                      <p className="panel__sub">{lang === "pt" ? "Por região · sessões + receita" : "By region · sessions + revenue"}</p>
                    </div>
                    <div className="panel__legend">
                      <div className="legend-item">
                        <span className="sw" style={{background:"var(--mk-gradient)"}}/>
                        {lang === "pt" ? "Sessões" : "Sessions"}
                      </div>
                    </div>
                  </div>
                  <div className="geo-list">
                    {geo.map((g, i) => {
                      const pct = totalGeoSessions > 0 ? (g.sessions / totalGeoSessions) * 100 : 0;
                      return (
                        <div className="geo-row" key={i}>
                          <span className="geo-row__flag">{g.flag}</span>
                          <div className="geo-row__mid">
                            <div className="geo-row__top">
                              <span className="geo-row__name">{lang === "pt" ? g.region_pt : g.region_en}</span>
                              <span className="geo-row__pct">{NF.num(g.sessions, {compact:true})} · {g.share.toFixed(1)}%</span>
                            </div>
                            <div className="geo-row__bar">
                              <div className="geo-row__bar-fill" style={{width: pct + "%"}}/>
                            </div>
                          </div>
                          <span className="geo-row__val">{isEcom ? money(g.revenue || 0, {compact:true}) : NF.num(Math.round(g.sessions * 0.06))}</span>
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}

              {devices.length > 0 && (
                <div className="panel">
                  <div className="panel__head">
                    <div className="panel__head-l">
                      <h3 className="panel__title">{t("p.devices", lang)}</h3>
                      <p className="panel__sub">{lang === "pt" ? "Share de sessões" : "Share of sessions"}</p>
                    </div>
                  </div>
                  <div style={{display:"flex", flexDirection:"column", gap: 14, marginTop: 8}}>
                    {devices.map((d, i) => (
                      <div key={i} style={{display:"grid", gridTemplateColumns:"36px 1fr 60px", gap: 14, alignItems:"center"}}>
                        <div style={{width: 36, height: 36, borderRadius: 10, background: "#141414", display: "grid", placeItems: "center", color: d.color}}>
                          <Icon name={d.icon} size={18}/>
                        </div>
                        <div>
                          <div style={{display:"flex", justifyContent:"space-between", marginBottom: 6}}>
                            <span style={{fontFamily:"var(--font-display)", fontWeight: 700, fontSize: 13}}>{lang === "pt" ? d.name_pt : d.name_en}</span>
                            <span style={{fontFamily:"var(--font-display)", fontWeight: 900, fontSize: 14, color: d.color}}>{d.value.toFixed(1)}%</span>
                          </div>
                          <div style={{height: 6, background: "#141414", borderRadius: 999, overflow: "hidden"}}>
                            <div style={{height: "100%", width: d.value + "%", background: d.color, borderRadius: 999}}/>
                          </div>
                        </div>
                        <span style={{fontFamily:"var(--font-mono)", fontSize: 11, color: "var(--fg-2)", textAlign: "right"}}>
                          {NF.num(Math.round(totalSessions * d.value / 100), {compact:true})}
                        </span>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </section>
          )}

          {pages.length > 0 && (
            <section className="panel">
              <div className="panel__head">
                <div className="panel__head-l">
                  <h3 className="panel__title">{t("p.pages", lang)}</h3>
                  <p className="panel__sub">{lang === "pt" ? "Páginas mais vistas" : "Top pages by views"}</p>
                </div>
              </div>
              <div className="tbl-scroll"><table className="tbl">
                <thead>
                  <tr>
                    <th>{t("th.page", lang)}</th>
                    <th className="num">{t("th.views", lang)}</th>
                    <th className="num">{lang === "pt" ? "Tx. engajadas" : "Engaged %"}</th>
                    <th className="num">{lang === "pt" ? "Rejeição" : "Bounce"}</th>
                    <th>{lang === "pt" ? "Tx. conversão" : "Conv. rate"}</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {pages.slice(0, 7).map((p, i) => (
                    <tr key={i}>
                      <td>
                        <div>{lang === "pt" ? p.name_pt : p.name_en}</div>
                        <div className="tbl__sub" style={{fontFamily:"var(--font-mono)"}}>{p.path}</div>
                      </td>
                      <td className="num">{NF.num(p.views)}</td>
                      <td className="num" style={{color: p.engaged >= 80 ? "var(--mk-acqua)" : "#fff"}}>{p.engaged.toFixed(1)}%</td>
                      <td className="num" style={{color: p.bounce <= 20 ? "var(--mk-acqua)" : p.bounce >= 30 ? "var(--mk-raspberry)" : "#fff"}}>
                        {p.bounce.toFixed(1)}%
                      </td>
                      <td>
                        <span className="bar-cell">
                          <span className="bar-cell__fill" style={{width: Math.min(100, (p.conv/12)*100) + "%"}}/>
                        </span>
                        <span style={{fontFamily:"var(--font-display)", fontWeight: 700, fontSize: 12.5}}>{p.conv.toFixed(1)}%</span>
                      </td>
                      <td style={{width: 32, textAlign: "right"}}><Icon name="external" size={13} style={{color:"var(--fg-mute)"}}/></td>
                    </tr>
                  ))}
                </tbody>
              </table></div>
            </section>
          )}
        </>
      )}
    </div>
  );
}
window.AnalyticsPage = AnalyticsPage;