/* ============================================================
   Admin — Membros e Credenciais
   ============================================================ */

const { useState, useEffect, useRef } = React;

/* ---------- Tela bloqueada (sem permissão) ---------- */
function LockedView({ title, msg }) {
  return (
    <div className="pr-page">
      <div className="pr-locked">
        <div className="pr-locked-icon"><Icon name="lock" size={28} /></div>
        <h2>{title}</h2>
        <p>{msg}</p>
      </div>
    </div>
  );
}

/* ============================================================
   Editor de membro
   ============================================================ */
function MemberEditor({ member, onSave, onClose }) {
  const editing = !!member;
  const [display, setDisplay] = useState(member ? member.display : "");
  const [username, setUsername] = useState(member ? member.username : "");
  const [email, setEmail] = useState(member ? member.email : "");
  const [role, setRole] = useState(member ? member.role : "helper");
  const [pass, setPass] = useState(member ? member.pass : "");
  const [active, setActive] = useState(member ? member.active : true);

  const valid = display.trim() && username.trim() && pass.trim();

  function save() {
    if (!valid) return;
    onSave({ display: display.trim(), username: username.trim().toLowerCase(), email: email.trim(), role, pass: pass.trim(), active, color: PR.ROLES[role].color });
    onClose();
  }

  return (
    <Modal title={editing ? "Editar membro" : "Adicionar membro"} onClose={onClose} width={560}
      footer={<>
        <Button variant="ghost" onClick={onClose}>Cancelar</Button>
        <Button icon="check" onClick={save} disabled={!valid}>{editing ? "Salvar" : "Adicionar"}</Button>
      </>}>
      <div className="pr-editor pr-grid2">
        <Field label="Nome de exibição"><Input value={display} onChange={(e) => setDisplay(e.target.value)} placeholder="Ex: Rafael" /></Field>
        <Field label="Cargo">
          <Select2 value={role} onChange={(v) => setRole(v)}
            options={PR.ROLE_ORDER.map((id) => ({ value: id, label: PR.ROLES[id].label, role: id, color: PR.ROLES[id].color }))} />
        </Field>
        <Field label="Usuário (login)"><Input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="ex: rafael.mng" /></Field>
        <Field label="E-mail"><Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="rafael@hyris.gg" /></Field>
        <Field label="Senha"><Input value={pass} onChange={(e) => setPass(e.target.value)} placeholder="defina uma senha" /></Field>
        <Field label="Situação">
          <label className="pr-pintoggle inline" onClick={() => setActive((a) => !a)}>
            <span className={"pr-switch" + (active ? " on" : "")}><i></i></span>
            {active ? "Ativo" : "Suspenso"}
          </label>
        </Field>
      </div>
    </Modal>
  );
}

/* ============================================================
   Lista de membros
   ============================================================ */
function MembersView({ members, currentUser, onAdd, onUpdate, onRemove }) {
  const canManage = PR.can(currentUser.role, "members.manage");
  const canView = PR.can(currentUser.role, "members.view");

  if (!canView) return <LockedView title="Acesso restrito" msg="A gestão de membros é visível apenas para Auxiliar ou superior." />;

  const sorted = members.slice().sort((a, b) => (PR.ROLES[b.role].level - PR.ROLES[a.role].level) || a.display.localeCompare(b.display));
  const counts = PR.ROLE_ORDER.map((r) => ({ r, n: members.filter((m) => m.role === r).length })).filter((x) => x.n > 0);

  return (
    <div className="pr-page">
      <div className="pr-pagehead">
        <div>
          <h2 className="pr-pagetitle">Membros da Promotoria</h2>
          <p className="pr-pagesub">{members.length} membros · {members.filter((m) => m.active).length} ativos</p>
        </div>
        {canManage && <Button icon="plus" onClick={onAdd}>Adicionar membro</Button>}
      </div>

      <div className="pr-rolestats">
        {counts.map(({ r, n }) => (
          <div className="pr-rolestat" key={r} style={{ borderColor: PR.ROLES[r].color + "33" }}>
            <span className="pr-rolestat-dot" style={{ background: PR.ROLES[r].color }}></span>
            <span className="pr-rolestat-n">{n}</span>
            <span className="pr-rolestat-l">{PR.ROLES[r].label}</span>
          </div>
        ))}
      </div>

      <div className="pr-table">
        <div className="pr-table-head pr-members-grid">
          <span>Membro</span><span>Cargo</span><span>Entrou</span><span>Status</span><span></span>
        </div>
        {sorted.map((m) => (
          <div className={"pr-table-row pr-members-grid" + (m.active ? "" : " dim")} key={m.id}>
            <div className="pr-cell-member">
              <Avatar member={m} size={38} />
              <div>
                <strong>{m.display}{m.id === currentUser.id && <em className="pr-you">você</em>}</strong>
                <span className="pr-mono-sm">@{m.username}</span>
              </div>
            </div>
            <div>
              {canManage && m.id !== currentUser.id ? (
                <Select2 value={m.role} size="sm" onChange={(v) => onUpdate(m.id, { role: v, color: PR.ROLES[v].color })}
                  options={PR.ROLE_ORDER.map((id) => ({ value: id, label: PR.ROLES[id].label, role: id, color: PR.ROLES[id].color }))} />
              ) : <RoleBadge role={m.role} size="sm" />}
            </div>
            <div className="pr-mono-sm">{PR.fmtDate(Date.parse(m.joined))}</div>
            <div>
              {canManage && m.id !== currentUser.id ? (
                <label className="pr-pintoggle inline tight" onClick={() => onUpdate(m.id, { active: !m.active })}>
                  <span className={"pr-switch sm" + (m.active ? " on" : "")}><i></i></span>
                  {m.active ? "Ativo" : "Suspenso"}
                </label>
              ) : <span className={"pr-statuspill " + (m.active ? "on" : "off")}>{m.active ? "Ativo" : "Suspenso"}</span>}
            </div>
            <div className="pr-cell-actions">
              {canManage && (
                <>
                  <button className="pr-iconbtn" title="Editar" onClick={() => onUpdate(m.id, "__edit__")}><Icon name="edit" size={16} /></button>
                  {m.id !== currentUser.id && <button className="pr-iconbtn danger" title="Remover" onClick={() => onRemove(m.id)}><Icon name="trash" size={16} /></button>}
                </>
              )}
            </div>
          </div>
        ))}
      </div>
      {!canManage && <p className="pr-note"><Icon name="lock" size={14} /> Apenas o Manager pode adicionar, editar ou remover membros.</p>}
    </div>
  );
}

/* ============================================================
   Credenciais (logins e senhas)
   ============================================================ */
function CredRow({ m, onUpdate, onToast }) {
  const [show, setShow] = useState(false);
  const [editing, setEditing] = useState(false);
  const [val, setVal] = useState(m.pass);

  function copy(txt, label) {
    navigator.clipboard && navigator.clipboard.writeText(txt);
    onToast(label + " copiado");
  }
  function savePass() {
    if (val.trim()) { onUpdate(m.id, { pass: val.trim() }); onToast("Senha atualizada"); }
    setEditing(false);
  }
  function regen() {
    const chars = "abcdefghjkmnpqrstuvwxyz23456789";
    let s = "";
    for (let i = 0; i < 4; i++) s += chars[Math.floor(Math.random() * chars.length)];
    const newPass = m.username.split(".")[0] + "-" + s + Math.floor(Math.random() * 90 + 10);
    setVal(newPass); onUpdate(m.id, { pass: newPass }); setShow(true); onToast("Nova senha gerada");
  }

  return (
    <div className="pr-table-row pr-creds-grid">
      <div className="pr-cell-member">
        <Avatar member={m} size={34} />
        <div><strong>{m.display}</strong><RoleBadge role={m.role} size="sm" /></div>
      </div>
      <div className="pr-cred-cell">
        <span className="pr-mono">@{m.username}</span>
        <button className="pr-iconbtn tiny" title="Copiar usuário" onClick={() => copy(m.username, "Usuário")}><Icon name="copy" size={14} /></button>
      </div>
      <div className="pr-cred-cell">
        {editing ? (
          <input className="pr-input pr-input-inline" autoFocus value={val} onChange={(e) => setVal(e.target.value)}
            onKeyDown={(e) => { if (e.key === "Enter") savePass(); if (e.key === "Escape") { setEditing(false); setVal(m.pass); } }} />
        ) : (
          <span className="pr-mono">{show ? m.pass : "•".repeat(Math.min(m.pass.length, 12))}</span>
        )}
        <div className="pr-cred-actions">
          {!editing && <button className="pr-iconbtn tiny" title={show ? "Ocultar" : "Mostrar"} onClick={() => setShow((s) => !s)}><Icon name={show ? "eyeoff" : "eye"} size={14} /></button>}
          {!editing && <button className="pr-iconbtn tiny" title="Copiar senha" onClick={() => copy(m.pass, "Senha")}><Icon name="copy" size={14} /></button>}
          {editing
            ? <button className="pr-iconbtn tiny" title="Salvar" onClick={savePass}><Icon name="check" size={15} /></button>
            : <button className="pr-iconbtn tiny" title="Editar senha" onClick={() => { setVal(m.pass); setEditing(true); }}><Icon name="edit" size={14} /></button>}
          <button className="pr-iconbtn tiny" title="Gerar nova senha" onClick={regen}><Icon name="refresh" size={14} /></button>
        </div>
      </div>
    </div>
  );
}

function CredentialsView({ members, currentUser, onUpdate, onToast }) {
  const [q, setQ] = useState("");
  if (!PR.can(currentUser.role, "creds.manage"))
    return <LockedView title="Cofre de credenciais" msg="Somente o Manager tem acesso aos logins e senhas da equipe." />;

  let list = members.slice().sort((a, b) => PR.ROLES[b.role].level - PR.ROLES[a.role].level);
  if (q.trim()) list = list.filter((m) => m.display.toLowerCase().includes(q.toLowerCase()) || m.username.includes(q.toLowerCase()));

  return (
    <div className="pr-page">
      <div className="pr-pagehead">
        <div>
          <h2 className="pr-pagetitle"><Icon name="key" size={22} style={{ display: "inline", verticalAlign: "-3px", marginRight: 8, color: "var(--gold)" }} />Cofre de credenciais</h2>
          <p className="pr-pagesub">Logins e senhas dos membros. Edite, copie ou gere novas senhas.</p>
        </div>
        <div className="pr-search">
          <Icon name="search" size={16} />
          <input placeholder="Buscar membro..." value={q} onChange={(e) => setQ(e.target.value)} />
        </div>
      </div>

      <div className="pr-cred-warning"><Icon name="shield" size={16} /> Informação sensível — não compartilhe esta tela. Cada alteração afeta o login do membro.</div>

      <div className="pr-table">
        <div className="pr-table-head pr-creds-grid"><span>Membro</span><span>Usuário</span><span>Senha</span></div>
        {list.map((m) => <CredRow key={m.id} m={m} onUpdate={onUpdate} onToast={onToast} />)}
      </div>
    </div>
  );
}

Object.assign(window, { MembersView, MemberEditor, CredentialsView, LockedView });