// ===== Elejemais — App shell (sidebar + topbar) =====

const { useState: useState_s, useEffect: useEffect_s } = React;

// Papéis que têm acesso a cada tela
// Hierarquia: administrador > coordenador > lideranca > operador
const NAV = [
  { id: "dashboard",    label: "Dashboard",    roles: ["administrador","coordenador","lideranca","operador"], Icon: () => <Icon.Dashboard size={17} /> },
  { id: "mapa",         label: "Mapa",         roles: ["administrador","coordenador","lideranca"],            Icon: () => <Icon.Map size={17} /> },
  { id: "liderancas",   label: "Lideranças",   roles: ["administrador","coordenador","lideranca"],            Icon: () => <Icon.Users size={17} /> },
  { id: "apoiadores",   label: "Apoiadores",   roles: ["administrador","coordenador","lideranca","operador"], Icon: () => <Icon.Heart size={17} /> },
  { id: "inteligencia", label: "Inteligência", roles: ["administrador","coordenador"],                        Icon: () => <Icon.Target size={17} /> },
  { id: "relatorio",    label: "Relatório",    roles: ["administrador","coordenador"],                        Icon: () => <Icon.Report size={17} /> },
];

const ROLE_COLORS = {
  administrador: { bg: 'oklch(0.96 0.03 155)', color: 'var(--accent)',            border: 'oklch(0.44 0.11 155)40' },
  coordenador:   { bg: 'oklch(0.96 0.03 250)', color: 'oklch(0.46 0.13 250)',    border: 'oklch(0.46 0.13 250)40' },
  lideranca:     { bg: 'oklch(0.96 0.04 75)',  color: 'oklch(0.52 0.13 75)',     border: 'oklch(0.52 0.13 75)40'  },
  operador:      { bg: 'var(--surface-2)',      color: 'var(--muted)',            border: 'var(--line)'            },
};

// ── Modal de membros da campanha ─────────────────────────────────────────
function MembrosModal({ campaign, currentUserId, onClose }) {
  const role = campaign.roleRaw || 'operador';
  const [members,  setMembers]  = useState_s([]);
  const [loading,  setLoading]  = useState_s(true);
  const [email,    setEmail]    = useState_s('');
  const [newRole,  setNewRole]  = useState_s('operador');
  const [saving,       setSaving]       = useState_s(false);
  const [err,          setErr]          = useState_s('');
  const [inviteResult, setInviteResult] = useState_s(null); // { isNew, emailSent, tempPassword }

  const ERR_MAP = {
    ja_membro:          'Este usuário já é membro desta campanha.',
    cannot_invite_self: 'Você não pode se convidar.',
    unauthorized_role:  'Você não tem permissão para atribuir este papel.',
    unauthorized:       'Sem permissão para esta ação.',
    missing_fields:     'Preencha todos os campos.',
  };

  const loadMembers = function () {
    setLoading(true);
    window.API.getMembers(campaign.id)
      .then(setMembers)
      .catch(console.error)
      .finally(function () { setLoading(false); });
  };

  useEffect_s(function () {
    loadMembers();
    const k = function (e) { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', k);
    return function () { window.removeEventListener('keydown', k); };
  }, []);

  const handleInvite = async function (e) {
    e.preventDefault();
    if (!email.trim()) return;
    setSaving(true); setErr(''); setInviteResult(null);
    try {
      var result = await window.API.inviteMember(campaign.id, email.trim(), newRole);
      setEmail('');
      setInviteResult(result);
      loadMembers();
    } catch (ex) {
      var code = ex.message || '';
      var known = Object.keys(ERR_MAP).find(function (k) { return code.includes(k); });
      setErr(known ? ERR_MAP[known] : 'Erro: ' + ex.message);
    } finally {
      setSaving(false);
    }
  };

  const handleRemove = async function (userId) {
    if (!confirm('Remover este membro da campanha?')) return;
    try {
      await window.API.removeMember(campaign.id, userId);
      loadMembers();
    } catch (ex) {
      alert('Erro ao remover: ' + ex.message);
    }
  };

  const handleRoleChange = async function (userId, newR) {
    try {
      await window.API.updateMemberRole(campaign.id, userId, newR);
      loadMembers();
    } catch (ex) {
      alert('Erro: ' + ex.message);
    }
  };

  // Papéis que o chamador pode atribuir (hierarquia)
  const assignableRoles =
    role === 'administrador' ? [['administrador','Administrador'],['coordenador','Coordenador'],['lideranca','Liderança'],['operador','Operador']] :
    role === 'coordenador'   ? [['lideranca','Liderança'],['operador','Operador']] :
    role === 'lideranca'     ? [['operador','Operador']] :
    [];

  // Pode remover: espelha a hierarquia de convite
  const canRemove = function (m) {
    if (m.userId === currentUserId) return false;
    if (role === 'administrador') return true;
    if (role === 'coordenador' && (m.role === 'lideranca' || m.role === 'operador')) return true;
    if (role === 'lideranca'   && m.role === 'operador') return true;
    return false;
  };

  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal" style={{ maxWidth: 620 }} onClick={function (e) { e.stopPropagation(); }}>
        {/* Header */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
          <div>
            <div className="eyebrow">Acesso à campanha</div>
            <h3 className="serif" style={{ fontSize: 24, margin: '2px 0 0', letterSpacing: '-0.01em' }}>
              Membros da equipe
            </h3>
          </div>
          <button className="btn btn--ghost btn--icon" onClick={onClose}><Icon.X size={14} /></button>
        </div>

        {/* Lista de membros */}
        {loading ? (
          <div className="dim" style={{ textAlign: 'center', padding: '32px 0', fontSize: 13 }}>Carregando…</div>
        ) : (
          <div style={{ marginBottom: 20 }}>
            {members.map(function (m) {
              var rc = ROLE_COLORS[m.role] || ROLE_COLORS.operador;
              var isMe = m.userId === currentUserId;
              return (
                <div key={m.userId} style={{
                  display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0',
                  borderBottom: '1px solid var(--line)',
                }}>
                  <div className="avatar avatar--sm" style={{ flexShrink: 0 }}>
                    {(m.nome || m.email).split(' ').map(function (x) { return x[0]; }).slice(0, 2).join('').toUpperCase()}
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 600, fontSize: 13, display: 'flex', alignItems: 'center', gap: 6 }}>
                      {m.nome}
                      {isMe && <span style={{ fontSize: 10, background: 'var(--surface-2)', color: 'var(--muted)', padding: '1px 6px', borderRadius: 999 }}>você</span>}
                    </div>
                    <div className="dim" style={{ fontSize: 11.5 }}>{m.email}</div>
                  </div>
                  <div>
                    {/* Admin pode trocar papel de qualquer um (exceto si mesmo) */}
                    {role === 'administrador' && !isMe ? (
                      <select
                        className="input"
                        style={{ fontSize: 12, padding: '4px 8px', height: 'auto' }}
                        value={m.role}
                        onChange={function (e) { handleRoleChange(m.userId, e.target.value); }}
                      >
                        <option value="administrador">Administrador</option>
                        <option value="coordenador">Coordenador</option>
                        <option value="lideranca">Liderança</option>
                        <option value="operador">Operador</option>
                      </select>
                    ) : (
                      <span style={{
                        fontSize: 11.5, fontWeight: 600, padding: '3px 10px', borderRadius: 999,
                        background: rc.bg, color: rc.color, border: '1px solid ' + rc.border,
                      }}>
                        {m.roleLabel}
                      </span>
                    )}
                  </div>
                  {canRemove(m) ? (
                    <button
                      className="btn btn--ghost btn--icon"
                      title="Remover membro"
                      onClick={function () { handleRemove(m.userId); }}
                    >
                      <Icon.X size={13} />
                    </button>
                  ) : (
                    <div style={{ width: 32 }} />
                  )}
                </div>
              );
            })}
          </div>
        )}

        {/* Formulário de convite (admin e coord) */}
        {role !== 'operador' && (
          <>
            <div style={{ borderTop: '1px solid var(--line)', paddingTop: 18 }}>
              <div className="eyebrow" style={{ marginBottom: 10 }}>Convidar membro</div>
              <form onSubmit={handleInvite}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr auto auto', gap: 10, alignItems: 'end' }}>
                  <div>
                    <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 5 }}>E-mail</div>
                    <input
                      className="input"
                      type="email"
                      placeholder="email@exemplo.com"
                      value={email}
                      onChange={function (e) { setEmail(e.target.value); setErr(''); setInviteResult(null); }}
                      required
                    />
                  </div>
                  <div>
                    <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 5 }}>Papel</div>
                    <select className="input" value={newRole} onChange={function (e) { setNewRole(e.target.value); }}>
                      {assignableRoles.map(function (r) {
                        return <option key={r[0]} value={r[0]}>{r[1]}</option>;
                      })}
                    </select>
                  </div>
                  <button className="btn btn--primary" type="submit" disabled={saving || !email.trim()}>
                    {saving ? 'Adicionando…' : <><Icon.Plus size={13} /> Adicionar</>}
                  </button>
                </div>
                {err && (
                  <div style={{ marginTop: 10, fontSize: 12, color: 'oklch(0.55 0.18 30)', lineHeight: 1.5 }}>
                    {err}
                  </div>
                )}
                {inviteResult && inviteResult.isNew && (
                  <div style={{
                    marginTop: 12, padding: '12px 14px', borderRadius: 8,
                    background: 'oklch(0.96 0.04 155)', border: '1px solid oklch(0.44 0.11 155)30',
                    fontSize: 13, lineHeight: 1.6,
                  }}>
                    {inviteResult.emailSent ? (
                      <span>
                        ✓ Conta criada e <strong>e-mail de boas-vindas enviado</strong> com a senha temporária.
                      </span>
                    ) : (
                      <span>
                        ✓ Conta criada. Compartilhe os dados de acesso com o novo membro:<br />
                        <span style={{ marginTop: 6, display: 'inline-block' }}>
                          Senha temporária:{' '}
                          <code style={{
                            background: 'oklch(0.88 0.05 155)', padding: '2px 8px',
                            borderRadius: 5, fontWeight: 700, letterSpacing: '0.05em',
                          }}>
                            {inviteResult.tempPassword}
                          </code>
                          <button
                            type="button"
                            className="btn btn--ghost btn--sm"
                            style={{ marginLeft: 8, fontSize: 11 }}
                            onClick={function () {
                              navigator.clipboard.writeText(inviteResult.tempPassword);
                            }}
                          >
                            Copiar
                          </button>
                        </span>
                      </span>
                    )}
                  </div>
                )}
                {inviteResult && !inviteResult.isNew && (
                  <div style={{
                    marginTop: 12, padding: '12px 14px', borderRadius: 8,
                    background: 'var(--surface-2)', border: '1px solid var(--line)',
                    fontSize: 13,
                  }}>
                    ✓ Usuário existente adicionado à campanha.
                  </div>
                )}
              </form>
            </div>

            {/* Legenda de papéis */}
            <div className="callout" style={{ marginTop: 16, fontSize: 12 }}>
              <strong>Papéis e permissões:</strong>
              <ul style={{ margin: '6px 0 0', paddingLeft: 16, lineHeight: 1.9 }}>
                <li><strong>Administrador</strong> — acesso total, importa dados TSE, gerencia todos os membros</li>
                <li><strong>Coordenador</strong> — todas as telas exceto importar; pode convidar Liderança e Operador</li>
                <li><strong>Liderança</strong> — Dashboard, Mapa, Lideranças (só ver) e Apoiadores; pode convidar Operador</li>
                <li><strong>Operador</strong> — somente cadastra apoiadores e vê o Dashboard</li>
              </ul>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

// ── Shell principal ───────────────────────────────────────────────────────
function Shell({ campaign, screen, onScreen, onSwitchCampaign, user, openModal, onSignOut, children }) {
  const [collapsed,    setCollapsed]    = useState_s(false);
  const [showMembros,  setShowMembros]  = useState_s(false);
  const [currentUID,   setCurrentUID]   = useState_s(null);

  useEffect_s(function () {
    window.sb.auth.getUser().then(function (r) {
      if (r.data?.user) setCurrentUID(r.data.user.id);
    });
  }, []);

  const role    = campaign.roleRaw || 'operador';
  const visNav  = NAV.filter(function (item) { return item.roles.includes(role); });
  const canManageMembers = role === 'administrador' || role === 'coordenador' || role === 'lideranca';

  return (
    <div className={"shell " + (collapsed ? "is-collapsed" : "")}>
      <aside className="sidebar">
        <div className="sidebar__brand">
          <img src="/Images/logo.jpg" alt="Elejemais" style={{ width: 26, height: 26, objectFit: "contain" }} />
          {!collapsed && (
            <div className="col" style={{ lineHeight: 1.1 }}>
              <span className="serif" style={{ fontSize: 18 }}>Elejemais</span>
              <span className="dim" style={{ fontSize: 11 }}>v2.5</span>
            </div>
          )}
        </div>

        <button className="campaign-switch" onClick={onSwitchCampaign} title="Trocar de campanha">
          <span className="campaign-switch__dot" style={{ background: campaign.cor }} />
          {!collapsed && (
            <>
              <div className="col" style={{ lineHeight: 1.15, flex: 1, textAlign: "left", minWidth: 0 }}>
                <span style={{ fontSize: 13, fontWeight: 500, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                  {campaign.candidato}
                </span>
                <span className="dim" style={{ fontSize: 11.5 }}>
                  {window.tipoLabel(campaign.tipo)} · {campaign.uf}
                </span>
              </div>
              <Icon.Arrow size={13} />
            </>
          )}
        </button>

        <nav className="sidenav">
          {visNav.map(function (item) {
            return (
              <button
                key={item.id}
                className={"sidenav__item " + (screen === item.id ? "is-active" : "")}
                onClick={function () { onScreen(item.id); }}
              >
                <item.Icon />
                {!collapsed && <span>{item.label}</span>}
                {!collapsed && screen === item.id && <span className="sidenav__bar" />}
              </button>
            );
          })}
        </nav>

        <div className="sidebar__foot">
          {!collapsed && (
            <div className="quota">
              <div className="row" style={{ justifyContent: "space-between", fontSize: 11.5 }}>
                <span className="dim">Meta +30%</span>
                <span className="mono">{Math.round(campaign.progresso * 100)}%</span>
              </div>
              <div className="quota__bar">
                <div style={{ width: `${Math.min(100, Math.round(campaign.progresso * 100))}%` }} />
              </div>
              <div className="dim" style={{ fontSize: 11, marginTop: 6 }}>
                {window.fmt(campaign.apoiadores)} / {window.fmt(campaign.metaSegura)} apoiadores
              </div>
            </div>
          )}

          {/* Papel do usuário atual */}
          {!collapsed && (
            <div style={{ marginBottom: 6 }}>
              {(function () {
                var rc = ROLE_COLORS[role] || ROLE_COLORS.operador;
                return (
                  <span style={{
                    display: 'inline-flex', alignItems: 'center', gap: 5,
                    fontSize: 11, fontWeight: 600, padding: '3px 9px', borderRadius: 999,
                    background: rc.bg, color: rc.color, border: '1px solid ' + rc.border,
                  }}>
                    {window.ROLE_LABELS[role] || role}
                  </span>
                );
              })()}
            </div>
          )}

          <div className="row" style={{ gap: 6 }}>
            {canManageMembers && (
              <button
                className="btn btn--ghost btn--icon"
                title="Membros da campanha"
                onClick={function () { setShowMembros(true); }}
              >
                <Icon.Users size={14} />
              </button>
            )}
            <button
              className="btn btn--ghost"
              style={{ flex: 1, justifyContent: collapsed ? "center" : "flex-start" }}
              onClick={function () { setCollapsed(!collapsed); }}
            >
              <Icon.Arrow size={13} style={{ transform: collapsed ? "none" : "rotate(180deg)" }} />
              {!collapsed && "Recolher"}
            </button>
            <button
              className="btn btn--ghost btn--icon"
              title="Sair da conta"
              onClick={onSignOut}
            >
              <Icon.Arrow size={13} style={{ transform: "rotate(90deg)" }} />
            </button>
          </div>
        </div>
      </aside>

      <main className="main">
        <header className="topbar">
          <div className="topbar__crumbs">
            <button className="dim" onClick={onSwitchCampaign} style={{ background: "none", border: 0, padding: 0, cursor: "pointer", fontSize: 13 }}>
              Campanhas
            </button>
            <span className="dim">/</span>
            <span>{campaign.candidato}</span>
            <span className="dim">/</span>
            <span style={{ fontWeight: 500, textTransform: "capitalize" }}>
              {NAV.find(function (n) { return n.id === screen; })?.label}
            </span>
          </div>

          <div className="topbar__right">
            <div className="topbar__search">
              <Icon.Search size={14} />
              <input placeholder="Buscar apoiador, líder, bairro…" />
              <span className="kbd">⌘ K</span>
            </div>
            <button className="btn btn--ghost btn--icon" title="Notificações"><Icon.Bell size={16} /></button>
            <button className="btn btn--ghost btn--icon" title="Calendário" onClick={function () { openModal && openModal("calendario"); }}><Icon.Calendar size={16} /></button>
            <button className="avatar" title="Meu perfil" style={{ cursor: "pointer", border: 0 }} onClick={function () { openModal && openModal("perfil"); }}>{user.iniciais}</button>
          </div>
        </header>

        <div className="screen">{children}</div>

        <nav className="shell__bottomnav">
          {visNav.map(function (item) {
            return (
              <button
                key={item.id}
                className={"shell__bottomnav__item " + (screen === item.id ? "is-active" : "")}
                onClick={function () { onScreen(item.id); }}
              >
                <item.Icon />
                <span>{item.label}</span>
              </button>
            );
          })}
        </nav>
      </main>

      {showMembros && (
        <MembrosModal
          campaign={campaign}
          currentUserId={currentUID}
          onClose={function () { setShowMembros(false); }}
        />
      )}
    </div>
  );
}

window.Shell = Shell;