import { Card, CardContent, CardFooter } from '@/components/card';
import { CbarLogo } from '../brand/logo';
import { ErrorBoundary } from '~/chrome/ui/error-boundary';
import { useGroupLabel, useLang, useMessages } from '../i18n';
import { entries, groupedEntries } from '../registry';
import type { Entry } from '../registry/types';
import { Link } from '../router';

/**
 * What to draw on a card.
 *
 * An entry with axes renders itself at its defaults. The overlays and the data
 * widgets have no single default instance — a closed Dialog is an empty box —
 * so they fall back to their first composition, clipped to card height.
 */
function preview(entry: Entry) {
  if (entry.render) return entry.render({ ...entry.defaults });
  return entry.compositions?.[0]?.render() ?? null;
}

/**
 * Every component on one page.
 *
 * Storybook can only show you one story at a time; this is the view that
 * answers "what is actually in this kit" in a single scroll. Each card renders
 * the real component at its defaults and links to its own page.
 */
export function OverviewPage() {
  const m = useMessages();
  const [lang] = useLang();
  const groupLabel = useGroupLabel();

  return (
    <div className="pb-16">
      {/* The band CBAR opens its own documentation with — brand fill, a radius
          on the trailing corners, the thumbnail's discs off to the right. */}
      <header className="cbar-hero px-8 py-14 sm:px-14 sm:py-16">
        <CbarLogo lang={lang} className="h-11 w-auto" />
        <h1 className="t-h1 mt-4">{m.nav.brandCaption}</h1>
        <p className="t-body mt-4 max-w-prose opacity-90">{m.overview.lead(entries.length)}</p>
      </header>

      <div className="mx-auto max-w-5xl space-y-12 px-8 pt-12">
        {groupedEntries.map(([group, items]) => (
          <section key={group} className="space-y-4">
            <h2 className="t-overline text-muted-foreground">{groupLabel(group)}</h2>
            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
              {/* The kit's own Card, with its vertical padding zeroed: the
                  preview is a bleed, so it owns the top of the surface. The
                  Card is still a div and not a link — several previews
                  (Breadcrumb, Pagination) render real anchors and an <a> may
                  not contain another one. Only the name is the link. */}
              {items.map((entry) => (
                <Card key={entry.slug} className="cbar-card gap-0 overflow-hidden py-0">
                  <CardContent className="flex max-h-44 min-h-28 flex-1 items-center justify-center overflow-hidden bg-background p-6">
                    {/* Forty components render live on this one page, so it is
                        the place a broken one does the most damage: without a
                        wall per card, one throw is a blank site. */}
                    <ErrorBoundary label={entry.name}>{preview(entry)}</ErrorBoundary>
                  </CardContent>
                  <CardFooter className="border-t border-border px-4 py-3">
                    <Link
                      to={`/${entry.slug}`}
                      className="text-sm font-medium text-foreground hover:underline"
                    >
                      {entry.name}
                    </Link>
                  </CardFooter>
                </Card>
              ))}
            </div>
          </section>
        ))}
      </div>
    </div>
  );
}