// Caririaçu Guincho — Tab Despesa

const { useState: useStateTD, useEffect: useEffectTD, useMemo: useMemoTD } = React;

const TabDespesa = ({ guincho, periodo }) => {
  const [items, setItems] = useStateTD([]);
  const [tipos, setTipos] = useStateTD([]);
  const [edit, setEdit] = useStateTD(null);
  const [tick, setTick] = useStateTD(0);

  useEffectTD(() => {
    sb.from('despesas_veiculo').select('*')
      .eq('guincho_id', guincho.id)
      .gte('data', periodo.inicio)
      .lte('data', periodo.fim + 'T23:59:59')
      .order('data', { ascending: false })
      .then(r => setItems(r.data || []));
  }, [guincho.id, periodo.inicio, periodo.fim, tick]);

  useEffectTD(() => {
    db.list('tipos_despesa', { eq: { ativo: true }, order: 'nome', asc: true }).then(setTipos);
  }, []);

  const metricas = useMemoTD(() => {
    const total = items.reduce((s, x) => s + Number(x.valor || 0), 0);
    const dias = Math.max(1, Math.ceil((new Date(periodo.fim) - new Date(periodo.inicio)) / 86400000));
    return { total, porDia: total / dias };
  }, [items, periodo]);

  const porTipo = useMemoTD(() => {
    const map = {};
    items.forEach(x => {
      const k = x.tipo || 'Outros';
      map[k] = (map[k] || 0) + Number(x.valor || 0);
    });
    return Object.entries(map).sort((a, b) => b[1] - a[1]);
  }, [items]);

  const novo = () => setEdit({
    data: new Date().toISOString().slice(0, 16),
    tipo_id: tipos[0]?.id || null,
    tipo: tipos[0]?.nome || '',
    valor: '', km: guincho.km_atual || '',
    forma_pagto: '', obs: ''
  });

  const salvar = async () => {
    if (!edit.valor || !edit.tipo) {
      showToast('Preencha tipo e valor', 'warning'); return;
    }
    const payload = {
      ...edit, guincho_id: guincho.id,
      valor: parseFloat(edit.valor),
      km: edit.km ? parseInt(edit.km) : null,
    };
    const result = edit.id
      ? await db.update('despesas_veiculo', edit.id, payload)
      : await db.insert('despesas_veiculo', payload);
    if (!result) return;
    setEdit(null); setTick(t => t + 1);
    showToast('Despesa salva', 'success');
  };

  const excluir = async () => {
    if (!confirm('Excluir esta despesa? A transação financeira vinculada também será removida.')) return;
    const ok = await db.remove('despesas_veiculo', edit.id);
    if (!ok) return;
    setEdit(null); setTick(t => t + 1);
    showToast('Despesa excluída', 'info');
  };

  const maxValor = Math.max(1, ...porTipo.map(p => p[1]));

  return (
    <>
      {/* Cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8, marginBottom: 12 }}>
        <MetricCard label="Total" total={metricas.total} color="#EF4444" />
        <MetricCard label="Por dia" total={metricas.porDia} color="#0F172A" />
      </div>

      {/* Gráfico por tipo (barras horizontais) */}
      <div style={{ background: '#fff', border: '1px solid #E2E8F0', borderRadius: 10, padding: 12, marginBottom: 12 }}>
        <div style={{ fontSize: 12, fontWeight: 600, color: '#0F172A', marginBottom: 10 }}>Despesas por tipo</div>
        {porTipo.length === 0 ? (
          <div style={{ color: '#94A3B8', fontSize: 12 }}>Sem dados no período.</div>
        ) : porTipo.map(([tipo, valor]) => (
          <div key={tipo} style={{ marginBottom: 8 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: '#475569', marginBottom: 3 }}>
              <span>{tipo}</span><span style={{ fontWeight: 600 }}>{fmtBRL(valor)}</span>
            </div>
            <div style={{ background: '#F1F5F9', height: 8, borderRadius: 4, overflow: 'hidden' }}>
              <div style={{ background: '#EF4444', height: '100%', width: ((valor / maxValor) * 100) + '%' }} />
            </div>
          </div>
        ))}
      </div>

      {/* Lista */}
      <div style={{ background: '#fff', border: '1px solid #E2E8F0', borderRadius: 10, overflow: 'hidden' }}>
        {items.length === 0 ? (
          <div style={{ color: '#94A3B8', textAlign: 'center', padding: 24 }}>
            Nenhuma despesa. Clique no + pra adicionar.
          </div>
        ) : items.map(x => (
          <div key={x.id} onClick={() => setEdit({ ...x, data: x.data.slice(0, 16) })}
               style={{
                 padding: 12, borderBottom: '1px solid #F1F5F9', cursor: 'pointer',
                 display: 'flex', justifyContent: 'space-between', gap: 12
               }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: '#0F172A' }}>{x.tipo || '—'}</div>
              <div style={{ fontSize: 11, color: '#64748B', marginTop: 2 }}>
                {new Date(x.data).toLocaleDateString('pt-BR')}
                {x.km && ` · ${fmtKM(x.km)}`}
                {x.obs && ` · ${x.obs}`}
              </div>
            </div>
            <div style={{ fontSize: 14, fontWeight: 700, color: '#EF4444' }}>{fmtBRL(x.valor)}</div>
          </div>
        ))}
      </div>

      <FabAdicionar onClick={novo} />

      {edit && (
        <Modal open={true} onClose={() => setEdit(null)}
               title={edit.id ? 'Editar despesa' : 'Nova despesa'} width={460}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <Input label="Data/Hora" type="datetime-local" value={edit.data}
                     onChange={e => setEdit({ ...edit, data: e.target.value })} />
              <Select label="Tipo" value={edit.tipo_id || ''}
                      onChange={e => {
                        const t = tipos.find(t => String(t.id) === e.target.value);
                        setEdit({ ...edit, tipo_id: t?.id || null, tipo: t?.nome || '' });
                      }}
                      options={tipos.map(t => ({ value: t.id, label: t.nome }))} />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <Input label="Valor" type="number" step="0.01" value={edit.valor}
                     onChange={e => setEdit({ ...edit, valor: e.target.value })} />
              <Input label="Odômetro (km, opcional)" type="number" value={edit.km || ''}
                     onChange={e => setEdit({ ...edit, km: e.target.value })} />
            </div>
            <Input label="Observação" value={edit.obs || ''}
                   onChange={e => setEdit({ ...edit, obs: e.target.value })} />
            <div style={{ display: 'flex', gap: 10, justifyContent: 'space-between',
                          paddingTop: 8, borderTop: '1px solid #F1F5F9' }}>
              {edit.id ? <Btn variant="danger" onClick={excluir}>Excluir</Btn> : <div />}
              <div style={{ display: 'flex', gap: 10 }}>
                <Btn variant="secondary" onClick={() => setEdit(null)}>Cancelar</Btn>
                <Btn variant="primary" icon="check" onClick={salvar}>Salvar</Btn>
              </div>
            </div>
          </div>
        </Modal>
      )}
    </>
  );
};

Object.assign(window, { TabDespesa });