// Página de Produtos — lista (spec 2026-06-30). Tabela por família (buygoods):
// vendas/FE/BE/refund em count + $, taxa de refund pela régua DOCX, AOV, lucro op.
const { useState: useStateP, useMemo: useMemoP } = React;

const PROD_PALETTE = ['#FD7119','#303880','#1F9D6B','#8A5BD6','#2C9CC4','#E0922B','#D8453B','#16315C'];

// Célula count + $ (ex.: "250 · $65,6k"): contagem em destaque, valor secundário.
const CountMoney = ({ count, money }) => (
  <div style={{lineHeight:1.15}}>
    <span style={{font:'700 13px/1 var(--font-num)', color:'var(--fg-1)', fontVariantNumeric:'tabular-nums'}} className="fenix-num">{NUM(count)}</span>
    <span style={{display:'block', font:'500 11px/1.2 var(--font-mono)', color:'var(--fg-3)', marginTop:3, fontVariantNumeric:'tabular-nums'}}>{USDk(money)}</span>
  </div>
);

const ProductsKpis = ({ k, onKpiSelect }) => {
  const cards = [
    { label:'Receita total bruta', value: USDk(k.grossTotal ?? k.revenue), sub:`Completed + refunds + chargebacks · ${k.activeProducts} produtos`, accent:'var(--fenix-orange)',
      onClick: onKpiSelect ? () => onKpiSelect({ eye:'Receita total bruta', val:USDk(k.grossTotal ?? k.revenue), kind:'receita-consolidada',
        data:{ grossTotal:k.grossTotal, refundAmountGross:k.refundAmountGross, refundCount:k.refundCount,
          chargebackAmountGross:k.chargebackAmountGross, chargebackCount:k.chargebackCount, validOrders:k.validOrders } }) : undefined },
    { label:'Pedidos',       value: NUM(k.orders),   sub:'no período',                    accent:'var(--fenix-blue)' },
    { label:'Ticket médio',  value: USD(k.aov),      sub:'AOV por checkout',              accent:'#8A5BD6' },
    { label:'Taxa de refund',value: PCT(k.refundRate),sub: refundHealth(k.refundRate).label, accent: refundHealth(k.refundRate).color },
    { label:'Lucro op.',     value: USDk(k.operating),sub:'após COGS/frete/fees/refund',   accent:'var(--positive)' },
  ];
  return (
    <div className="kpi-grid" style={{display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:14, marginBottom:16}}>
      {cards.map(c=>(
        <div key={c.label} style={{background:'#fff', border:'1px solid var(--border-1)', borderRadius:'var(--r-lg)', boxShadow:'var(--shadow-sm)', padding:'16px 18px', cursor:c.onClick?'pointer':'default'}}
          onClick={c.onClick}>
          <div style={{display:'flex', alignItems:'center', gap:7}}>
            <span style={{width:8, height:8, borderRadius:2, background:c.accent, flex:'none'}}/>
            <span style={{font:'600 10px/1 var(--font-sans)', letterSpacing:'.04em', textTransform:'uppercase', color:'var(--fg-3)'}}>{c.label}</span>
          </div>
          <div style={{font:'800 25px/1 var(--font-num)', color:'var(--fg-1)', marginTop:11, fontVariantNumeric:'tabular-nums'}} className="fenix-num">{c.value}</div>
          <div style={{font:'500 11px/1.3 var(--font-sans)', color:'var(--fg-3)', marginTop:6}}>{c.sub}</div>
        </div>
      ))}
    </div>
  );
};

const ProductsDonut = ({ donut }) => {
  const total = donut.reduce((s,d)=>s+d.value, 0) || 1;
  let acc = 0;
  const stops = donut.map((d,i)=>{
    const from = acc/total*360, to = (acc+d.value)/total*360; acc += d.value;
    return `${PROD_PALETTE[i%PROD_PALETTE.length]} ${from}deg ${to}deg`;
  }).join(',');
  return (
    <div style={{background:'#fff', border:'1px solid var(--border-1)', borderRadius:'var(--r-lg)', boxShadow:'var(--shadow-sm)', padding:'20px 24px', marginBottom:16, display:'flex', gap:32, alignItems:'center'}}>
      <div style={{flex:'none', width:160, height:160, borderRadius:'50%', background:`conic-gradient(${stops})`, position:'relative'}}>
        <div style={{position:'absolute', inset:18, borderRadius:'50%', background:'#fff', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center'}}>
          <div style={{font:'500 10px/1 var(--font-sans)', textTransform:'uppercase', letterSpacing:'.05em', color:'var(--fg-3)'}}>Total</div>
          <div style={{font:'800 17px/1.1 var(--font-num)', color:'var(--fg-1)', marginTop:5, fontVariantNumeric:'tabular-nums'}} className="fenix-num">{USDk(total)}</div>
        </div>
      </div>
      <div style={{flex:1, minWidth:0}}>
        <div style={{font:'600 10px/1 var(--font-sans)', letterSpacing:'.05em', textTransform:'uppercase', color:'var(--fg-3)'}}>Mix de receita</div>
        <div style={{font:'var(--text-h3)', color:'var(--fg-1)', margin:'4px 0 14px'}}>Receita por produto</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(2,minmax(0,1fr))', gap:'10px 32px'}}>
          {donut.map((d,i)=>(
            <div key={d.name} style={{display:'flex', alignItems:'center', gap:10}}>
              <span style={{width:11, height:11, borderRadius:3, background:PROD_PALETTE[i%PROD_PALETTE.length], flex:'none'}}/>
              <span style={{font:'600 13px/1.2 var(--font-sans)', color:'var(--fg-1)', flex:1, minWidth:0, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{d.name}</span>
              <span style={{font:'700 12px/1 var(--font-mono)', color:'var(--fg-2)', fontVariantNumeric:'tabular-nums'}}>{PCT(d.value/total*100)}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const PROD_COLS = [
  ['orders','Pedidos'], ['gross','Vendas válidas (bruta)'], ['aov','AOV'],
  ['feOrders','Vendas FE'], ['beOrders','Vendas BE'],
  ['refundCount','Refund'], ['refundRate','Taxa refund'], ['cvr','CVR'],
  ['operating','Lucro op.'],
];

const ProductsTable = ({ rows, onOpen }) => {
  const [sortKey, setSortKey] = useStateP('gross');
  const [dir, setDir] = useStateP(-1);
  const [q, setQ] = useStateP('');
  const sortBy = (k)=> k===sortKey ? setDir(-dir) : (setSortKey(k), setDir(-1));
  const val = (r,k)=> k==='feOrders'?r.fe.orders : k==='beOrders'?r.be.orders
    : k==='refundCount'?r.refunds.count : k==='cvr'?-1 : r[k];

  const list = useMemoP(()=>{
    let l = rows.slice();
    const s = q.trim().toLowerCase();
    if(s) l = l.filter(r=>r.name.toLowerCase().includes(s));
    l.sort((a,b)=> sortKey==='name' ? a.name.localeCompare(b.name)*(-dir) : (val(a,sortKey)-val(b,sortKey))*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={{position:left?'sticky':'static', left:left?0:'auto', zIndex:left?2:1, background:'#fff',
      textAlign:left?'left':'right', font:'600 11px/1 var(--font-sans)', letterSpacing:'.03em', textTransform:'uppercase',
      color:'var(--fg-3)', padding:'13px 14px', borderBottom:'1px solid var(--border-2)', whiteSpace:'nowrap', cursor:'pointer', userSelect:'none'}}>
      {label}{ind(k)}</th>
  );
  const td = {padding:'11px 14px', borderBottom:'1px solid var(--border-1)', textAlign:'right', whiteSpace:'nowrap', font:'var(--text-body-sm)', fontFamily:'var(--font-num)', fontVariantNumeric:'tabular-nums'};

  return (
    <div style={{background:'#fff', border:'1px solid var(--border-1)', borderRadius:'var(--r-lg)', boxShadow:'var(--shadow-sm)', overflow:'hidden'}}>
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'16px 18px', borderBottom:'1px solid var(--border-1)', gap:16}}>
        <div>
          <div style={{font:'600 10px/1 var(--font-sans)', letterSpacing:'.05em', textTransform:'uppercase', color:'var(--fg-3)'}}>Detalhe por produto</div>
          <div style={{font:'var(--text-h3)', color:'var(--fg-1)', marginTop:4}}>Receita, refund &amp; funil</div>
        </div>
        <div style={{display:'flex', alignItems:'center', gap:8, border:'1px solid var(--border-2)', borderRadius:'var(--r-md)', padding:'9px 12px', width:240}}>
          <Icon name="search" size={15} color="var(--fg-3)"/>
          <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Buscar produto…"
            style={{border:0, outline:0, font:'var(--text-body-sm)', color:'var(--fg-1)', flex:1, background:'transparent'}}/>
        </div>
      </div>
      <div style={{overflowX:'auto'}}>
        <table style={{width:'100%', borderCollapse:'collapse', minWidth:960}}>
          <thead><tr>
            {th('name','Produto', true)}
            {PROD_COLS.map(([k,l])=>th(k,l))}
          </tr></thead>
          <tbody>
            {list.map((r,i)=>{
              const rh = refundHealth(r.refundRate);
              const clickable = r.mapped;
              return (
                <tr key={r.key} onClick={()=>clickable&&onOpen(r.key)}
                  style={{cursor:clickable?'pointer':'default', background:'#fff'}}
                  onMouseEnter={e=>{if(clickable)e.currentTarget.style.background='var(--gray-50)';}}
                  onMouseLeave={e=>{e.currentTarget.style.background='#fff';}}>
                  <td style={{position:'sticky', left:0, zIndex:1, background:'inherit', padding:'10px 14px', whiteSpace:'nowrap'}}>
                    <div style={{display:'flex', alignItems:'center', gap:11}}>
                      <div style={{width:32, height:32, borderRadius:9, background:clickable?PROD_PALETTE[i%PROD_PALETTE.length]:'var(--gray-300)', color:'#fff', font:'800 11px/1 var(--font-sans)', display:'flex', alignItems:'center', justifyContent:'center', flex:'none'}}>{initials(r.name)}</div>
                      <div>
                        <div style={{font:'var(--text-h4)', color:'var(--fg-1)', lineHeight:1.15}}>{r.name}</div>
                        {!clickable && <div style={{font:'500 10px/1 var(--font-sans)', color:'var(--fg-3)', marginTop:3}}>não catalogado</div>}
                      </div>
                    </div>
                  </td>
                  <td style={td} className="fenix-num">{NUM(r.orders)}</td>
                  <td style={{...td, font:'700 13px/1 var(--font-num)', color:'var(--fg-1)'}} className="fenix-num">{USDk(r.gross)}</td>
                  <td style={{...td, color:'var(--fg-2)'}} className="fenix-num">{USD(r.aov)}</td>
                  <td style={td}><CountMoney count={r.fe.orders} money={r.fe.rev}/></td>
                  <td style={td}><CountMoney count={r.be.orders} money={r.be.rev}/></td>
                  <td style={td}><CountMoney count={r.refunds.count} money={r.refunds.amount}/></td>
                  <td style={{...td, color:rh.color, fontWeight:700}} className="fenix-num">{PCT(r.refundRate)}</td>
                  <td style={{...td, color:'var(--fg-4)'}}>—</td>
                  <td style={{...td, color:r.operating>=0?'var(--positive)':'var(--negative)', fontWeight:600}} className="fenix-num">{USDk(r.operating)}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      <div style={{font:'500 12px/1.4 var(--font-sans)', color:'var(--fg-3)', padding:'12px 18px', display:'flex', alignItems:'center', gap:6}}>
        <Icon name="alert" size={14} color="currentColor"/>
        Vendas por <b>funil completo</b>: upsells/downsells de outros produtos vendidos dentro do funil contam
        para o produto de origem. Clique num produto para abrir a matriz de funil e o estimador.
      </div>
    </div>
  );
};

const ProductsView = ({ data, onOpen, onKpiSelect }) => {
  if (!data) return null;
  return (
    <>
      <ProductsKpis k={data.kpis} onKpiSelect={onKpiSelect}/>
      {data.donut && data.donut.length > 0 && <ProductsDonut donut={data.donut}/>}
      <ProductsTable rows={data.rows} onOpen={onOpen}/>
    </>
  );
};

window.ProductsView = ProductsView;