"use client";
import * as React from "react";
import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/misc";
import { useApi } from "@/lib/client/api";
import { usePrefersReducedMotion } from "@/lib/client/hooks";
import { formatContext, formatPricePair, NEW_WINDOW_DAYS, type PublicModelSummary } from "@/lib/marketing/public-models";
import { cn } from "@/lib/utils";
import { Container } from "./section";

interface Resp {
  models: PublicModelSummary[];
  total: number;
  generatedAt: string;
}

function isNew(iso: string, now: number) {
  return now - new Date(iso).getTime() < NEW_WINDOW_DAYS * 86_400_000;
}

function ModelChip({ m, now }: { m: PublicModelSummary; now: number }) {
  const price = formatPricePair(m.inputPerMillion, m.outputPerMillion);
  return (
    <li className="flex h-10 shrink-0 items-center gap-2 rounded-lg border border-border bg-bg-elevated/80 px-3 text-[13px]">
      <ProviderIcon provider={m.provider} size={14} />
      <span className="max-w-[12rem] truncate font-medium">{m.displayName}</span>
      {isNew(m.firstSeenAt, now) ? <Badge variant="accent">New</Badge> : m.status === "preview" ? <Badge variant="warning">Preview</Badge> : null}
      <span className="font-mono text-[11px] tabular-nums text-fg-subtle">{formatContext(m.contextTokens)}</span>
      {price ? <span className="hidden font-mono text-[11px] tabular-nums text-fg-subtle sm:inline">{price}</span> : null}
    </li>
  );
}

/**
 * Live model strip. Fetches the public registry summary (cached 10 min server-side), renders a
 * skeleton first, then a seamless marquee (content duplicated, paused on hover). Reduced motion
 * or no data → a static wrapped grid / nothing.
 */
export function ModelStrip({ className }: { className?: string }) {
  const { data, error, isLoading } = useApi<Resp>("/api/public/models", { revalidateOnFocus: false, dedupingInterval: 600_000 });
  const reduce = usePrefersReducedMotion();
  const [now, setNow] = React.useState(0);
  React.useEffect(() => {
    // Wall clock read once on the client (never in render) so "New" badges are stable.
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setNow(Date.now());
  }, []);

  const models = data?.models ?? [];
  if (!isLoading && (error || models.length === 0)) return null;

  return (
    <section className={cn("border-y border-border bg-bg-subtle/60", className)} aria-labelledby="model-strip-title">
      <Container className="flex flex-col gap-3 py-5 sm:py-6">
        <div className="flex items-center justify-between gap-4">
          <p id="model-strip-title" className="inline-flex items-center gap-2 text-[13px] text-fg-muted">
            <span className="relative flex size-2">
              <span className="absolute inline-flex size-full animate-pulse-soft rounded-full bg-success" />
              <span className="relative inline-flex size-2 rounded-full bg-success" />
            </span>
            {data ? (
              <>
                <span className="font-medium text-fg tabular-nums">{data.total}</span> models in the registry · live from the catalog
              </>
            ) : (
              "Loading the live model catalog…"
            )}
          </p>
          <Link href="/models" className="inline-flex shrink-0 items-center gap-1 text-[13px] font-medium text-accent underline-offset-4 hover:underline">
            Browse all <ArrowRight className="size-3.5" aria-hidden />
          </Link>
        </div>
      </Container>
      <div className={cn("pb-5 sm:pb-6", !reduce && "mask-x overflow-hidden")}>
        {isLoading ? (
          <ul className="flex gap-2 px-5 sm:px-8" aria-hidden>
            {Array.from({ length: 10 }).map((_, i) => (
              <li key={i}>
                <Skeleton className="h-10 w-44 rounded-lg" />
              </li>
            ))}
          </ul>
        ) : reduce ? (
          <Container>
            <ul className="flex flex-wrap gap-2" aria-label="Models available in PolyLLM">
              {models.slice(0, 16).map((m) => (
                <ModelChip key={m.key} m={m} now={now} />
              ))}
            </ul>
          </Container>
        ) : (
          <div className="marquee gap-2 pr-2" aria-label="Models available in PolyLLM">
            <ul className="flex shrink-0 gap-2">
              {models.map((m) => (
                <ModelChip key={m.key} m={m} now={now} />
              ))}
            </ul>
            <ul className="flex shrink-0 gap-2" aria-hidden>
              {models.map((m) => (
                <ModelChip key={`dup-${m.key}`} m={m} now={now} />
              ))}
            </ul>
          </div>
        )}
      </div>
    </section>
  );
}