// Caririaçu Guincho — Tab Serviço (manutencoes existente, adaptado)

const { useState: useStateTS, useEffect: useEffectTS, useMemo: useMemoTS } = React;

const TabServico = ({ guincho, periodo }) => {
  const [items, setItems] = useStateTS([]);
  const [novoOpen, setNovoOpen] = useStateTS(false);
  const [tick, setTick] = useStateTS(0);

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

  const metricas = useMemoTS(() => {
    const total = items.reduce((s, x) => s + Number(x.valor || 0), 0);
    const preventivas = items.filter(x => x.tipo === 'Preventiva').length;
    const corretivas = items.filter(x => x.tipo === 'Corretiva').length;
    return { total, count: items.length, preventivas, corretivas };
  }, [items]);

  const excluir = async (item) => {
    if (!confirm(`Excluir manutenção "${item.descricao}"?`)) return;
    const ok = await db.remove('manutencoes', item.id);
    if (!ok) return;
    setTick(t => t + 1);
    showToast('Manutenção excluída', 'info');
  };

  return (
    <>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginBottom: 12 }}>
        <MetricCard label="Total gasto" total={metricas.total} color="#3B82F6" />
        <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 }}>Preventivas</div>
          <div style={{ fontSize: 18, fontWeight: 700, color: '#10B981', marginTop: 4 }}>{metricas.preventivas}</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 }}>Corretivas</div>
          <div style={{ fontSize: 18, fontWeight: 700, color: '#F59E0B', marginTop: 4 }}>{metricas.corretivas}</div>
        </div>
      </div>

      <div style={{ background: '#fff', border: '1px solid #E2E8F0', borderRadius: 10, overflow: 'hidden' }}>
        {items.length === 0 ? (
          <div style={{ color: '#94A3B8', textAlign: 'center', padding: 24 }}>
            Nenhum serviço registrado 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.descricao}
              </div>
              <div style={{ fontSize: 11, color: '#64748B', marginTop: 2 }}>
                {new Date(x.data).toLocaleDateString('pt-BR')} · {x.tipo}
                {x.oficina && ` · ${x.oficina}`}
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6 }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: '#3B82F6' }}>{fmtBRL(x.valor)}</div>
              <button onClick={() => excluir(x)} style={{
                background: 'none', border: 'none', cursor: 'pointer',
                color: '#EF4444', fontSize: 11
              }}>Excluir</button>
            </div>
          </div>
        ))}
      </div>

      <FabAdicionar onClick={() => setNovoOpen(true)} />

      {novoOpen && (
        <NovaManutencaoModal
          open={novoOpen}
          item={guincho}
          onClose={() => setNovoOpen(false)}
          onSaved={() => { setTick(t => t + 1); setNovoOpen(false); }}
        />
      )}
    </>
  );
};

Object.assign(window, { TabServico });