// ===== Elejemais — Dashboard screen =====

const { useState: useState_d, useEffect: useEffect_d, useRef: useRef_d } = React;

const COLORS_REGION = [
  "oklch(0.44 0.11 155)", "oklch(0.55 0.14 200)", "oklch(0.62 0.16 40)",
  "oklch(0.58 0.14 270)", "oklch(0.65 0.13 90)",  "oklch(0.52 0.13 320)",
  "oklch(0.6 0.13 160)",  "oklch(0.6 0.13 30)",   "oklch(0.55 0.1 80)",
];

function CampaignHero({ campaign, semanas, openModal, bannerUrl, onBannerChange, bannerFocalY, onBannerFocalSave, photoUrl, onPhotoChange, photoFocal, onPhotoFocalSave }) {
  const iniciais = campaign.candidato.split(" ").map(function(p) { return p[0]; }).slice(0, 2).join("").toUpperCase();
  const bannerInputRef = useRef_d(null);
  const photoInputRef  = useRef_d(null);
  const bannerRef      = useRef_d(null);
  const dragBanner     = useRef_d(null);
  const dragPhoto      = useRef_d(null);

  const [linkCopied,      setLinkCopied]      = useState_d(false);
  const [focalY,          setFocalY]          = useState_d(bannerFocalY != null ? bannerFocalY : 50);
  const [focalYOriginal,  setFocalYOriginal]  = useState_d(bannerFocalY != null ? bannerFocalY : 50);
  const [bannerEditing,   setBannerEditing]   = useState_d(false);
  const [focal2D,         setFocal2D]         = useState_d(photoFocal || '50% 50%');
  const [focal2DOriginal, setFocal2DOriginal] = useState_d(photoFocal || '50% 50%');
  const [photoEditing,    setPhotoEditing]    = useState_d(false);
  const [photoHovered,    setPhotoHovered]    = useState_d(false);
  const [bannerHovered,   setBannerHovered]   = useState_d(false);
  const [saving,          setSaving]          = useState_d(false);

  async function handleCopyLink() {
    try {
      var link = await window.API.getMyCampaignLink(campaign.id);
      if (!link) return;
      var url = window.location.href.split('#')[0].split('?')[0].replace(/[^\/]*\.html.*$/, '') + 'landingpage.html?t=' + link.token;
      await navigator.clipboard.writeText(url);
      setLinkCopied(true);
      setTimeout(function() { setLinkCopied(false); }, 2000);
    } catch (err) { console.error('Erro ao copiar link:', err); }
  }

  // ── Banner drag (only active when bannerEditing === true) ─────────────────
  useEffect_d(function() {
    function onMove(e) {
      if (!dragBanner.current) return;
      var dy = e.clientY - dragBanner.current.startY;
      var bannerH = bannerRef.current ? bannerRef.current.offsetHeight : 185;
      var ny = Math.max(0, Math.min(100, dragBanner.current.startFocal - (dy / bannerH) * 100));
      setFocalY(Math.round(ny));
    }
    function onUp() { dragBanner.current = null; }
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    return function() {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
    };
  }, []);

  function enterBannerEdit() {
    setFocalYOriginal(focalY);
    setBannerEditing(true);
  }

  function startBannerDrag(e) {
    if (!bannerUrl || !bannerEditing) return;
    e.preventDefault();
    dragBanner.current = { startY: e.clientY, startFocal: focalY };
  }

  async function confirmBanner() {
    setSaving(true);
    try { await onBannerFocalSave(focalY); } catch (err) { console.error(err); }
    setSaving(false);
    setBannerEditing(false);
  }

  function cancelBanner() {
    setFocalY(focalYOriginal);
    setBannerEditing(false);
  }

  // ── Photo drag (only active when photoEditing === true) ────────────────────
  useEffect_d(function() {
    function onMove(e) {
      if (!dragPhoto.current) return;
      var dx = ((e.clientX - dragPhoto.current.startX) / 92) * 100;
      var dy = ((e.clientY - dragPhoto.current.startY) / 92) * 100;
      var nx = Math.max(0, Math.min(100, dragPhoto.current.startFx - dx));
      var ny = Math.max(0, Math.min(100, dragPhoto.current.startFy - dy));
      setFocal2D(nx.toFixed(1) + '% ' + ny.toFixed(1) + '%');
    }
    function onUp() { dragPhoto.current = null; }
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    return function() {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
    };
  }, []);

  function enterPhotoEdit() {
    setFocal2DOriginal(focal2D);
    setPhotoEditing(true);
  }

  function startPhotoDrag(e) {
    if (!photoUrl || !photoEditing) return;
    e.preventDefault();
    var parts = (focal2D || '50% 50%').split(' ');
    dragPhoto.current = {
      startX: e.clientX, startY: e.clientY,
      startFx: parseFloat(parts[0]) || 50,
      startFy: parseFloat(parts[1]) || 50,
    };
  }

  async function confirmPhoto() {
    setSaving(true);
    try { await onPhotoFocalSave(focal2D); } catch (err) { console.error(err); }
    setSaving(false);
    setPhotoEditing(false);
  }

  function cancelPhoto() {
    setFocal2D(focal2DOriginal);
    setPhotoEditing(false);
  }

  // ── Shared toolbar style ───────────────────────────────────────────────────
  var glassBtn = {
    backdropFilter: "blur(6px)", border: "1px solid rgba(255,255,255,0.22)",
    borderRadius: 8, padding: "5px 13px", fontSize: 12,
    display: "flex", alignItems: "center", gap: 5, cursor: "pointer",
  };

  var bannerBg = bannerUrl
    ? "url('" + bannerUrl + "') center " + focalY + "%/cover no-repeat"
    : "linear-gradient(160deg, oklch(0.13 0.03 145) 0%, oklch(0.20 0.06 150) 50%, oklch(0.32 0.10 155) 100%)";

  return (
    <div className="card campaign-hero" style={{ padding: 0, overflow: "hidden", marginBottom: 28 }}>
      {/* Banner */}
      <div
        ref={bannerRef}
        className="campaign-hero__banner"
        style={{ height: 185, background: bannerBg, position: "relative", cursor: bannerEditing ? "ns-resize" : "default" }}
        onMouseDown={startBannerDrag}
        onMouseEnter={() => setBannerHovered(true)}
        onMouseLeave={() => setBannerHovered(false)}
      >
        {!bannerUrl && (
          <div style={{ position: "absolute", inset: 0, backgroundImage: "radial-gradient(ellipse at 70% 50%, oklch(0.38 0.10 155 / 0.25) 0%, transparent 65%)" }} />
        )}
        {bannerEditing && (
          <div style={{ position: "absolute", inset: 0, border: "2px solid rgba(255,255,255,0.5)", borderRadius: "inherit", pointerEvents: "none", zIndex: 2 }} />
        )}
        {/* Number badge */}
        <div style={{
          position: "absolute", top: 16, right: 20, zIndex: 3,
          background: "rgba(255,255,255,0.10)", color: "rgba(255,255,255,0.9)",
          border: "1px solid rgba(255,255,255,0.16)", backdropFilter: "blur(6px)",
          borderRadius: 20, padding: "4px 14px", fontSize: 12, fontFamily: "var(--mono)", letterSpacing: "0.06em",
        }}>Nº {campaign.numero}</div>

        {/* Banner toolbar */}
        <div style={{ position: "absolute", bottom: 12, left: 16, display: "flex", gap: 6, zIndex: 3 }} onMouseDown={e => e.stopPropagation()}>
          {!bannerEditing ? (
            bannerHovered && (
              <>
                <button onClick={() => bannerInputRef.current && bannerInputRef.current.click()}
                  style={{ ...glassBtn, background: "rgba(0,0,0,0.45)", color: "rgba(255,255,255,0.9)" }}>
                  <Icon.Camera size={13} /> Alterar banner
                </button>
                {bannerUrl && (
                  <button onClick={enterBannerEdit}
                    style={{ ...glassBtn, background: "rgba(0,0,0,0.35)", color: "rgba(255,255,255,0.85)" }}>
                    ↕ Reposicionar
                  </button>
                )}
              </>
            )
          ) : (
            <>
              <div style={{ ...glassBtn, background: "rgba(0,0,0,0.45)", color: "rgba(255,255,255,0.7)", cursor: "ns-resize" }}>
                ↕ Arraste para mover
              </div>
              <button onClick={confirmBanner} disabled={saving}
                style={{ ...glassBtn, background: "var(--accent)", color: "#fff", border: "none", fontWeight: 600 }}>
                {saving ? "Salvando…" : "✓ Confirmar"}
              </button>
              <button onClick={cancelBanner}
                style={{ ...glassBtn, background: "rgba(0,0,0,0.45)", color: "rgba(255,255,255,0.85)" }}>
                ✕ Cancelar
              </button>
            </>
          )}
        </div>
        <input ref={bannerInputRef} type="file" accept="image/*" style={{ display: "none" }}
          onChange={function(e) { var f = e.target.files[0]; if (f && onBannerChange) onBannerChange(f); e.target.value = ''; }} />
      </div>

      {/* Info row — avatar overlaps banner */}
      <div className="campaign-hero__info" style={{ padding: "0 28px 22px", marginTop: 10, display: "flex", alignItems: "flex-end", gap: 18 }}>

        {/* Candidate photo */}
        <div
          style={{ position: "relative", flexShrink: 0 }}
          onMouseEnter={() => setPhotoHovered(true)}
          onMouseLeave={() => setPhotoHovered(false)}
        >
          <div
            className="campaign-hero__avatar"
            style={{
              width: 92, height: 92, borderRadius: "50%",
              border: photoEditing ? "3px solid var(--accent)" : "4px solid var(--surface)",
              background: photoUrl ? "none" : "var(--accent-soft)",
              overflow: "hidden",
              display: "flex", flexDirection: "column",
              alignItems: "center", justifyContent: "center",
              cursor: photoEditing ? "grab" : (photoUrl ? "default" : "pointer"),
              color: "var(--accent-strong)",
              userSelect: "none",
            }}
            onMouseDown={startPhotoDrag}
            onClick={function() { if (!photoUrl && !photoEditing) photoInputRef.current && photoInputRef.current.click(); }}
          >
            {photoUrl
              ? <img src={photoUrl} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: focal2D, pointerEvents: "none", display: "block" }} />
              : <>
                  <span className="serif" style={{ fontSize: 26, lineHeight: 1 }}>{iniciais}</span>
                  <span style={{ fontSize: 10, color: "var(--muted)", marginTop: 2 }}>Foto</span>
                </>
            }
            {/* Drag hint overlay when editing */}
            {photoEditing && (
              <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.28)", borderRadius: "50%" }}>
                <span style={{ color: "#fff", fontSize: 18 }}>↕↔</span>
              </div>
            )}
          </div>
          {/* Upload + reposition buttons — visible only on hover, hidden when editing */}
          {!photoEditing && photoHovered && (
            <>
              <button onClick={() => photoInputRef.current && photoInputRef.current.click()}
                style={{
                  position: "absolute", bottom: 0, right: 0,
                  width: 26, height: 26, borderRadius: "50%",
                  background: "var(--accent)", color: "#fff",
                  border: "2px solid var(--surface)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  cursor: "pointer", padding: 0,
                }} title="Alterar foto">
                <Icon.Camera size={11} />
              </button>
              {photoUrl && (
                <button onClick={enterPhotoEdit}
                  style={{
                    position: "absolute", bottom: 0, left: 0,
                    width: 26, height: 26, borderRadius: "50%",
                    background: "var(--surface-2)", color: "var(--ink-2)",
                    border: "2px solid var(--surface)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    cursor: "pointer", padding: 0, fontSize: 12,
                  }} title="Reposicionar foto">
                  ↕
                </button>
              )}
            </>
          )}
          <input ref={photoInputRef} type="file" accept="image/*" style={{ display: "none" }}
            onChange={function(e) { var f = e.target.files[0]; if (f && onPhotoChange) onPhotoChange(f); e.target.value = ''; }} />
        </div>

        {/* Name + info OR photo edit confirm/cancel */}
        {photoEditing ? (
          <>
            <div style={{ flex: 1, paddingBottom: 4 }}>
              <div className="dim" style={{ fontSize: 12, marginBottom: 8 }}>Arraste a foto para ajustar o enquadramento</div>
              <div className="row" style={{ gap: 8 }}>
                <button className="btn btn--primary" onClick={confirmPhoto} disabled={saving}>
                  {saving ? "Salvando…" : <><Icon.Check size={13} /> Confirmar</>}
                </button>
                <button className="btn" onClick={cancelPhoto}>
                  <Icon.X size={13} /> Cancelar
                </button>
              </div>
            </div>
          </>
        ) : (
          <>
            <div className="campaign-hero__details" style={{ flex: 1, paddingBottom: 2 }}>
              <div className="row" style={{ gap: 8, marginBottom: 6 }}>
                <span className={"badge " + (campaign.status === "ativa" ? "badge--accent" : campaign.status === "rascunho" ? "badge--warm" : "")}>
                  <span className="badge--dot" /> Campanha {campaign.status}
                </span>
                <span className="dim" style={{ fontSize: 13 }}>{window.tipoLabel(campaign.tipo)}</span>
              </div>
              <h2 className="serif" style={{ fontSize: 36, margin: "0 0 6px", lineHeight: 1, letterSpacing: "-0.02em" }}>
                {campaign.candidato}
              </h2>
              <div className="dim" style={{ fontSize: 13, display: "flex", alignItems: "center", gap: 4, flexWrap: "wrap" }}>
                <Icon.Pin size={12} />
                {campaign.cidade}, {campaign.uf} · {campaign.coligacao}
                {semanas > 0 && <span> · <strong style={{ color: "var(--ink-2)" }}>{semanas} semanas até a urna</strong></span>}
              </div>
            </div>
            <div className="row campaign-hero__actions" style={{ gap: 8, paddingBottom: 2 }}>
              <button className="btn" onClick={() => openModal && openModal("calendario")}>
                <Icon.Calendar size={13} /> Agenda
              </button>
              <button className="btn btn--primary" onClick={handleCopyLink}>
                <Icon.Link size={13} /> {linkCopied ? "Copiado!" : "Link público"}
              </button>
            </div>
          </>
        )}
      </div>

    </div>
  );
}

function Dashboard({ campaign, openModal, onScreen }) {
  const { StatCard, MetaBar, LineChart, RankBars, Donut } = window.Charts;

  const [series,    setSeries]    = useState_d([]);
  const [regioes,   setRegioes]   = useState_d([]);
  const [feed,      setFeed]      = useState_d([]);
  const [loading,   setLoading]   = useState_d(true);
  const [bannerUrl,     setBannerUrl]     = useState_d(campaign.bannerUrl  || null);
  const [bannerFocalY,  setBannerFocalY]  = useState_d(campaign.bannerFocalY != null ? campaign.bannerFocalY : 50);
  const [photoUrl,      setPhotoUrl]      = useState_d(campaign.photoUrl   || null);
  const [photoFocal,    setPhotoFocal]    = useState_d(campaign.photoFocal || '50% 50%');

  const handleBannerChange = async function(file) {
    setBannerUrl(URL.createObjectURL(file));
    try {
      var url = await window.API.uploadBanner(campaign.id, file);
      setBannerUrl(url);
    } catch (err) {
      console.error('Erro ao enviar banner:', err);
      setBannerUrl(campaign.bannerUrl || null);
    }
  };

  const handleBannerFocalSave = async function(y) {
    setBannerFocalY(y);
    try { await window.API.updateCampaign(campaign.id, { banner_focal_y: y }); }
    catch (err) { console.error('Erro ao salvar posição do banner:', err); }
  };

  const handlePhotoChange = async function(file) {
    setPhotoUrl(URL.createObjectURL(file));
    try {
      var url = await window.API.uploadCandidatePhoto(campaign.id, file);
      setPhotoUrl(url);
    } catch (err) {
      console.error('Erro ao enviar foto:', err);
      setPhotoUrl(campaign.photoUrl || null);
    }
  };

  const handlePhotoFocalSave = async function(focal) {
    setPhotoFocal(focal);
    try { await window.API.updateCampaign(campaign.id, { photo_focal: focal }); }
    catch (err) { console.error('Erro ao salvar posição da foto:', err); }
  };

  useEffect_d(() => {
    if (!campaign?.id) return;
    setLoading(true);

    Promise.all([
      window.API.getGrowthSeries(campaign.id),
      window.API.getMunicipalityStats(campaign.id),
      window.API.getActivityFeed(campaign.id, 6),
    ]).then(([s, r, f]) => {
      if (s.length > 0) setSeries(s);
      if (r.length > 0) setRegioes(r.map((reg, i) => ({ ...reg, cor: COLORS_REGION[i % COLORS_REGION.length] })));
      setFeed(f);
      setLoading(false);
    }).catch(err => {
      console.error('Dashboard data error:', err);
      setLoading(false);
    });
  }, [campaign?.id]);

  const apoioSpark = series.map(s => s.apoio);
  const liderSpark = series.map(s => s.lider);

  const donutData = regioes.slice(0, 5).map(r => ({
    label: r.nome, value: r.apoio, color: r.cor,
  }));

  const dataEleicao = campaign.eleicaoDataRaw ? new Date(campaign.eleicaoDataRaw + 'T12:00:00') : new Date('2026-10-05T12:00:00');
  const semanas = Math.max(0, Math.ceil((dataEleicao - new Date()) / (7 * 86400000)));

  const pctMeta = campaign.metaSegura > 0
    ? (campaign.apoiadores / campaign.metaSegura * 100).toFixed(1)
    : 0;

  const ultimaAtu = feed.length > 0 ? feed[0].data : null;

  return (
    <div className="dash">
      <CampaignHero
        campaign={campaign} semanas={semanas} openModal={openModal}
        bannerUrl={bannerUrl} onBannerChange={handleBannerChange}
        bannerFocalY={bannerFocalY} onBannerFocalSave={handleBannerFocalSave}
        photoUrl={photoUrl} onPhotoChange={handlePhotoChange}
        photoFocal={photoFocal} onPhotoFocalSave={handlePhotoFocalSave}
      />

      <div className="dash__header">
        <div>
          <div className="eyebrow">Visão geral</div>
          <h1 className="serif" style={{ fontSize: 38, lineHeight: 1.05, margin: "8px 0 4px", letterSpacing: "-0.02em" }}>
            {ultimaAtu ? <>Última atualização {ultimaAtu}.</> : <>Bem-vindo à campanha.</>}
          </h1>
          <p className="dim" style={{ margin: 0, maxWidth: 600 }}>
            {pctMeta > 0
              ? <>Você está a <strong style={{ color: "var(--accent)" }}>{pctMeta}% da meta +30%</strong> com {semanas} semanas até a eleição. Veja onde acelerar.</>
              : <>Campanha em fase de configuração. Cadastre apoiadores para acompanhar a meta.</>
            }
          </p>
        </div>
        <div className="row" style={{ gap: 8 }}>
          <button className="btn"><Icon.Filter size={13} /> Filtrar</button>
          <button className="btn"><Icon.Calendar size={13} /> Últimos 30 dias</button>
          {window.canCoord(campaign.roleRaw) && (
            <button className="btn btn--primary" onClick={() => openModal && openModal("exportar")}><Icon.Download size={14} /> Exportar</button>
          )}
        </div>
      </div>

      <div className="dash__grid">
        <StatCard
          eyebrow="Apoiadores"
          value={campaign.apoiadores}
          delta={null}
          accent="var(--accent)"
          sparkData={apoioSpark}
          footer={`Meta +30%: ${window.fmt(campaign.metaSegura)} apoiadores`}
        />
        <StatCard
          eyebrow="Lideranças"
          value={campaign.liderancas}
          delta={null}
          accent="var(--ink-2)"
          sparkData={liderSpark}
          footer={`${campaign.municipios} municípios cobertos`}
        />
        <StatCard
          eyebrow="Municípios cobertos"
          value={campaign.municipios}
          delta={null}
          accent="var(--warm)"
          footer={regioes.filter(r => r.apoio > 0).length > 0
            ? `${regioes.filter(r => r.apoio > 0).length} com apoiadores`
            : "Com ao menos 1 liderança"}
        />
        <StatCard
          eyebrow="Apoio por líder"
          value={campaign.liderancas > 0 ? Math.round(campaign.apoiadores / campaign.liderancas) : 0}
          suffix="por líder"
          delta={null}
          accent="var(--ink-2)"
          footer="Média de apoiadores cadastrados por liderança"
        />
      </div>

      <section className="card dash__meta">
        <div className="row" style={{ justifyContent: "space-between", marginBottom: 18 }}>
          <div>
            <div className="eyebrow">Meta × Realidade</div>
            <h2 className="serif" style={{ fontSize: 24, margin: "4px 0 0", letterSpacing: "-0.01em" }}>
              Caminho para a urna
            </h2>
          </div>
          <div className="row" style={{ gap: 6 }}>
            <span className="badge"><Icon.Target size={12} /> Meta legal {window.fmt(campaign.metaVotos)}</span>
            <span className="badge badge--accent"><span className="badge--dot" /> +30% segurança</span>
          </div>
        </div>
        <MetaBar atual={campaign.apoiadores} meta={campaign.metaVotos} metaSegura={campaign.metaSegura} color="var(--accent)" />
        <div className="meta-foot">
          <MetaCol label="Faltam para meta legal"  value={Math.max(0, campaign.metaVotos - campaign.apoiadores)}   suffix="apoiadores" />
          <MetaCol label="Faltam para meta +30%"   value={Math.max(0, campaign.metaSegura - campaign.apoiadores)}  suffix="apoiadores" />
          <MetaCol label="Semanas restantes"        value={semanas}                                                  suffix="até a eleição" />
          <MetaCol label="Progresso geral"          value={parseFloat(pctMeta)}                                      suffix="% da meta +30%" tone={pctMeta >= 100 ? "positive" : null} />
        </div>
      </section>

      <section className="dash__row">
        <div className="card" style={{ padding: "22px 24px", gridColumn: "span 8" }}>
          <div className="row" style={{ justifyContent: "space-between", marginBottom: 8 }}>
            <div>
              <div className="eyebrow">Crescimento</div>
              <h2 className="serif" style={{ fontSize: 22, margin: "4px 0 0", letterSpacing: "-0.01em" }}>
                Apoiadores e lideranças ao longo do tempo
              </h2>
            </div>
          </div>
          {series.length > 0 ? (
            <>
              <LineChart
                data={series}
                keys={["apoio", "lider"]}
                colors={["oklch(0.44 0.11 155)", "oklch(0.62 0.16 40)"]}
                height={240}
              />
              <div className="row" style={{ gap: 22, marginTop: 6, fontSize: 12 }}>
                <span className="row" style={{ gap: 6 }}>
                  <span style={{ width: 9, height: 9, borderRadius: 2, background: "oklch(0.44 0.11 155)" }} />
                  Apoiadores cadastrados
                </span>
                <span className="row" style={{ gap: 6 }}>
                  <span style={{ width: 9, height: 9, borderRadius: 2, background: "oklch(0.62 0.16 40)" }} />
                  Lideranças adicionadas
                </span>
              </div>
            </>
          ) : (
            <div className="dim" style={{ textAlign: "center", padding: "48px 0", fontSize: 14 }}>
              Nenhum dado de crescimento ainda. Cadastre apoiadores para ver o gráfico.
            </div>
          )}
        </div>

        <div className="card" style={{ padding: "22px 24px", gridColumn: "span 4" }}>
          <div className="eyebrow">Distribuição</div>
          <h2 className="serif" style={{ fontSize: 22, margin: "4px 0 18px", letterSpacing: "-0.01em" }}>
            Top regiões
          </h2>
          {donutData.length > 0 ? (
            <Donut data={donutData} label="Apoiadores" size={170} />
          ) : (
            <div className="dim" style={{ textAlign: "center", padding: "48px 0", fontSize: 13 }}>
              Sem apoiadores por município ainda.
            </div>
          )}
        </div>
      </section>

      <section className="dash__row">
        <div className="card" style={{ padding: "22px 24px", gridColumn: "span 7" }}>
          <div className="row" style={{ justifyContent: "space-between", marginBottom: 14 }}>
            <div>
              <div className="eyebrow">Ranking</div>
              <h2 className="serif" style={{ fontSize: 22, margin: "4px 0 0", letterSpacing: "-0.01em" }}>
                Apoiadores por região
              </h2>
            </div>
            <button className="btn btn--ghost btn--sm" onClick={() => onScreen && onScreen("mapa")}>Ver mapa <Icon.Arrow size={12} /></button>
          </div>
          {regioes.length > 0 ? (
            <RankBars data={regioes} />
          ) : (
            <div className="dim" style={{ textAlign: "center", padding: "32px 0", fontSize: 13 }}>
              Nenhum apoiador cadastrado por município ainda.
            </div>
          )}
        </div>

        <div className="card" style={{ padding: "22px 24px", gridColumn: "span 5" }}>
          <div className="eyebrow">Atividade</div>
          <h2 className="serif" style={{ fontSize: 22, margin: "4px 0 14px", letterSpacing: "-0.01em" }}>
            Últimos cadastros
          </h2>
          {feed.length > 0 ? (
            <ul className="feed">
              {feed.map((a, i) => (
                <li key={a.id || i} className="feed__item">
                  <span className="feed__dot" />
                  <div className="col" style={{ flex: 1, minWidth: 0 }}>
                    <div className="row" style={{ justifyContent: "space-between" }}>
                      <strong style={{ fontSize: 13.5 }}>{a.descricao}</strong>
                      <span className="dim mono" style={{ fontSize: 11 }}>{a.data}</span>
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          ) : (
            <div className="dim" style={{ textAlign: "center", padding: "32px 0", fontSize: 13 }}>
              Nenhuma atividade registrada ainda.
            </div>
          )}
          <button className="btn btn--block btn--ghost" style={{ marginTop: 12 }} onClick={() => onScreen && onScreen("apoiadores")}>
            Ver todos os apoiadores <Icon.Arrow size={13} />
          </button>
        </div>
      </section>

      {regioes.length > 0 && (
        <section className="dash__insight">
          <div className="row" style={{ gap: 14, alignItems: "flex-start" }}>
            <span className="insight-bullet"><Icon.Sparkle size={14} /></span>
            <div style={{ flex: 1 }}>
              <div className="eyebrow">Destaque</div>
              <h3 className="serif" style={{ fontSize: 22, margin: "4px 0 6px", letterSpacing: "-0.01em" }}>
                Maior concentração em <span style={{ color: "var(--accent)" }}>{regioes[0].nome}</span>.
              </h3>
              <p style={{ margin: 0, color: "var(--ink-2)", maxWidth: 720, lineHeight: 1.6 }}>
                {window.fmt(regioes[0].apoio)} apoiadores em {regioes[0].nome} — {Math.round(regioes[0].apoio / Math.max(1, campaign.apoiadores) * 100)}% do total.
                {regioes.length > 1 && ` Segundo município com mais apoio: ${regioes[1].nome} (${window.fmt(regioes[1].apoio)}).`}
              </p>
            </div>
            <button className="btn btn--primary" onClick={() => openModal && openModal("planejar-acao")}>Planejar ação <Icon.Arrow size={14} /></button>
          </div>
        </section>
      )}
    </div>
  );
}

function MetaCol({ label, value, suffix, tone }) {
  return (
    <div className="col">
      <span className="dim" style={{ fontSize: 11.5, textTransform: "uppercase", letterSpacing: 0.06 }}>{label}</span>
      <span className="row" style={{ alignItems: "baseline", gap: 6, marginTop: 4 }}>
        <span className="serif" style={{ fontSize: 26, color: tone === "positive" ? "var(--accent)" : "var(--ink)", lineHeight: 1 }}>
          {window.fmt(value)}
        </span>
        <span className="dim" style={{ fontSize: 12 }}>{suffix}</span>
      </span>
    </div>
  );
}

window.Dashboard = Dashboard;