import { ArrowRight, ShieldQuestion } from 'lucide-react';
import { getDemo } from '@/lib/demo-kit/registry';
import type { Limit } from '@/lib/demo-kit/types';
import * as st from '@/content/styles';
import { cn } from '@/lib/utils';

export interface LimitsCalloutProps {
  limits: Limit[];
  /**
   * Turns a demo slug into something linkable. The shell has no registry
   * dependency of its own, so the page that knows the routes supplies this.
   */
  resolveDemo?: (slug: string) => { title: string; href: string } | undefined;
  title?: string;
  className?: string;
}

/**
 * A limit names the demo that closes it by SLUG. Resolving it through the
 * registry means a limit pointing at a demo that does not exist yet renders as
 * a stated gap rather than as a link to a 404 — which is the honest outcome,
 * since the roadmap is allowed to be ahead of the repository.
 */
function defaultResolve(slug: string): { title: string; href: string } | undefined {
  const meta = getDemo(slug);
  return meta ? { title: meta.title, href: `/demos/${meta.slug}` } : undefined;
}

/**
 * What this demo does not teach.
 *
 * Styled as confidence, not apology. 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 here 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 demo does not teach',
  className,
}: LimitsCalloutProps) {
  if (limits.length === 0) return null;
  return (
    <section aria-label={title} className={cn('card p-4', className)}>
      <div className="flex items-center gap-2">
        <ShieldQuestion className="size-4 text-muted" aria-hidden="true" />
        <h3 className="text-sm font-semibold">{title}</h3>
      </div>
      <ul className="mt-3 space-y-3">
        {limits.map((limit) => {
          const target = limit.answeredBy ? resolveDemo(limit.answeredBy) : undefined;
          return (
            <li key={limit.text} className="border-l-2 border-border pl-3">
              <p className="text-pretty text-sm leading-relaxed text-fg">{limit.text}</p>
              {target ? (
                <a
                  href={target.href}
                  className={cn(st.link, 'mt-1 inline-flex items-center gap-1 text-xs')}
                >
                  Answered by {target.title}
                  <ArrowRight className="size-3" aria-hidden="true" />
                </a>
              ) : (
                <p className="mt-1 text-xs text-muted">
                  No demo answers this one yet. It is a real gap, not a rhetorical one.
                </p>
              )}
            </li>
          );
        })}
      </ul>
    </section>
  );
}
