"use client";

import Link from "next/link";
import { useMemo } from "react";
import { FreshnessLabel } from "@/components/ui/freshness";
import { LivePrice } from "@/components/ui/price";
import { StatusBadge } from "@/components/ui/status-badge";
import { cx, instrumentHref } from "@/lib/format";
import { useMarketStream } from "@/lib/stream";
import type { InstrumentWithQuote } from "@/lib/types";

/** Compact quote tiles for the homepage pulse. One row of tiles per asset class, scrollable on mobile. */
export function PulseRow({ title, href, items, className }: { title: string; href: string; items: InstrumentWithQuote[]; className?: string }) {
  const channels = useMemo(() => items.map((i) => `quotes:${i.id}`), [items]);
  useMarketStream(channels);
  if (!items.length) return null;
  return (
    <div className={cx("rule-b py-3", className)}>
      <div className="mb-2 flex items-baseline justify-between">
        <h3 className="text-[11px] font-medium uppercase tracking-wide text-ink-3">{title}</h3>
        <Link href={href} className="text-xs text-accent hover:underline">
          All →
        </Link>
      </div>
      <div className="-mx-3 flex gap-2 overflow-x-auto px-3 pb-1 [scrollbar-width:none] sm:mx-0 sm:grid grid-cols-1 [&>*]:min-w-0 sm:grid-cols-3 sm:px-0 lg:grid-cols-6 [&::-webkit-scrollbar]:hidden">
        {items.slice(0, 6).map((i) => (
          <Link key={i.id} href={instrumentHref(i.id)} className="min-w-[164px] shrink-0 rounded-md border border-rule bg-surface px-3 py-2 hover:border-rule-strong sm:min-w-0">
            <div className="flex items-center justify-between gap-2">
              <span className="mono text-xs font-medium">{i.symbol}</span>
              <StatusBadge status={i.quote?.data_status} />
            </div>
            <div className="mt-1 truncate text-[11px] text-ink-3">{i.name}</div>
            <div className="mt-1.5">
              <LivePrice instrumentId={i.id} quote={i.quote} assetClass={i.asset_class} className="text-[15px]" />
            </div>
            <FreshnessLabel quote={i.quote} className="mt-1 !text-[10.5px]" />
          </Link>
        ))}
      </div>
    </div>
  );
}