// ===== Elejemais — Campaign Picker (entry point) =====

const { useState: useState_p } = React;

function CampaignPicker({ campaigns, onOpen, onNew, onEdit, onDelete, onSignOut, user }) {
  const [query,      setQuery]      = useState_p("");
  const [filter,     setFilter]     = useState_p("todas");
  const [menu,       setMenu]       = useState_p(null);
  const [copiedCard, setCopiedCard] = useState_p(null);

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

  const filtered = campaigns.filter(c => {
    const matchesQ = !query || (c.candidato + c.cidade + window.tipoLabel(c.tipo)).toLowerCase().includes(query.toLowerCase());
    const matchesF = filter === "todas" || c.status === filter;
    return matchesQ && matchesF;
  });

  return (
    <div className="picker fadein">
      <header className="picker-top">
        <div className="row" style={{ gap: 12 }}>
          <img src="/Images/logo.jpg" alt="Elejemais" style={{ width: 32, height: 32, objectFit: "contain" }} />
          <div className="col" style={{ gap: 2 }}>
            <div className="serif" style={{ fontSize: 22, lineHeight: 1 }}>Elejemais</div>
            <div className="eyebrow">Plataforma de campanha</div>
          </div>
        </div>
        <div className="row" style={{ gap: 10 }}>
          <div className="row" style={{ gap: 8, padding: "6px 10px", border: "1px solid var(--line)", borderRadius: 999 }}>
            <span style={{
              width: 28, height: 28, borderRadius: 999,
              background: "linear-gradient(135deg, var(--accent), var(--warm))",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              color: "#fff", fontWeight: 600, fontSize: 12,
            }}>{user.iniciais}</span>
            <div className="col" style={{ lineHeight: 1.15 }}>
              <span style={{ fontSize: 13, fontWeight: 500 }}>{user.nome}</span>
              <span className="dim" style={{ fontSize: 11.5 }}>{user.email}</span>
            </div>
          </div>
          <button className="btn btn--icon" title="Sair" onClick={onSignOut}><Icon.Arrow size={16} style={{ transform: "rotate(180deg)" }} /></button>
        </div>
      </header>

      <section className="picker-hero">
        <div>
          <div className="eyebrow">Bem-vindo de volta</div>
          <h1 className="serif" style={{ fontSize: 64, margin: "10px 0 8px", letterSpacing: "-0.02em", lineHeight: 0.95 }}>
            Boa tarde, {user.nome.split(" ")[0]}.
          </h1>
          <p className="dim" style={{ fontSize: 16, maxWidth: 560, lineHeight: 1.55, margin: 0 }}>
            Escolha uma campanha para gerenciar — ou crie uma nova.
          </p>
        </div>
        <button className="btn btn--primary btn--lg" onClick={onNew}>
          <Icon.Plus size={16} /> Nova campanha
        </button>
      </section>

      <section className="picker-controls">
        <div className="row" style={{ gap: 10, flex: 1, maxWidth: 380 }}>
          <div style={{ position: "relative", flex: 1 }}>
            <span style={{ position: "absolute", left: 12, top: 11, color: "var(--muted-2)" }}>
              <Icon.Search size={15} />
            </span>
            <input
              className="input"
              style={{ paddingLeft: 36 }}
              placeholder="Buscar por candidato, cidade ou cargo…"
              value={query}
              onChange={e => setQuery(e.target.value)}
            />
          </div>
        </div>
        <div className="seg">
          {[
            ["todas", "Todas"],
            ["ativa", "Ativas"],
            ["rascunho", "Rascunhos"],
            ["encerrada", "Encerradas"],
          ].map(([k, label]) => (
            <button
              key={k}
              className={"seg__btn " + (filter === k ? "is-active" : "")}
              onClick={() => setFilter(k)}
            >{label}</button>
          ))}
        </div>
      </section>

      <section className="picker-grid">
        {filtered.map((c, i) => (
          <article
            key={c.id}
            className="campaign-card slideup"
            style={{ animationDelay: `${i * 40}ms` }}
          >
            <div className="campaign-card__stripe" style={{ background: c.cor }} />
            <div className="campaign-card__body">
              <div className="row" style={{ justifyContent: "space-between" }}>
                <span className={`badge ${c.status === "ativa" ? "badge--accent" : c.status === "rascunho" ? "badge--warm" : ""}`}>
                  <span className="badge--dot" /> {c.status}
                </span>
                <div style={{ position: "relative" }}>
                  <button
                    className="btn btn--ghost btn--icon"
                    onClick={() => setMenu(menu === c.id ? null : c.id)}
                  ><Icon.More size={16} /></button>
                  {menu === c.id && (
                    <div className="popmenu" onMouseLeave={() => setMenu(null)}>
                      <button onClick={() => { setMenu(null); onEdit(c); }}>
                        <Icon.Edit size={14} /> Editar campanha
                      </button>
                      <button onClick={() => { setMenu(null); onOpen(c); }}>
                        <Icon.Arrow size={14} /> Abrir
                      </button>
                      <hr />
                      <button className="danger" onClick={() => { setMenu(null); onDelete(c); }}>
                        <Icon.Trash size={14} /> Excluir
                      </button>
                    </div>
                  )}
                </div>
              </div>

              <div style={{ marginTop: 18 }}>
                <div className="eyebrow">{window.tipoLabel(c.tipo)} · nº {c.numero}</div>
                <h3 className="serif" style={{ fontSize: 30, margin: "6px 0 4px", lineHeight: 1.05, letterSpacing: "-0.01em" }}>
                  {c.candidato}
                </h3>
                <div className="dim" style={{ fontSize: 13 }}>
                  <Icon.Pin size={12} /> &nbsp;{c.cidade}, {c.uf} · {c.coligacao}
                </div>
                {c.dataEleicao && (
                  <div className="dim" style={{ fontSize: 12, marginTop: 5 }}>
                    <Icon.Calendar size={11} /> &nbsp;Eleição: <strong style={{ color: "var(--ink-2)" }}>{c.dataEleicao}</strong>
                  </div>
                )}
              </div>

              <div className="campaign-card__stats">
                <Stat label="Lideranças" value={c.liderancas} />
                <Stat label="Apoiadores" value={c.apoiadores} />
                <Stat label="Municípios" value={c.municipios} />
              </div>

              <div className="campaign-card__progress">
                <div className="row" style={{ justifyContent: "space-between", fontSize: 12, marginBottom: 6 }}>
                  <span className="dim">Meta + 30%</span>
                  <span className="mono">{Math.round(c.progresso * 100)}%</span>
                </div>
                <div style={{ height: 5, background: "var(--surface-2)", borderRadius: 999, overflow: "hidden" }}>
                  <div style={{ width: `${Math.min(1, c.progresso) * 100}%`, height: "100%", background: c.cor }} />
                </div>
              </div>

              <div className="row" style={{ gap: 8, marginTop: 16 }}>
                <button className="btn btn--primary btn--block" onClick={() => onOpen(c)}>
                  Abrir <Icon.Arrow size={14} />
                </button>
                {['administrador', 'coordenador'].includes(c.roleRaw) && (
                  <button
                    className="btn"
                    title={copiedCard === c.id ? "Copiado!" : "Copiar link público da campanha"}
                    onClick={e => handleCopyPublicLink(e, c.id)}
                    style={{ color: copiedCard === c.id ? "var(--accent)" : undefined, borderColor: copiedCard === c.id ? "var(--accent)" : undefined }}
                  >
                    <Icon.Link size={14} />
                  </button>
                )}
                <button className="btn" onClick={() => onEdit(c)}>
                  <Icon.Edit size={14} />
                </button>
              </div>

              <div className="campaign-card__role">
                Você é <strong>{c.role}</strong> · criada {c.criadaEm}
              </div>
            </div>
          </article>
        ))}

        <button className="campaign-card campaign-card--new" onClick={onNew}>
          <Icon.Plus size={22} />
          <div className="serif" style={{ fontSize: 22, marginTop: 8 }}>Nova campanha</div>
          <div className="dim" style={{ fontSize: 13, maxWidth: 220, textAlign: "center" }}>
            Cadastre candidato, tipo e meta — calculamos a folga de 30% automaticamente.
          </div>
        </button>
      </section>

      <footer className="picker-foot">
        <span className="dim">© 2026 Elejemais</span>
        <span className="dim">Versão 2.4 · Dados protegidos por LGPD</span>
      </footer>
    </div>
  );
}

function Stat({ label, value }) {
  return (
    <div className="col">
      <span className="serif" style={{ fontSize: 22, lineHeight: 1 }}>{window.fmt(value)}</span>
      <span className="dim" style={{ fontSize: 11.5, marginTop: 2 }}>{label}</span>
    </div>
  );
}

window.CampaignPicker = CampaignPicker;