"use client";
import * as React from "react";
import { Check, ChevronDown, Minus } from "lucide-react";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { Badge } from "@/components/ui/badge";
import { BadgeChips, LifecycleChip } from "@/components/models/badge-chips";
import type { Lifecycle, ModelBadge } from "@/lib/models/badges";
import type { ProviderId } from "@/lib/ai/core/types";
import { cn } from "@/lib/utils";

/**
 * Compact, pre-formatted row for the public catalog. The server sends only these strings/booleans
 * (≈ 200 B per model instead of the full PolyModel) and renders the first rows; the rest expands client-side.
 */
export interface CatalogRow {
  key: string;
  provider: ProviderId;
  name: string;
  id: string;
  inPrice: string;
  outPrice: string;
  context: string;
  maxOut: string;
  reasoning: boolean;
  vision: boolean;
  tools: boolean;
  json: boolean;
  lifecycle: Lifecycle;
  badges: ModelBadge[];
}

const INITIAL = 8;

function Mark({ on }: { on: boolean }) {
  return on ? <Check className="mx-auto size-4 text-success" aria-label="yes" /> : <Minus className="mx-auto size-4 text-border-strong" aria-label="no" />;
}

export function PublicCatalogGroup({ rows, provider }: { rows: CatalogRow[]; provider: ProviderId }) {
  const [expanded, setExpanded] = React.useState(false);
  const shown = expanded ? rows : rows.slice(0, INITIAL);
  const hidden = rows.length - shown.length;
  return (
    <>
      {/* Desktop table */}
      <div className="mt-4 hidden overflow-hidden rounded-xl border border-border md:block">
        <table className="w-full text-[13px]">
          <thead>
            <tr className="border-b border-border bg-bg-subtle/60 text-left text-[11px] font-medium uppercase tracking-wide text-fg-subtle">
              <th className="px-3 py-2">Model</th>
              <th className="px-3 py-2 text-right">Input $/1M</th>
              <th className="px-3 py-2 text-right">Output $/1M</th>
              <th className="px-3 py-2 text-right">Context</th>
              <th className="px-3 py-2 text-right">Max out</th>
              <th className="px-3 py-2 text-center">Reasoning</th>
              <th className="px-3 py-2 text-center">Vision</th>
              <th className="px-3 py-2 text-center">Tools</th>
              <th className="px-3 py-2">Status</th>
            </tr>
          </thead>
          <tbody>
            {shown.map((m) => (
              <tr key={m.key} className="border-b border-hairline last:border-b-0">
                <td className="px-3 py-2">
                  <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
                    <span className="font-medium">{m.name}</span>
                    <BadgeChips badges={m.badges} max={3} size="xs" />
                  </div>
                  <div className="font-mono text-[11px] text-fg-subtle">{m.id}</div>
                </td>
                <td className="px-3 py-2 text-right font-mono tabular-nums text-fg-muted">{m.inPrice}</td>
                <td className="px-3 py-2 text-right font-mono tabular-nums text-fg-muted">{m.outPrice}</td>
                <td className="px-3 py-2 text-right font-mono tabular-nums text-fg-muted">{m.context}</td>
                <td className="px-3 py-2 text-right font-mono tabular-nums text-fg-muted">{m.maxOut}</td>
                <td className="px-3 py-2">
                  <Mark on={m.reasoning} />
                </td>
                <td className="px-3 py-2">
                  <Mark on={m.vision} />
                </td>
                <td className="px-3 py-2">
                  <Mark on={m.tools} />
                </td>
                <td className="px-3 py-2">
                  <LifecycleChip lifecycle={m.lifecycle} />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Mobile rows */}
      <ul className="mt-4 space-y-2 md:hidden">
        {shown.map((m) => (
          <li key={m.key} className="panel p-3">
            <div className="flex items-start gap-2.5">
              <ProviderIcon provider={provider} size={18} className="mt-0.5 shrink-0" />
              <div className="min-w-0 flex-1">
                <div className="flex flex-wrap items-center gap-x-1.5 gap-y-0.5">
                  <span className="text-[14px] font-medium">{m.name}</span>
                  <LifecycleChip lifecycle={m.lifecycle} />
                </div>
                <div className="truncate font-mono text-[11px] text-fg-subtle">{m.id}</div>
                <dl className="mt-2 grid grid-cols-3 gap-2 text-[12px]">
                  <div>
                    <dt className="text-[10.5px] text-fg-subtle">In / Out $/1M</dt>
                    <dd className="font-mono tabular-nums">
                      {m.inPrice} / {m.outPrice}
                    </dd>
                  </div>
                  <div>
                    <dt className="text-[10.5px] text-fg-subtle">Context</dt>
                    <dd className="font-mono tabular-nums">{m.context}</dd>
                  </div>
                  <div>
                    <dt className="text-[10.5px] text-fg-subtle">Max out</dt>
                    <dd className="font-mono tabular-nums">{m.maxOut}</dd>
                  </div>
                </dl>
                <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11.5px] text-fg-muted">
                  <span className={m.reasoning ? "" : "line-through text-fg-subtle"}>Reasoning</span>
                  <span className={m.vision ? "" : "line-through text-fg-subtle"}>Vision</span>
                  <span className={m.tools ? "" : "line-through text-fg-subtle"}>Tools</span>
                  <span className={m.json ? "" : "line-through text-fg-subtle"}>JSON</span>
                </div>
                <BadgeChips badges={m.badges} max={4} size="xs" className="mt-2" />
              </div>
            </div>
          </li>
        ))}
      </ul>

      {hidden > 0 || expanded ? (
        <button type="button" onClick={() => setExpanded((v) => !v)} className={cn("tap mt-3 inline-flex h-10 w-full items-center justify-center gap-1.5 rounded-lg border border-border bg-bg-elevated text-[13px] font-medium text-fg-muted transition-colors hover:border-border-strong hover:text-fg sm:w-auto sm:px-4")} aria-expanded={expanded}>
          {expanded ? "Show fewer" : `Show all ${rows.length} models`}
          <ChevronDown className={cn("size-4 transition-transform", expanded && "rotate-180")} />
          {!expanded ? <Badge variant="default" className="ml-1">+{hidden}</Badge> : null}
        </button>
      ) : null}
    </>
  );
}