// EagleLabs C/R (spec 2026-07-09) — tabela de pedidos cancelados/reembolsados.
// Janela de período por date_canceled (data do PROCESSAMENTO do estorno), diferente do
// resto do dashboard (coorte por date_created). Serve para conciliar com relatórios
// externos listados por refund date (ex.: Orders Report da Buygoods).

const EL_KIND = {
  cancelado: { label:'Cancelado', color:'var(--warning)',  bg:'var(--warning-bg)' },
  refund:    { label:'Refund',    color:'var(--negative)', bg:'var(--negative-bg)' },
};

const elFmtDate = (iso) => iso
  ? new Date(iso).toLocaleDateString('pt-BR', { day:'2-digit', month:'short', year:'numeric' })
  : '—';
const elDays = (r) => (r.dateCreated && r.dateCanceled)
  ? Math.max(0, Math.floor((new Date(r.dateCanceled) - new Date(r.dateCreated)) / 86400000))
  : null;

const EagleLabsCRView = ({ data, loading = false, platform = 'todas',
                           period = 'ontem', product = 'todos', funnel = 'todos', customRange = null }) => {
  const [sortKey, setSortKey] = React.useState('dateCanceled');
  const [dir, setDir] = React.useState(-1);
  const [q, setQ] = React.useState('');
  const sortBy = (k)=> k===sortKey ? setDir(-dir) : (setSortKey(k), setDir(-1));

  const rows = (data && data.rows) || [];
  const summary = (data && data.summary) || { cancelados:0, refunds:0, amount:0 };
  const total = summary.cancelados + summary.refunds;

  // Export xlsx (spec 2026-07-10): baixa o relatório Eagle Labs com os filtros atuais.
  // O nome do arquivo vem do Content-Disposition do backend.
  const canExport = total > 0 && platform !== 'pagamerican';
  const exportUrl = ()=>{
    const qs = new URLSearchParams({ period, platform, product, funnel });
    if (customRange?.start && customRange?.end) { qs.set('start', customRange.start); qs.set('end', customRange.end); }
    return `${API_BASE}/orders/canceled/export?${qs}`;
  };

  const list = React.useMemo(()=>{
    let l = rows.slice();
    const s = q.trim().toLowerCase();
    if(s) l = l.filter(r =>
      (r.product||'').toLowerCase().includes(s) || (r.customer||'').toLowerCase().includes(s) ||
      (r.email||'').toLowerCase().includes(s)   || (r.orderId||'').toLowerCase().includes(s));
    l.sort((a,b)=>{
      const av = sortKey==='days' ? (elDays(a) ?? -1) : a[sortKey];
      const bv = sortKey==='days' ? (elDays(b) ?? -1) : b[sortKey];
      if(av==null && bv==null) return 0;
      if(av==null) return 1; if(bv==null) return -1;
      // dir=-1 = descendente para TODO tipo (datas ISO ordenam certo como string)
      if(typeof av==='string') return av.localeCompare(bv)*dir;
      return (av-bv)*dir;
    });
    return l;
  },[rows,q,sortKey,dir]);

  const ind = (k)=> sortKey===k ? (dir<0?' ▾':' ▴') : '';
  const th = (k,label,left)=> (
    <th key={k} onClick={()=>sortBy(k)} style={{...el.th, textAlign:left?'left':'right'}}>
      {label}{ind(k)}</th>
  );

  return (
    <div style={{...el.wrap, opacity: loading ? 0.45 : 1, transition:'opacity .25s'}}>
      <div style={el.head}>
        <div>
          <div style={el.eye}>Produtos — EagleLabs C/R</div>
          <div style={el.title}>Cancelamentos e reembolsos</div>
          <div style={el.sub}>Período pela <b>data do cancelamento</b> (processamento), não pela data da venda.</div>
        </div>
        <div style={el.headRight}>
          <span style={{...el.pill, color:EL_KIND.cancelado.color, background:EL_KIND.cancelado.bg}}>
            Cancelados <span className="fenix-num">{NUM(summary.cancelados)}</span></span>
          <span style={{...el.pill, color:EL_KIND.refund.color, background:EL_KIND.refund.bg}}>
            Refunds <span className="fenix-num">{NUM(summary.refunds)}</span></span>
          <span style={el.amount} className="fenix-num">Devolvido {USD(summary.amount)}</span>
          {/* download via fetch autenticado — window.open não manda o Bearer (spec 2026-08-05) */}
          <button onClick={()=>canExport && window.FenixAuth.download(exportUrl()).catch(e=>alert(e.message))}
            title={canExport ? 'Baixar xlsx no padrão Eagle Labs (todos os pedidos do filtro)' : 'Sem dados para exportar'}
            style={{...el.exportBtn, ...(canExport ? {} : {opacity:.45, cursor:'default'})}}
            onMouseEnter={e=>{ if(canExport){ e.currentTarget.style.borderColor='var(--fenix-orange)'; e.currentTarget.style.color='var(--fenix-orange)'; } }}
            onMouseLeave={e=>{ e.currentTarget.style.borderColor='var(--border-2)'; e.currentTarget.style.color='var(--fg-2)'; }}>
            <Icon name="download" size={15} color="currentColor"/>
            Baixar relatório
          </button>
          <div style={el.search}>
            <Icon name="search" size={15} color="var(--fg-3)"/>
            <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Produto, cliente, email ou order ID…"
              style={el.searchInput}/>
          </div>
        </div>
      </div>

      {platform === 'pagamerican' && (
        <div style={el.notice}>
          <Icon name="alert" size={14} color="currentColor"/>
          PagAmerican não captura cancelamentos/reembolsos — selecione outra plataforma.
        </div>
      )}
      {data && data.truncated && (
        <div style={el.notice}>
          <Icon name="alert" size={14} color="currentColor"/>
          Mostrando os 1.000 mais recentes de {NUM(total)} — refine os filtros de produto ou período.
        </div>
      )}

      <div style={el.scroll}>
        <table style={el.table}>
          <thead><tr>
            {th('kind','Tipo', true)}
            {th('orderId','Order ID', true)}
            {th('dateCreated','Data do pedido')}
            {th('dateCanceled','Data do cancel.')}
            {th('product','Produto', true)}
            {th('customer','Cliente', true)}
            {th('email','Email', true)}
            {th('amount','Valor')}
            {th('days','Dias')}
          </tr></thead>
          <tbody>
            {list.map(r=>{
              const k = EL_KIND[r.kind] || EL_KIND.cancelado;
              const d = elDays(r);
              return (
                <tr key={r.orderId}
                  onMouseEnter={e=>{e.currentTarget.style.background='var(--gray-50)';}}
                  onMouseLeave={e=>{e.currentTarget.style.background='transparent';}}>
                  <td style={{...el.td, textAlign:'left'}}>
                    <span style={{...el.badge, color:k.color, background:k.bg}}>{k.label}</span>
                  </td>
                  <td style={{...el.td, textAlign:'left', font:'600 12px/1 var(--font-mono)'}}>{r.orderId}</td>
                  <td style={el.tdNum} className="fenix-num">{elFmtDate(r.dateCreated)}</td>
                  <td style={{...el.tdNum, fontWeight:700}} className="fenix-num">{elFmtDate(r.dateCanceled)}</td>
                  <td style={{...el.td, textAlign:'left', whiteSpace:'normal', minWidth:220}}>{r.product || '—'}</td>
                  <td style={{...el.td, textAlign:'left'}}>{r.customer || '—'}</td>
                  <td style={{...el.td, textAlign:'left', color:'var(--fg-2)', font:'500 12px/1 var(--font-mono)'}}>{r.email || '—'}</td>
                  <td style={{...el.tdNum, fontWeight:700}} className="fenix-num">{USD(r.amount)}</td>
                  <td style={{...el.tdNum, color:'var(--fg-2)'}} className="fenix-num">{d==null?'—':d}</td>
                </tr>
              );
            })}
            {!loading && list.length===0 && (
              <tr><td colSpan={9} style={el.empty}>
                {q ? 'Nenhum pedido casa com a busca.' : 'Sem cancelamentos ou reembolsos no período.'}
              </td></tr>
            )}
          </tbody>
        </table>
      </div>
      <div style={el.foot}>
        <Icon name="alert" size={14} color="currentColor"/>
        Chargebacks formais ficam fora desta lista (métrica separada). Filtro de produto segue o
        <b>&nbsp;funil completo</b>: upsells de outros produtos vendidos no funil contam no produto de origem.
      </div>
    </div>
  );
};

const el = {
  wrap:{ background:'#fff', border:'1px solid var(--border-1)', borderRadius:'var(--r-lg)', boxShadow:'var(--shadow-sm)', overflow:'hidden' },
  head:{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', padding:'18px 22px', borderBottom:'1px solid var(--border-1)', gap:16, flexWrap:'wrap' },
  eye:{ font:'var(--text-label)', letterSpacing:'.05em', textTransform:'uppercase', color:'var(--fg-3)' },
  title:{ font:'var(--text-h3)', color:'var(--fg-1)', marginTop:4 },
  sub:{ font:'500 12px/1.4 var(--font-sans)', color:'var(--fg-3)', marginTop:5 },
  headRight:{ display:'flex', alignItems:'center', gap:10, flexWrap:'wrap' },
  pill:{ font:'700 12px/1 var(--font-sans)', padding:'7px 12px', borderRadius:'var(--r-pill)', whiteSpace:'nowrap' },
  amount:{ font:'600 12px/1 var(--font-mono)', color:'var(--fg-2)', background:'var(--bg-sunken)', padding:'7px 12px', borderRadius:'var(--r-pill)', whiteSpace:'nowrap' },
  exportBtn:{ display:'inline-flex', alignItems:'center', gap:7, border:'1px solid var(--border-2)', borderRadius:'var(--r-md)',
    padding:'8px 13px', background:'#fff', color:'var(--fg-2)', font:'600 12px/1 var(--font-sans)', cursor:'pointer',
    transition:'border-color .15s, color .15s', whiteSpace:'nowrap' },
  search:{ display:'flex', alignItems:'center', gap:8, border:'1px solid var(--border-2)', borderRadius:'var(--r-md)', padding:'8px 12px', width:250 },
  searchInput:{ border:0, outline:0, font:'var(--text-body-sm)', color:'var(--fg-1)', flex:1, background:'transparent' },
  notice:{ display:'flex', alignItems:'center', gap:6, font:'600 12px/1.4 var(--font-sans)', color:'var(--warning)', background:'var(--warning-bg)', padding:'10px 22px', borderBottom:'1px solid var(--border-1)' },
  scroll:{ maxHeight:560, overflowY:'auto', overflowX:'auto' },
  table:{ width:'100%', borderCollapse:'collapse', minWidth:1080 },
  th:{ font:'700 10.5px/1 var(--font-sans)', letterSpacing:'.04em', textTransform:'uppercase', color:'var(--fg-3)',
    padding:'12px 14px', background:'var(--bg-sunken)', borderBottom:'1px solid var(--border-2)', whiteSpace:'nowrap',
    userSelect:'none', cursor:'pointer', position:'sticky', top:0, zIndex:2 },
  td:{ padding:'11px 14px', borderBottom:'1px solid var(--border-1)', font:'var(--text-body-sm)', color:'var(--fg-1)', textAlign:'right', whiteSpace:'nowrap' },
  badge:{ font:'700 11px/1 var(--font-sans)', padding:'5px 10px', borderRadius:'var(--r-pill)', whiteSpace:'nowrap' },
  empty:{ padding:'34px 22px', textAlign:'center', font:'var(--text-body-sm)', color:'var(--fg-4)' },
  foot:{ font:'500 12px/1.4 var(--font-sans)', color:'var(--fg-3)', padding:'12px 18px', display:'flex', alignItems:'center', gap:6, borderTop:'1px solid var(--border-1)' },
};
// Célula numérica: o shorthand `font:` do el.td (inline) venceria a classe .fenix-num —
// longhands DEPOIS do shorthand (ordem das chaves) resolvem.
el.tdNum = { ...el.td, fontFamily:'var(--font-num)', fontVariantNumeric:'tabular-nums' };

window.EagleLabsCRView = EagleLabsCRView;