// Caririaçu Guincho — Tab Geral (dashboard do veículo)

const { useState: useStateTG, useEffect: useEffectTG, useMemo: useMemoTG } = React;

const TabGeral = ({ guincho, periodo }) => {
  const [dados, setDados] = useStateTG({ abast: [], desp: [], serv: [], rec: [] });
  const [loading, setLoading] = useStateTG(true);

  useEffectTG(() => {
    let alive = true;
    (async () => {
      setLoading(true);
      const range = { gte: periodo.inicio, lte: periodo.fim + 'T23:59:59' };
      const [abast, desp, serv, rec] = await Promise.all([
        sb.from('abastecimentos').select('*')
          .eq('guincho_id', guincho.id).gte('data', range.gte).lte('data', range.lte),
        sb.from('despesas_veiculo').select('*')
          .eq('guincho_id', guincho.id).gte('data', range.gte).lte('data', range.lte),
        sb.from('manutencoes').select('*')
          .eq('guincho_id', guincho.id).gte('data', periodo.inicio).lte('data', periodo.fim),
        sb.from('assistencias').select('*')
          .eq('guincho_id', guincho.id).eq('status', 'finalizada')
          .gte('data', range.gte).lte('data', range.lte),
      ]);
      if (!alive) return;
      setDados({
        abast: abast.data || [],
        desp: desp.data || [],
        serv: serv.data || [],
        rec: rec.data || [],
      });
      setLoading(false);
    })();
    return () => { alive = false; };
  }, [guincho.id, periodo.inicio, periodo.fim]);

  const metricas = useMemoTG(() => {
    const sumAbast = dados.abast.reduce((s, x) => s + Number(x.valor_total || 0), 0);
    const sumDesp = dados.desp.reduce((s, x) => s + Number(x.valor || 0), 0);
    const sumServ = dados.serv.reduce((s, x) => s + Number(x.valor || 0), 0);
    const sumRec = dados.rec.reduce((s, x) => s + Number(x.valor || 0), 0);
    const custo = sumAbast + sumDesp + sumServ;
    const saldo = sumRec - custo;
    const dias = Math.max(1, Math.ceil((new Date(periodo.fim) - new Date(periodo.inicio)) / 86400000));
    const kms = dados.abast.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;
    const volume = dados.abast.reduce((s, x) => s + Number(x.litros || 0), 0);
    const consumo = kmRodado > 0 && volume > 0 ? kmRodado / volume : null;
    return {
      sumAbast, sumDesp, sumServ, sumRec, custo, saldo, dias,
      kmRodado, volume, consumo,
      saldoPorDia: saldo / dias, saldoPorKm: kmRodado ? saldo / kmRodado : null,
      custoPorDia: custo / dias, custoPorKm: kmRodado ? custo / kmRodado : null,
      recPorDia: sumRec / dias, recPorKm: kmRodado ? sumRec / kmRodado : null,
    };
  }, [dados, periodo]);

  const dadosGrafico = useMemoTG(() => {
    const out = {};
    const add = (data, key, val) => {
      const k = data.slice(0, 7); // YYYY-MM
      out[k] = out[k] || { abast: 0, desp: 0, receita: 0 };
      out[k][key] += Number(val || 0);
    };
    dados.abast.forEach(x => add(x.data, 'abast', x.valor_total));
    dados.desp.forEach(x => add(x.data, 'desp', x.valor));
    dados.rec.forEach(x => add(x.data, 'receita', x.valor));
    return out;
  }, [dados]);

  if (loading) return <div style={{ color: '#94A3B8', padding: 12 }}>Carregando…</div>;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {/* 3 cards principais */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
        <MetricCard label="Saldo" total={metricas.saldo}
                    porDia={metricas.saldoPorDia} porKm={metricas.saldoPorKm}
                    color={metricas.saldo >= 0 ? '#10B981' : '#EF4444'} />
        <MetricCard label="Custo" total={metricas.custo}
                    porDia={metricas.custoPorDia} porKm={metricas.custoPorKm}
                    color="#F59E0B" />
        <MetricCard label="Receita" total={metricas.sumRec}
                    porDia={metricas.recPorDia} porKm={metricas.recPorKm}
                    color="#10B981" />
      </div>

      {/* Divisão de custos */}
      <div style={{ background: '#fff', border: '1px solid #E2E8F0', borderRadius: 10, padding: 12 }}>
        <div style={{ fontSize: 12, fontWeight: 600, color: '#0F172A', marginBottom: 10 }}>Divisão de custos</div>
        {metricas.custo === 0 ? (
          <div style={{ color: '#94A3B8', fontSize: 12 }}>Sem custos no período.</div>
        ) : (
          <>
            <div style={{ display: 'flex', height: 10, borderRadius: 5, overflow: 'hidden' }}>
              <div style={{ flex: metricas.sumAbast, background: '#F59E0B' }} />
              <div style={{ flex: metricas.sumDesp, background: '#EF4444' }} />
              <div style={{ flex: metricas.sumServ, background: '#3B82F6' }} />
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 10, color: '#64748B' }}>
              <span>⛽ Abast. <strong style={{ color: '#0F172A' }}>{((metricas.sumAbast / metricas.custo) * 100).toFixed(0)}%</strong></span>
              <span>🧾 Desp. <strong style={{ color: '#0F172A' }}>{((metricas.sumDesp / metricas.custo) * 100).toFixed(0)}%</strong></span>
              <span>🔧 Serv. <strong style={{ color: '#0F172A' }}>{((metricas.sumServ / metricas.custo) * 100).toFixed(0)}%</strong></span>
            </div>
          </>
        )}
      </div>

      {/* Gráfico mensal */}
      <div style={{ background: '#fff', border: '1px solid #E2E8F0', borderRadius: 10, padding: 12 }}>
        <div style={{ fontSize: 12, fontWeight: 600, color: '#0F172A', marginBottom: 10 }}>Despesas × Receitas (mensal)</div>
        {Object.keys(dadosGrafico).length === 0 ? (
          <div style={{ color: '#94A3B8', fontSize: 12 }}>Sem dados no período.</div>
        ) : (
          <GraficoBarrasMensal dados={dadosGrafico} series={[
            { key: 'abast',   label: 'Abast.',  color: '#F59E0B' },
            { key: 'desp',    label: 'Desp.',   color: '#EF4444' },
            { key: 'receita', label: 'Receita', color: '#10B981' },
          ]} height={200} />
        )}
      </div>

      {/* Distância + Combustível */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        <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 }}>Distância</div>
          <div style={{ fontSize: 18, fontWeight: 700, color: '#0F172A', marginTop: 4 }}>{fmtKM(metricas.kmRodado)}</div>
          <div style={{ fontSize: 10, color: '#94A3B8', marginTop: 2 }}>
            no período · km atual: {fmtKM(guincho.km_atual)}
          </div>
        </div>
        <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 }}>Combustível</div>
          <div style={{ fontSize: 18, fontWeight: 700, color: '#0F172A', marginTop: 4 }}>{fmtKML(metricas.consumo)}</div>
          <div style={{ fontSize: 10, color: '#94A3B8', marginTop: 2 }}>
            {metricas.volume.toFixed(1).replace('.', ',')} L total
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { TabGeral });