import { getDemo } from '@/lib/demo-kit/registry';
import type { DemoStatus, Limit } from '@/lib/demo-kit/types';
import { cn } from '@/lib/utils';

export interface ResolvedDemo {
  title: string;
  href: string;
  /** `spec` renders as "not built yet" beside the link. */
  status?: DemoStatus;
}

export interface LimitsCalloutProps {
  limits: Limit[];
  /**
   * Turns a demo slug into something linkable. Defaults to the registry, so a
   * limit pointing at a demo that does not exist yet renders as a stated gap
   * rather than as a link to a 404 — the honest outcome, since the roadmap is
   * allowed to be ahead of the repository.
   */
  resolveDemo?: (slug: string) => ResolvedDemo | undefined;
  title?: string;
  className?: string;
}

function defaultResolve(slug: string): ResolvedDemo | undefined {
  const meta = getDemo(slug);
  return meta ? { title: meta.title, href: `/demos/${meta.slug}`, status: meta.status } : undefined;
}

/**
 * What this demo does not teach.
 *
 * Styled as confidence, not apology: an amber card, because a limit is a
 * caution about the data and amber is what every other caution on the site
 * wears. A vendor who tells you the limits of their own demo before you find
 * them is a vendor you believe about everything else on the page — and every
 * limit names the demo that closes it, so the list reads as a roadmap rather
 * than a disclaimer.
 */
export function LimitsCallout({
  limits,
  resolveDemo = defaultResolve,
  title = 'What this does not teach',
  className,
}: LimitsCalloutProps) {
  if (limits.length === 0) return null;
  return (
    <section
      aria-label={title}
      className={cn('rounded-xl border border-border bg-warning-subtle p-4 sm:p-5', className)}
    >
      <h3 className="font-mono text-label uppercase tracking-label text-warning">{title}</h3>
      <ol className="mt-3 space-y-3">
        {limits.map((limit, index) => {
          const target = limit.answeredBy ? resolveDemo(limit.answeredBy) : undefined;
          return (
            <li key={limit.text} className="flex gap-3">
              <span className="pt-1 font-mono text-label text-muted" aria-hidden="true">
                {String(index + 1).padStart(2, '0')}
              </span>
              <div className="min-w-0 flex-1">
                <p className="max-w-measure text-pretty text-prose text-fg-2">{limit.text}</p>
                {target ? (
                  <p className="mt-1 flex flex-wrap items-center gap-x-2 text-small">
                    <a
                      href={target.href}
                      className="inline-flex min-h-11 items-center font-medium text-accent-fg underline decoration-border-strong underline-offset-4 hover:decoration-accent-fg sm:min-h-0"
                    >
                      answered by {target.title} →
                    </a>
                    {target.status === 'spec' ? (
                      <span className="font-mono text-label uppercase tracking-label text-muted">
                        not built yet
                      </span>
                    ) : null}
                  </p>
                ) : (
                  <p className="mt-1 text-small text-muted">
                    No demo answers this one yet. It is a real gap, not a rhetorical one.
                  </p>
                )}
              </div>
            </li>
          );
        })}
      </ol>
    </section>
  );
}
