"use client";

import * as React from "react";
import { Link, useLocation } from "react-router";

import { Button } from "@/components/ui/button";
import {
  ComponentDocImportSection,
  ComponentDocSpecSections,
  DesignSystemDocArticle,
} from "@/components/design-system/component-doc-shell";
import { ComponentDocDetails } from "@/components/design-system/component-doc-details";
import { designSystemHasLivePreview } from "@/components/design-system/design-system-preview-meta";
import { resolveComponentDocSpec } from "@/lib/design-system/component-doc-resolve";
import { designSystemPreviewIsWide } from "@/lib/design-system/component-doc-shell";
import { loadComponentDocSpec } from "@/lib/design-system/component-docs";
import {
  getDesignSystemChildEntries,
  getDesignSystemEntry,
  type DesignSystemRegistryEntry,
} from "@/lib/design-system/registry";
import {
  DS_DOC_BODY,
  DS_DOC_BODY_EMPHASIS,
} from "@/lib/design-system/doc-typography";
import { cn } from "@/lib/utils";
import { useProductDashboardHref } from "@/contexts/product-route-sync";

const FallbackPreviewSections = React.lazy(() =>
  import("@/components/design-system/design-system-previews").then((mod) => ({
    default: mod.DesignSystemPreviewSections,
  })),
);

const PREVIEW_FALLBACK = (
  <div className="flex min-h-64 flex-col gap-4 rounded-lg border border-border bg-muted/10 p-4">
    <div className="h-8 w-64 max-w-full rounded-md bg-muted" />
    <div className="min-h-44 flex-1 rounded-lg bg-muted" />
  </div>
);

function PreviewPlaceholder({ entry }: { entry: DesignSystemRegistryEntry }) {
  return (
    <div
      className={cn(
        "flex min-h-[12rem] flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border",
        "bg-muted/10 px-6 py-10 text-center",
      )}
    >
      <i
        className="fa-light fa-cube text-2xl text-muted-foreground"
        aria-hidden="true"
      />
      <p className={DS_DOC_BODY_EMPHASIS}>Example preview</p>
      <p className={cn("max-w-md", DS_DOC_BODY)}>
        Skeleton slot for{" "}
        <span className={DS_DOC_BODY_EMPHASIS}>{entry.name}</span>. Wire live
        demos here.
      </p>
    </div>
  );
}

/**
 * Client-side nav (react-router `<Link>`, unlike a real page load) never
 * scrolls to a URL hash on its own, so a folded-child link like
 * `marketing-banner#banner` would land on top of the Banner page with no
 * visible sign it did anything more specific than the Banner link. Once the
 * doc's sections (or anatomy rows) have painted, find the matching `id` and
 * bring it into view.
 */
function useScrollToDocHash(hash: string, deps: readonly unknown[]) {
  React.useEffect(() => {
    if (!hash) return;
    const id = hash.slice(1);
    if (!id) return;
    const raf = requestAnimationFrame(() => {
      document.getElementById(id)?.scrollIntoView({ block: "start" });
    });
    return () => cancelAnimationFrame(raf);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [hash, ...deps]);
}

export function DesignSystemDocPage({
  entry,
}: {
  entry: DesignSystemRegistryEntry;
}) {
  const dashboardHref = useProductDashboardHref();
  const { hash } = useLocation();
  const productBase = dashboardHref.replace(/\/dashboard$/, "");
  const componentDoc = React.use(loadComponentDocSpec(entry.slug));
  const hasSpecSections = Boolean(componentDoc?.sections.length);
  const hasLivePreview =
    hasSpecSections || designSystemHasLivePreview(entry.slug);
  const childEntries = getDesignSystemChildEntries(entry.slug);
  const skeletonDoc = React.useMemo(
    () => resolveComponentDocSpec(entry, childEntries, componentDoc),
    [componentDoc, entry, childEntries],
  );
  // The entry, its folded children, and the doc's extras are free to name the
  // same module. Dedupe by normalized path so `…/components/status-badge` and
  // `…/components/ui/status-badge` (same export via package `./components/*`)
  // do not render as two import rows.
  const seenImports = new Set<string>();
  const relatedImports = [
    ...(entry.importPath
      ? [{ label: entry.name, path: entry.importPath }]
      : []),
    ...childEntries.flatMap((child) =>
      child.importPath ? [{ label: child.name, path: child.importPath }] : [],
    ),
    ...(componentDoc?.extraImports ?? []),
  ].filter((item) => {
    const key = item.path
      .replace(
        /@exxatdesignux\/ui\/components\/ui\//,
        "@exxatdesignux/ui/components/",
      )
      .replace(/@\/components\/ui\//, "@exxatdesignux/ui/components/")
      .replace(
        /@\/components\/data-views.*/,
        "@exxatdesignux/ui/components/data-views",
      );
    if (seenImports.has(key)) return false;
    seenImports.add(key);
    return true;
  });

  useScrollToDocHash(hash, [entry.slug]);

  return (
    <DesignSystemDocArticle
      className={designSystemPreviewIsWide(entry.slug) ? "max-w-none" : undefined}
    >
      {hasSpecSections && componentDoc ? (
        <ComponentDocSpecSections spec={componentDoc} />
      ) : hasLivePreview ? (
        <React.Suspense fallback={PREVIEW_FALLBACK}>
          <FallbackPreviewSections slug={entry.slug} />
        </React.Suspense>
      ) : (
        <PreviewPlaceholder entry={entry} />
      )}

      <ComponentDocDetails spec={skeletonDoc} />

      <ComponentDocImportSection
        rows={relatedImports}
        sourcePath={entry.sourcePath}
        heading={entry.tier === "pattern" ? "Guidance source" : "Import"}
      />

      {entry.routeAbsolute || entry.routeSuffix ? (
        <section className="flex flex-wrap gap-2">
          <Button type="button" variant="outline" size="sm" asChild>
            <Link
              to={entry.routeAbsolute ?? `${productBase}${entry.routeSuffix}`}
            >
              Open live example
            </Link>
          </Button>
        </section>
      ) : null}
    </DesignSystemDocArticle>
  );
}

export function DesignSystemNotFound({ slug }: { slug: string }) {
  const known = getDesignSystemEntry(slug);
  if (known) return null;
  return (
    <DesignSystemDocArticle className="max-w-lg text-center">
      <h1 className="text-lg font-semibold text-foreground">Not in registry</h1>
      <p className={cn("mt-2", DS_DOC_BODY)}>
        No registry entry for <code className="font-mono text-sm">{slug}</code>.
      </p>
      <Button
        type="button"
        variant="outline"
        size="sm"
        className="mt-4"
        asChild
      >
        <Link to="..">Back to index</Link>
      </Button>
    </DesignSystemDocArticle>
  );
}