/* ============================================================
   Cargos & Grupos de menção — gerenciamento
   ============================================================ */
const { useState: useStateRoles } = React;

const ROLE_SWATCHES = ["#FFCB1E","#18D6E8","#9B5BFF","#2FD27A","#4D9BFF","#FF7A59","#FF5C8A","#8C8C9E"];

// Lista completa de medalhas: as "clássicas" primeiro, depois TODOS os emojis do data.js
const MEDALS_FIRST = ["⭐","🌟","👑","🏆","🥇","🎖️","🛡️","⚔️","💎","🔥","⚡","🚀","🦉","🐵","🐺","🦁","🎯","⚙️","🔧","🌱","🔹","💠","❤️","💯"];
const ALL_MEDALS = (function () {
  const fromSet = (window.PR && PR.EMOJIS) ? PR.EMOJIS.map((x) => x.e) : [];
  const seen = new Set(); const out = [];
  MEDALS_FIRST.concat(fromSet).forEach((e) => { if (!seen.has(e)) { seen.add(e); out.push(e); } });
  return out;
})();
function searchMedals(q) {
  if (!q.trim()) return ALL_MEDALS;
  const t = q.toLowerCase();
  const idx = (window.PR && PR.EMOJIS) ? PR.EMOJIS : [];
  return idx.filter((x) => x.n.some((n) => n.includes(t))).map((x) => x.e);
}

/* ---------- Editor de cargo ---------- */
function RoleEditor({ role, onSave, onClose }) {
  const editing = !!role;
  const [label, setLabel] = useState(role ? role.label : "");
  const [color, setColor] = useState(role ? role.color : "#9B5BFF");
  const [mod, setMod] = useState(role ? !!role.mod : false);
  const [admin, setAdmin] = useState(role ? !!role.admin : false);
  const [medal, setMedal] = useState(role && role.medal ? role.medal : null);
  const [medalQ, setMedalQ] = useState("");
  const medalRef = useRef(null);

  function pickMedalImage(e) {
    const f = e.target.files && e.target.files[0];
    if (!f) return;
    const reader = new FileReader();
    reader.onload = () => setMedal({ type: "image", value: reader.result });
    reader.readAsDataURL(f);
    e.target.value = "";
  }

  function save() {
    if (!label.trim()) return;
    onSave({ label: label.trim(), color, mod: admin ? true : mod, admin, medal });
    onClose();
  }

  return (
    <Modal title={editing ? "Editar cargo" : "Novo cargo"} onClose={onClose} width={520}
      footer={<>
        <Button variant="ghost" onClick={onClose}>Cancelar</Button>
        <Button icon="check" onClick={save} disabled={!label.trim()}>{editing ? "Salvar" : "Criar"}</Button>
      </>}>
      <div className="pr-editor">
        <Field label="Nome do cargo"><Input value={label} autoFocus onChange={(e) => setLabel(e.target.value)} placeholder="Ex: Coordenador" /></Field>
        <Field label="Cor">
          <SwatchPicker value={color} onChange={setColor} />
        </Field>
        <Field label="Medalha" hint="Aparece antes do nome do membro, igual ao Owl Client. Escolha um emoji, busque, ou envie uma imagem própria.">
          <div className="pr-medalpick">
            <div className="pr-medalpick-top">
              <button type="button" className={"pr-medalopt none" + (!medal ? " on" : "")} title="Sem medalha" onClick={() => setMedal(null)}>
                <Icon name="x" size={14} />
              </button>
              <button type="button" className={"pr-medalopt upload" + (medal && medal.type === "image" ? " on" : "")} title="Enviar imagem própria" onClick={() => medalRef.current && medalRef.current.click()}>
                {medal && medal.type === "image" ? <img src={medal.value} alt="" /> : <Icon name="plus" size={15} />}
              </button>
              <div className="pr-medalpick-search">
                <Icon name="search" size={14} />
                <input placeholder="Buscar emoji…" value={medalQ} onChange={(e) => setMedalQ(e.target.value)} />
              </div>
            </div>
            <div className="pr-medalpick-grid">
              {searchMedals(medalQ).map((e) => (
                <button type="button" key={e} className={"pr-medalopt" + (medal && medal.type === "emoji" && medal.value === e ? " on" : "")} onClick={() => setMedal({ type: "emoji", value: e })}>{e}</button>
              ))}
              {searchMedals(medalQ).length === 0 && <div className="pr-medalpick-empty">Nenhum emoji encontrado</div>}
            </div>
            <input ref={medalRef} type="file" accept="image/*" hidden onChange={pickMedalImage} />
          </div>
        </Field>
        <div className="pr-roleflags">
          <button type="button" className={"pr-flagrow" + (mod ? " on" : "")} onClick={() => setMod((v) => !v)} disabled={admin}>
            <div className="pr-flagrow-txt">
              <strong><Icon name="shield" size={15} /> Moderar posts</strong>
              <span>Editar, fixar e remover postagens de qualquer um; ver lista de membros.</span>
            </div>
            <span className={"pr-switch" + ((mod || admin) ? " on" : "")}><i></i></span>
          </button>
          <button type="button" className={"pr-flagrow" + (admin ? " on" : "")} onClick={() => setAdmin((v) => !v)}>
            <div className="pr-flagrow-txt">
              <strong><Icon name="star" size={15} /> Administrador (acesso total)</strong>
              <span>Gerencia membros, credenciais, categorias e cargos. Inclui moderação.</span>
            </div>
            <span className={"pr-switch" + (admin ? " on" : "")}><i></i></span>
          </button>
        </div>
        <div className="pr-preview-badge">
          Prévia:
          {medal && medal.type === "image" ? <img className="pr-medal-img" src={medal.value} alt="" style={{ width: 16, height: 16 }} />
            : medal ? <span className="pr-medal-emoji" style={{ fontSize: 16 }}>{medal.value}</span> : null}
          <span style={{ color, fontWeight: 600 }}>{label || "Cargo"}</span>
          <span className="pr-rolebadge sm" style={{ color, background: color + "1c", borderColor: color + "44" }}>{label || "Cargo"}</span>
        </div>
      </div>
    </Modal>
  );
}

/* ---------- Editor de grupo de menção ---------- */
function GroupEditor({ group, roles, onSave, onClose }) {
  const editing = !!group;
  const [label, setLabel] = useState(group ? group.label : "");
  const [desc, setDesc] = useState(group ? group.desc : "");
  const [color, setColor] = useState(group ? (group.color || "#FFCB1E") : "#FFCB1E");
  const [all, setAll] = useState(group ? !group.roles || group.roles.length === 0 : true);
  const [picked, setPicked] = useState(group && group.roles ? group.roles.slice() : []);

  function toggleRole(id) {
    setPicked((p) => p.includes(id) ? p.filter((x) => x !== id) : [...p, id]);
  }
  const key = (group ? group.key : (label.trim().toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "") || "grupo"));

  function save() {
    if (!label.trim()) return;
    onSave({ label: label.trim(), desc: desc.trim(), color, roles: all ? [] : picked });
    onClose();
  }

  return (
    <Modal title={editing ? "Editar grupo de menção" : "Novo grupo de menção"} onClose={onClose} width={540}
      footer={<>
        <Button variant="ghost" onClick={onClose}>Cancelar</Button>
        <Button icon="check" onClick={save} disabled={!label.trim() || (!all && !picked.length)}>{editing ? "Salvar" : "Criar"}</Button>
      </>}>
      <div className="pr-editor">
        <Field label="Nome do grupo" hint={`Será usado como @${key} no conteúdo.`}>
          <Input value={label} autoFocus onChange={(e) => setLabel(e.target.value)} placeholder="Ex: Oficiais" />
        </Field>
        <Field label="Cor da menção">
          <SwatchPicker value={color} onChange={setColor} />
        </Field>
        <div className="pr-preview-badge">
          Prévia: <span className="pr-mention pr-mention-all" style={{ color, background: "color-mix(in oklab, " + color + " 18%, transparent)" }}>@{key}</span>
        </div>
        <Field label="Descrição"><Input value={desc} onChange={(e) => setDesc(e.target.value)} placeholder="Quem este grupo notifica" /></Field>
        <Field label="Quem é marcado">
          <div className="pr-grouptarget">
            <button type="button" className={"pr-targetopt" + (all ? " on" : "")} onClick={() => setAll(true)}>
              <Icon name="users" size={16} /> Todos os membros
            </button>
            <button type="button" className={"pr-targetopt" + (!all ? " on" : "")} onClick={() => setAll(false)}>
              <Icon name="shield" size={16} /> Cargos específicos
            </button>
          </div>
        </Field>
        {!all && (
          <div className="pr-rolepick">
            {roles.map((r) => (
              <button type="button" key={r.id} className={"pr-rolepick-chip" + (picked.includes(r.id) ? " on" : "")}
                style={picked.includes(r.id) ? { color: r.color, borderColor: r.color, background: r.color + "1c" } : {}}
                onClick={() => toggleRole(r.id)}>
                <span className="pr-catperm-dot" style={{ background: r.color }}></span>{r.label}
              </button>
            ))}
          </div>
        )}
      </div>
    </Modal>
  );
}

/* ---------- Tela principal: Cargos & Menções ---------- */
function RolesMentionsView({ roles, groups, members, posts, currentUser, onAddRole, onEditRole, onRemoveRole, onMoveRole, onAddGroup, onEditGroup, onRemoveGroup }) {
  if (!PR.can(currentUser.role, "members.manage"))
    return <LockedView title="Cargos & Menções" msg="Apenas administradores podem gerenciar cargos e grupos de menção." />;

  const ordered = roles.slice().sort((a, b) => b.level - a.level); // maior poder no topo
  const adminCount = roles.filter((r) => r.admin).length;

  return (
    <div className="pr-page" style={{ paddingTop: 8 }}>
      {/* ---- Cargos ---- */}
      <div className="pr-pagehead">
        <div>
          <h3 className="pr-subtitle">Cargos</h3>
          <p className="pr-pagesub">Crie cargos, defina cor, hierarquia e o que cada um pode fazer.</p>
        </div>
        <Button icon="plus" onClick={onAddRole}>Novo cargo</Button>
      </div>

      <div className="pr-table" style={{ marginBottom: 36 }}>
        <div className="pr-table-head pr-roles-grid">
          <span>Cargo</span><span>Membros</span><span>Permissões</span><span>Hierarquia</span><span></span>
        </div>
        {ordered.map((r, idx) => {
          const count = members.filter((m) => m.role === r.id).length;
          return (
            <div className="pr-table-row pr-roles-grid" key={r.id}>
              <div className="pr-cell-member">
                <span className="pr-catdot" style={{ background: r.color, width: 12, height: 12 }}></span>
                <RoleBadge role={r.id} size="md" />
              </div>
              <div className="pr-mono-sm">{count} {count === 1 ? "membro" : "membros"}</div>
              <div className="pr-roleperm-tags">
                {r.admin && <span className="pr-ptag admin"><Icon name="star" size={11} /> Admin</span>}
                {r.mod && !r.admin && <span className="pr-ptag mod"><Icon name="shield" size={11} /> Moderador</span>}
                {!r.mod && !r.admin && <span className="pr-ptag">Membro</span>}
              </div>
              <div className="pr-rolemove">
                <button className="pr-iconbtn tiny" title="Subir" disabled={idx === 0} onClick={() => onMoveRole(r.id, -1)}><Icon name="chevron" size={15} style={{ transform: "rotate(-90deg)" }} /></button>
                <button className="pr-iconbtn tiny" title="Descer" disabled={idx === ordered.length - 1} onClick={() => onMoveRole(r.id, 1)}><Icon name="chevron" size={15} style={{ transform: "rotate(90deg)" }} /></button>
              </div>
              <div className="pr-cell-actions">
                <button className="pr-iconbtn" title="Editar" onClick={() => onEditRole(r)}><Icon name="edit" size={16} /></button>
                <button className="pr-iconbtn danger" title="Remover" disabled={r.admin && adminCount <= 1} onClick={() => onRemoveRole(r)}><Icon name="trash" size={16} /></button>
              </div>
            </div>
          );
        })}
      </div>

      {/* ---- Grupos de menção ---- */}
      <div className="pr-pagehead">
        <div>
          <h3 className="pr-subtitle">Grupos de menção</h3>
          <p className="pr-pagesub">Atalhos de @ que marcam vários de uma vez (ex: <b>@equipe</b>).</p>
        </div>
        <Button icon="plus" onClick={onAddGroup}>Novo grupo</Button>
      </div>

      <div className="pr-catgrid">
        {groups.map((g) => {
          const targets = !g.roles || !g.roles.length
            ? "Todos os membros"
            : g.roles.map((id) => (PR.ROLES[id] ? PR.ROLES[id].label : id)).join(", ");
          return (
            <div className="pr-catcard" key={g.key} style={{ "--cat": g.color || "var(--gold)" }}>
              <div className="pr-catcard-bar"></div>
              <div className="pr-catcard-body">
                <div className="pr-catcard-head">
                  <div className="pr-catcard-title">
                    <span className="pr-mention pr-mention-all" style={{ fontSize: 14, color: g.color, background: "color-mix(in oklab, " + (g.color || "var(--gold)") + " 18%, transparent)" }}>@{g.key}</span>
                  </div>
                  <div className="pr-catcard-actions">
                    <button className="pr-iconbtn" title="Editar" onClick={() => onEditGroup(g)}><Icon name="edit" size={16} /></button>
                    <button className="pr-iconbtn danger" title="Remover" onClick={() => onRemoveGroup(g)}><Icon name="trash" size={16} /></button>
                  </div>
                </div>
                <p className="pr-catcard-desc">{g.desc || "Sem descrição."}</p>
                <div className="pr-catcard-meta">
                  <span className="pr-catcard-count"><Icon name="users" size={12} style={{ verticalAlign: "-2px", marginRight: 4 }} />{targets}</span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { RolesMentionsView, RoleEditor, GroupEditor });