// js/components/widgets/orcamentos-cancel-insights/CancelTimeline.jsx
// [Wave 37 v224.18 NUCLEAR EXTRACT 2026-05-24] Sparkline cancelamentos 30d · PRIVACY: só admin (v223.32)
// Extract LITERAL OrcamentosCancelInsights L297-327
//
// Props:
//   - data (obj) — timeline array + maxTimelineQty
//   - isVendedor (bool) — privacy filter
//
// Deps lazy: window.fmt + ZNX.lib['orcamentos-cancel-insights'].calcs.fmtDateBr
(function(){
  'use strict';
  function CancelTimeline(props){
    const fmt = window.fmt;
    const calcs = window.ZNX && window.ZNX.lib && window.ZNX.lib['orcamentos-cancel-insights'] && window.ZNX.lib['orcamentos-cancel-insights'].calcs;
    if(typeof fmt !== 'function' || !calcs){
      console.error('[CancelTimeline] deps faltando: fmt='+!!fmt+', calcs='+!!calcs);
      return null;
    }
    const { data, isVendedor } = props;
    // [v223.32 PRIVACY] esconde pra vendedora
    if(isVendedor) return null;
    const fmtDateBr = calcs.fmtDateBr;
    const todayKey = new Date().toISOString().slice(0, 10);
    return (
      <div className="card">
        <div style={{ fontSize: 14, fontWeight: 700, color: '#1B2A4A', marginBottom: 14 }}>
          📅 Cancelamentos nos últimos 30 dias
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 2, height: 100, padding: '0 4px' }}>
          {data.timeline.map(function(t){
            const h = data.maxTimelineQty > 0 ? (t.qty / data.maxTimelineQty * 90) : 0;
            const isToday = t.date === todayKey;
            return (
              <div key={t.date} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3 }}
                title={fmtDateBr(t.date)+': '+t.qty+' cancelado'+(t.qty === 1 ? '' : 's')+' · '+fmt(t.total)}>
                <div style={{
                  width: '100%', maxWidth: 18, minHeight: t.qty > 0 ? 4 : 0,
                  height: h + 'px',
                  background: t.qty > 0 ? (isToday ? '#DC2626' : '#F87171') : '#F3F4F6',
                  borderRadius: '3px 3px 0 0',
                  transition: 'height .3s',
                }} />
              </div>
            );
          })}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: '#9CA3AF', marginTop: 6, padding: '0 4px' }}>
          <span>30 dias atrás</span>
          <span>{data.timeline.length} dias</span>
          <span>hoje</span>
        </div>
      </div>
    );
  }
  window.ZNX = window.ZNX || {};
  window.ZNX.widgets = window.ZNX.widgets || {};
  window.ZNX.widgets['orcamentos-cancel-insights'] = window.ZNX.widgets['orcamentos-cancel-insights'] || {};
  window.ZNX.widgets['orcamentos-cancel-insights'].CancelTimeline = CancelTimeline;
  // [Wave 37 marker v224.18] confirma CancelTimeline executado
  window.CancelTimeline_v224_18_wave37 = true;
})();