// Painel Admin — Páginas de gestão de Funcionários e Cargos (apenas Admin Master)

function AdminPageFuncionarios({ funcionarios, setFuncionarios, cargos }) {
  const [modal, setModal] = React.useState(null); // null | "novo" | "convite" | {edit: f}

  const cargoNome = (cargoId) => cargos.find((c) => c.id === cargoId)?.nome || "—";
  const cargoCor = (cargoId) => cargos.find((c) => c.id === cargoId)?.cor || "#999";

  const toggleAtivo = (id) => setFuncionarios(funcionarios.map((f) => f.id === id ? { ...f, ativo: !f.ativo } : f));
  const excluir = (id) => {
    if (!confirm("Tem certeza? Esta ação não pode ser desfeita.")) return;
    setFuncionarios(funcionarios.filter((f) => f.id !== id));
  };

  return (
    <>
      <div className="adm-page-h">
        <div>
          <h1 className="adm-page-title">Funcionários</h1>
          <p className="adm-page-sub">{funcionarios.length} contas · gerencie quem acessa o painel</p>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <button className="adm-btn" onClick={() => setModal("convite")}>✉ Convidar por e-mail</button>
          <button className="adm-btn is-primary" onClick={() => setModal("novo")}>+ Criar funcionário</button>
        </div>
      </div>
      <div className="adm-panel" style={{ padding: 0, overflow: "hidden" }}>
        <table className="adm-table">
          <thead>
            <tr><th>Funcionário</th><th>E-mail</th><th>Cargo</th><th>Último acesso</th><th>Status</th><th></th></tr>
          </thead>
          <tbody>
            {funcionarios.map((f) => {
              const cargo = cargos.find((c) => c.id === f.cargoId);
              const isMaster = cargo?.sistema;
              return (
                <tr key={f.id} style={{ opacity: f.ativo ? 1 : 0.55 }}>
                  <td>
                    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                      <div style={{ width: 32, height: 32, borderRadius: "50%", background: f.cor, color: "#fff", display: "grid", placeItems: "center", fontWeight: 600, fontSize: 12 }}>{f.iniciais}</div>
                      <div>
                        <div className="nm">{f.nome}</div>
                        <div style={{ fontSize: 11, color: "var(--adm-ink-3)" }}>@{f.usuario}</div>
                      </div>
                    </div>
                  </td>
                  <td>{f.email}</td>
                  <td><span className="adm-chip" style={{ background: cargoCor(f.cargoId) + "22", color: cargoCor(f.cargoId), fontWeight: 600 }}>{cargoNome(f.cargoId)}</span></td>
                  <td style={{ fontSize: 12, color: "var(--adm-ink-3)" }}>{f.ultimoAcesso}</td>
                  <td>{f.ativo ? <span className="adm-chip is-ativo">ativo</span> : <span className="adm-chip is-suspenso">inativo</span>}</td>
                  <td>
                    {!isMaster && (
                      <div style={{ display: "flex", gap: 4 }}>
                        <button className="adm-btn is-sm" onClick={() => setModal({ edit: f })}>Editar</button>
                        <button className="adm-btn is-sm" onClick={() => toggleAtivo(f.id)}>{f.ativo ? "Desativar" : "Ativar"}</button>
                        <button className="adm-btn is-sm is-danger" onClick={() => excluir(f.id)}>Excluir</button>
                      </div>
                    )}
                    {isMaster && <span style={{ fontSize: 11, color: "var(--adm-ink-3)" }}>conta principal</span>}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      {modal === "novo" && <ModalNovoFuncionario cargos={cargos} onClose={() => setModal(null)} onSalvar={(f) => { setFuncionarios([...funcionarios, f]); setModal(null); }} />}
      {modal === "convite" && <ModalConvite cargos={cargos} onClose={() => setModal(null)} />}
      {modal?.edit && <ModalEditarFuncionario func={modal.edit} cargos={cargos} onClose={() => setModal(null)} onSalvar={(f) => { setFuncionarios(funcionarios.map((x) => x.id === f.id ? f : x)); setModal(null); }} />}
    </>
  );
}

function ModalNovoFuncionario({ cargos, onClose, onSalvar }) {
  const [form, setForm] = React.useState({ nome: "", email: "", usuario: "", senha: "", cargoId: cargos[1]?.id || cargos[0].id });
  const submit = (e) => {
    e.preventDefault();
    const cor = cargos.find((c) => c.id === form.cargoId)?.cor || "#1d1d1f";
    const iniciais = form.nome.split(" ").map(n => n[0]).slice(0, 2).join("").toUpperCase();
    onSalvar({ ...form, id: "adm-" + Date.now(), iniciais, cor, ativo: true, criadoEm: new Date().toLocaleDateString("pt-BR"), ultimoAcesso: "nunca" });
  };
  return (
    <div className="as-modal-bg" onClick={onClose}>
      <div className="as-modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 460 }}>
        <div className="as-modal-h"><h3>Novo funcionário</h3><p>Crie a conta com senha definida agora.</p></div>
        <form className="as-modal-body" onSubmit={submit}>
          <div className="adm-field"><label>Nome completo</label><input required value={form.nome} onChange={(e) => setForm({ ...form, nome: e.target.value })} /></div>
          <div className="adm-field"><label>E-mail</label><input required type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} /></div>
          <div className="adm-field"><label>Usuário</label><input required value={form.usuario} onChange={(e) => setForm({ ...form, usuario: e.target.value })} placeholder="ex: marina" /></div>
          <div className="adm-field"><label>Senha temporária</label><input required type="password" value={form.senha} onChange={(e) => setForm({ ...form, senha: e.target.value })} placeholder="mínimo 8 caracteres" /></div>
          <div className="adm-field"><label>Cargo</label>
            <select value={form.cargoId} onChange={(e) => setForm({ ...form, cargoId: e.target.value })}>
              {cargos.filter((c) => !c.sistema).map((c) => <option key={c.id} value={c.id}>{c.nome} — {c.permissoes.length} permissões</option>)}
            </select>
          </div>
          <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 14 }}>
            <button type="button" className="adm-btn" onClick={onClose}>Cancelar</button>
            <button type="submit" className="adm-btn is-primary">Criar funcionário</button>
          </div>
        </form>
      </div>
    </div>
  );
}

function ModalEditarFuncionario({ func, cargos, onClose, onSalvar }) {
  const [form, setForm] = React.useState(func);
  return (
    <div className="as-modal-bg" onClick={onClose}>
      <div className="as-modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 460 }}>
        <div className="as-modal-h"><h3>Editar funcionário</h3><p>{func.nome}</p></div>
        <div className="as-modal-body">
          <div className="adm-field"><label>Nome</label><input value={form.nome} onChange={(e) => setForm({ ...form, nome: e.target.value })} /></div>
          <div className="adm-field"><label>E-mail</label><input value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} /></div>
          <div className="adm-field"><label>Cargo</label>
            <select value={form.cargoId} onChange={(e) => setForm({ ...form, cargoId: e.target.value })}>
              {cargos.filter((c) => !c.sistema).map((c) => <option key={c.id} value={c.id}>{c.nome}</option>)}
            </select>
          </div>
          <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 14 }}>
            <button className="adm-btn" onClick={onClose}>Cancelar</button>
            <button className="adm-btn is-primary" onClick={() => onSalvar(form)}>Salvar</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function ModalConvite({ cargos, onClose }) {
  const [email, setEmail] = React.useState("");
  const [cargoId, setCargoId] = React.useState(cargos[1]?.id || cargos[0].id);
  const [enviado, setEnviado] = React.useState(false);
  return (
    <div className="as-modal-bg" onClick={onClose}>
      <div className="as-modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 460 }}>
        <div className="as-modal-h"><h3>Convidar funcionário</h3><p>Envie um link por e-mail. Ele cria a própria senha.</p></div>
        <div className="as-modal-body">
          {enviado ? (
            <div style={{ background: "rgba(45,160,106,0.12)", color: "#1f7a4d", padding: 16, borderRadius: 10, fontSize: 13.5, textAlign: "center" }}>
              ✓ Convite enviado para <strong>{email}</strong>. O link expira em 48h.
            </div>
          ) : (<>
            <div className="adm-field"><label>E-mail do funcionário</label><input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="funcionario@exemplo.com" /></div>
            <div className="adm-field"><label>Cargo</label>
              <select value={cargoId} onChange={(e) => setCargoId(e.target.value)}>
                {cargos.filter((c) => !c.sistema).map((c) => <option key={c.id} value={c.id}>{c.nome}</option>)}
              </select>
            </div>
          </>)}
          <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 14 }}>
            <button className="adm-btn" onClick={onClose}>Fechar</button>
            {!enviado && <button className="adm-btn is-primary" onClick={() => setEnviado(true)}>Enviar convite</button>}
          </div>
        </div>
      </div>
    </div>
  );
}

function AdminPageCargos({ cargos, setCargos }) {
  const [edit, setEdit] = React.useState(null); // null | "novo" | cargo

  const salvar = (cargo) => {
    if (cargo.id && cargos.find((c) => c.id === cargo.id)) {
      setCargos(cargos.map((c) => c.id === cargo.id ? cargo : c));
    } else {
      setCargos([...cargos, { ...cargo, id: "cargo-" + Date.now() }]);
    }
    setEdit(null);
  };
  const excluir = (id) => {
    if (!confirm("Excluir este cargo? Funcionários precisarão ser reatribuídos.")) return;
    setCargos(cargos.filter((c) => c.id !== id));
  };

  return (
    <>
      <div className="adm-page-h">
        <div>
          <h1 className="adm-page-title">Cargos e permissões</h1>
          <p className="adm-page-sub">Crie cargos e defina exatamente o que cada um pode fazer</p>
        </div>
        <button className="adm-btn is-primary" onClick={() => setEdit("novo")}>+ Novo cargo</button>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 14 }}>
        {cargos.map((c) => (
          <div key={c.id} className="adm-panel" style={{ borderTop: `4px solid ${c.cor}` }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 8 }}>
              <div>
                <h3 style={{ margin: 0, fontSize: 16, color: c.cor }}>{c.nome}</h3>
                {c.sistema && <span style={{ fontSize: 10, background: "#1d1d1f", color: "#fff", padding: "2px 6px", borderRadius: 4 }}>SISTEMA</span>}
              </div>
              <span style={{ fontSize: 11, color: "var(--adm-ink-3)" }}>{c.permissoes.includes("*") ? "todas" : c.permissoes.length} perm.</span>
            </div>
            <p style={{ fontSize: 12.5, color: "var(--adm-ink-3)", margin: "4px 0 12px", minHeight: 32 }}>{c.desc}</p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 4, marginBottom: 12, maxHeight: 80, overflow: "hidden" }}>
              {c.permissoes.includes("*") ? (
                <span className="adm-chip is-paga">acesso total</span>
              ) : c.permissoes.slice(0, 4).map((p) => {
                const perm = PERMISSOES.find((x) => x.id === p);
                return <span key={p} style={{ fontSize: 10.5, background: "var(--adm-line-soft)", color: "var(--adm-ink-2)", padding: "2px 7px", borderRadius: 4 }}>{perm?.label || p}</span>;
              })}
              {!c.permissoes.includes("*") && c.permissoes.length > 4 && <span style={{ fontSize: 10.5, color: "var(--adm-ink-3)" }}>+{c.permissoes.length - 4}</span>}
            </div>
            <div style={{ display: "flex", gap: 6 }}>
              {!c.sistema ? (<>
                <button className="adm-btn is-sm" onClick={() => setEdit(c)}>Editar</button>
                <button className="adm-btn is-sm is-danger" onClick={() => excluir(c.id)}>Excluir</button>
              </>) : <span style={{ fontSize: 11, color: "var(--adm-ink-3)" }}>protegido</span>}
            </div>
          </div>
        ))}
      </div>
      {edit && <ModalCargo cargo={edit === "novo" ? { nome: "", desc: "", cor: "#0071e3", permissoes: [] } : edit} onClose={() => setEdit(null)} onSalvar={salvar} />}
    </>
  );
}

function ModalCargo({ cargo, onClose, onSalvar }) {
  const [form, setForm] = React.useState(cargo);
  const cores = ["#0071e3", "#c63b3b", "#2da06a", "#7a3da1", "#e6a800", "#e0762a", "#1d1d1f"];

  const togglePerm = (id) => {
    const has = form.permissoes.includes(id);
    setForm({ ...form, permissoes: has ? form.permissoes.filter((p) => p !== id) : [...form.permissoes, id] });
  };
  const grupos = PERMISSOES_GRUPOS.filter((g) => g !== "Administração" || form.permissoes.includes("funcionarios:manage") || true);

  return (
    <div className="as-modal-bg" onClick={onClose}>
      <div className="as-modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 620, maxHeight: "85vh", overflow: "auto" }}>
        <div className="as-modal-h"><h3>{cargo.id ? "Editar cargo" : "Novo cargo"}</h3><p>Defina nome e quais ações o cargo pode executar.</p></div>
        <div className="as-modal-body">
          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 12 }}>
            <div className="adm-field"><label>Nome do cargo</label><input value={form.nome} onChange={(e) => setForm({ ...form, nome: e.target.value })} placeholder="Ex: Recepção" /></div>
            <div className="adm-field"><label>Cor</label>
              <div style={{ display: "flex", gap: 6, paddingTop: 4 }}>
                {cores.map((c) => (
                  <button key={c} type="button" onClick={() => setForm({ ...form, cor: c })}
                    style={{ width: 26, height: 26, borderRadius: "50%", background: c, border: form.cor === c ? "3px solid #1d1d1f" : "1px solid var(--adm-line)", cursor: "pointer" }} />
                ))}
              </div>
            </div>
          </div>
          <div className="adm-field"><label>Descrição</label><input value={form.desc} onChange={(e) => setForm({ ...form, desc: e.target.value })} placeholder="Ex: Atendimento e cadastros" /></div>

          <div style={{ marginTop: 18, fontSize: 13, fontWeight: 600, color: "var(--adm-ink-1)", marginBottom: 8 }}>
            Permissões ({form.permissoes.length} selecionadas)
          </div>
          {grupos.map((grupo) => (
            <div key={grupo} style={{ marginBottom: 12 }}>
              <div style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--adm-ink-3)", marginBottom: 6, fontWeight: 600 }}>{grupo}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                {PERMISSOES.filter((p) => p.grupo === grupo).map((p) => (
                  <label key={p.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 10px", background: form.permissoes.includes(p.id) ? "rgba(0,113,227,0.08)" : "var(--adm-line-soft)", borderRadius: 8, cursor: "pointer", fontSize: 13 }}>
                    <input type="checkbox" checked={form.permissoes.includes(p.id)} onChange={() => togglePerm(p.id)} style={{ accentColor: form.cor }} />
                    <span style={{ color: "var(--adm-ink-1)" }}>{p.label}</span>
                    <code style={{ marginLeft: "auto", fontSize: 10, color: "var(--adm-ink-3)" }}>{p.id}</code>
                  </label>
                ))}
              </div>
            </div>
          ))}

          <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 18 }}>
            <button className="adm-btn" onClick={onClose}>Cancelar</button>
            <button className="adm-btn is-primary" onClick={() => onSalvar(form)} disabled={!form.nome || form.permissoes.length === 0}>Salvar cargo</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AdminPageFuncionarios, AdminPageCargos });