// Caririaçu Guincho — Tab Receita (read-only)

const { useState: useStateTR, useEffect: useEffectTR, useMemo: useMemoTR } = React;

const TabReceita = ({ guincho, periodo }) => {
  const [items, setItems] = useStateTR([]);
  const [loading, setLoading] = useStateTR(true);

  useEffectTR(() => {
    let alive = true;
    sb.from('assistencias').select('*')
      .eq('guincho_id', guincho.id)
      .eq('status', 'finalizada')
      .gte('data', periodo.inicio)
      .lte('data', periodo.fim + 'T23:59:59')
      .order('data', { ascending: false })
      .then(r => {
        if (!alive) return;
        setItems(r.data || []);
        setLoading(false);
      });
    return () => { alive = false; };
  }, [guincho.id, periodo.inicio, periodo.fim]);

  const metricas = useMemoTR(() => {
    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, count: items.length };
  }, [items, periodo]);

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

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

      <div style={{
        background: '#FEF3C7', border: '1px solid #FCD34D', borderRadius: 8,
        padding: 10, marginBottom: 12, fontSize: 11, color: '#92400E'
      }}>
        ℹ️ Receita é calculada a partir das assistências finalizadas. Para criar/editar use a tela <strong>Assistências</strong>.
      </div>

      <div style={{ background: '#fff', border: '1px solid #E2E8F0', borderRadius: 10, overflow: 'hidden' }}>
        {items.length === 0 ? (
          <div style={{ color: '#94A3B8', textAlign: 'center', padding: 24 }}>
            Nenhuma assistência finalizada no período.
          </div>
        ) : items.map(x => (
          <div key={x.id} style={{
            padding: 12, borderBottom: '1px solid #F1F5F9',
            display: 'flex', justifyContent: 'space-between', gap: 12
          }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: '#0F172A' }}>
                {x.numero} · {x.cliente || '—'}
              </div>
              <div style={{ fontSize: 11, color: '#64748B', marginTop: 2 }}>
                {new Date(x.data).toLocaleDateString('pt-BR')} · {x.servico || '—'}
                {x.placa && ` · ${x.placa}`}
              </div>
            </div>
            <div style={{ fontSize: 14, fontWeight: 700, color: '#10B981' }}>{fmtBRL(x.valor)}</div>
          </div>
        ))}
      </div>
    </>
  );
};

Object.assign(window, { TabReceita });