/* ============================================================
   KeS Metas — Telas administrativas
   Usuários (CRUD) · Configurar Metas · Visão Consolidada
   ============================================================ */
const { useState } = React;

/* ============================================================
   USUÁRIOS (CRUD — somente admin)
   ============================================================ */
function UserModal({ initial, onClose, onSave, emails, onReset }) {
  const editing = !!initial;
  const usaFirebase = !!(window.KESAUTH && window.KESAUTH.configured());
  const [f, setF] = useState(initial || { nome: "", email: "", senha: "", papel: "comum" });
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);
  const set = (k, v) => setF((s) => ({ ...s, [k]: v }));
  function save() {
    if (!f.nome.trim()) return setErr("Informe o nome.");
    if (!/^\S+@\S+\.\S+$/.test(f.email)) return setErr("E-mail inválido.");
    const dup = emails.some((e) => e.email.toLowerCase() === f.email.toLowerCase() && e.id !== (initial && initial.id));
    if (dup) return setErr("Este e-mail já está cadastrado.");
    if (!editing && f.senha.length < 6) return setErr("Defina uma senha inicial (mín. 6 caracteres).");
    setBusy(true);
    Promise.resolve(onSave(f)).then((r) => {
      setBusy(false);
      if (r && r.error) setErr(r.error); else onClose();
    });
  }
  return (
    <Modal title={editing ? "Editar usuário" : "Novo usuário"} onClose={onClose}
      footer={<><Btn variant="ghost" onClick={onClose} disabled={busy}>Cancelar</Btn><Btn variant="primary" icon="check" onClick={save} disabled={busy}>{busy ? "Salvando…" : (editing ? "Salvar" : "Cadastrar")}</Btn></>}>
      <Field label="Nome completo"><input className="field" value={f.nome} onChange={(e) => set("nome", e.target.value)} placeholder="Nome e sobrenome" /></Field>
      <Field label="E-mail"><input className="field" type="email" value={f.email} disabled={editing} onChange={(e) => set("email", e.target.value)} placeholder="pessoa@kesassessoria.com.br" /></Field>
      {!editing && (
        <div className="form-row">
          <Field label="Senha inicial">
            <input className="field" type="text" value={f.senha} onChange={(e) => set("senha", e.target.value)} placeholder="mín. 6 caracteres" />
          </Field>
          <Field label="Papel">
            <select className="field" value={f.papel} onChange={(e) => set("papel", e.target.value)}>
              <option value="comum">Usuário comum</option>
              <option value="admin">Administrador</option>
            </select>
          </Field>
        </div>
      )}
      {editing && (
        <Field label="Papel">
          <select className="field" value={f.papel} onChange={(e) => set("papel", e.target.value)}>
            <option value="comum">Usuário comum</option>
            <option value="admin">Administrador</option>
          </select>
        </Field>
      )}
      {editing && usaFirebase && onReset && (
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, padding: "12px 14px", background: "var(--kes-navy-700)", borderRadius: "var(--radius-md)" }}>
          <div style={{ fontSize: 12.5, color: "var(--fg2)" }}>Enviar um link de redefinição de senha para o e-mail da pessoa.</div>
          <Btn variant="subtle" size="sm" icon="mail" onClick={() => onReset(f.email)}>Redefinir senha</Btn>
        </div>
      )}
      {err && <div className="form-err"><Icon name="alert" size={14} />{err}</div>}
      <p className="muted" style={{ fontSize: 12, margin: 0 }}>
        {f.papel === "admin" ? "Administradores veem e editam os dados de toda a equipe." : "Usuários comuns veem e editam apenas os próprios dados."}
        {!editing && usaFirebase ? " A conta de acesso é criada com segurança no Google." : ""}
      </p>
    </Modal>
  );
}

function UsuariosScreen({ state, dispatch, viewer }) {
  const [modal, setModal] = useState(null); // null | {} | user
  const [del, setDel] = useState(null);
  const A = window.KESAUTH;
  const usaFirebase = !!(A && A.configured());

  // Retorna {error} para o modal exibir, ou cria/atualiza e fecha.
  async function save(f) {
    if (modal && modal.id) {
      dispatch({ type: "UPDATE_USER", id: modal.id, patch: { nome: f.nome, papel: f.papel } });
      dispatch({ type: "TOAST", msg: "Usuário atualizado." });
      setModal(null);
      return {};
    }
    // Novo usuário: cria a conta de login no Firebase e adiciona ao sistema.
    if (usaFirebase) {
      const res = await A.createUser(f.email, f.senha);
      if (!res.ok) return { error: A.traduzErro(res) };
      dispatch({ type: "ADD_USER", user: { id: res.uid, nome: f.nome, email: f.email, papel: f.papel } });
    } else {
      dispatch({ type: "ADD_USER", user: { nome: f.nome, email: f.email, papel: f.papel } });
    }
    dispatch({ type: "TOAST", msg: "Usuário cadastrado." });
    setModal(null);
    return {};
  }

  async function resetar(email) {
    if (!usaFirebase) return;
    const res = await A.resetPassword(email);
    dispatch({ type: "TOAST", msg: res.ok ? "Link de redefinição enviado para " + email + "." : A.traduzErro(res) });
  }
  return (
    <div className="content">
      <div className="topbar">
        <div className="ttl"><h1>Usuários</h1><p>Cadastre, edite e remova membros da equipe. Apenas administradores têm acesso a esta tela.</p></div>
        <div className="actions"><Btn variant="primary" icon="plus" onClick={() => setModal({})}>Novo usuário</Btn></div>
      </div>

      <div className="table-wrap">
        <table className="tbl">
          <thead><tr><th>Usuário</th><th>Papel</th><th>Leads atribuídos</th><th style={{ textAlign: "right" }}>Ações</th></tr></thead>
          <tbody>
            {state.users.map((u) => (
              <tr key={u.id} style={{ cursor: "default" }}>
                <td>
                  <div className="cell-user">
                    <Avatar user={u} size={38} />
                    <div><div className="nm">{u.nome}{u.id === viewer.id ? " (você)" : ""}</div><div className="em">{u.email}</div></div>
                  </div>
                </td>
                <td><Badge tone={u.papel === "admin" ? "role" : "muted"}>{u.papel === "admin" ? "Administrador" : "Comum"}</Badge></td>
                <td><Badge tone="muted">{state.leads.filter((l) => l.responsavelId === u.id).length} leads</Badge></td>
                <td>
                  <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
                    <button className="iconbtn" title="Editar" onClick={() => setModal(u)}><Icon name="pencil" size={17} /></button>
                    <button className="iconbtn" title="Excluir" onClick={() => setDel(u)} disabled={u.id === viewer.id}
                      style={u.id === viewer.id ? { opacity: .35, cursor: "not-allowed" } : { color: "var(--kes-red-400)" }}><Icon name="trash" size={17} /></button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {modal && <UserModal initial={modal.id ? modal : null} emails={state.users} onClose={() => setModal(null)} onSave={save} onReset={resetar} />}
      {del && (
        <Modal title="Excluir usuário" onClose={() => setDel(null)}
          footer={<><Btn variant="ghost" onClick={() => setDel(null)}>Cancelar</Btn><Btn variant="danger" icon="trash" onClick={() => { dispatch({ type: "DELETE_USER", id: del.id }); dispatch({ type: "TOAST", msg: "Usuário excluído." }); setDel(null); }}>Excluir</Btn></>}>
          <p style={{ margin: 0 }}>Tem certeza que deseja excluir <strong>{del.nome}</strong>? Todos os dados de atividade e agendamentos desse usuário serão removidos. Esta ação não pode ser desfeita.</p>
        </Modal>
      )}
    </div>
  );
}

/* ============================================================
   CONFIGURAR METAS (somente admin)
   ============================================================ */
function ConfigurarMetasScreen({ state, dispatch }) {
  const K = window.KES;
  const [m, setM] = useState(() => JSON.parse(JSON.stringify(state.metas)));
  const setAlvo = (key, v) => setM((s) => ({ ...s, [key]: { ...s[key], alvo: v } }));
  const dirty = JSON.stringify(m) !== JSON.stringify(state.metas);
  function save() {
    const clean = JSON.parse(JSON.stringify(m));
    Object.keys(clean).forEach((k) => { clean[k].alvo = Math.max(0, parseInt(clean[k].alvo, 10) || 0); });
    dispatch({ type: "SET_METAS", metas: clean });
    dispatch({ type: "TOAST", msg: "Metas atualizadas para toda a equipe." });
  }
  const rows = [
    { key: "ligacoes", icon: "phone", desc: "Quantidade de ligações esperada por dia útil." },
    { key: "conexoes", icon: "link", desc: "Conexões/contatos efetivos por dia útil." },
    { key: "reunioesAgendadas", icon: "calendarCheck", desc: "Reuniões marcadas por dia útil." },
    { key: "reunioesRealizadas", icon: "handshake", desc: "Reuniões efetivamente realizadas por dia útil." },
    { key: "reunioesQualificadas", icon: "checkCircle", desc: "Reuniões qualificadas (lead com fit) por dia útil." },
    { key: "vendas", icon: "trophy", desc: "Vendas fechadas por mês, por pessoa." },
    { key: "valorVendas", icon: "banknote", desc: "Valor (R$) em vendas por mês, por pessoa." },
  ];
  return (
    <div className="content">
      <div className="topbar">
        <div className="ttl"><h1>Configurar Metas</h1><p>Defina os alvos da equipe. Valem para todos os usuários e recalculam automaticamente conforme o período filtrado.</p></div>
        <div className="actions"><Btn variant="primary" icon="check" onClick={save} disabled={!dirty}>{dirty ? "Salvar metas" : "Tudo salvo"}</Btn></div>
      </div>

      <div className="card" style={{ overflow: "hidden", maxWidth: 760 }}>
        {rows.map((r, i) => (
          <div key={r.key} style={{ display: "flex", alignItems: "center", gap: 16, padding: "18px 22px", borderBottom: i < rows.length - 1 ? "1px solid var(--border-dark)" : "0" }}>
            <div className="mh-ico" style={{ width: 42, height: 42 }}><Icon name={r.icon} size={20} /></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 700, fontSize: 14.5 }}>{state.metas[r.key].rotulo}</div>
              <div className="muted" style={{ fontSize: 12.5 }}>{r.desc}</div>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <input type="number" min="0" className="field" style={{ width: 110, textAlign: "right", fontWeight: 700 }}
                value={m[r.key].alvo} onChange={(e) => setAlvo(r.key, e.target.value)} />
              <span className="muted" style={{ fontSize: 12.5, width: 42, fontWeight: 600 }}>/ {m[r.key].unidade === "dia" ? "dia" : "mês"}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ============================================================
   VISÃO CONSOLIDADA (somente admin)
   ============================================================ */
function pctMini(pct) {
  const tone = window.tonePct(pct);
  return (
    <div>
      <div style={{ fontWeight: 800, fontSize: 13.5 }} className={"tone-" + tone}>{Math.round(pct)}%</div>
      <div className="mini-bar"><i className={"bar-" + tone} style={{ width: Math.min(100, Math.max(3, pct)) + "%" }} /></div>
    </div>
  );
}

function ConsolidadoScreen({ state, dispatch, viewer }) {
  const K = window.KES, KM = window.KESM;
  const team = state.users;
  const ids = team.map((u) => u.id);
  const totals = KM.teamMetrics(state, ids, state.period);

  const rows = team.map((u) => {
    const mtr = KM.userMetrics(state, u.id, state.period);
    return { u, mtr, overall: KM.overallPct(mtr) };
  }).sort((a, b) => b.overall - a.overall);
  const top = rows[0];

  const cols = [
    { key: "ligacoes", lbl: "Ligações" },
    { key: "conexoes", lbl: "Conexões" },
    { key: "reunioesAgendadas", lbl: "Reun. agend." },
    { key: "reunioesRealizadas", lbl: "Reun. realiz." },
    { key: "reunioesQualificadas", lbl: "Reun. qualif." },
    { key: "vendas", lbl: "Vendas" },
  ];

  return (
    <div className="content">
      <div className="topbar">
        <div className="ttl"><h1>Visão da Equipe</h1><p>Comparativo de todos os usuários no período. Clique em uma linha para ver o detalhe individual.</p></div>
        <div className="actions"><PeriodFilter value={state.period} onChange={(p) => dispatch({ type: "SET_PERIOD", period: p })} /></div>
      </div>

      {/* Destaques */}
      <div className="goals-grid" style={{ marginBottom: 4 }}>
        <div className="goal-card">
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <div className="gc-ico"><Icon name="trophy" size={22} /></div><span className="eyebrow" style={{ fontSize: 10 }}>Destaque</span>
          </div>
          <div><div className="gc-lbl">Maior atingimento</div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 8 }}>
              {top && <Avatar user={top.u} size={34} />}
              <div className="gc-val" style={{ fontSize: "var(--text-xl)" }}>{top ? top.u.nome.split(" ")[0] : "—"}</div>
            </div>
          </div>
          <div className="gc-sub">{top ? Math.round(top.overall) + "% da meta" : ""}</div>
        </div>
        <div className="goal-card">
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}><div className="gc-ico"><Icon name="trophy" size={22} /></div><span className="eyebrow" style={{ fontSize: 10 }}>Equipe</span></div>
          <div><div className="gc-lbl">Vendas no período</div><div className="gc-val" style={{ marginTop: 7 }}>{K.fmtNum(totals.vendas.realizado)}</div></div>
          <div className="gc-sub">meta {K.fmtNum(totals.vendas.meta)} · {Math.round(totals.vendas.pct)}%</div>
        </div>
        <div className="goal-card">
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}><div className="gc-ico"><Icon name="banknote" size={22} /></div><span className="eyebrow" style={{ fontSize: 10 }}>Equipe</span></div>
          <div><div className="gc-lbl">Valor em vendas</div><div className="gc-val" style={{ marginTop: 7, fontSize: "var(--text-2xl)" }}>{K.fmtMoeda(totals.valorVendas.realizado)}</div></div>
          <div className="gc-sub">meta {K.fmtMoeda(totals.valorVendas.meta)}</div>
        </div>
      </div>

      <div className="section-label"><span className="eyebrow">Comparativo por usuário</span><span className="rule" /></div>
      <div className="table-wrap">
        <table className="tbl">
          <thead>
            <tr>
              <th style={{ width: 36 }}>#</th><th>Usuário</th>
              {cols.map((c) => <th key={c.key} className="num">{c.lbl}</th>)}
              <th className="num">Atingimento</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={r.u.id} onClick={() => dispatch({ type: "OPEN_USER", userId: r.u.id })}>
                <td style={{ fontWeight: 800, color: i === 0 ? "var(--kes-red-400)" : "var(--fg3)" }}>{i + 1}º</td>
                <td>
                  <div className="cell-user"><Avatar user={r.u} size={34} />
                    <div><div className="nm">{r.u.nome}</div><div className="em">{r.u.papel === "admin" ? "Administrador" : "Comum"}</div></div>
                  </div>
                </td>
                {cols.map((c) => (
                  <td key={c.key} className="num">
                    <div style={{ fontWeight: 700 }}>{K.fmtNum(r.mtr[c.key].realizado)}</div>
                    <div className="muted" style={{ fontSize: 11 }}>/ {K.fmtNum(r.mtr[c.key].meta)}</div>
                  </td>
                ))}
                <td className="num" style={{ minWidth: 110 }}><div style={{ display: "flex", justifyContent: "flex-end" }}>{pctMini(r.overall)}</div></td>
              </tr>
            ))}
          </tbody>
          <tfoot>
            <tr style={{ borderTop: "2px solid var(--border-dark)", background: "var(--kes-navy)" }}>
              <td></td><td style={{ fontWeight: 800 }}>Totais da equipe</td>
              {cols.map((c) => (
                <td key={c.key} className="num" style={{ fontWeight: 800 }}>
                  {K.fmtNum(totals[c.key].realizado)}
                  <div className="muted" style={{ fontSize: 11, fontWeight: 600 }}>/ {K.fmtNum(totals[c.key].meta)}</div>
                </td>
              ))}
              <td className="num"><div style={{ display: "flex", justifyContent: "flex-end" }}>{pctMini(KM.overallPct(totals))}</div></td>
            </tr>
          </tfoot>
        </table>
      </div>
      <p className="muted" style={{ fontSize: 12.5, marginTop: 14, display: "flex", gap: 7, alignItems: "center" }}>
        <Icon name="arrowRight" size={14} /> Clique em qualquer usuário para abrir o painel individual dele.
      </p>
    </div>
  );
}

window.UsuariosScreen = UsuariosScreen;
window.ConfigurarMetasScreen = ConfigurarMetasScreen;
window.ConsolidadoScreen = ConsolidadoScreen;