// Define all sections in order - this matches the sidebar structure
export const navigationSections = [
  // Foundation
  { id: "color", name: "Color", category: "foundation" as const },
  { id: "iconography", name: "Iconography", category: "foundation" as const },
  { id: "typography", name: "Typography", category: "foundation" as const },
  { id: "spacing", name: "Spacing", category: "foundation" as const },
  { id: "elevation", name: "Elevation", category: "foundation" as const },

  // Components
  { id: "accordion", name: "Accordion", category: "components" as const },
  { id: "alerts", name: "Alert", category: "components" as const },
  { id: "alert-dialog", name: "Alert Dialog", category: "components" as const },
  { id: "avatars", name: "Avatar", category: "components" as const },
  { id: "badges", name: "Badge", category: "components" as const },
  { id: "breadcrumbs", name: "Breadcrumb", category: "components" as const },
  { id: "buttons", name: "Button", category: "components" as const },
  { id: "calendar", name: "Calendar", category: "components" as const },
  { id: "cards", name: "Card", category: "components" as const },
  { id: "checkbox", name: "Checkbox", category: "components" as const },
  { id: "collapsible", name: "Collapsible", category: "components" as const },
  { id: "combobox", name: "Combobox", category: "components" as const },
  { id: "command", name: "Command", category: "components" as const },
  { id: "context-menu", name: "Context Menu", category: "components" as const },
  { id: "dropdowns", name: "Dropdown", category: "components" as const },
  { id: "forms", name: "Form", category: "components" as const },
  { id: "hover-card", name: "Hover Card", category: "components" as const },
  { id: "label", name: "Label", category: "components" as const },
  { id: "modals", name: "Modal", category: "components" as const },
  { id: "pagination", name: "Pagination", category: "components" as const },
  { id: "progress", name: "Progress", category: "components" as const },
  { id: "scroll-area", name: "Scroll Area", category: "components" as const },
  { id: "sheet", name: "Sheet", category: "components" as const },
  { id: "sidebar", name: "Sidebar", category: "components" as const },
  { id: "skeleton", name: "Skeleton", category: "components" as const },
  { id: "slider", name: "Slider", category: "components" as const },
  { id: "switch", name: "Switch", category: "components" as const },
  { id: "tabs", name: "Tab", category: "components" as const },
  { id: "tables", name: "Table", category: "components" as const },
  { id: "top-navigation", name: "Top Navigation", category: "components" as const },
  { id: "tooltips", name: "Tooltip", category: "components" as const },

  // Blocks
  { id: "ai-chat-interface", name: "AI Chat Interface", category: "blocks" as const },
  { id: "contact-form", name: "Contact Form", category: "blocks" as const },
  { id: "data-table", name: "Data Table", category: "blocks" as const },
  { id: "user-profile", name: "User Profile", category: "blocks" as const },
  { id: "settings-panel", name: "Settings Panel", category: "blocks" as const },
  { id: "login", name: "Login", category: "blocks" as const },
]

export function getCurrentSectionIndex(sectionId: string): number {
  return navigationSections.findIndex((section) => section.id === sectionId)
}

export function getNextSection(currentSectionId: string) {
  const currentIndex = getCurrentSectionIndex(currentSectionId)
  if (currentIndex === -1) return null

  const nextIndex = (currentIndex + 1) % navigationSections.length
  return navigationSections[nextIndex]
}

export function getPreviousSection(currentSectionId: string) {
  const currentIndex = getCurrentSectionIndex(currentSectionId)
  if (currentIndex === -1) return null

  const previousIndex = currentIndex === 0 ? navigationSections.length - 1 : currentIndex - 1
  return navigationSections[previousIndex]
}