/**
 * Design OS primary nav — the internal DS workspace: catalog, library reference
 * hub, tokens, column catalog.
 *
 * Self-contained on purpose. `lib/mock/navigation.tsx` is app-owned in consumer
 * apps, so `exxat-ui upgrade` may never overwrite it; this module is
 * package-owned and auto-ported instead, and the consumer registers it with one
 * line. See `packages/ui/bin/upgrade-design-os-wiring.mjs`. That also means it
 * must not import runtime values from `navigation.tsx` (types only).
 */
import { DESIGN_SYSTEM_PRIMARY_NAV_LABEL } from "@/lib/design-system/hub-label"
import {
  LIBRARY_ALL_PATH,
  LIBRARY_ENTRY_PATH,
  LIBRARY_HUB_FIND_PATH,
} from "@/lib/library-nav"
import type { NavLayoutSpec, NavLinkSpec } from "@exxatdesignux/product-framework"

function dashboardItem(slug: string): NavLinkSpec {
  return {
    key: "dashboard",
    title: "Dashboard",
    url: `/${slug}/dashboard`,
    iconClass:       "fa-light fa-grid-2",
    iconActiveClass: "fa-solid fa-grid-2",
  }
}

function designSystemItem(slug: string): NavLinkSpec {
  const designSystemRoot = `/${slug}/design-system`
  return {
    key: "design-system",
    title: DESIGN_SYSTEM_PRIMARY_NAV_LABEL,
    url: designSystemRoot,
    iconClass:       "fa-light fa-book",
    iconActiveClass: "fa-solid fa-book",
    drillIn: {
      sectionTitle: DESIGN_SYSTEM_PRIMARY_NAV_LABEL,
      sectionRouteRoot: designSystemRoot,
      items: [],
    },
  }
}

function libraryItem(slug: string): NavLinkSpec {
  return {
    key: "library",
    title: "Question bank",
    url: `/${slug}${LIBRARY_ENTRY_PATH}`,
    iconClass:       "fa-light fa-books",
    iconActiveClass: "fa-solid fa-books",
    secondaryPanel: "library",
    /** List hub (`/library/all`) — not discovery home (`/library`). */
    primaryHubChildKey: "library-all",
    children: [
      {
        key: "library-hub",
        title: "Library home",
        url: `/${slug}${LIBRARY_ENTRY_PATH}`,
        iconClass:       "fa-light fa-sparkles",
        iconActiveClass: "fa-solid fa-sparkles",
      },
      {
        key: "library-search",
        title: "Search",
        url: `/${slug}${LIBRARY_HUB_FIND_PATH}`,
        iconClass:       "fa-light fa-magnifying-glass",
        iconActiveClass: "fa-solid fa-magnifying-glass",
      },
      {
        key: "library-all",
        title: "Library",
        url: `/${slug}${LIBRARY_ALL_PATH}`,
        iconClass:       "fa-light fa-table-list",
        iconActiveClass: "fa-solid fa-table-list",
      },
    ],
  }
}

function columnsItem(slug: string): NavLinkSpec {
  return {
    key: "columns",
    title: "Column types",
    url: `/${slug}/columns`,
    iconClass:       "fa-light fa-table-columns",
    iconActiveClass: "fa-solid fa-table-columns",
  }
}

/** Token category drill-in rows — scoped under `/${productSlug}/tokens-themes`. */
export function buildTokensDrillInItems(basePath: string): NavLinkSpec[] {
  const root = basePath.replace(/\/$/, "")
  const tokensBase = root ? `${root}/tokens-themes` : "/tokens-themes"
  return [
    {
      key: "tokens-all",
      title: "All tokens",
      url: tokensBase,
      iconClass:       "fa-light fa-grid-2",
      iconActiveClass: "fa-solid fa-grid-2",
    },
    {
      key: "tokens-color",
      title: "Colors",
      url: `${tokensBase}?category=color`,
      iconClass:       "fa-light fa-palette",
      iconActiveClass: "fa-solid fa-palette",
    },
    {
      key: "tokens-gradient",
      title: "Gradients",
      url: `${tokensBase}?category=gradient`,
      iconClass:       "fa-light fa-circle-half-stroke",
      iconActiveClass: "fa-solid fa-circle-half-stroke",
    },
    {
      key: "tokens-radius",
      title: "Radius",
      url: `${tokensBase}?category=radius`,
      iconClass:       "fa-light fa-rectangle-vertical",
      iconActiveClass: "fa-solid fa-rectangle-vertical",
    },
    {
      key: "tokens-size",
      title: "Size",
      url: `${tokensBase}?category=size`,
      iconClass:       "fa-light fa-ruler-horizontal",
      iconActiveClass: "fa-solid fa-ruler-horizontal",
    },
    {
      key: "tokens-shadow",
      title: "Shadow",
      url: `${tokensBase}?category=shadow`,
      iconClass:       "fa-light fa-clone",
      iconActiveClass: "fa-solid fa-clone",
    },
    {
      key: "tokens-typography",
      title: "Typography",
      url: `${tokensBase}?category=typography`,
      iconClass:       "fa-light fa-text-size",
      iconActiveClass: "fa-solid fa-text-size",
    },
    {
      key: "tokens-transition",
      title: "Motion",
      url: `${tokensBase}?category=transition`,
      iconClass:       "fa-light fa-wave-sine",
      iconActiveClass: "fa-solid fa-wave-sine",
    },
    {
      key: "tokens-alias",
      title: "Aliases",
      url: `${tokensBase}?category=alias`,
      iconClass:       "fa-light fa-link",
      iconActiveClass: "fa-solid fa-link",
    },
    {
      key: "tokens-other",
      title: "Other",
      url: `${tokensBase}?category=other`,
      iconClass:       "fa-light fa-hashtag",
      iconActiveClass: "fa-solid fa-hashtag",
    },
  ]
}

export function buildDesignOsNavLayout(slug: string): NavLayoutSpec {
  const tokensRoot = `/${slug}/tokens-themes`
  return {
    preamble: [
      dashboardItem(slug),
      designSystemItem(slug),
      {
        key: "delivery",
        title: "Delivery",
        url: `/${slug}/delivery`,
        iconClass:       "fa-light fa-clipboard-check",
        iconActiveClass: "fa-solid fa-clipboard-check",
      },
      libraryItem(slug),
      {
        key: "tokens",
        title: "Tokens & themes",
        url: tokensRoot,
        iconClass:       "fa-light fa-palette",
        iconActiveClass: "fa-solid fa-palette",
        drillIn: {
          sectionTitle: "Tokens & themes",
          sectionRouteRoot: tokensRoot,
          items: buildTokensDrillInItems(`/${slug}`),
        },
      },
      columnsItem(slug),
    ],
    sections: [],
  }
}