/* global React, Icon, Button, Badge, Drawer, brl,
          CATEGORIAS_DESPESA, FORMAS_PAGAMENTO, addDaysIso, TimelineParcela,
          useContasReceberList */

// ─── Blanks ──────────────────────────────────────────────────────────────────

const BLANK_CONTA_REC = {
  referencia: '', cliente_nome: '', pedido_ref: '', vencimento: '',
  parcela: '1/1', valor: '', valor_recebido: 0, status: 'Em aberto',
  forma_pagamento: 'Boleto', observacoes: '',
  data_pedido: '', data_faturamento: '', data_pagamento: '',
};

const BLANK_CONTA_PAG = {
  referencia: '', fornecedor: '', categoria: '', vencimento: '',
  valor: '', status: 'Em aberto', observacoes: '',
  forma_pagamento: 'Boleto', data_emissao: '', data_pagamento: '',
  recorrente: false, recorrencia_tipo: '', recorrencia_fim: '',
};

// ─── Helper: section divider inside drawer ───────────────────────────────────

function DrawerSection({ title, children }) {
  return (
    <div style={{ marginBottom: 16 }}>
      <div style={{
        fontSize: 10.5, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em',
        color: 'var(--tm-fg-4)', marginBottom: 8, paddingBottom: 4,
        borderBottom: '1px solid var(--tm-line-1)',
      }}>{title}</div>
      <div className="form-grid">{children}</div>
    </div>
  );
}

// ─── Conta a Receber Form ────────────────────────────────────────────────────

function ContaRecForm({ edit, set, onSave, onCancel, onDelete, clientes, allRows }) {
  if (!edit) return null;
  const d = edit.draft;
  const isNew = edit.mode === 'new';

  // Buscar parcelas do mesmo grupo para exibir timeline
  const grupoParcela = d.grupo_parcela || d.grupoParcela;
  const parcelasGrupo = React.useMemo(() => {
    if (!grupoParcela || !allRows) return [];
    return allRows.filter(r => (r.grupo_parcela || r.grupoParcela) === grupoParcela);
  }, [grupoParcela, allRows]);

  return (
    <Drawer open={true} title={isNew ? 'Novo título a receber' : 'Editar título'}
      onClose={onCancel}
      footer={<>
        {!isNew && onDelete && <Button variant="danger-ghost" size="sm" icon="trash-2" onClick={onDelete}>Excluir</Button>}
        <span style={{ flex: 1 }} />
        <Button variant="secondary" size="sm" onClick={onCancel}>Cancelar</Button>
        <Button variant="primary" size="sm" icon="check" onClick={onSave}>Salvar</Button>
      </>}>

      <DrawerSection title="Dados básicos">
        <div className="field"><label>Referência</label>
          <input className="input" placeholder="NF-001, BOL-123…" value={d.referencia || d.ref || ''} onChange={e => set('referencia', e.target.value)} /></div>
        <div className="field"><label>Cliente</label>
          <input className="input" placeholder="Nome do cliente" value={d.cliente_nome || d.cli || ''} onChange={e => set('cliente_nome', e.target.value)} list="cr-clientes" />
          {clientes && clientes.length > 0 && <datalist id="cr-clientes">{clientes.map(c => <option key={c} value={c} />)}</datalist>}
        </div>
        <div className="field"><label>Pedido (ref.)</label>
          <input className="input" placeholder="PED-001" value={d.pedido_ref || d.ped || ''} onChange={e => set('pedido_ref', e.target.value)} /></div>
        <div className="field"><label>Parcela</label>
          <input className="input" placeholder="1/1" value={d.parcela || d.parc || ''} onChange={e => set('parcela', e.target.value)} /></div>
      </DrawerSection>

      <DrawerSection title="Datas">
        <div className="field"><label>Data do pedido</label>
          <input className="input" type="date" value={(d.data_pedido || d.dataPedido || '').slice(0, 10)} onChange={e => set('data_pedido', e.target.value)} /></div>
        <div className="field"><label>Faturamento</label>
          <input className="input" type="date" value={(d.data_faturamento || d.dataFaturamento || '').slice(0, 10)} onChange={e => set('data_faturamento', e.target.value)} /></div>
        <div className="field"><label>Vencimento</label>
          <input className="input" type="date" value={(d.vencimento || '').slice(0, 10)} onChange={e => set('vencimento', e.target.value)} /></div>
        <div className="field"><label>Data pagamento</label>
          <input className="input" type="date" value={(d.data_pagamento || d.dataPagamento || '').slice(0, 10)} onChange={e => set('data_pagamento', e.target.value)} /></div>
      </DrawerSection>

      <DrawerSection title="Financeiro">
        <div className="field"><label>Forma de pagamento</label>
          <select className="input" value={d.forma_pagamento || 'Boleto'} onChange={e => set('forma_pagamento', e.target.value)}>
            {FORMAS_PAGAMENTO.map(f => <option key={f} value={f}>{f}</option>)}
          </select></div>
        <div className="field"><label>Valor (R$)</label>
          <input className="input" type="number" step="0.01" placeholder="0,00" value={d.valor || ''} onChange={e => set('valor', e.target.value)} /></div>
        <div className="field"><label>Valor recebido (R$)</label>
          <input className="input" type="number" step="0.01" placeholder="0,00" value={d.valor_recebido || d.recebido || ''} onChange={e => set('valor_recebido', e.target.value)} /></div>
        <div className="field"><label>Status</label>
          <select className="input" value={d.status || 'Em aberto'} onChange={e => set('status', e.target.value)}>
            <option value="Em aberto">Em aberto</option>
            <option value="Parcial">Parcial</option>
            <option value="Recebido">Recebido</option>
            <option value="Vencido">Vencido</option>
          </select></div>
      </DrawerSection>

      {parcelasGrupo.length > 1 && <TimelineParcela parcelas={parcelasGrupo} />}

      <div className="field span-2" style={{ marginTop: 0 }}><label>Observações</label>
        <textarea className="input" rows={2} placeholder="Anotações sobre este título…" value={d.observacoes || ''} onChange={e => set('observacoes', e.target.value)} /></div>
    </Drawer>
  );
}

// ─── Conta a Pagar Form ──────────────────────────────────────────────────────

function ContaPagForm({ edit, set, onSave, onCancel, onDelete }) {
  if (!edit) return null;
  const d = edit.draft;
  const isNew = edit.mode === 'new';

  return (
    <Drawer open={true} title={isNew ? 'Nova despesa' : 'Editar despesa'}
      onClose={onCancel}
      footer={<>
        {!isNew && onDelete && <Button variant="danger-ghost" size="sm" icon="trash-2" onClick={onDelete}>Excluir</Button>}
        <span style={{ flex: 1 }} />
        <Button variant="secondary" size="sm" onClick={onCancel}>Cancelar</Button>
        <Button variant="primary" size="sm" icon="check" onClick={onSave}>Salvar</Button>
      </>}>

      <DrawerSection title="Dados básicos">
        <div className="field"><label>Referência</label>
          <input className="input" placeholder="NF-001, BOL-123…" value={d.referencia || d.ref || ''} onChange={e => set('referencia', e.target.value)} /></div>
        <div className="field"><label>Fornecedor</label>
          <input className="input" placeholder="Nome do fornecedor" value={d.fornecedor || d.forn || ''} onChange={e => set('fornecedor', e.target.value)} /></div>
        <div className="field"><label>Categoria</label>
          <select className="input" value={d.categoria || d.cat || ''} onChange={e => set('categoria', e.target.value)}>
            <option value="">Selecione…</option>
            {CATEGORIAS_DESPESA.map(c => <option key={c} value={c}>{c}</option>)}
          </select></div>
        <div className="field"><label>Forma de pagamento</label>
          <select className="input" value={d.forma_pagamento || 'Boleto'} onChange={e => set('forma_pagamento', e.target.value)}>
            {FORMAS_PAGAMENTO.map(f => <option key={f} value={f}>{f}</option>)}
          </select></div>
      </DrawerSection>

      <DrawerSection title="Datas">
        <div className="field"><label>Data emissão</label>
          <input className="input" type="date" value={(d.data_emissao || d.dataEmissao || '').slice(0, 10)} onChange={e => set('data_emissao', e.target.value)} /></div>
        <div className="field"><label>Vencimento</label>
          <input className="input" type="date" value={(d.vencimento || '').slice(0, 10)} onChange={e => set('vencimento', e.target.value)} /></div>
        <div className="field"><label>Data pagamento</label>
          <input className="input" type="date" value={(d.data_pagamento || d.dataPagamento || '').slice(0, 10)} onChange={e => set('data_pagamento', e.target.value)} /></div>
      </DrawerSection>

      <DrawerSection title="Financeiro">
        <div className="field"><label>Valor (R$)</label>
          <input className="input" type="number" step="0.01" placeholder="0,00" value={d.valor || ''} onChange={e => set('valor', e.target.value)} /></div>
        <div className="field"><label>Status</label>
          <select className="input" value={d.status || 'Em aberto'} onChange={e => set('status', e.target.value)}>
            <option value="Em aberto">Em aberto</option>
            <option value="Pago">Pago</option>
          </select></div>
      </DrawerSection>

      <DrawerSection title="Recorrência">
        <div className="field">
          <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <input type="checkbox" checked={d.recorrente || d.recorrenteFlag || false}
              onChange={e => set('recorrente', e.target.checked)} style={{ accentColor: 'var(--tm-brand-champagne)' }} />
            Despesa recorrente
          </label>
        </div>
        {(d.recorrente || d.recorrenteFlag) && <>
          <div className="field"><label>Frequência</label>
            <select className="input" value={d.recorrencia_tipo || d.recorrenciaTipo || 'mensal'} onChange={e => set('recorrencia_tipo', e.target.value)}>
              <option value="semanal">Semanal</option>
              <option value="mensal">Mensal</option>
              <option value="anual">Anual</option>
            </select></div>
          <div className="field"><label>Fim da recorrência</label>
            <input className="input" type="date" value={(d.recorrencia_fim || d.recorrenciaFim || '').slice(0, 10)} onChange={e => set('recorrencia_fim', e.target.value)} /></div>
        </>}
      </DrawerSection>

      <div className="field span-2" style={{ marginTop: 0 }}><label>Observações</label>
        <textarea className="input" rows={2} placeholder="Anotações…" value={d.observacoes || ''} onChange={e => set('observacoes', e.target.value)} /></div>
    </Drawer>
  );
}

// ─── Parcelamento Modal ──────────────────────────────────────────────────────

function ParcelamentoModal({ valor, vencimento, clienteNome, pedidoRef, formaPagamento, onConfirm, onCancel }) {
  const [numParcelas, setNumParcelas] = React.useState(3);
  const [intervalo, setIntervalo] = React.useState(30);

  const valorTotal = parseFloat(valor) || 0;
  const valorParcela = numParcelas > 0 ? Math.round((valorTotal / numParcelas) * 100) / 100 : 0;

  const parcelas = [];
  for (let i = 0; i < numParcelas; i++) {
    const venc = addDaysIso(vencimento || new Date().toISOString().slice(0, 10), i * intervalo);
    const vp = i === numParcelas - 1 ? valorTotal - (valorParcela * (numParcelas - 1)) : valorParcela;
    parcelas.push({ num: i + 1, vencimento: venc, valor: vp });
  }

  const handleConfirm = () => {
    const grupoParcela = crypto.randomUUID();
    const records = parcelas.map(p => ({
      referencia: `${pedidoRef || 'PARC'}/${p.num}`,
      cliente_nome: clienteNome || '',
      pedido_ref: pedidoRef || '',
      vencimento: p.vencimento,
      parcela: `${p.num}/${numParcelas}`,
      valor: p.valor,
      valor_recebido: 0,
      status: 'Em aberto',
      forma_pagamento: formaPagamento || 'Boleto',
      grupo_parcela: grupoParcela,
      total_parcelas: numParcelas,
      numero_parcela: p.num,
    }));
    onConfirm(records);
  };

  return (
    <Drawer open={true} title="Parcelar título" width={480} onClose={onCancel}
      footer={<>
        <span style={{ flex: 1 }} />
        <Button variant="secondary" size="sm" onClick={onCancel}>Cancelar</Button>
        <Button variant="primary" size="sm" icon="check" onClick={handleConfirm}>Criar {numParcelas} parcelas</Button>
      </>}>

      <div style={{ marginBottom: 16, padding: 12, background: 'var(--tm-bg-2)', borderRadius: 8 }}>
        <div style={{ fontSize: 13, color: 'var(--tm-fg-2)', marginBottom: 4 }}>Valor total</div>
        <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--tm-fg-1)' }}>R$ {brl(valorTotal)}</div>
      </div>

      <div className="form-grid" style={{ marginBottom: 16 }}>
        <div className="field"><label>Nº de parcelas</label>
          <select className="input" value={numParcelas} onChange={e => setNumParcelas(parseInt(e.target.value))}>
            {[2,3,4,5,6,7,8,9,10,12,15,18,24].map(n => <option key={n} value={n}>{n}x</option>)}
          </select></div>
        <div className="field"><label>Intervalo (dias)</label>
          <select className="input" value={intervalo} onChange={e => setIntervalo(parseInt(e.target.value))}>
            <option value="7">7 dias</option>
            <option value="14">14 dias</option>
            <option value="15">15 dias</option>
            <option value="30">30 dias</option>
            <option value="45">45 dias</option>
            <option value="60">60 dias</option>
            <option value="90">90 dias</option>
          </select></div>
      </div>

      <div style={{ fontSize: 10.5, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--tm-fg-4)', marginBottom: 8 }}>
        Preview das parcelas
      </div>
      <table className="tbl" style={{ fontSize: 12.5 }}>
        <thead><tr><th>Parcela</th><th>Vencimento</th><th className="num right">Valor</th></tr></thead>
        <tbody>
          {parcelas.map(p => (
            <tr key={p.num}>
              <td>{p.num}/{numParcelas}</td>
              <td>{new Date(p.vencimento + 'T12:00:00').toLocaleDateString('pt-BR')}</td>
              <td className="num right">R$ {brl(p.valor)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </Drawer>
  );
}

// ─── Exports ─────────────────────────────────────────────────────────────────

Object.assign(window, {
  BLANK_CONTA_REC, BLANK_CONTA_PAG,
  ContaRecForm, ContaPagForm, ParcelamentoModal,
});