/* global React, Icon, Button, Badge, Card, Drawer, Field, brl,
          PageHead, KpiMini, useContasList, useEmpresasList,
          useContasReceberList, useContasPagarList, fmtDate */

// ─── Módulo Controle de Contas Bancárias · FASE 2 ────────────────────────────
// Cadastro + SALDO CALCULADO (saldo_inicial + Recebido − Pago vinculados à conta,
// eixo data_pagamento, ≥ data_saldo_inicial). Transferências/aportes/conciliação
// entram nas Fases 4–6.

const TIPOS_CONTA = ['Corrente', 'Poupança', 'Caixa', 'PIX', 'Investimento'];

const BLANK_CONTA = {
  nome: '', empresa_id: '', tipo: 'Corrente', banco: '', agencia: '',
  numero_conta: '', pix_chave: '', saldo_inicial: '', data_saldo_inicial: '',
  limite_cheque_especial: 0, observacoes: '', situacao: 'Ativa',
};

// ── Saldo calculado (regime de caixa, eixo data_pagamento) ──
// Espelha o Extrato Consolidado: só Recebido/Pago com data_pagamento válida.
function dataPagto(r) {
  const dp = String(r.data_pagamento || r.dataPagamento || '').slice(0, 10);
  return /^\d{4}-\d{2}-\d{2}$/.test(dp) ? dp : null;
}
function valorRecebido(r) { return Number(r.valor_recebido || r.recebido || r.valor) || 0; }

function saldoDaConta(conta, recRows, pagRows) {
  const anchor = conta.data_saldo_inicial ? String(conta.data_saldo_inicial).slice(0, 10) : null;
  const noRange = (dp) => !!dp && (!anchor || dp >= anchor);   // null anchor = todos os movimentos
  let saldo = Number(conta.saldo_inicial) || 0;
  (recRows || []).forEach(r => { if (r.status === 'Recebido' && r.conta_id === conta.id && noRange(dataPagto(r))) saldo += valorRecebido(r); });
  (pagRows || []).forEach(r => { if (r.status === 'Pago'     && r.conta_id === conta.id && noRange(dataPagto(r))) saldo -= Number(r.valor) || 0; });
  return saldo;
}
function saldoSemConta(recRows, pagRows) {
  let s = 0;
  (recRows || []).forEach(r => { if (r.status === 'Recebido' && !r.conta_id && dataPagto(r)) s += valorRecebido(r); });
  (pagRows || []).forEach(r => { if (r.status === 'Pago'     && !r.conta_id && dataPagto(r)) s -= Number(r.valor) || 0; });
  return s;
}
// Estado de cheque especial: null = positivo; warning = dentro do limite; danger = acima.
function chequeStatus(saldo, limite) {
  saldo = Number(saldo) || 0; limite = Number(limite) || 0;
  if (saldo >= 0) return null;
  if (saldo >= -limite) return { txt: 'no cheque especial', tone: 'warning' };
  return { txt: 'acima do limite', tone: 'danger' };
}

function ContasBancarias({ onNav }) {   // eslint-disable-line no-unused-vars
  const s = useContasList([]);
  const { rows: recRows } = useContasReceberList([]);
  const { rows: pagRows } = useContasPagarList([]);
  const empresasHook = useEmpresasList([]);
  const empresasAtivas = (empresasHook.rows || []).filter(e => e.ativo !== false);
  const empresaNome = (id) => {
    if (!id) return null;
    const e = (empresasHook.rows || []).find(x => x.id === id);
    return e ? (e.nome_fantasia || e.razao_social || e.nome || '—') : '—';
  };

  const [saveErr, setSaveErr] = React.useState('');
  const [mostrarArq, setMostrarArq] = React.useState(false);

  // Ordena por ordem → nome (a coluna 'ordem' pode vir nula nas contas legadas).
  const ordenadas = [...s.rows].sort((a, b) => {
    const oa = a.ordem == null ? 9999 : a.ordem;
    const ob = b.ordem == null ? 9999 : b.ordem;
    if (oa !== ob) return oa - ob;
    return String(a.nome || '').localeCompare(String(b.nome || ''));
  });
  const visiveis = ordenadas.filter(c => mostrarArq ? true : c.situacao !== 'Arquivada');
  const arquivadasCount = ordenadas.filter(c => c.situacao === 'Arquivada').length;
  const semEmpresa = ordenadas.filter(c => !c.empresa_id && c.situacao !== 'Arquivada').length;
  const ativasCount = ordenadas.filter(c => c.situacao !== 'Arquivada').length;

  // Saldo calculado. Consolidado soma TODAS as contas (inclui arquivadas com
  // histórico) + o balde "Sem conta" — é o que fecha a invariante com o Extrato.
  const semConta = saldoSemConta(recRows, pagRows);
  const consolidado = ordenadas.reduce((a, c) => a + saldoDaConta(c, recRows, pagRows), 0) + semConta;

  // ── Ações ──
  const abrirNovo = () => { setSaveErr(''); s.open('new', null, { ...BLANK_CONTA }); };
  const abrirEdit = (c) => { setSaveErr(''); s.open('edit', s.rows.findIndex(x => x.id === c.id)); };

  const salvar = () => {
    const d = s.edit.draft;
    if (!(d.nome || '').trim()) { setSaveErr('O nome da conta é obrigatório.'); return; }
    if (!d.empresa_id) { setSaveErr('Selecione a empresa da conta.'); return; }
    const saldo = d.saldo_inicial;
    const temSaldo = saldo !== '' && saldo != null && Number(saldo) !== 0;
    const temData = !!(d.data_saldo_inicial && String(d.data_saldo_inicial).slice(0, 10));
    if (temSaldo && !temData) {
      setSaveErr('Você preencheu um saldo inicial — informe a data do saldo (é a âncora do cálculo futuro).');
      return;
    }
    setSaveErr('');
    s.save();
  };

  const setSituacao = async (c, situacao) => {
    if (!window.tmSupabase || !c.id) return;
    await window.tmSupabase.from('contas_bancarias').update({ situacao }).eq('id', c.id);
    s.reload();
  };

  const excluir = () => {
    const idx = s.rows.findIndex(x => x.id === s.edit.draft.id);
    if (idx >= 0) s.remove(idx);
  };

  const d = s.edit && s.edit.draft;
  const isNew = s.edit && s.edit.mode === 'new';
  const fmtSaldo = (n) => (Number(n) < 0 ? '- ' : '') + 'R$ ' + brl(Math.abs(Number(n) || 0));

  return (
    <div className="canvas">
      <PageHead title="Contas Bancárias"
        sub={s.rows.length > 0
          ? `${ativasCount} ativa${ativasCount !== 1 ? 's' : ''}${arquivadasCount ? ` · ${arquivadasCount} arquivada${arquivadasCount !== 1 ? 's' : ''}` : ''}`
          : 'Nenhuma conta cadastrada'}
        right={<Button variant="primary" icon="plus" size="sm" onClick={abrirNovo}>Nova conta</Button>} />

      {semEmpresa > 0 && (
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8, margin: '0 0 16px',
          padding: '10px 14px', borderRadius: 'var(--tm-radius-sm)', fontSize: 12.5,
          color: 'var(--tm-warning)',
          background: 'color-mix(in srgb, var(--tm-warning) 12%, transparent)',
          border: '1px solid color-mix(in srgb, var(--tm-warning) 30%, transparent)',
        }}>
          <Icon name="alert-circle" size={15} />
          <span>{semEmpresa} conta{semEmpresa !== 1 ? 's' : ''} sem empresa — atribua a empresa (obrigatório para organizar saldo por empresa).</span>
        </div>
      )}

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 16 }}>
        <KpiMini lbl="Saldo consolidado" v={fmtSaldo(consolidado)} sub="todas as contas + sem conta" />
        <KpiMini lbl="Sem conta" v={fmtSaldo(semConta)} sub="lançamentos sem conta vinculada" />
        <KpiMini lbl="Contas ativas" v={String(ativasCount)} sub={`de ${s.rows.length} cadastrada${s.rows.length !== 1 ? 's' : ''}`} />
      </div>

      <Card>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
          padding: '10px 14px', borderBottom: '1px solid var(--tm-line-1)',
        }}>
          {arquivadasCount > 0 && (
            <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12.5, color: 'var(--tm-fg-3)', cursor: 'pointer' }}>
              <input type="checkbox" checked={mostrarArq} onChange={e => setMostrarArq(e.target.checked)} />
              Mostrar arquivadas
            </label>
          )}
        </div>

        {s.rows.length === 0 ? (
          <div style={{ padding: '48px 0', textAlign: 'center', color: 'var(--tm-fg-3)' }}>
            <Icon name="landmark" size={36} style={{ opacity: 0.3, marginBottom: 12 }} />
            <div style={{ fontSize: 14, marginBottom: 6 }}>Nenhuma conta bancária</div>
            <div style={{ fontSize: 12 }}>Clique em "Nova conta" para cadastrar</div>
          </div>
        ) : (
          <table className="tbl">
            <thead><tr>
              <th>Conta</th><th>Empresa</th><th>Tipo</th>
              <th className="num right">Saldo atual</th><th></th>
            </tr></thead>
            <tbody>
              {visiveis.map((c) => {
                const arq = c.situacao === 'Arquivada';
                const saldo = saldoDaConta(c, recRows, pagRows);
                const limite = Number(c.limite_cheque_especial) || 0;
                const cheque = chequeStatus(saldo, limite);
                return (
                  <tr key={c.id} className="clickable" onClick={() => abrirEdit(c)}
                    style={arq ? { opacity: 0.55 } : undefined}>
                    <td>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <span style={{ fontWeight: 500 }}>{c.nome}</span>
                        {arq && <Badge tone="neutral">Arquivada</Badge>}
                      </div>
                      {(c.banco || c.agencia || c.numero_conta) && (
                        <div className="muted" style={{ fontSize: 11 }}>
                          {[c.banco, c.agencia && `ag. ${c.agencia}`, c.numero_conta && `c/ ${c.numero_conta}`].filter(Boolean).join(' · ')}
                        </div>
                      )}
                    </td>
                    <td>
                      {c.empresa_id
                        ? empresaNome(c.empresa_id)
                        : <Badge tone="warning">sem empresa</Badge>}
                    </td>
                    <td><span className="ch-chip">{c.tipo || '—'}</span></td>
                    <td className="num right">
                      <div style={{ fontWeight: 600, color: saldo < 0 ? 'var(--tm-danger)' : 'var(--tm-fg-1)' }}>{fmtSaldo(saldo)}</div>
                      {cheque && (
                        <div style={{ fontSize: 10, fontWeight: 600, marginTop: 2, color: `var(--tm-${cheque.tone})` }}>
                          <Icon name="alert-triangle" size={10} /> {cheque.txt}
                        </div>
                      )}
                      {limite > 0 && (
                        <div className="muted" style={{ fontSize: 10.5 }}>pode gastar {fmtSaldo(saldo + limite)}</div>
                      )}
                      {Number(c.saldo_inicial) !== 0 && (
                        <div className="muted" style={{ fontSize: 10 }}>inicial {fmtSaldo(c.saldo_inicial)}{c.data_saldo_inicial ? ` · ${fmtDate(c.data_saldo_inicial)}` : ''}</div>
                      )}
                    </td>
                    <td onClick={e => e.stopPropagation()}>
                      {arq
                        ? <Button variant="secondary" size="sm" icon="archive-restore" onClick={() => setSituacao(c, 'Ativa')}>Desarquivar</Button>
                        : <Button variant="secondary" size="sm" icon="archive" onClick={() => setSituacao(c, 'Arquivada')}>Arquivar</Button>}
                    </td>
                  </tr>
                );
              })}
              {semConta !== 0 && (
                <tr style={{ background: 'var(--tm-bg-1)' }}>
                  <td style={{ fontStyle: 'italic', color: 'var(--tm-fg-3)' }}>Sem conta</td>
                  <td colSpan={2} style={{ fontSize: 11.5, color: 'var(--tm-fg-4)' }}>lançamentos sem conta vinculada</td>
                  <td className="num right" style={{ fontWeight: 600, color: semConta < 0 ? 'var(--tm-danger)' : 'var(--tm-fg-2)' }}>{fmtSaldo(semConta)}</td>
                  <td></td>
                </tr>
              )}
            </tbody>
          </table>
        )}
      </Card>

      {/* Drawer de cadastro/edição */}
      {s.edit && (
        <Drawer open={true} width={560}
          title={isNew ? 'Nova conta bancária' : 'Editar conta'}
          onClose={s.close}
          footer={<>
            {!isNew && <Button variant="danger-ghost" size="sm" icon="trash-2" onClick={excluir}>Excluir</Button>}
            <span style={{ flex: 1 }} />
            <Button variant="secondary" size="sm" onClick={s.close}>Cancelar</Button>
            <Button variant="primary" size="sm" icon="check" onClick={salvar}>Salvar</Button>
          </>}>

          {saveErr && (
            <div style={{
              display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14,
              padding: '10px 12px', borderRadius: 'var(--tm-radius-sm)', fontSize: 12.5,
              color: 'var(--tm-danger)',
              background: 'color-mix(in srgb, var(--tm-danger) 12%, transparent)',
              border: '1px solid color-mix(in srgb, var(--tm-danger) 30%, transparent)',
            }}>
              <Icon name="alert-circle" size={15} /> <span>{saveErr}</span>
            </div>
          )}

          <Field label="Nome da conta *">
            <input className="input" value={d.nome || ''} placeholder="Ex.: Conta corrente · Itaú"
              onChange={e => s.set('nome', e.target.value)} />
          </Field>

          <div className="field-grid-2">
            <Field label="Empresa *">
              <select className="input" value={d.empresa_id || ''} onChange={e => s.set('empresa_id', e.target.value)}>
                <option value="">Selecionar…</option>
                {empresasAtivas.map(e => (
                  <option key={e.id} value={e.id}>{e.nome_fantasia || e.razao_social || e.nome}</option>
                ))}
                {d.empresa_id && !empresasAtivas.some(e => e.id === d.empresa_id) && (
                  <option value={d.empresa_id}>{empresaNome(d.empresa_id)}</option>
                )}
              </select>
            </Field>
            <Field label="Tipo">
              <select className="input" value={d.tipo || 'Corrente'} onChange={e => s.set('tipo', e.target.value)}>
                {TIPOS_CONTA.map(t => <option key={t} value={t}>{t}</option>)}
              </select>
            </Field>
          </div>

          <div className="field-grid-2">
            <Field label="Banco">
              <input className="input" value={d.banco || ''} placeholder="Itaú, Nubank…"
                onChange={e => s.set('banco', e.target.value)} />
            </Field>
            <Field label="Agência">
              <input className="input" value={d.agencia || ''} onChange={e => s.set('agencia', e.target.value)} />
            </Field>
          </div>

          <div className="field-grid-2">
            <Field label="Número da conta">
              <input className="input" value={d.numero_conta || ''} onChange={e => s.set('numero_conta', e.target.value)} />
            </Field>
            <Field label="Chave PIX">
              <input className="input" value={d.pix_chave || ''} onChange={e => s.set('pix_chave', e.target.value)} />
            </Field>
          </div>

          <div className="field-grid-2">
            <Field label="Saldo inicial (R$)" hint="Aceita valor negativo.">
              <input className="input" type="number" step="0.01" placeholder="0,00"
                value={d.saldo_inicial === 0 ? '0' : (d.saldo_inicial || '')}
                onChange={e => s.set('saldo_inicial', e.target.value)} />
            </Field>
            <Field label="Data do saldo inicial" hint="Obrigatória se houver saldo — âncora do cálculo.">
              <input className="input" type="date"
                value={(d.data_saldo_inicial || '').slice(0, 10)}
                onChange={e => s.set('data_saldo_inicial', e.target.value)} />
            </Field>
          </div>

          <Field label="Limite de cheque especial (R$)" hint="Quanto a conta pode ficar negativa. 0 = sem limite.">
            <input className="input" type="number" step="0.01" min="0" placeholder="0,00"
              value={d.limite_cheque_especial === 0 ? '0' : (d.limite_cheque_especial || '')}
              onChange={e => s.set('limite_cheque_especial', e.target.value)} />
          </Field>

          <Field label="Observações">
            <textarea className="input" rows={2} value={d.observacoes || ''}
              onChange={e => s.set('observacoes', e.target.value)} />
          </Field>
        </Drawer>
      )}
    </div>
  );
}

Object.assign(window, { ContasBancarias });