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

/**
 * Live tape (§163, §194): a terminal-style ticker of the PUBLISHED indices only — value + daily change.
 * Indices that have not met their constituent minimum are not in the tape; they are listed in a secondary
 * compact "Indices in development" line with 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 published = indices.filter((i) => i.latest).sort((a, b) => Number(b.isFlagship) - Number(a.isFlagship) || a.ticker.localeCompare(b.ticker));
  const developing = indices.filter((i) => !i.latest).sort((a, b) => b.pricedAssets / Math.max(1, b.minConstituents) - a.pricedAssets / Math.max(1, a.minConstituents));
  const items = published.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} ${fmtNum(i.latest!.value, { digits: 2 })} ${fmtPct(i.change1d)}`}>
        <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>
        <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>
      </Link>
    );
  });
  return (
    <div className={className}>
      {items.length ? (
        <div className="relative overflow-hidden border-y border-border bg-elevated" 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>
      ) : (
        <div className="border-y border-border bg-elevated px-4 py-2 text-[12px] text-muted sm:px-6">No index has met its publication minimum yet — see the indices in development below.</div>
      )}
      {developing.length ? <DevelopingStrip items={developing} /> : null}
    </div>
  );
}

/** Secondary line (§194): indices not yet published, with constituent progress. Compact, no marquee. */
function DevelopingStrip({ items }: { items: IndexRow[] }) {
  return (
    <details className="group border-b border-border bg-sunken px-4 text-[11px] text-muted sm:px-6">
      <summary className="flex h-7 cursor-pointer list-none items-center gap-2 [&::-webkit-details-marker]:hidden">
        <span aria-hidden className="inline-block text-subtle transition-transform group-open:rotate-90">▸</span>
        <span className="font-medium uppercase tracking-wider text-subtle">Indices in development</span>
        <span className="num text-subtle">{items.length}</span>
        <span className="hidden text-subtle sm:inline">· publish once each has its minimum number of priced constituents</span>
        <Link href="/methodology#indices" className="ml-auto text-subtle hover:text-fg">
          Methodology →
        </Link>
      </summary>
      <ul className="scrollbar-none -mx-4 flex gap-x-4 overflow-x-auto px-4 pb-2 sm:mx-0 sm:flex-wrap sm:px-0">
        {items.map((i) => (
          <li key={i.ticker} className="mono-num shrink-0">
            <Link href={`/rareindex/${i.ticker}`} className="inline-flex items-center gap-1.5 hover:text-fg" title={`${i.name}: ${i.pricedAssets} priced constituents of ${i.minConstituents} required`}>
              <span className="inline-block h-1.5 w-1.5 rounded-[2px]" style={{ background: i.color ?? 'var(--ri-index)' }} aria-hidden />
              <span className="text-fg">{i.ticker}</span>
              <span className="text-subtle">
                {i.pricedAssets}/{i.minConstituents}
              </span>
            </Link>
          </li>
        ))}
      </ul>
    </details>
  );
}