// Caririaçu Guincho — Tab Abastecimento

const { useState: useStateTA, useEffect: useEffectTA, useMemo: useMemoTA } = React;

const TabAbastecimento = ({ guincho, periodo }) => {
  const [items, setItems] = useStateTA([]);
  const [combustiveis, setCombustiveis] = useStateTA([]);
  const [postos, setPostos] = useStateTA([]);
  const [edit, setEdit] = useStateTA(null);
  const [tick, setTick] = useStateTA(0);

  useEffectTA(() => {
    sb.from('abastecimentos').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]);

  useEffectTA(() => {
    db.list('combustiveis', { eq: { ativo: true }, order: 'nome', asc: true }).then(setCombustiveis);
    db.list('postos', { eq: { ativo: true }, order: 'nome', asc: true }).then(setPostos);
  }, []);

  // calcula consumo desde o último tanque cheio para cada abastecimento
  const itemsComConsumo = useMemoTA(() => {
    const byKm = [...items].sort((a, b) => a.km - b.km);
    const out = byKm.map((x, i) => {
      if (!x.tanque_cheio) return { ...x, consumo: null };
      const anterior = byKm.slice(0, i).reverse().find(y => y.tanque_cheio);
      if (!anterior) return { ...x, consumo: null };
      const litrosEntre = byKm
        .filter(y => y.km > anterior.km && y.km <= x.km)
        .reduce((s, y) => s + Number(y.litros), 0);
      const kmEntre = x.km - anterior.km;
      return { ...x, consumo: (litrosEntre > 0 && kmEntre > 0) ? kmEntre / litrosEntre : null };
    });
    return out.sort((a, b) => new Date(b.data) - new Date(a.data));
  }, [items]);

  const metricas = useMemoTA(() => {
    const total = items.reduce((s, x) => s + Number(x.valor_total || 0), 0);
    const volume = items.reduce((s, x) => s + Number(x.litros || 0), 0);
    const consumos = itemsComConsumo.map(x => x.consumo).filter(c => c != null);
    const consumoMedio = consumos.length ? consumos.reduce((s, c) => s + c, 0) / consumos.length : null;
    const kms = items.map(x => Number(x.km)).filter(k => k > 0).sort((a, b) => a - b);
    const kmRodado = kms.length >= 2 ? kms[kms.length - 1] - kms[0] : 0;
    return { total, volume, consumoMedio, custoKm: kmRodado ? total / kmRodado : null };
  }, [items, itemsComConsumo]);

  const dadosGrafico = useMemoTA(() => {
    const out = {};
    items.forEach(x => {
      const k = x.data.slice(0, 7);
      out[k] = out[k] || { valor: 0 };
      out[k].valor += Number(x.valor_total || 0);
    });
    return out;
  }, [items]);

  const novo = () => setEdit({
    data: new Date().toISOString().slice(0, 16),
    combustivel_id: combustiveis[0]?.id || null,
    combustivel: combustiveis[0]?.nome || '',
    litros: '', valor_litro: '', valor_total: '',
    km: guincho.km_atual || 0,
    tanque_cheio: true,
    posto_id: null, posto: '',
    forma_pagto: '', obs: ''
  });

  const salvar = async () => {
    if (!edit.litros || !edit.valor_total || !edit.km) {
      showToast('Preencha litros, valor total e km', 'warning'); return;
    }
    const payload = {
      ...edit,
      guincho_id: guincho.id,
      litros: parseFloat(edit.litros),
      valor_litro: parseFloat(edit.valor_litro || (edit.valor_total / edit.litros)),
      valor_total: parseFloat(edit.valor_total),
      km: parseInt(edit.km),
    };
    const result = edit.id
      ? await db.update('abastecimentos', edit.id, payload)
      : await db.insert('abastecimentos', payload);
    if (!result) return;
    setEdit(null); setTick(t => t + 1);
    showToast('Abastecimento salvo', 'success');
  };

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

  return (
    <>
      {/* Cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8, marginBottom: 12 }}>
        <MetricCard label="Total gasto" total={metricas.total} color="#F59E0B" />
        <div style={{ background: '#fff', border: '1px solid #E2E8F0', borderRadius: 10, padding: 12 }}>
          <div style={{ fontSize: 10, color: '#64748B', textTransform: 'uppercase', letterSpacing: 0.5, fontWeight: 600 }}>Volume / Consumo</div>
          <div style={{ fontSize: 14, fontWeight: 700, color: '#0F172A', marginTop: 4 }}>
            {metricas.volume.toFixed(1).replace('.', ',')} L
          </div>
          <div style={{ fontSize: 11, color: '#94A3B8', marginTop: 2 }}>
            Média: {fmtKML(metricas.consumoMedio)}<br />
            Custo/km: {metricas.custoKm != null ? fmtBRL(metricas.custoKm) : '—'}
          </div>
        </div>
      </div>

      {/* Gráfico */}
      <div style={{ background: '#fff', border: '1px solid #E2E8F0', borderRadius: 10, padding: 12, marginBottom: 12 }}>
        <div style={{ fontSize: 12, fontWeight: 600, color: '#0F172A', marginBottom: 10 }}>Gastos mensais com combustível</div>
        {Object.keys(dadosGrafico).length === 0 ? (
          <div style={{ color: '#94A3B8', fontSize: 12 }}>Sem dados no período.</div>
        ) : (
          <GraficoBarrasMensal dados={dadosGrafico} series={[
            { key: 'valor', label: 'Total', color: '#F59E0B' }
          ]} height={160} />
        )}
      </div>

      {/* Lista */}
      <div style={{ background: '#fff', border: '1px solid #E2E8F0', borderRadius: 10, overflow: 'hidden' }}>
        {itemsComConsumo.length === 0 ? (
          <div style={{ color: '#94A3B8', textAlign: 'center', padding: 24 }}>
            Nenhum abastecimento. Clique no + pra adicionar.
          </div>
        ) : itemsComConsumo.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.combustivel || '—'} · {x.posto || 'Posto'}
              </div>
              <div style={{ fontSize: 11, color: '#64748B', marginTop: 2 }}>
                {new Date(x.data).toLocaleDateString('pt-BR')} · {x.litros}L · {fmtKM(x.km)}
                {x.consumo != null && ` · ${fmtKML(x.consumo)}`}
                {!x.tanque_cheio && ' · parcial'}
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: '#F59E0B' }}>{fmtBRL(x.valor_total)}</div>
              <div style={{ fontSize: 10, color: '#94A3B8' }}>{fmtBRL(x.valor_litro)}/L</div>
            </div>
          </div>
        ))}
      </div>

      <FabAdicionar onClick={novo} />

      {edit && (
        <Modal open={true} onClose={() => setEdit(null)}
               title={edit.id ? 'Editar abastecimento' : 'Novo abastecimento'} width={500}>
          <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="Combustível" value={edit.combustivel_id || ''}
                      onChange={e => {
                        const c = combustiveis.find(c => String(c.id) === e.target.value);
                        setEdit({ ...edit, combustivel_id: c?.id || null, combustivel: c?.nome || '' });
                      }}
                      options={combustiveis.map(c => ({ value: c.id, label: c.nome }))} />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
              <Input label="Litros" type="number" step="0.001" value={edit.litros}
                     onChange={e => {
                       const l = e.target.value;
                       const vt = parseFloat(edit.valor_total);
                       const vl = (l && vt) ? (vt / parseFloat(l)).toFixed(3) : edit.valor_litro;
                       setEdit({ ...edit, litros: l, valor_litro: vl });
                     }} />
              <Input label="Valor/L" type="number" step="0.001" value={edit.valor_litro}
                     onChange={e => {
                       const vl = e.target.value;
                       const l = parseFloat(edit.litros);
                       const vt = (l && vl) ? (l * parseFloat(vl)).toFixed(2) : edit.valor_total;
                       setEdit({ ...edit, valor_litro: vl, valor_total: vt });
                     }} />
              <Input label="Valor total" type="number" step="0.01" value={edit.valor_total}
                     onChange={e => {
                       const vt = e.target.value;
                       const l = parseFloat(edit.litros);
                       const vl = (l && vt) ? (parseFloat(vt) / l).toFixed(3) : edit.valor_litro;
                       setEdit({ ...edit, valor_total: vt, valor_litro: vl });
                     }} />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <Input label="Odômetro (km)" type="number" value={edit.km}
                     onChange={e => setEdit({ ...edit, km: e.target.value })} />
              <Select label="Posto (opcional)" value={edit.posto_id || ''}
                      onChange={e => {
                        const p = postos.find(p => String(p.id) === e.target.value);
                        setEdit({ ...edit, posto_id: p?.id || null, posto: p?.nome || '' });
                      }}
                      options={[{ value: '', label: '—' }, ...postos.map(p => ({ value: p.id, label: p.nome }))]} />
            </div>
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
              <input type="checkbox" checked={!!edit.tanque_cheio}
                     onChange={e => setEdit({ ...edit, tanque_cheio: e.target.checked })} />
              Tanque cheio (necessário pra calcular consumo)
            </label>
            <Input label="Observação (opcional)" 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, { TabAbastecimento });