/* global React, Icon, Button, Badge, Card, Drawer, EmptyState, PageHead, FooterPager,
   brl, fmtDate, tmPode, tmMotivoNegado, colabRegime, colabVinculo, colabDiasLabel,
   useColaboradoresList,
   ColaboradorForm, colaboradorEmBranco, COLAB_DIAS_ISO */

// ─────────────────────────────────────────────────────────────────────────────
//  Pessoas · cadastro (a lista)
//
//  A PESSOA mora em `colaboradores`. `usuarios` (login) e `vendedores` (quem
//  vende e recebe comissão) são PAPÉIS dela — a lista mostra os dois de cara,
//  porque a mesma pessoa virar três cadastros desconexos era o problema.
//
//  A folha sobe VAZIA e fechada: nenhum perfil tem a chave `colaboradores` no
//  jsonb, e o padrão da Fase 1 é ausência NEGA. Quem tem admin_pleno vê no dia
//  um — decisão consciente, registrada.
// ─────────────────────────────────────────────────────────────────────────────

function ColaboradoresLista({ onNav, empresaAtual }) {
  const s = useColaboradoresList([]);
  const [busca, setBusca]     = React.useState('');
  const [verArq, setVerArq]   = React.useState(false);
  const [pagina, setPagina]   = React.useState(1);
  const [salvando, setSalv]   = React.useState(false);
  const [erroSalvar, setErro] = React.useState('');
  const POR_PAGINA = 20;

  const podeCriar  = tmPode('colaboradores', 'criar');
  const podeEditar = tmPode('colaboradores', 'editar');

  const filtrados = React.useMemo(() => {
    const q = busca.trim().toLowerCase();
    return [...s.rows]
      .filter(c => verArq ? true : c.situacao !== 'Arquivado')
      .filter(c => !q || [c.nome, c.apelido, c.cpf, c.email].some(
        v => String(v || '').toLowerCase().indexOf(q) >= 0))
      .sort((a, b) => String(a.nome || '').localeCompare(String(b.nome || '')));
  }, [s.rows, busca, verArq]);

  // ⚠️ FooterPager real: a assinatura é { total, perPage, page, onPage } —
  //    `from`/`to` são ignorados em silêncio e o rodapé mente. E o Math.min é
  //    obrigatório: filtrar até sobrarem poucas linhas não pode encalhar a
  //    usuária numa página que não existe mais.
  const totalPaginas = Math.max(1, Math.ceil(filtrados.length / POR_PAGINA));
  const atual = Math.min(Math.max(pagina, 1), totalPaginas);
  const pageRows = filtrados.slice((atual - 1) * POR_PAGINA, atual * POR_PAGINA);

  const abrirNovo = () => { setErro(''); s.open('new', null, colaboradorEmBranco(empresaAtual && empresaAtual.id)); };
  const abrirEdit = (c) => { setErro(''); s.open('edit', s.rows.indexOf(c)); };

  const setCampo = (campo, valor) => s.set(campo, valor);

  const salvar = async () => {
    setSalv(true); setErro('');
    try { await s.save(); } catch (e) { setErro(String((e && e.message) || e)); }
    setSalv(false);
  };

  const resumoCombinado = (c) => {
    const reg = colabRegime(c.regime);
    if (!reg) return '—';
    if (c.valor_regime == null) return reg.lbl + ' · valor variável';
    return reg.lbl + ' · R$ ' + brl(c.valor_regime) + ' ' + reg.un.replace('R$ ', '');
  };
  const resumoCiclo = (c) => {
    if (!c.ciclo) return '—';
    if (c.ciclo === 'mensal') return 'Mensal, dia ' + (c.ciclo_dia || '—');
    return (c.ciclo === 'quinzenal' ? 'Quinzenal' : 'Semanal')
      + (c.ciclo_dia ? ', ' + COLAB_DIAS_ISO[c.ciclo_dia].toLowerCase() : '');
  };
  // Os dias do combinado ficam ao lado do ciclo: são a outra metade da mesma
  // pergunta ("quando ela trabalha e quando você paga").
  const resumoDias = (c) => colabDiasLabel(c);

  return (
    <div className="canvas">
      <PageHead title="Pessoas" sub="quem recebe pela folha — e o combinado de cada um"
        right={<>
          <Button variant="ghost" icon="calendar-days" onClick={() => onNav && onNav('colaboradores/apontamento')}>
            Apontamento
          </Button>
          <Button variant="ghost" icon="calendar-check" onClick={() => onNav && onNav('colaboradores/fechamentos')}>
            Fechamentos
          </Button>
          <Button variant="primary" icon="plus" onClick={abrirNovo} disabled={!podeCriar}
            title={podeCriar ? '' : tmMotivoNegado('colaboradores', 'criar')}>
            Nova pessoa
          </Button>
        </>} />

      <div className="filter-bar">
        <input className="input" placeholder="Buscar por nome, CPF ou e-mail"
          value={busca} onChange={e => { setBusca(e.target.value); setPagina(1); }}
          style={{ maxWidth: 320 }} />
        <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--tm-fg-3)' }}>
          <input type="checkbox" checked={verArq} onChange={e => { setVerArq(e.target.checked); setPagina(1); }} />
          Mostrar arquivados
        </label>
        {!podeCriar && <span className="cl-hint" style={{ marginLeft: 'auto' }}>
          {tmMotivoNegado('colaboradores', 'criar')}
        </span>}
      </div>

      <Card padded={false}>
        {s.loading && s.rows.length === 0 ? (
          <div style={{ padding: 28, color: 'var(--tm-fg-3)', fontSize: 13 }}>Carregando…</div>
        ) : filtrados.length === 0 ? (
          <div style={{ padding: 28 }}>
            <EmptyState icon="users"
              title={s.rows.length === 0 ? 'A folha começa vazia' : 'Nada encontrado'}
              msg={s.rows.length === 0
                ? 'Cadastre quem recebe: sócio, prestador de serviço ou funcionário. O combinado (regime, valor e ciclo) é o que o fechamento usa para calcular.'
                : 'Nenhuma pessoa bate com a busca. Limpe o filtro para ver todas.'}
              action={s.rows.length === 0 && podeCriar
                ? <Button variant="primary" icon="plus" onClick={abrirNovo}>Cadastrar a primeira</Button>
                : null} />
          </div>
        ) : (
          <>
            <table className="tbl">
              <thead><tr>
                <th>Pessoa</th><th>Vínculo</th><th>Combinado</th><th>Dias</th><th>Ciclo</th>
                <th>Papéis</th><th>Desde</th><th></th>
              </tr></thead>
              <tbody>
                {pageRows.map(c => (
                  <tr key={c.id} style={c.situacao === 'Arquivado' ? { opacity: .55 } : null}>
                    <td>
                      <b>{c.nome}</b>
                      {c.apelido ? <span className="muted"> · {c.apelido}</span> : null}
                      {c.situacao === 'Arquivado' && <> <Badge tone="neutral">arquivado</Badge></>}
                    </td>
                    <td>{colabVinculo(c.vinculo)}</td>
                    <td>{resumoCombinado(c)}</td>
                    <td className={c.dias_semana ? '' : 'muted'}>{resumoDias(c)}</td>
                    <td>{resumoCiclo(c)}</td>
                    <td>
                      <span className={'cl-chip' + (c.usuario_id ? ' on' : '')}>
                        {c.usuario_id ? 'tem login' : 'sem login'}
                      </span>
                      {' '}
                      <span className={'cl-chip' + (c.vendedor_id ? ' on' : '')}>
                        {c.vendedor_id ? 'vende' : 'não vende'}
                      </span>
                    </td>
                    <td>{c.data_inicio ? fmtDate(c.data_inicio) : '—'}</td>
                    <td className="right">
                      <Button variant="ghost" size="sm" icon="calendar-days" title="Apontar horas"
                        onClick={() => onNav && onNav('colaboradores/apontamento')} />
                      <Button variant="ghost" size="sm" icon="pencil" title={podeEditar ? 'Editar' : tmMotivoNegado('colaboradores', 'editar')}
                        disabled={!podeEditar} onClick={() => abrirEdit(c)} />
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            <FooterPager total={filtrados.length} perPage={POR_PAGINA} page={atual} onPage={setPagina} />
          </>
        )}
      </Card>

      <div className="cl-nota" style={{ marginTop: 14 }}>
        Uma pessoa aqui pode ser a mesma que entra no app (<b>usuário</b>) e a mesma que
        vende (<b>vendedor</b>) — os dois campos do cadastro ligam os três sem duplicar nada.
      </div>

      {s.edit && (
        <Drawer open onClose={s.close} width={760}
          eyebrow="Pessoas"
          title={s.edit.mode === 'new' ? 'Nova pessoa' : s.edit.draft.nome}
          subtitle={s.edit.mode === 'new'
            ? 'O combinado define como o fechamento calcula o pagamento'
            : 'Mudar o valor NÃO altera fechamento já aplicado — ele guarda o valor da época'}>
          <ColaboradorForm
            draft={s.edit.draft} set={setCampo}
            onSave={salvar} onCancel={s.close}
            salvando={salvando} erro={erroSalvar} />
          {s.edit.mode === 'edit' && (
            <div className="cl-arquivar">
              {s.edit.draft.situacao === 'Arquivado' ? (
                <Button variant="ghost" icon="rotate-ccw" onClick={() => { s.unarchive(s.edit.idx); s.close(); }}>
                  Desarquivar
                </Button>
              ) : (
                <Button variant="ghost" icon="archive" onClick={() => { s.archive(s.edit.idx); s.close(); }}>
                  Arquivar
                </Button>
              )}
              <span className="cl-hint">
                Arquivar tira das listas e dos seletores. O histórico de fechamentos e os
                títulos já gerados continuam — pagamento feito não se apaga.
              </span>
            </div>
          )}
        </Drawer>
      )}
    </div>
  );
}

Object.assign(window, { ColaboradoresLista });