import Link from 'next/link';
import type { IndexRow } from '@/lib/queries/indices';
import { fmtNum, cn, fmtPct, deltaClass } from '@/lib/format';

/**
 * Live tape (§163): a terminal-style ticker of the indices. Published indices show value + daily change;
 * indices still building show their constituent progress. Pauses on hover/focus; static under reduced motion.
 */
export function IndexTape({ indices, className }: { indices: IndexRow[]; className?: string }) {
  if (!indices.length) return null;
  const ordered = [...indices].sort((a, b) => Number(Boolean(b.latest)) - Number(Boolean(a.latest)) || (a.isFlagship ? -1 : 0) - (b.isFlagship ? -1 : 0));
  const items = ordered.map((i) => {
    const up = (i.change1d ?? 0) > 0;
    const down = (i.change1d ?? 0) < 0;
    return (
      <Link key={i.ticker} href={`/rareindex/${i.ticker}`} className="mono-num flex h-9 shrink-0 items-center gap-2.5 border-r border-border px-4 text-[12px] hover:bg-inset" aria-label={`${i.ticker}${i.latest ? ` ${fmtNum(i.latest.value, { digits: 2 })} ${fmtPct(i.change1d)}` : ' building'}`}>
        <span className="inline-block h-2 w-2 rounded-[2px]" style={{ background: i.color ?? 'var(--ri-index)' }} aria-hidden />
        <span className="font-semibold tracking-wide text-fg">{i.ticker}</span>
        {i.latest ? (
          <>
            <span className="text-muted">{fmtNum(i.latest.value, { digits: 2 })}</span>
            <span className={cn('font-medium', deltaClass(i.change1d))}>
              {up ? '▲' : down ? '▼' : '■'} {fmtPct(i.change1d)}
            </span>
          </>
        ) : (
          <span className="text-subtle">
            building {i.pricedAssets}/{i.minConstituents}
          </span>
        )}
      </Link>
    );
  });
  return (
    <div className={cn('relative overflow-hidden border-y border-border bg-elevated', className)} aria-label="Index tape" role="marquee">
      <div className="pointer-events-none absolute inset-y-0 left-0 z-10 w-8 bg-gradient-to-r from-elevated to-transparent" aria-hidden />
      <div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-8 bg-gradient-to-l from-elevated to-transparent" aria-hidden />
      <div className="tape-track flex w-max">
        {items}
        {items.map((it, k) => (
          <span key={`dup-${k}`} aria-hidden className="contents">
            {it}
          </span>
        ))}
      </div>
    </div>
  );
}