import Link from "next/link";
import { InstrumentTable } from "@/components/market/instrument-table";
import { Page, PageHeader } from "@/components/ui/section";
import { apiEnvelope } from "@/lib/api";
import { cx } from "@/lib/format";
import type { InstrumentWithQuote } from "@/lib/types";

const SORTS: Array<[string, string]> = [["-change", "Top gainers"], ["change", "Top losers"], ["volume", "Most active"], ["symbol", "A → Z"]];

/**
 * Shared server page for one asset-class list (/stocks, /crypto, …). Fetches quoted instruments
 * from /v1/instruments and renders a live table; pagination and sort via search params.
 */
export async function ClassPage({ classes, title, kicker, lead, basePath, searchParams, showExchange = true, defaultSort = "-change", note }: { classes: string[]; title: string; kicker?: string; lead: string; basePath: string; searchParams: Promise<Record<string, string | string[] | undefined>>; showExchange?: boolean; defaultSort?: string; note?: React.ReactNode }) {
  const sp = await searchParams;
  const sort = typeof sp.sort === "string" ? sp.sort : defaultSort;
  const page = Math.max(1, Number(sp.page ?? 1) || 1);
  const q = typeof sp.q === "string" ? sp.q : "";
  const all = typeof sp.all === "string";
  const limit = 100;
  const lists = await Promise.all(
    classes.map((c) => apiEnvelope<InstrumentWithQuote[]>(`/v1/instruments?asset_class=${c}${all ? "" : "&quoted=1"}&sort=${encodeURIComponent(sort)}&limit=${limit}&offset=${(page - 1) * limit}${q ? `&q=${encodeURIComponent(q)}` : ""}`)),
  );
  const rows = lists.flatMap((l) => l.data);
  const total = lists.reduce((a, l) => a + Number(l.meta.total ?? 0), 0);
  const pages = Math.max(1, Math.ceil(total / limit));
  const link = (params: Record<string, string | number | undefined>) => {
    const u = new URLSearchParams();
    const merged = { sort, page, q, ...(all ? { all: "1" } : {}), ...params };
    for (const [k, v] of Object.entries(merged)) if (v !== undefined && v !== "" && !(k === "page" && v === 1) && !(k === "sort" && v === defaultSort)) u.set(k, String(v));
    const s = u.toString();
    return s ? `${basePath}?${s}` : basePath;
  };
  return (
    <Page wide>
      <PageHeader kicker={kicker} title={title} lead={lead} />
      <div className="mb-3 flex flex-wrap items-center gap-2">
        {SORTS.map(([s, label]) => (
          <Link key={s} href={link({ sort: s, page: 1 })} className={cx("inline-flex h-8 items-center rounded-full border px-3 text-xs", s === sort ? "border-ink bg-ink text-canvas" : "border-rule text-ink-2 hover:border-rule-strong")}>
            {label}
          </Link>
        ))}
        <form action={basePath} className="ml-auto flex items-center gap-2">
          {sort !== defaultSort && <input type="hidden" name="sort" value={sort} />}
          {all && <input type="hidden" name="all" value="1" />}
          <input name="q" defaultValue={q} placeholder="Filter symbol or name" className="h-9 w-48 rounded-md border border-rule bg-surface px-2 text-sm outline-none focus:border-rule-strong" />
          <Link href={link({ all: all ? undefined : "1", page: 1 })} className="text-xs text-ink-3 hover:text-ink">
            {all ? "Quoted only" : "Include unquoted"}
          </Link>
        </form>
      </div>
      <InstrumentTable rows={rows} liveClass={classes} showExchange={showExchange} showClass={classes.length > 1} defaultSort={sort.replace("-", "") === "change" ? "change" : sort === "volume" ? "volume" : "symbol"} emptyText={q ? `No instruments match “${q}”.` : "No quoted instruments in this class yet."} />
      <div className="mt-3 flex items-center justify-between text-xs text-ink-3">
        <span>
          {total.toLocaleString("en-US")} instrument{total === 1 ? "" : "s"} · page {page} of {pages}
        </span>
        <span className="flex gap-2">
          {page > 1 && (
            <Link href={link({ page: page - 1 })} className="text-accent hover:underline">
              ← Previous
            </Link>
          )}
          {page < pages && (
            <Link href={link({ page: page + 1 })} className="text-accent hover:underline">
              Next →
            </Link>
          )}
        </span>
      </div>
      {note && <p className="mt-4 text-xs text-ink-3">{note}</p>}
    </Page>
  );
}