// ===== Elejemais — App root =====

const { useState: useState_a, useEffect: useEffect_a, useMemo: useMemo_a } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "azul",
  "density": "comfortable",
  "cardStyle": "soft"
}/*EDITMODE-END*/;

const ACCENT_MAP = {
  verde:  { c: "oklch(0.44 0.11 155)", s: "oklch(0.38 0.13 155)", soft: "oklch(0.94 0.04 155)", dark_soft: "oklch(0.28 0.06 155)", dark_c: "oklch(0.74 0.13 155)", dark_s: "oklch(0.82 0.13 155)" },
  azul:   { c: "oklch(0.46 0.13 250)", s: "oklch(0.40 0.15 250)", soft: "oklch(0.95 0.03 250)", dark_soft: "oklch(0.28 0.07 250)", dark_c: "oklch(0.74 0.14 250)", dark_s: "oklch(0.82 0.14 250)" },
  ocre:   { c: "oklch(0.55 0.13 75)",  s: "oklch(0.48 0.14 75)",  soft: "oklch(0.95 0.04 75)",  dark_soft: "oklch(0.30 0.07 75)",  dark_c: "oklch(0.78 0.14 75)",  dark_s: "oklch(0.85 0.14 75)" },
  vinho:  { c: "oklch(0.42 0.14 20)",  s: "oklch(0.36 0.16 20)",  soft: "oklch(0.95 0.04 20)",  dark_soft: "oklch(0.28 0.08 20)",  dark_c: "oklch(0.74 0.15 20)",  dark_s: "oklch(0.82 0.15 20)" },
};

function applyTweaks(t) {
  const root = document.documentElement;
  root.dataset.theme = t.theme;
  root.dataset.density = t.density;
  root.dataset.cardStyle = t.cardStyle;
  const a = ACCENT_MAP[t.accent] || ACCENT_MAP.verde;
  if (t.theme === "dark") {
    root.style.setProperty("--accent", a.dark_c);
    root.style.setProperty("--accent-strong", a.dark_s);
    root.style.setProperty("--accent-soft", a.dark_soft);
    root.style.setProperty("--accent-ink", "#0f0f0c");
  } else {
    root.style.setProperty("--accent", a.c);
    root.style.setProperty("--accent-strong", a.s);
    root.style.setProperty("--accent-soft", a.soft);
    root.style.setProperty("--accent-ink", "#ffffff");
  }
}

function LoadingScreen() {
  return (
    <div style={{
      minHeight: "100vh", display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center",
      gap: 14, background: "var(--bg)",
    }}>
      <img src="/Images/logo.jpg" alt="Elejemais" style={{ width: 40, height: 40, objectFit: "contain" }} />
      <span className="dim" style={{ fontSize: 14 }}>Carregando…</span>
    </div>
  );
}

function NoAccessScreen({ email }) {
  const handleSignOut = () => window.sb.auth.signOut();
  return (
    <div className="fadein" style={{
      minHeight: "100vh", display: "flex", alignItems: "center",
      justifyContent: "center", background: "var(--bg)", padding: 24,
    }}>
      <div style={{ width: "100%", maxWidth: 400, display: "flex", flexDirection: "column", gap: 24 }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
          <img src="/Images/logo.jpg" alt="Elejemais" style={{ width: 44, height: 44, objectFit: "contain" }} />
          <div className="serif" style={{ fontSize: 28, letterSpacing: "-0.01em", lineHeight: 1 }}>Elejemais</div>
          <div className="eyebrow">Plataforma de campanha</div>
        </div>
        <div className="card" style={{ padding: "28px 32px", display: "flex", flexDirection: "column", gap: 18, textAlign: "center" }}>
          <div style={{
            width: 52, height: 52, borderRadius: 999, margin: "0 auto",
            background: "var(--accent-soft)", display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            <Icon.Lock size={22} style={{ color: "var(--accent)" }} />
          </div>
          <div>
            <h2 className="serif" style={{ fontSize: 22, margin: "0 0 6px", letterSpacing: "-0.01em" }}>
              Aguardando acesso
            </h2>
            <p className="dim" style={{ margin: 0, fontSize: 13, lineHeight: 1.6 }}>
              Sua conta <strong style={{ color: "var(--ink-2)" }}>{email}</strong> ainda não foi
              adicionada a nenhuma campanha. Entre em contato com o administrador para receber acesso.
            </p>
          </div>
          <button
            className="btn btn--block"
            onClick={handleSignOut}
            style={{ marginTop: 4 }}
          >
            <Icon.Arrow size={14} style={{ transform: "rotate(180deg)" }} /> Sair da conta
          </button>
        </div>
        <div className="dim" style={{ textAlign: "center", fontSize: 12 }}>
          © 2026 Elejemais · Dados protegidos por LGPD
        </div>
      </div>
    </div>
  );
}

function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  useEffect_a(() => { applyTweaks(t); }, [t]);

  const [publicToken, setPublicToken] = useState_a(null);

  useEffect_a(() => {
    var hash = window.location.hash || "";
    var match = hash.match(/^#\/cadastro\/([a-f0-9]{36})$/);
    if (match) setPublicToken(match[1]);
  }, []);

  // ── Auth ──
  const [session, setSession]       = useState_a(null);
  const [authLoading, setAuthLoading] = useState_a(true);

  // ── Campaigns ──
  const [campaigns, setCampaigns]         = useState_a([]);
  const [campaignsLoaded, setCampaignsLoaded] = useState_a(false);
  const [activeCampaignId, setActiveCampaignId] = useState_a(() => {
    try { return localStorage.getItem('_eje_campaign') || null; } catch { return null; }
  });
  const [screen, setScreen]               = useState_a(() => {
    try { return localStorage.getItem('_eje_screen') || 'dashboard'; } catch { return 'dashboard'; }
  });
  const [onboarding, setOnboarding]       = useState_a(false);
  const [editingCampaign, setEditingCampaign] = useState_a(null);
  const [confirmDel, setConfirmDel]       = useState_a(null);
  const [modal, setModal]                 = useState_a(null);

  const openModal  = (kind, contexto) => setModal({ kind, contexto });
  const closeModal = () => setModal(null);

  // Observa estado de autenticação
  useEffect_a(() => {
    window.sb.auth.getSession().then(({ data: { session } }) => {
      setSession(session);
      setAuthLoading(false);
    });

    const { data: { subscription } } = window.sb.auth.onAuthStateChange((_, session) => {
      setSession(session);
      setAuthLoading(false);
    });

    return () => subscription.unsubscribe();
  }, []);

  // Persiste campanha e tela ativas no localStorage
  useEffect_a(() => {
    try {
      if (activeCampaignId) localStorage.setItem('_eje_campaign', activeCampaignId);
      else localStorage.removeItem('_eje_campaign');
    } catch {}
  }, [activeCampaignId]);

  useEffect_a(() => {
    try { localStorage.setItem('_eje_screen', screen); } catch {}
  }, [screen]);

  // Carrega campanhas quando há sessão
  useEffect_a(() => {
    if (!session) { setCampaigns([]); setCampaignsLoaded(false); setActiveCampaignId(null); return; }
    setCampaignsLoaded(false);
    window.API.getCampaigns()
      .then(list => {
        setCampaigns(list);
        setCampaignsLoaded(true);
        // Valida que a campanha salva ainda existe
        setActiveCampaignId(prev => {
          if (!prev) return null;
          return list.some(c => c.id === prev) ? prev : null;
        });
      })
      .catch(err => { console.error("Erro ao carregar campanhas:", err); setCampaignsLoaded(true); });
  }, [session]);

  // Dados do usuário logado
  const user = useMemo_a(() => {
    if (!session) return null;
    const meta = session.user.user_metadata || {};
    const nome = meta.full_name || session.user.email?.split("@")[0] || "Usuário";
    const iniciais = nome.split(" ").map(p => p[0]).slice(0, 2).join("").toUpperCase();
    return { nome, iniciais, email: session.user.email };
  }, [session]);

  const activeCampaign = campaigns.find(c => c.id === activeCampaignId);

  const handleCreate = async (data) => {
    try {
      const nova = await window.API.createCampaign({
        candidato:    data.candidato,
        numero:       data.numero,
        tipo:         data.tipo,
        cidade:       data.cidade,
        uf:           data.uf,
        coligacao:    data.coligacao,
        election_date: data.eleicaoData || null,
        metaVotos:    data.metaVotos,
        cor:          t.accent,
      });
      setCampaigns(prev => [nova, ...prev]);
      setOnboarding(false);
      setActiveCampaignId(nova.id);
      setScreen("dashboard");
    } catch (err) {
      console.error("Erro ao criar campanha:", err);
      alert("Erro ao criar campanha: " + err.message);
    }
  };

  const handleUpdate = async (id, formData) => {
    const updated = await window.API.updateCampaign(id, formData);
    setCampaigns(prev => prev.map(c => c.id === id ? updated : c));
  };

  const handleDelete = (c) => setConfirmDel(c);
  const confirmDelete = async () => {
    try {
      await window.API.deleteCampaign(confirmDel.id);
      setCampaigns(prev => prev.filter(c => c.id !== confirmDel.id));
      if (activeCampaignId === confirmDel.id) setActiveCampaignId(null);
      setConfirmDel(null);
    } catch (err) {
      console.error("Erro ao excluir campanha:", err);
      alert("Erro ao excluir: " + err.message);
    }
  };

  if (publicToken) return <window.PublicForm token={publicToken} />;

  // Estados de carregamento e autenticação
  if (authLoading)                        return <LoadingScreen />;
  if (!session)                           return <window.Auth />;
  if (!campaignsLoaded)                   return <LoadingScreen />;
  if (campaignsLoaded && campaigns.length === 0) return <NoAccessScreen email={session.user.email} />;

  return (
    <>
      {!activeCampaignId && !onboarding && (
        <window.CampaignPicker
          campaigns={campaigns}
          user={user}
          onOpen={(c) => { setActiveCampaignId(c.id); setScreen("dashboard"); }}
          onNew={() => setOnboarding(true)}
          onEdit={(c) => setEditingCampaign(c)}
          onDelete={handleDelete}
          onSignOut={() => window.API.signOut()}
        />
      )}

      {onboarding && (
        <window.Onboarding
          onCancel={() => setOnboarding(false)}
          onCreate={handleCreate}
        />
      )}

      {activeCampaignId && activeCampaign && (
        <window.Shell
          campaign={activeCampaign}
          screen={screen}
          onScreen={setScreen}
          user={user}
          openModal={openModal}
          onSwitchCampaign={() => setActiveCampaignId(null)}
          onSignOut={() => window.API.signOut()}
        >
          {(function () {
            var role    = activeCampaign.roleRaw || 'operador';
            var isCoord = role === 'administrador' || role === 'coordenador';
            var isLider = role === 'administrador' || role === 'coordenador' || role === 'lideranca';

            // Guard: redireciona para dashboard se tentar acessar tela sem permissão
            // operador  → só dashboard e apoiadores
            // lideranca → tudo exceto inteligencia e relatorio
            var soCoord = ['inteligencia', 'relatorio'];
            var soLider = ['mapa', 'liderancas'];

            if (!isLider && soLider.indexOf(screen) !== -1) {
              return <window.Dashboard campaign={activeCampaign} openModal={openModal} onScreen={setScreen} />;
            }
            if (!isCoord && soCoord.indexOf(screen) !== -1) {
              return <window.Dashboard campaign={activeCampaign} openModal={openModal} onScreen={setScreen} />;
            }

            if (screen === "dashboard")    return <window.Dashboard campaign={activeCampaign} openModal={openModal} onScreen={setScreen} />;
            if (screen === "mapa")         return <window.Screens.MapaScreen campaign={activeCampaign} openModal={openModal} />;
            if (screen === "liderancas")   return <window.Screens.LiderancasScreen campaign={activeCampaign} openModal={openModal} />;
            if (screen === "apoiadores")   return <window.Screens.ApoiadoresScreen campaign={activeCampaign} openModal={openModal} />;
            if (screen === "inteligencia") return <window.Screens.InteligenciaScreen campaign={activeCampaign} openModal={openModal} />;
            if (screen === "relatorio")    return <window.Screens.RelatorioScreen campaign={activeCampaign} openModal={openModal} />;
            return <window.Dashboard campaign={activeCampaign} openModal={openModal} onScreen={setScreen} />;
          })()}
        </window.Shell>
      )}

      {modal && activeCampaign && (
        <window.ModalsRoot
          kind={modal.kind}
          contexto={modal.contexto}
          onClose={closeModal}
          campaign={activeCampaign}
          user={user}
          onSignOut={() => window.API.signOut()}
        />
      )}

      {editingCampaign && (
        <window.EditarCampanhaModal
          campaign={editingCampaign}
          onClose={() => setEditingCampaign(null)}
          onSave={handleUpdate}
        />
      )}

      {confirmDel && (
        <div className="modal-back" onClick={() => setConfirmDel(null)}>
          <div className="modal" onClick={e => e.stopPropagation()}>
            <h3 className="serif" style={{ fontSize: 26, margin: "0 0 8px", letterSpacing: "-0.01em" }}>
              Excluir campanha?
            </h3>
            <p className="dim" style={{ margin: "0 0 22px", lineHeight: 1.6 }}>
              A campanha <strong style={{ color: "var(--ink)" }}>{confirmDel.candidato}</strong> e seus
              {" "}{window.fmt(confirmDel.apoiadores)} apoiadores serão removidos permanentemente.
              Esta ação não pode ser desfeita.
            </p>
            <div className="row" style={{ justifyContent: "flex-end", gap: 8 }}>
              <button className="btn" onClick={() => setConfirmDel(null)}>Cancelar</button>
              <button className="btn btn--danger" onClick={confirmDelete}>
                <Icon.Trash size={14} /> Excluir definitivamente
              </button>
            </div>
          </div>
        </div>
      )}

      <window.TweaksPanel>
        <window.TweakSection label="Aparência">
          <window.TweakRadio
            label="Tema"
            value={t.theme}
            options={["light", "dark"]}
            onChange={v => setTweak("theme", v)}
          />
          <window.TweakRadio
            label="Destaque"
            value={t.accent}
            options={["verde", "azul", "ocre", "vinho"]}
            onChange={v => setTweak("accent", v)}
          />
        </window.TweakSection>
        <window.TweakSection label="Layout">
          <window.TweakRadio
            label="Densidade"
            value={t.density}
            options={["comfortable", "compact"]}
            onChange={v => setTweak("density", v)}
          />
          <window.TweakRadio
            label="Cards"
            value={t.cardStyle}
            options={["soft", "flat", "shadow"]}
            onChange={v => setTweak("cardStyle", v)}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

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