/* ============================================================
   Categorias — gerenciar + permissões por cargo
   ============================================================ */
const { useState: useStateCat } = React;

const PERM_ACTIONS = [
  { id: "view",  label: "Ver",       desc: "Enxergar a categoria e seus posts" },
  { id: "post",  label: "Postar",    desc: "Criar novas postagens" },
  { id: "reply", label: "Responder", desc: "Comentar nos posts" },
  { id: "react", label: "Reagir",    desc: "Reagir com emoji" },
];

/* ---------- Editor de categoria ---------- */
function CategoryEditor({ category, onSave, onClose }) {
  const editing = !!category;
  const adminRoles = PR.ROLE_ORDER.filter((r) => PR.ROLES[r].admin);
  const [label, setLabel] = useState(category ? category.label : "");
  const [desc, setDesc] = useState(category ? category.desc : "");
  const [accent, setAccent] = useState(category ? category.accent : "#9B5BFF");
  const [perms, setPerms] = useState(() =>
    category ? JSON.parse(JSON.stringify(category.perms)) : PR.defaultPerms()
  );
  const swatches = ["#9B5BFF", "#18D6E8", "#FFCB1E", "#2FD27A", "#FF7A59", "#4D9BFF", "#FF5C8A", "#8C8C9E"];

  function toggle(action, role) {
    setPerms((p) => {
      const has = p[action].includes(role);
      return { ...p, [action]: has ? p[action].filter((r) => r !== role) : [...p[action], role] };
    });
  }

  function save() {
    if (!label.trim()) return;
    // cargos admin sempre têm acesso total (garantia)
    const fixed = {};
    PERM_ACTIONS.forEach((a) => {
      const set = new Set(perms[a.id]);
      adminRoles.forEach((r) => set.add(r));
      fixed[a.id] = PR.ROLE_ORDER.filter((r) => set.has(r));
    });
    onSave({ label: label.trim(), desc: desc.trim(), accent, perms: fixed });
    onClose();
  }

  return (
    <Modal title={editing ? "Editar categoria" : "Nova categoria"} onClose={onClose} width={680}
      footer={<>
        <Button variant="ghost" onClick={onClose}>Cancelar</Button>
        <Button icon="check" onClick={save} disabled={!label.trim()}>{editing ? "Salvar" : "Criar"}</Button>
      </>}>
      <div className="pr-editor">
        <div className="pr-grid2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <Field label="Nome"><Input value={label} onChange={(e) => setLabel(e.target.value)} placeholder="Ex: Parcerias" /></Field>
          <Field label="Cor">
            <SwatchPicker value={accent} onChange={setAccent} />
          </Field>
        </div>
        <Field label="Descrição"><Input value={desc} onChange={(e) => setDesc(e.target.value)} placeholder="Para que serve esta categoria" /></Field>

        <div className="pr-permblock">
          <div className="pr-permblock-head">
            <strong>Permissões por cargo</strong>
            <span>Marque o que cada cargo pode fazer nesta categoria. O Manager tem acesso total sempre.</span>
          </div>
          <div className="pr-permtable">
            <div className="pr-permtable-head">
              <span>Cargo</span>
              {PERM_ACTIONS.map((a) => <span key={a.id} title={a.desc}>{a.label}</span>)}
            </div>
            {PR.ROLE_ORDER.map((role) => {
              const isAdmin = !!PR.ROLES[role].admin;
              return (
                <div className="pr-permtable-row" key={role}>
                  <span className="pr-permrole"><RoleBadge role={role} size="sm" /></span>
                  {PERM_ACTIONS.map((a) => {
                    const checked = isAdmin || perms[a.id].includes(role);
                    return (
                      <span key={a.id} className="pr-permcell">
                        <button type="button"
                          className={"pr-check" + (checked ? " on" : "") + (isAdmin ? " locked" : "")}
                          onClick={() => !isAdmin && toggle(a.id, role)}
                          title={isAdmin ? "Admin sempre pode" : a.label}>
                          {checked && <Icon name="check" size={13} />}
                        </button>
                      </span>
                    );
                  })}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </Modal>
  );
}

/* ---------- Lista de categorias ---------- */
function CategoriesView({ categories, posts, currentUser, onAdd, onEdit, onRemove }) {
  if (!PR.can(currentUser.role, "members.manage"))
    return <LockedView title="Gerenciar categorias" msg="Apenas o Manager pode criar, editar ou remover categorias." />;

  function summary(cat) {
    return PERM_ACTIONS.map((a) => {
      const n = (cat.perms[a.id] || []).length;
      return `${a.label}: ${n}`;
    });
  }

  return (
    <div className="pr-page">
      <div className="pr-pagehead">
        <div>
          <h2 className="pr-pagetitle">Categorias do Fórum</h2>
          <p className="pr-pagesub">Crie seções e defina o que cada cargo pode fazer em cada uma.</p>
        </div>
        <Button icon="plus" onClick={onAdd}>Nova categoria</Button>
      </div>

      <div className="pr-catgrid">
        {categories.map((cat) => {
          const count = posts.filter((p) => p.category === cat.id).length;
          return (
            <div className="pr-catcard" key={cat.id} style={{ "--cat": cat.accent }}>
              <div className="pr-catcard-bar"></div>
              <div className="pr-catcard-body">
                <div className="pr-catcard-head">
                  <div className="pr-catcard-title">
                    <span className="pr-catdot" style={{ background: cat.accent }}></span>
                    <strong>{cat.label}</strong>
                  </div>
                  <div className="pr-catcard-actions">
                    <button className="pr-iconbtn" title="Editar" onClick={() => onEdit(cat)}><Icon name="edit" size={16} /></button>
                    <button className="pr-iconbtn danger" title="Remover" onClick={() => onRemove(cat)}><Icon name="trash" size={16} /></button>
                  </div>
                </div>
                <p className="pr-catcard-desc">{cat.desc || "Sem descrição."}</p>
                <div className="pr-catcard-meta">
                  <span className="pr-catcard-count">{count} {count === 1 ? "post" : "posts"}</span>
                </div>
                <div className="pr-catperms">
                  {PERM_ACTIONS.map((a) => (
                    <div className="pr-catperm" key={a.id}>
                      <span className="pr-catperm-label">{a.label}</span>
                      <div className="pr-catperm-roles">
                        {PR.ROLE_ORDER.filter((r) => (cat.perms[a.id] || []).includes(r) || r === "manager").map((r) => (
                          <span key={r} className="pr-catperm-dot" style={{ background: PR.ROLES[r].color }} title={PR.ROLES[r].label}></span>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { CategoriesView, CategoryEditor });