/* ============================================================
   APP ROOT — Panel de Campañas Meta Ads · Vercel
   ============================================================ */
const { useState, useEffect, useCallback } = React;

const TABS = [
  { id: "resumen",    label: "Resumen"    },
  { id: "campanas",   label: "Campañas"   },
  { id: "conjuntos",  label: "Conjuntos"  },
  { id: "tendencias", label: "Tendencias" },
];

const VIEW_META = {
  resumen:    { h: "Resumen ejecutivo",        s: "Las cifras que importan, de un vistazo." },
  campanas:   { h: "Rendimiento por campaña",  s: "Métricas completas con indicador de salud por costo por lead." },
  conjuntos:  { h: "Comparativa de conjuntos", s: "Qué conjunto rinde mejor y cuál desperdicia presupuesto." },
  tendencias: { h: "Tendencias temporales",    s: "Evolución diaria de leads, costo por lead y gasto." },
};

function load(key, def) {
  try { const v = localStorage.getItem(key); return v == null ? def : JSON.parse(v); } catch(e) { return def; }
}

function LoadingView({ error, onRetry }) {
  return (
    <div style={{
      display:"flex", flexDirection:"column", alignItems:"center",
      justifyContent:"center", minHeight:"70vh", gap:20, textAlign:"center", padding:"40px 24px",
    }}>
      {error ? (
        <>
          <div style={{ border:"1px solid var(--danger)", padding:"20px 28px", maxWidth:440, color:"var(--danger)", fontSize:14, lineHeight:1.6 }}>
            <strong>Error al cargar datos</strong><br />{error}
          </div>
          <button className="btn" onClick={onRetry}>Reintentar</button>
        </>
      ) : (
        <>
          <svg width={28} height={28} viewBox="0 0 24 24" fill="none" stroke="currentColor"
            strokeWidth={1.75} strokeLinecap="round" strokeLinejoin="round"
            style={{ animation:"spin 0.8s linear infinite", color:"var(--fg-3)" }}>
            {ICONS.refresh}
          </svg>
          <p style={{ fontSize:13, color:"var(--fg-3)", margin:0 }}>Conectando con Meta Marketing API…</p>
        </>
      )}
    </div>
  );
}

function App() {
  const [appData,  setAppData]  = useState(null);
  const [error,    setError]    = useState(null);
  const [tab,      setTab]      = useState(() => load("ma_tab", "resumen"));
  const [scope,    setScope]    = useState(() => load("ma_scope", "all"));
  const [updated,  setUpdated]  = useState(null);
  const [busy,     setBusy]     = useState(false);

  useEffect(() => { localStorage.setItem("ma_tab",   JSON.stringify(tab));   }, [tab]);
  useEffect(() => { localStorage.setItem("ma_scope", JSON.stringify(scope)); }, [scope]);

  const doFetch = useCallback(async () => {
    const token  = sessionStorage.getItem("g_id_token");
    const expiry = parseInt(sessionStorage.getItem("g_token_exp") || "0");
    // Verificar expiración antes de llamar a la API
    if (!token || Date.now() / 1000 > expiry - 60) {
      signOut();
      return;
    }
    try {
      const res = await fetch("/api/data", {
        headers: { "Authorization": "Bearer " + token },
      });
      // Por si acaso el servidor rechaza el token
      if (res.status === 401 || res.status === 403) {
        signOut();
        return;
      }
      const raw = await res.json();
      if (raw.error) throw new Error(raw.error);
      const processed = processAPIData(raw);
      Object.assign(window, processed);
      setAppData(processed);
      setUpdated(new Date());
      setError(null);
    } catch(e) {
      setError(e.message);
    }
  }, []);

  useEffect(() => { doFetch(); }, [doFetch]);

  const refresh = useCallback(async () => {
    if (busy) return;
    setBusy(true);
    await doFetch();
    setBusy(false);
  }, [busy, doFetch]);

  if (!appData) return <LoadingView error={error} onRetry={doFetch} />;

  const { CAMPAIGNS } = appData;
  const scopeCamp = scope === "all" ? null : CAMPAIGNS.find(c => c.id === scope);

  return (
    <div className="app">
      <header className="topbar">
        <div className="brand">
          <img src="assets/colectivo-inmobiliario-black.svg" alt="Colectivo Inmobiliario" />
          <span className="divider" />
          <div className="titleblock">
            <span className="k">Panel de Campañas</span>
            <span className="s">Meta Ads · Colectivo Inmobiliario</span>
          </div>
        </div>
        <div className="topbar-right">
          <div className="updated">
            <span className="lab">Última actualización</span>
            <span className="val"><span className="live-dot" />{updated ? fmt.reloj(updated) : "—"}</span>
          </div>
          <button className={`btn ${busy ? "busy" : ""}`} onClick={refresh} disabled={busy}>
            <Ico d={ICONS.refresh} size={15} sw={1.9} />
            {busy ? "Actualizando" : "Actualizar"}
          </button>
          <button className="btn ghost" onClick={signOut} style={{ fontSize:10, padding:"11px 12px" }} title="Cerrar sesión">
            <Ico d={ICONS.x} size={13} sw={2} />
          </button>
        </div>
      </header>

      <div className="subbar">
        <nav className="tabs">
          {TABS.map(t => (
            <button key={t.id} className={`tab ${tab === t.id ? "on" : ""}`} onClick={() => setTab(t.id)}>
              {t.label}
              {t.id === "campanas" && <span className="count">{CAMPAIGNS.length}</span>}
            </button>
          ))}
        </nav>
        <div className="scope">
          <span className="scope-lab">Campaña</span>
          <ScopeDropdown scope={scope} onChange={setScope} />
        </div>
      </div>

      <main className="content">
        <div className="view-head">
          <div>
            <h2>{VIEW_META[tab].h}</h2>
            <div className="sub">{VIEW_META[tab].s}</div>
          </div>
          <div className="scope-chip">
            {scopeCamp
              ? <><span className="dot" style={{ background: scopeCamp.accent }} />{scopeCamp.nombre}</>
              : <><span className="dot" style={{ background: "var(--ink)" }} />Todas · {CAMPAIGNS.length}</>}
          </div>
        </div>

        {error && (
          <div style={{ background:"rgba(180,61,42,0.06)", border:"1px solid var(--danger)", padding:"12px 16px", fontSize:13, color:"var(--danger)", marginBottom:16 }}>
            {error} — <button className="btn ghost" onClick={refresh} style={{ display:"inline", padding:"2px 8px", fontSize:11 }}>Reintentar</button>
          </div>
        )}

        {tab === "resumen"    && <ResumenView    scope={scope} />}
        {tab === "campanas"   && <CampanasView   scope={scope} onPick={setScope} />}
        {tab === "conjuntos"  && <ConjuntosView  scope={scope} onChange={setScope} />}
        {tab === "tendencias" && <TendenciasView scope={scope} />}
      </main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);