import type { ComponentDocSpec } from "@/lib/design-system/component-doc-types";
import {
  hasComponentDocSpec,
  listComponentDocSlugs,
  TOKEN_COMPONENT_DOC_SLUGS,
} from "@/lib/design-system/component-doc-slugs";

export { hasComponentDocSpec, listComponentDocSlugs };

type SpecLoader = () => Promise<ComponentDocSpec | undefined>;

let tokenDocsPromise: Promise<Record<string, ComponentDocSpec>> | undefined;

function loadTokenDoc(slug: string): Promise<ComponentDocSpec | undefined> {
  tokenDocsPromise ??= import("./tokens").then(
    (mod) => mod.TOKEN_COMPONENT_DOCS,
  );
  return tokenDocsPromise.then((docs) => docs[slug]);
}

/**
 * Per-slug loaders so a doc page only pulls that spec (and its previews).
 * Each `import()` path is a string literal so Vite can split the module.
 */
const PRIMITIVE_LOADERS: Record<string, SpecLoader> = {
  accordion: () =>
    import("./layout-chrome").then((m) => m.accordionComponentDoc),
  "ask-leo-button": () =>
    import("./ask-leo-button").then((m) => m.askLeoButtonComponentDoc),
  attachment: () =>
    import("./attachment").then((m) => m.attachmentComponentDoc),
  avatar: () => import("./avatar").then((m) => m.avatarComponentDoc),
  badge: () => import("./badge").then((m) => m.badgeComponentDoc),
  breadcrumb: () =>
    import("./breadcrumb").then((m) => m.breadcrumbComponentDoc),
  button: () => import("./button").then((m) => m.buttonComponentDoc),
  card: () => import("./card").then((m) => m.cardComponentDoc),
  chart: () => import("./chart").then((m) => m.chartComponentDoc),
  checkbox: () => import("./checkbox").then((m) => m.checkboxComponentDoc),
  "coach-mark": () =>
    import("./coach-mark").then((m) => m.coachMarkComponentDoc),
  command: () => import("./overlays-family").then((m) => m.commandComponentDoc),
  "date-picker": () =>
    import("./forms-family").then((m) => m.datePickerComponentDoc),
  dialog: () => import("./dialog").then((m) => m.dialogComponentDoc),
  "dropdown-menu": () =>
    import("./overlays-family").then((m) => m.dropdownMenuComponentDoc),
  fab: () => import("./fab").then((m) => m.fabComponentDoc),
  "filter-bar": () =>
    import("./filter-bar").then((m) => m.filterBarComponentDoc),
  "filter-button": () =>
    import("./filter-button").then((m) => m.filterButtonComponentDoc),
  "filter-chip-group": () =>
    import("./filter-chip-group").then((m) => m.filterChipGroupComponentDoc),
  "floating-sheet-panel": () =>
    import("./floating-sheet-panel").then(
      (m) => m.floatingSheetPanelComponentDoc,
    ),
  "floating-window": () =>
    import("./floating-window").then((m) => m.floatingWindowComponentDoc),
  form: () => import("./forms-family").then((m) => m.formComponentDoc),
  "inline-edit": () =>
    import("./forms-family").then((m) => m.inlineEditComponentDoc),
  input: () => import("./forms-family").then((m) => m.inputComponentDoc),
  kbd: () => import("./kbd").then((m) => m.kbdComponentDoc),
  "key-metrics": () =>
    import("./key-metrics").then((m) => m.keyMetricsComponentDoc),
  "leo-assist-bar": () =>
    import("./leo-assist-bar").then((m) => m.leoAssistBarComponentDoc),
  "leo-icon": () => import("./leo-icon").then((m) => m.leoIconComponentDoc),
  "marketing-banner": () =>
    import("./banner").then((m) => m.bannerComponentDoc),
  marker: () => import("./marker").then((m) => m.markerComponentDoc),
  message: () => import("./message").then((m) => m.messageComponentDoc),
  "mode-switch-search": () =>
    import("./mode-switch-search").then((m) => m.modeSwitchSearchComponentDoc),
  popover: () => import("./overlays-family").then((m) => m.popoverComponentDoc),
  "page-header": () =>
    import("./page-header").then((m) => m.pageHeaderComponentDoc),
  "primary-page-template": () =>
    import("./primary-page-template").then(
      (m) => m.primaryPageTemplateComponentDoc,
    ),
  "radio-group": () =>
    import("./forms-family").then((m) => m.radioGroupComponentDoc),
  select: () => import("./forms-family").then((m) => m.selectComponentDoc),
  separator: () =>
    import("./layout-chrome").then((m) => m.separatorComponentDoc),
  sidebar: () =>
    import("./shell-navigation").then((m) => m.sidebarComponentDoc),
  skeleton: () => import("./skeleton").then((m) => m.skeletonComponentDoc),
  table: () => import("./table").then((m) => m.tableComponentDoc),
  tabs: () => import("./tabs").then((m) => m.tabsComponentDoc),
  textarea: () => import("./forms-family").then((m) => m.textareaComponentDoc),
  tip: () => import("./overlays-family").then((m) => m.tipComponentDoc),
  "toggle-switch": () =>
    import("./toggle-switch").then((m) => m.toggleSwitchComponentDoc),
  "utility-bar": () =>
    import("./utility-bar").then((m) => m.utilityBarComponentDoc),
  "app-shell": () =>
    import("./shell-navigation").then((m) => m.appShellComponentDoc),
  "view-segmented-control": () =>
    import("./navigation").then((m) => m.viewSegmentedControlComponentDoc),
  "whats-new-sheet": () =>
    import("./whats-new-sheet").then((m) => m.whatsNewSheetComponentDoc),
  wizard: () => import("./wizard").then((m) => m.wizardComponentDoc),
};

const resolved = new Map<string, ComponentDocSpec | undefined>();
const inflight = new Map<string, Promise<ComponentDocSpec | undefined>>();

function resolveSpec(slug: string): Promise<ComponentDocSpec | undefined> {
  const primitive = PRIMITIVE_LOADERS[slug];
  if (primitive) return primitive();
  if ((TOKEN_COMPONENT_DOC_SLUGS as readonly string[]).includes(slug)) {
    return loadTokenDoc(slug);
  }
  return Promise.resolve(undefined);
}

/**
 * Load one component-doc spec. Promise identity is stable per slug so
 * `React.use(loadComponentDocSpec(slug))` can suspend without looping.
 */
export function loadComponentDocSpec(
  slug: string,
): Promise<ComponentDocSpec | undefined> {
  let pending = inflight.get(slug);
  if (!pending) {
    pending = resolveSpec(slug).then((spec) => {
      resolved.set(slug, spec);
      return spec;
    });
    inflight.set(slug, pending);
  }
  return pending;
}

/** Sync read of a spec that `loadComponentDocSpec` already resolved. */
export function getComponentDocSpec(
  slug: string,
): ComponentDocSpec | undefined {
  return resolved.get(slug);
}