"use client";
import * as React from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { AlertTriangle, Check, GitCompareArrows, MessageSquare, Minus, Star, Swords, Tag } from "lucide-react";
import type { ModelCapabilities, PolyModel } from "@/lib/client/types";
import { useApp } from "@/components/app/store";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { ResponsiveDialog } from "@/components/ui/sheet";
import { CopyButton } from "@/components/ui/misc";
import { PromptDialog } from "@/components/common/prompt-dialog";
import { ModelBadges, StatusBadge, useBadgeContext } from "@/components/chat/model-badges";
import { CAPABILITY_LABELS } from "./compare-table";
import { PROVIDERS } from "@/lib/client/providers";
import { PARAM_DEFS, SETTINGS_GROUPS } from "@/lib/models/params";
import { speedTier, shutdownDateOf } from "@/lib/models/badges";
import { formatContext, formatIsoDate, formatPrice } from "@/lib/models/format";
import { cn } from "@/lib/utils";

/**
 * Model profile — every field the registry knows, "—" for everything it does not.
 * Release dates and knowledge cutoffs are shown only when the provider publishes them.
 */
export interface ModelProfileProps {
  model: PolyModel | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  /** Override "Use in chat" (e.g. the selector picks the model instead of navigating). */
  onUse?: (m: PolyModel) => void;
  /** Optional current model key to seed "Compare" with a second column. */
  compareWith?: string | null;
}

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

export function ModelProfile({ model: m, open, onOpenChange, onUse, compareWith }: ModelProfileProps) {
  const router = useRouter();
  const { connectedProviders, favorites, labels, toggleFavorite, setLabel, setSelectedModelKey } = useApp();
  const ctx = useBadgeContext();
  const [labelOpen, setLabelOpen] = React.useState(false);
  if (!m) return null;

  const connected = connectedProviders.has(m.provider);
  const fav = favorites.has(m.key);
  const label = labels[m.key];
  const sd = shutdownDateOf(m);
  const lc = m.pricing?.longContext;
  const tier = speedTier(m, ctx);
  const aliases = Array.isArray(m.metadata?.aliases) ? (m.metadata!.aliases as string[]) : [];
  const description = metaStr(m, "description") ?? metaStr(m, "notes");
  const compareKeys = [...new Set([compareWith, m.key].filter((k): k is string => Boolean(k)))];
  const compareHref = `/app/models/compare?m=${encodeURIComponent(compareKeys.join(","))}`;

  const use = () => {
    onOpenChange(false);
    if (onUse) return onUse(m);
    setSelectedModelKey(m.key);
    router.push("/app/chat");
  };

  const facts: { label: string; value: React.ReactNode; hint?: string }[] = [
    { label: "Context", value: formatContext(m.limits?.contextTokens) },
    { label: "Max output", value: formatContext(m.limits?.maxOutputTokens) },
    { label: "Input $/1M", value: formatPrice(m.pricing?.inputPerMillion) },
    { label: "Output $/1M", value: formatPrice(m.pricing?.outputPerMillion) },
    { label: "Cached input $/1M", value: formatPrice(m.pricing?.cachedInputPerMillion) },
    { label: "Long-context tier", value: lc ? `> ${formatContext(lc.thresholdTokens)}: ${formatPrice(lc.inputPerMillion)} / ${formatPrice(lc.outputPerMillion)}` : "—", hint: lc ? "input / output above the threshold" : undefined },
    { label: "Speed tier", value: { fast: "Fast", standard: "Standard", frontier: "Frontier" }[tier] },
    { label: "Release date", value: metaStr(m, "releaseDate") ? formatIsoDate(metaStr(m, "releaseDate")) : "—", hint: "as published by the provider" },
    { label: "Knowledge cutoff", value: metaStr(m, "knowledgeCutoff") ?? "—", hint: "as published by the provider" },
    { label: "Listed by provider", value: formatIsoDate(metaStr(m, "createdAt")), hint: "creation timestamp from the provider’s model list" },
    { label: "First seen in PolyLLM", value: formatIsoDate(metaStr(m, "firstSeenAt")) },
    { label: "Prices as of", value: m.pricing?.asOf ?? "—" },
  ];

  return (
    <>
      <ResponsiveDialog
        open={open}
        onOpenChange={onOpenChange}
        size="lg"
        snap="full"
        hideTitle
        title={m.displayName}
        description={`${PROVIDERS[m.provider].name} model profile`}
        footer={
          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <span className="text-xs text-fg-subtle">{connected ? `${PROVIDERS[m.provider].shortName} key connected` : `Connect a ${PROVIDERS[m.provider].shortName} key to use this model`}</span>
            <div className="grid grid-cols-3 gap-2 sm:flex">
              <Button variant="outline" size="sm" className="h-10 sm:h-8" onClick={() => { onOpenChange(false); router.push(compareHref); }}>
                <GitCompareArrows /> <span className="truncate">Compare</span>
              </Button>
              <Button variant="outline" size="sm" className="h-10 sm:h-8" asChild>
                <Link href={`/app/arena?models=${encodeURIComponent(m.key)}`} onClick={() => onOpenChange(false)}>
                  <Swords /> <span className="truncate">Arena</span>
                </Link>
              </Button>
              {connected ? (
                <Button size="sm" className="h-10 sm:h-8" onClick={use} disabled={m.status === "deprecated"}>
                  <MessageSquare /> <span className="truncate">Use in chat</span>
                </Button>
              ) : (
                <Button size="sm" className="h-10 sm:h-8" asChild>
                  <Link href="/app/settings/providers">Connect</Link>
                </Button>
              )}
            </div>
          </div>
        }
      >
        <div className="space-y-6 pt-1">
          {/* Header */}
          <div className="flex items-start gap-3">
            <span className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-bg-subtle">
              <ProviderIcon provider={m.provider} size={22} />
            </span>
            <div className="min-w-0 flex-1">
              <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
                <h2 className="text-lg font-semibold leading-6 tracking-tight">{m.displayName}</h2>
                {label ? (
                  <span className="inline-flex items-center gap-1 rounded-md bg-accent-soft pl-1.5 pr-0.5 text-[12px] font-medium text-accent">
                    {label}
                    <button type="button" className="tap rounded p-0.5 text-accent/70 hover:text-accent" aria-label="Remove custom label" onClick={() => void setLabel(m.key, null)}>
                      <Minus className="size-3" />
                    </button>
                  </span>
                ) : null}
                <StatusBadge model={m} connected={connected} ctx={ctx} showActive />
              </div>
              <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[12px] text-fg-muted">
                <span className="inline-flex items-center gap-1 font-mono">
                  {m.key}
                  <CopyButton value={m.key} label="Copy model key" className="size-6" />
                </span>
                {m.family ? <span>· {m.family}</span> : null}
              </div>
              <ModelBadges model={m} ctx={ctx} max={7} className="mt-2" />
            </div>
            <div className="flex shrink-0 flex-col gap-1">
              <Button variant="ghost" size="icon" aria-pressed={fav} aria-label={fav ? "Remove from favorites" : "Add to favorites"} onClick={() => void toggleFavorite(m.key)} className={cn(fav && "text-warning")}>
                <Star key={fav ? "on" : "off"} className={cn(fav && "fill-current animate-pop")} />
              </Button>
              <Button variant="ghost" size="icon" aria-label="Set custom label" onClick={() => setLabelOpen(true)}>
                <Tag />
              </Button>
            </div>
          </div>

          {sd ? (
            <div className="flex items-start gap-2 rounded-lg bg-warning-soft px-3 py-2 text-xs text-warning">
              <AlertTriangle className="mt-0.5 size-3.5 shrink-0" />
              <p>
                {PROVIDERS[m.provider].name} has scheduled this model for shutdown on <span className="font-medium">{formatIsoDate(sd)}</span>. Move presets to a newer model before then.
              </p>
            </div>
          ) : null}

          {description ? <p className="text-[13px] leading-5 text-fg-muted">{description}</p> : null}

          {/* Facts */}
          <dl className="grid grid-cols-2 gap-2 sm:grid-cols-3">
            {facts.map((f) => (
              <div key={f.label} className="panel px-3 py-2">
                <dt className="text-[11px] text-fg-subtle">{f.label}</dt>
                <dd className="mt-0.5 truncate font-mono text-[13px] tabular-nums" title={typeof f.value === "string" ? f.value : undefined}>
                  {f.value}
                </dd>
                {f.hint ? <dd className="text-[10px] text-fg-subtle">{f.hint}</dd> : null}
              </div>
            ))}
          </dl>

          {/* Capabilities */}
          <section>
            <h3 className="mb-2 text-[12px] font-semibold uppercase tracking-wide text-fg-subtle">Capabilities</h3>
            <ul className="grid grid-cols-2 gap-1.5 sm:grid-cols-3">
              {(Object.keys(CAPABILITY_LABELS) as (keyof ModelCapabilities)[]).map((k) => {
                const on = m.capabilities[k];
                return (
                  <li key={k} className={cn("flex items-center gap-2 rounded-md px-2.5 py-1.5 text-[12.5px]", on ? "bg-bg-subtle text-fg" : "text-fg-subtle")}>
                    {on ? <Check className="size-3.5 text-success" aria-hidden /> : <Minus className="size-3.5 text-border-strong" aria-hidden />}
                    {CAPABILITY_LABELS[k]}
                  </li>
                );
              })}
            </ul>
          </section>

          {/* Parameters */}
          <section>
            <h3 className="mb-2 text-[12px] font-semibold uppercase tracking-wide text-fg-subtle">Supported parameters</h3>
            <div className="space-y-3">
              {SETTINGS_GROUPS.map((g) => {
                const defs = PARAM_DEFS.filter((d) => d.group === g.key);
                return (
                  <div key={g.key}>
                    <p className="mb-1 text-[11px] font-medium text-fg-muted">{g.label}</p>
                    <ul className="grid grid-cols-2 gap-1.5 sm:grid-cols-3">
                      {defs.map((d) => {
                        const on = d.supports(m);
                        const detail = on ? d.detail?.(m) : null;
                        return (
                          <li key={d.key} className={cn("rounded-md px-2.5 py-1.5 text-[12.5px]", on ? "bg-bg-subtle text-fg" : "text-fg-subtle line-through decoration-border-strong")}>
                            <span>{d.label}</span>
                            {detail ? <span className="mt-0.5 block font-mono text-[10.5px] text-fg-muted no-underline">{detail}</span> : null}
                          </li>
                        );
                      })}
                    </ul>
                  </div>
                );
              })}
            </div>
            {m.metadata?.samplingMode === "conditional" ? <p className="mt-2 text-[11.5px] text-fg-subtle">Sampling parameters are accepted only when reasoning effort is “none”.</p> : null}
            {m.metadata?.alwaysReasoning ? <p className="mt-1 text-[11.5px] text-fg-subtle">This model always reasons; effort only changes how much.</p> : null}
          </section>

          {/* Lifecycle */}
          <section>
            <h3 className="mb-2 text-[12px] font-semibold uppercase tracking-wide text-fg-subtle">Lifecycle</h3>
            <dl className="grid grid-cols-2 gap-2 text-[12.5px] sm:grid-cols-3">
              <div className="panel px-3 py-2">
                <dt className="text-[11px] text-fg-subtle">Provider status</dt>
                <dd className="mt-0.5 capitalize">{m.status}</dd>
              </div>
              <div className="panel px-3 py-2">
                <dt className="text-[11px] text-fg-subtle">Shutdown date</dt>
                <dd className="mt-0.5 font-mono">{sd ? formatIsoDate(sd) : "—"}</dd>
              </div>
              <div className="panel px-3 py-2">
                <dt className="text-[11px] text-fg-subtle">Availability</dt>
                <dd className="mt-0.5">{connected ? "Usable with your key" : "No key connected"}</dd>
              </div>
            </dl>
            {aliases.length ? (
              <p className="mt-2 text-xs text-fg-muted">
                Aliases: <span className="font-mono">{aliases.join(", ")}</span>
              </p>
            ) : null}
            {m.metadata?.source ? (
              <p className="mt-1 text-[11px] text-fg-subtle">
                Source: <Badge variant="outline">{String(m.metadata.source)}</Badge> {m.pricing?.source ? <>· pricing from {String(m.pricing.source)}</> : null}
              </p>
            ) : null}
          </section>
        </div>
      </ResponsiveDialog>

      <PromptDialog open={labelOpen} onOpenChange={setLabelOpen} title="Custom label" description={`Shown next to ${m.displayName} everywhere in PolyLLM.`} label="Label" placeholder="My research model" defaultValue={label ?? ""} maxLength={60} confirmLabel="Save" onSubmit={(v) => setLabel(m.key, v)} />
    </>
  );
}