/* trends.jsx — produtos em alta (mais vendidos agora) */
const {
  Button: TBtn, Badge: TBadge, cn: tcn, formatBRL: tBRL, formatPct: tPct, Commission: TCommission,
  IconFire: TFire, IconTrendUp: TUp, IconTrendDown: TDown, IconBox: TBox,
  IconExternal: TExt, IconBookmark: TBook, IconBolt: TBolt, IconStar: TStar,
  demoTrends: tDemoTrends, MonitorButton: TMonitor,
} = window;

const TREND_CATS = ['all', 'Eletrônicos', 'Eletrodomésticos', 'Beleza', 'Esportes', 'Casa', 'Informática', 'Moda'];
const TREND_PERIODS = [['24h', 'Hoje'], ['7d', '7 dias'], ['30d', '30 dias']];
const TPLAT = {
  ml: { name: 'Mercado Livre', dot: 'bg-gold', tint: 'rgba(255,208,0,0.1)', badge: 'ml' },
  shopee: { name: 'Shopee', dot: 'bg-coral', tint: 'rgba(249,94,46,0.1)', badge: 'shopee' },
};

function HeatBar({ value }) {
  return (
    <div className="flex items-center gap-1.5">
      <div className="h-1.5 w-16 overflow-hidden rounded-full bg-white/[0.08]">
        <div className="h-full rounded-full bg-gradient-to-r from-coral to-brand" style={{ width: `${value}%` }} />
      </div>
      <span className="text-[11px] font-semibold tabular-nums text-zinc-400">{value}</span>
    </div>
  );
}

function fmtSales(n) {
  return n >= 1000 ? (n / 1000).toFixed(1).replace('.', ',') + ' mil' : String(n);
}

function TrendsPage({ onMonitor, isMonitored, onSearch }) {
  const { useState, useMemo } = React;
  const [period, setPeriod] = useState('24h');
  const [cat, setCat] = useState('all');
  const data = useMemo(() => tDemoTrends(cat, period), [cat, period]);
  const top3 = data.slice(0, 3);
  const rest = data.slice(3);

  return (
    <main className="mx-auto w-full max-w-6xl flex-1 px-4 py-7 sm:px-5 sm:py-8">
      <div className="mb-5 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <div className="flex items-center gap-2">
            <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-coral/12 text-coral"><TFire size={19} fill="rgba(249,94,46,0.25)" /></span>
            <h1 className="font-syne text-2xl font-extrabold tracking-tight text-white">Em alta agora</h1>
          </div>
          <p className="mt-1.5 text-sm text-zinc-500">Os produtos que mais vendem nas duas plataformas. Pegue a onda antes da concorrência.</p>
        </div>
        {/* período */}
        <div className="inline-flex shrink-0 rounded-xl border border-edge bg-white/[0.04] p-1">
          {TREND_PERIODS.map(([v, l]) => (
            <button key={v} onClick={() => setPeriod(v)}
              className={tcn('rounded-lg px-3 py-1.5 text-sm font-medium transition-all', period === v ? 'bg-white/[0.1] text-white shadow-sm' : 'text-zinc-400 hover:text-zinc-200')}>{l}</button>
          ))}
        </div>
      </div>

      {/* categorias */}
      <div className="-mx-4 mb-6 flex gap-2 overflow-x-auto px-4 pb-1 sm:mx-0 sm:flex-wrap sm:px-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
        {TREND_CATS.map((c) => (
          <button key={c} onClick={() => setCat(c)}
            className={tcn('shrink-0 rounded-full border px-3.5 py-1.5 text-sm font-medium transition-all', cat === c ? 'border-brand/50 bg-brand/12 text-brand' : 'border-edge bg-white/[0.02] text-zinc-400 hover:text-zinc-200')}>
            {c === 'all' ? 'Todas' : c}
          </button>
        ))}
      </div>

      {data.length === 0 ? (
        <div className="flex flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-edge py-20 text-center">
          <span className="flex h-14 w-14 items-center justify-center rounded-2xl bg-white/[0.04] text-zinc-600"><TFire size={24} /></span>
          <p className="text-sm text-zinc-500">Nenhum produto em alta nesta categoria agora.</p>
        </div>
      ) : (
        <>
          {/* Pódio top 3 */}
          <div className="mb-5 grid gap-3 sm:grid-cols-3">
            {top3.map((p) => {
              const plat = TPLAT[p.platform];
              const mon = isMonitored(p.id);
              return (
                <div key={p.id} className="result-card relative flex flex-col rounded-2xl border border-edge bg-panel p-4">
                  <div className="mb-3 flex items-start justify-between">
                    <span className={tcn('flex h-9 w-9 items-center justify-center rounded-xl font-num text-base font-extrabold',
                      p.rank === 1 ? 'bg-brand/15 text-brand' : 'bg-white/[0.06] text-zinc-300')}>{p.rank}º</span>
                    <span className={tcn('inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] font-semibold', p.trend >= 0 ? 'bg-brand/12 text-brand' : 'bg-coral/12 text-coral')}>
                      {p.trend >= 0 ? <TUp size={12} /> : <TDown size={12} />}{Math.abs(p.trend)}%
                    </span>
                  </div>
                  <div className="relative mb-3 h-28 overflow-hidden rounded-xl border border-edge"
                    style={{ background: `repeating-linear-gradient(135deg, ${plat.tint} 0 2px, transparent 2px 11px), #0d0d0d` }}>
                    <span className="flex h-full w-full items-center justify-center"><TBox size={26} className="text-zinc-600" /></span>
                    <div className="absolute right-2 top-2"><TMonitor active={mon} onClick={() => onMonitor(p)} floating /></div>
                  </div>
                  <div className="mb-1 flex items-center gap-1.5">
                    <span className="inline-flex items-center gap-1 rounded-full bg-white/[0.06] px-2 py-0.5 text-[10px] font-semibold text-zinc-300"><span className={tcn('h-1 w-1 rounded-full', plat.dot)} />{plat.name}</span>
                  </div>
                  <h3 className="line-clamp-2 min-h-[2.5rem] text-sm font-medium leading-snug text-zinc-100">{p.title}</h3>
                  <div className="mt-2 flex items-center justify-between text-xs text-zinc-500">
                    <span className="inline-flex items-center gap-1"><TBolt size={12} className="text-coral" /> {fmtSales(p.sales)} vendas</span>
                    <span>{tBRL(p.price)}</span>
                  </div>
                  <div className="mt-3 flex items-end justify-between border-t border-edge pt-3">
                    <div>
                      <div className="text-[10px] uppercase tracking-wide text-zinc-500">Comissão</div>
                      <TCommission value={p.commission} className="text-xl text-brand" />
                    </div>
                    <a href={p.link} target="_blank" rel="noopener noreferrer"><TBtn variant="default">Ver <TExt size={16} /></TBtn></a>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Lista do restante */}
          <div className="overflow-hidden rounded-2xl border border-edge bg-panel">
            <div className="hidden border-b border-edge px-4 py-2.5 text-[11px] uppercase tracking-wide text-zinc-500 md:grid md:grid-cols-[44px_1fr_120px_110px_130px_140px] md:items-center md:gap-3">
              <span>#</span><span>Produto</span><span>Vendas</span><span>Tendência</span><span>Comissão</span><span></span>
            </div>
            {rest.map((p) => {
              const plat = TPLAT[p.platform];
              const mon = isMonitored(p.id);
              return (
                <div key={p.id} className="border-b border-edge/60 px-4 py-3 last:border-0 transition-colors hover:bg-white/[0.02] md:grid md:grid-cols-[44px_1fr_120px_110px_130px_140px] md:items-center md:gap-3">
                  {/* mobile + desktop rank/title */}
                  <div className="flex items-center gap-3 md:contents">
                    <span className="font-num text-base font-bold text-zinc-500 md:w-11">{p.rank}º</span>
                    <div className="min-w-0 flex-1">
                      <div className="mb-1 flex items-center gap-1.5">
                        <span className="inline-flex items-center gap-1 rounded-full bg-white/[0.06] px-1.5 py-0.5 text-[10px] font-semibold text-zinc-300"><span className={tcn('h-1 w-1 rounded-full', plat.dot)} />{plat.name}</span>
                        <span className="hidden text-[11px] text-zinc-600 sm:inline">{p.category}</span>
                      </div>
                      <h3 className="line-clamp-1 text-sm font-medium text-zinc-100">{p.title}</h3>
                      {/* mobile meta row */}
                      <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-zinc-500 md:hidden">
                        <span className="inline-flex items-center gap-1"><TBolt size={11} className="text-coral" />{fmtSales(p.sales)} vendas</span>
                        <span className={tcn('inline-flex items-center gap-0.5 font-semibold', p.trend >= 0 ? 'text-brand' : 'text-coral')}>{p.trend >= 0 ? <TUp size={11} /> : <TDown size={11} />}{Math.abs(p.trend)}%</span>
                        <span className="font-semibold text-brand">{tBRL(p.commission)}</span>
                      </div>
                    </div>
                    {/* mobile actions */}
                    <div className="flex items-center gap-1.5 md:hidden">
                      <TMonitor active={mon} onClick={() => onMonitor(p)} />
                      <a href={p.link} target="_blank" rel="noopener noreferrer"><TBtn size="sm" variant="secondary"><TExt size={15} /></TBtn></a>
                    </div>
                  </div>

                  {/* desktop columns */}
                  <div className="hidden md:block"><span className="text-sm tabular-nums text-zinc-300">{fmtSales(p.sales)}</span><div className="mt-1"><HeatBar value={p.heat} /></div></div>
                  <div className="hidden md:block"><span className={tcn('inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-semibold', p.trend >= 0 ? 'bg-brand/12 text-brand' : 'bg-coral/12 text-coral')}>{p.trend >= 0 ? <TUp size={13} /> : <TDown size={13} />}{Math.abs(p.trend)}%</span></div>
                  <div className="hidden md:block"><TCommission value={p.commission} className="text-base text-brand" /><div className="text-[11px] text-zinc-500">{tPct(p.rate)} · {tBRL(p.price)}</div></div>
                  <div className="hidden items-center gap-1.5 md:flex">
                    <TMonitor active={mon} onClick={() => onMonitor(p)} />
                    <a href={p.link} target="_blank" rel="noopener noreferrer"><TBtn size="sm" variant="default">Ver <TExt size={15} /></TBtn></a>
                  </div>
                </div>
              );
            })}
          </div>

          <div className="mt-5 flex items-center gap-3 rounded-2xl border border-coral/25 bg-coral/[0.05] px-4 py-3">
            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-coral/12 text-coral"><TFire size={17} /></span>
            <p className="text-sm text-zinc-300">Produtos em alta vendem sozinhos. <span className="text-zinc-500">Monitore os que combinam com seu público e seja avisada quando a comissão subir.</span></p>
          </div>
        </>
      )}
    </main>
  );
}

Object.assign(window, { TrendsPage });