/* Cadastros (gestor) — abas Produtos e Operadores. Gate por PIN de gestor. */

const PAPEL_LABEL = { gestor: 'Gestor', escritorio: 'Escritório', vendedor: 'Vendedor', motorista: 'Motorista', estoquista: 'Estoquista' };

function CadastrosView({ db, online, sessaoInicial, onAutenticado, onCriarProduto, onEditarProduto, onArquivarProduto, onSalvarOperador, onClose }) {
  const { useState } = React;
  const [autorizado, setAutorizado] = useState(!!sessaoInicial);
  const [gestor, setGestor] = useState(sessaoInicial ? sessaoInicial.operador : null);
  const [pin, setPin] = useState(sessaoInicial ? sessaoInicial.pin : null);
  const [aba, setAba] = useState('produtos');

  if (!autorizado) {
    return (
      <div className="cadastros-view" data-screen-label="Cadastros — PIN">
        <div className="cad-pin-gate">
          <div className="cad-pin-card">
            <div className="cpg-ic"><EIcon name="lock" size={30} /></div>
            <h2>Cadastros</h2>
            <p>Área restrita ao gestor. Informe seu PIN para continuar.</p>
            <PinPad onValidado={(op, p) => { setGestor(op); setPin(p); setAutorizado(true); onAutenticado && onAutenticado(op, p); }}
              permite={(op) => op.papel === 'gestor'} acaoLabel="abrir os cadastros" />
            <button className="btn-cancelar" style={{ margin: '8px auto 0' }} onClick={onClose}>Voltar</button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="cadastros-view" data-screen-label="Cadastros">
      <div className="tab-abas cad">
        <button className={'tab-aba' + (aba === 'produtos' ? ' on' : '')} onClick={() => setAba('produtos')}><EIcon name="brick" size={19} /> Produtos</button>
        <button className={'tab-aba' + (aba === 'operadores' ? ' on' : '')} onClick={() => setAba('operadores')}><EIcon name="user" size={19} /> Operadores</button>
        <span className="cad-gestor">Gestor: {gestor.nome.split(' ')[0]}</span>
      </div>
      {aba === 'produtos'
        ? <ProdutosTab db={db}
            onCriar={(p) => onCriarProduto(p, pin)} onEditar={(p) => onEditarProduto(p, pin)} onArquivar={(id) => onArquivarProduto(id, pin)} />
        : <OperadoresTab db={db} onSalvar={(o) => onSalvarOperador(o, pin)} />}
    </div>
  );
}

function ProdutosTab({ db, onCriar, onEditar, onArquivar }) {
  const { useState } = React;
  const [busca, setBusca] = useState('');
  const [verArquivados, setVerArquivados] = useState(false);
  const [form, setForm] = useState(null); // 'novo' | produto

  const todos = Object.values(Object.assign({}, ESTQ.PRODUTOS, db.produtos));
  const q = busca.trim().toLowerCase();
  const lista = todos.filter((p) => (verArquivados ? p.arquivado : !p.arquivado) && (!q || (p.nome + ' ' + p.marca).toLowerCase().includes(q)));

  return (
    <div className="tab-conteudo">
      <div className="tab-filtros">
        <div className="tf-busca">
          <EIcon name="search" size={18} />
          <input value={busca} onChange={(e) => setBusca(e.target.value)} placeholder="Buscar produto…" />
        </div>
        <button className={'tf-toggle' + (verArquivados ? ' on' : '')} onClick={() => setVerArquivados(!verArquivados)}>
          <EIcon name="archive" size={15} /> Arquivados
        </button>
        <button className="btn-cad-novo" onClick={() => setForm('novo')}><EIcon name="plus" size={18} strokeWidth={2.2} /> Novo produto</button>
      </div>

      <div className="tab-scroll">
        <table className="tbl">
          <thead><tr><th>Produto</th><th>Marca</th><th>Categoria</th><th>Detalhes</th><th>Cor</th><th className="acoes-col"></th></tr></thead>
          <tbody>
            {lista.map((p) => (
              <tr key={p.id}>
                <td><span className="prod-cell">{p.foto ? <img className="prod-sw foto" src={p.foto} alt="" /> : <span className="prod-sw" style={{ background: p.cor }}></span>}{p.nome}</span></td>
                <td>{p.marca}</td>
                <td><span className={'cat-tag ' + p.cat}>{p.cat === 'material' ? 'Material' : 'Piso'}</span></td>
                <td className="det-cell">{p.cat === 'material' ? p.unidade : (p.formato + ' · ' + p.m2cx.toFixed(2).replace('.', ',') + ' m²/cx · ponta ' + p.limitePonta + ' m²')}</td>
                <td>{p.foto ? <img className="prod-sw grande foto" src={p.foto} alt="" /> : <span className="prod-sw grande" style={{ background: p.cor }}></span>}</td>
                <td className="acoes-col">
                  <div className="cad-acoes">
                    <button className="cad-act" onClick={() => setForm(p)}><EIcon name="edit" size={16} /> Editar</button>
                    {!p.arquivado && <button className="cad-act danger" onClick={() => onArquivar(p.id)}><EIcon name="archive" size={16} /> Arquivar</button>}
                  </div>
                </td>
              </tr>
            ))}
            {!lista.length && <tr className="empty-row"><td colSpan="6">Nenhum produto {verArquivados ? 'arquivado' : 'cadastrado'}.</td></tr>}
          </tbody>
        </table>
      </div>

      {form && (
        <NovoProdutoSheet
          produtoExistente={form === 'novo' ? null : form}
          onCancelar={() => setForm(null)}
          onSalvar={(p) => Promise.resolve(form === 'novo' ? onCriar(p) : onEditar(p)).then(() => setForm(null))}
        />
      )}
    </div>
  );
}

function OperadoresTab({ db, onSalvar }) {
  const { useState } = React;
  const [form, setForm] = useState(null); // 'novo' | operador
  const [verInativos, setVerInativos] = useState(false);

  const lista = db.operadores.filter((o) => (verInativos ? !o.ativo : o.ativo));

  return (
    <div className="tab-conteudo">
      {db.pinBloqueado && (
        <div className="aviso-resumo erro" style={{ margin: '0 0 10px' }}>
          <EIcon name="alert" size={18} /> Bloqueio de PIN estava ativo (muitas tentativas erradas) — foi liberado
          automaticamente ao você entrar aqui.
        </div>
      )}
      <div className="tab-filtros">
        <span className="cad-hint">PINs nunca são exibidos. Para trocar, use "Redefinir PIN".</span>
        <button className={'tf-toggle' + (verInativos ? ' on' : '')} style={{ marginLeft: 'auto' }} onClick={() => setVerInativos(!verInativos)}>
          <EIcon name="archive" size={15} /> Inativos
        </button>
        <button className="btn-cad-novo" onClick={() => setForm('novo')}><EIcon name="plus" size={18} strokeWidth={2.2} /> Novo operador</button>
      </div>

      <div className="tab-scroll">
        <table className="tbl">
          <thead><tr><th>Nome</th><th>Papel</th><th>Status</th><th>PIN</th><th className="acoes-col"></th></tr></thead>
          <tbody>
            {lista.map((o) => (
              <tr key={o.id}>
                <td><span className="op-nome"><span className="op-avatar"><EIcon name="user" size={16} /></span>{o.nome}</span></td>
                <td><span className={'papel-tag ' + o.papel}>{PAPEL_LABEL[o.papel]}</span></td>
                <td>{o.ativo ? <span className="tpill normal">Ativo</span> : <span className="tpill venc">Inativo</span>}</td>
                <td><span className="pin-mask">••••</span></td>
                <td className="acoes-col">
                  <div className="cad-acoes">
                    <button className="cad-act" onClick={() => setForm(o)}><EIcon name="edit" size={16} /> Editar</button>
                    <button className={'cad-act' + (o.ativo ? ' danger' : '')}
                      onClick={() => (o.ativo ? onSalvar(Object.assign({}, o, { ativo: false })) : setForm(Object.assign({}, o, { ativo: true, _reativando: true })))}>
                      <EIcon name={o.ativo ? 'ban' : 'check'} size={16} /> {o.ativo ? 'Desativar' : 'Ativar'}
                    </button>
                  </div>
                </td>
              </tr>
            ))}
            {!lista.length && <tr className="empty-row"><td colSpan="5">Nenhum operador {verInativos ? 'inativo' : 'cadastrado'}.</td></tr>}
          </tbody>
        </table>
      </div>

      {form && (
        <OperadorForm
          operador={form === 'novo' ? null : form}
          onCancelar={() => setForm(null)}
          onSalvar={(o) => Promise.resolve(onSalvar(o)).then(() => setForm(null))}
        />
      )}
    </div>
  );
}

function OperadorForm({ operador, onCancelar, onSalvar }) {
  const { useState } = React;
  const ed = operador;
  const reativando = !!(ed && ed._reativando);
  const [nome, setNome] = useState(ed ? ed.nome : '');
  const [papel, setPapel] = useState(ed ? ed.papel : 'vendedor');
  const [ativo, setAtivo] = useState(ed ? ed.ativo : true);
  const [redefinindo, setRedefinindo] = useState(!ed || reativando); // novo/reativação já pedem PIN
  const [pin, setPin] = useState('');
  const [salvando, setSalvando] = useState(false);
  const [erro, setErro] = useState(null);

  const pinOk = !redefinindo || pin.length === 4;
  const valido = nome.trim() && pinOk;

  function salvar() {
    if (!valido) return;
    const base = ed ? Object.assign({}, ed) : {};
    delete base._reativando;
    base.nome = nome.trim(); base.papel = papel; base.ativo = ativo;
    if (redefinindo && pin.length === 4) base.novoPin = pin;
    setErro(null); setSalvando(true);
    Promise.resolve(onSalvar(base))
      .catch((e) => { setErro(e.message); setSalvando(false); });
  }

  return (
    <div className="scrim center" onClick={onCancelar}>
      <div className="novo-prod-sheet estreito" data-screen-label="Operador" onClick={(e) => e.stopPropagation()}>
        <div className="np-head">
          <h2>{reativando ? 'Reativar operador' : (ed ? 'Editar operador' : 'Novo operador')}</h2>
          <button className="btn-fechar-sheet" onClick={onCancelar}><EIcon name="x" size={19} /> Fechar</button>
        </div>
        <div className="np-body">
          <div className="np-field">
            <label>Nome</label>
            <input value={nome} onChange={(e) => setNome(e.target.value)} placeholder="Ex.: Marina Souza" />
          </div>
          <div className="np-field">
            <label>Papel</label>
            <div className="papel-cards">
              {['gestor', 'escritorio', 'vendedor', 'motorista', 'estoquista'].map((p) => (
                <button key={p} className={'papel-card' + (papel === p ? ' on' : '')} onClick={() => setPapel(p)}>{PAPEL_LABEL[p]}</button>
              ))}
            </div>
          </div>
          <div className="np-field">
            <label>PIN de 4 dígitos</label>
            {reativando && (
              <div className="aviso-resumo" style={{ marginBottom: 8 }}>
                <EIcon name="alert" size={18} /> Defina um novo PIN pra reativar — evita duplicidade com um PIN já em uso por outro operador ativo.
              </div>
            )}
            {redefinindo ? (
              <div className="pin-set">
                <div className="pin-dots compact">
                  {[0, 1, 2, 3].map((i) => <span key={i} className={'pin-dot' + (i < pin.length ? ' on' : '')}></span>)}
                </div>
                <NumPad value={pin} onChange={setPin} maxLen={4} />
                {ed && !reativando && <button className="btn-cancelar" style={{ margin: '4px auto 0' }} onClick={() => { setRedefinindo(false); setPin(''); }}>Cancelar redefinição</button>}
              </div>
            ) : (
              <button className="btn-redefinir" onClick={() => setRedefinindo(true)}><EIcon name="key" size={17} /> Redefinir PIN</button>
            )}
          </div>
          <div className="np-field">
            <label>Status</label>
            <button className={'status-toggle' + (ativo ? ' on' : '')} onClick={() => setAtivo(!ativo)}>
              <span className="st-dot"></span>{ativo ? 'Ativo' : 'Inativo'}
            </button>
          </div>
          {erro && <div className="aviso-resumo erro"><EIcon name="alert" size={18} /> Não foi possível salvar: {erro}</div>}
        </div>
        <div className="np-foot">
          <button className="btn-cancelar" onClick={onCancelar}>Cancelar</button>
          <button className="btn-wz-confirmar np-salvar" disabled={!valido || salvando} onClick={salvar}>
            <EIcon name="check" size={20} /> {salvando ? 'Salvando…' : 'Salvar'}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CadastrosView, PAPEL_LABEL });