import * as React from "react";
import Link from "next/link";
import { Check, Minus } from "lucide-react";
import type { ModelCapabilities, PolyModel } from "@/lib/ai/core/types";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { PROVIDERS } from "@/lib/client/providers";
import { deriveBadges, lifecycleStatus, speedTier, type BadgeContext } from "@/lib/models/badges";
import { formatContext, formatIsoDate, formatPrice } from "@/lib/models/format";
import { PARAM_DEFS } from "@/lib/models/params";
import { BadgeChips, LifecycleChip } from "./badge-chips";
import { Meter } from "./meter";
import { cn } from "@/lib/utils";

/**
 * Side-by-side comparison of 2–4 models. Server-safe (no hooks): used by the public
 * `/compare/[slug]` page and by `/app/models/compare`. Desktop = grid table; phones = stacked
 * spec cards (one per row) so nothing overflows horizontally.
 */
export const CAPABILITY_LABELS: Record<keyof ModelCapabilities, string> = {
  text: "Text",
  vision: "Vision (images)",
  reasoning: "Reasoning",
  tools: "Tool calling",
  structuredOutput: "Structured output",
  webSearch: "Web search",
  files: "File / PDF input",
  streaming: "Streaming",
  audioInput: "Audio input",
  audioOutput: "Audio output",
  imageGeneration: "Image generation",
  video: "Video input",
};

interface SpecRow {
  key: string;
  label: string;
  hint?: string;
  value: (m: PolyModel) => React.ReactNode;
  /** Numeric magnitude for the meter (null = no bar). */
  bar?: (m: PolyModel) => number | null;
}

function longTier(m: PolyModel): string {
  const lc = m.pricing?.longContext;
  if (!lc) return "—";
  return `> ${formatContext(lc.thresholdTokens)}: ${formatPrice(lc.inputPerMillion)} / ${formatPrice(lc.outputPerMillion)}`;
}

function metaStr(m: PolyModel, key: string): string {
  const v = m.metadata?.[key];
  return typeof v === "string" && v ? v : "";
}

export function CompareTable({ models, ctx, hrefFor, connected, className }: { models: PolyModel[]; ctx: BadgeContext; hrefFor?: (m: PolyModel) => string | undefined; connected?: (m: PolyModel) => boolean; className?: string }) {
  const rows: SpecRow[] = [
    { key: "provider", label: "Provider", value: (m) => PROVIDERS[m.provider].name },
    { key: "family", label: "Family", value: (m) => m.family ?? "—" },
    { key: "status", label: "Status", value: (m) => <LifecycleChip lifecycle={lifecycleStatus(m, { ctx, connected: connected?.(m) })} /> },
    { key: "context", label: "Context window", value: (m) => `${formatContext(m.limits?.contextTokens)} tokens`, bar: (m) => m.limits?.contextTokens ?? null },
    { key: "maxOut", label: "Max output", value: (m) => `${formatContext(m.limits?.maxOutputTokens)} tokens`, bar: (m) => m.limits?.maxOutputTokens ?? null },
    { key: "in", label: "Input price", hint: "USD per 1M tokens — shorter is cheaper", value: (m) => formatPrice(m.pricing?.inputPerMillion), bar: (m) => m.pricing?.inputPerMillion ?? null },
    { key: "out", label: "Output price", hint: "USD per 1M tokens — shorter is cheaper", value: (m) => formatPrice(m.pricing?.outputPerMillion), bar: (m) => m.pricing?.outputPerMillion ?? null },
    { key: "cached", label: "Cached input", value: (m) => formatPrice(m.pricing?.cachedInputPerMillion) },
    { key: "longTier", label: "Long-context tier", value: longTier },
    { key: "speed", label: "Speed tier", value: (m) => ({ fast: "Fast", standard: "Standard", frontier: "Frontier" })[speedTier(m, ctx)] },
    { key: "effort", label: "Reasoning effort", value: (m) => (m.parameters.reasoningEffort && m.parameters.reasoningEffortLevels?.length ? m.parameters.reasoningEffortLevels.join(" · ") : m.capabilities.reasoning ? "always on" : "—") },
    { key: "budget", label: "Thinking budget", value: (m) => (m.parameters.thinkingBudgetRange ? `${formatContext(m.parameters.thinkingBudgetRange.min)}–${formatContext(m.parameters.thinkingBudgetRange.max)}` : "—") },
    { key: "cutoff", label: "Knowledge cutoff", hint: "Only when the provider publishes it", value: (m) => metaStr(m, "knowledgeCutoff") || "—" },
    { key: "release", label: "Release date", hint: "Only when the provider publishes it", value: (m) => (metaStr(m, "releaseDate") ? formatIsoDate(metaStr(m, "releaseDate")) : "—") },
    { key: "badges", label: "Badges", value: (m) => <BadgeChips badges={deriveBadges(m, ctx)} max={5} /> },
  ];
  const colStyle: React.CSSProperties = { gridTemplateColumns: `150px repeat(${models.length}, minmax(0, 1fr))` };
  const max = (row: SpecRow) => Math.max(0, ...models.map((m) => row.bar?.(m) ?? 0));

  return (
    <div className={cn("space-y-8", className)}>
      {/* Header cards */}
      <div className={cn("grid gap-3", models.length >= 3 ? "grid-cols-2 md:grid-cols-4" : "grid-cols-2")}>
        {models.map((m) => {
          const href = hrefFor?.(m);
          const inner = (
            <>
              <span className="flex items-center gap-2">
                <ProviderIcon provider={m.provider} size={18} />
                <span className="text-[11px] font-medium uppercase tracking-wide text-fg-subtle">{PROVIDERS[m.provider].shortName}</span>
              </span>
              <span className="mt-2 block text-balance text-[15px] font-semibold leading-5 sm:text-base">{m.displayName}</span>
              <span className="mt-0.5 block truncate font-mono text-[11px] text-fg-subtle">{m.id}</span>
            </>
          );
          return href ? (
            <Link key={m.key} href={href} className="panel block min-w-0 p-3 transition-colors hover:bg-bg-muted sm:p-4">
              {inner}
            </Link>
          ) : (
            <div key={m.key} className="panel min-w-0 p-3 sm:p-4">
              {inner}
            </div>
          );
        })}
      </div>

      {/* Desktop grid */}
      <section aria-label="Specifications" className="hidden md:block">
        <div className="grid items-center gap-x-4 border-b border-border pb-2 text-[11px] font-medium uppercase tracking-wide text-fg-subtle" style={colStyle}>
          <span>Spec</span>
          {models.map((m) => (
            <span key={m.key} className="flex items-center gap-1.5 truncate">
              <ProviderIcon provider={m.provider} size={12} /> {m.displayName}
            </span>
          ))}
        </div>
        {rows.map((row) => {
          const mx = row.bar ? max(row) : 0;
          return (
            <div key={row.key} className="grid items-start gap-x-4 border-b border-hairline py-2.5 text-[13px]" style={colStyle}>
              <div>
                <div className="font-medium text-fg-muted">{row.label}</div>
                {row.hint ? <div className="text-[11px] text-fg-subtle">{row.hint}</div> : null}
              </div>
              {models.map((m) => (
                <div key={m.key} className="min-w-0 tabular-nums">
                  <div className="truncate">{row.value(m)}</div>
                  {row.bar ? <Meter value={row.bar(m)} max={mx} className="mt-1.5 w-full max-w-[220px]" label={`${row.label}: ${typeof row.value(m) === "string" ? row.value(m) : ""}`} /> : null}
                </div>
              ))}
            </div>
          );
        })}
      </section>

      {/* Mobile stacked */}
      <section aria-label="Specifications" className="space-y-3 md:hidden">
        {rows.map((row) => {
          const mx = row.bar ? max(row) : 0;
          return (
            <div key={row.key} className="panel p-3">
              <div className="text-[12px] font-medium text-fg-muted">{row.label}</div>
              {row.hint ? <div className="text-[11px] text-fg-subtle">{row.hint}</div> : null}
              <ul className="mt-2 space-y-2">
                {models.map((m) => (
                  <li key={m.key} className="min-w-0">
                    <div className="flex items-center justify-between gap-3 text-[13px]">
                      <span className="flex min-w-0 items-center gap-1.5 text-fg-muted">
                        <ProviderIcon provider={m.provider} size={13} />
                        <span className="truncate">{m.displayName}</span>
                      </span>
                      <span className="shrink-0 tabular-nums">{row.value(m)}</span>
                    </div>
                    {row.bar ? <Meter value={row.bar(m)} max={mx} className="mt-1" /> : null}
                  </li>
                ))}
              </ul>
            </div>
          );
        })}
      </section>

      <Matrix title="Capabilities" models={models} rows={(Object.keys(CAPABILITY_LABELS) as (keyof ModelCapabilities)[]).map((k) => ({ key: k, label: CAPABILITY_LABELS[k], on: (m: PolyModel) => Boolean(m.capabilities[k]) }))} />
      <Matrix title="Supported parameters" models={models} rows={PARAM_DEFS.map((d) => ({ key: d.key, label: d.label, on: (m: PolyModel) => d.supports(m), detail: (m: PolyModel) => (d.supports(m) ? d.detail?.(m) ?? null : null) }))} />
    </div>
  );
}

function Matrix({ title, models, rows }: { title: string; models: PolyModel[]; rows: { key: string; label: string; on: (m: PolyModel) => boolean; detail?: (m: PolyModel) => string | null }[] }) {
  const colStyle: React.CSSProperties = { gridTemplateColumns: `150px repeat(${models.length}, minmax(0, 1fr))` };
  const mobileStyle: React.CSSProperties = { gridTemplateColumns: `minmax(0, 1fr) repeat(${models.length}, 40px)` };
  return (
    <section aria-label={title}>
      <h3 className="mb-2 text-[12px] font-semibold uppercase tracking-wide text-fg-subtle">{title}</h3>
      {/* Desktop */}
      <div className="hidden md:block">
        <div className="grid gap-x-4 border-b border-border pb-2 text-[11px] font-medium uppercase tracking-wide text-fg-subtle" style={colStyle}>
          <span />
          {models.map((m) => (
            <span key={m.key} className="truncate">
              {m.displayName}
            </span>
          ))}
        </div>
        {rows.map((r) => (
          <div key={r.key} className="grid items-center gap-x-4 border-b border-hairline py-2 text-[13px]" style={colStyle}>
            <span className="text-fg-muted">{r.label}</span>
            {models.map((m) => (
              <span key={m.key} className="flex min-w-0 items-center gap-2">
                <Mark on={r.on(m)} />
                {r.detail?.(m) ? <span className="truncate font-mono text-[11px] text-fg-subtle">{r.detail(m)}</span> : null}
              </span>
            ))}
          </div>
        ))}
      </div>
      {/* Mobile: compact check grid with icon headers */}
      <div className="panel p-3 md:hidden">
        <div className="grid items-center gap-x-1 border-b border-hairline pb-2" style={mobileStyle}>
          <span />
          {models.map((m) => (
            <span key={m.key} className="flex justify-center" title={m.displayName}>
              <ProviderIcon provider={m.provider} size={14} />
            </span>
          ))}
        </div>
        {rows.map((r) => (
          <div key={r.key} className="grid items-center gap-x-1 border-b border-hairline py-2 text-[13px] last:border-b-0" style={mobileStyle}>
            <span className="min-w-0 truncate text-fg-muted">{r.label}</span>
            {models.map((m) => (
              <span key={m.key} className="flex justify-center">
                <Mark on={r.on(m)} />
              </span>
            ))}
          </div>
        ))}
        <p className="mt-2 text-[10.5px] text-fg-subtle">Columns: {models.map((m) => m.displayName).join(" · ")}</p>
      </div>
    </section>
  );
}

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