export interface ComponentInfo {
  name: string;
  title: string;
  description: string;
  href: string;
  category?: string;
}

const componentsMap: Record<string, ComponentInfo> = {
  accordion: {
    category: "layout",
    description: "Collapsible content sections",
    href: "/docs/components/accordion",
    name: "accordion",
    title: "Accordion",
  },
  alert: {
    category: "display",
    description: "Display important messages and notifications",
    href: "/docs/components/alert",
    name: "alert",
    title: "Alert",
  },
  alertdialog: {
    category: "layout",
    description: "Critical confirmations requiring user attention",
    href: "/docs/components/alert-dialog",
    name: "alertdialog",
    title: "AlertDialog",
  },
  autocomplete: {
    category: "forms",
    description: "Text input with searchable suggestions",
    href: "/docs/components/autocomplete",
    name: "autocomplete",
    title: "Autocomplete",
  },
  avatar: {
    category: "display",
    description: "Display user profile images",
    href: "/docs/components/avatar",
    name: "avatar",
    title: "Avatar",
  },
  badge: {
    category: "display",
    description: "Small indicator positioned relative to another element",
    href: "/docs/components/badge",
    name: "badge",
    title: "Badge",
  },
  breadcrumbs: {
    category: "navigation",
    description: "Display the user's current location within a hierarchy",
    href: "/docs/components/breadcrumbs",
    name: "breadcrumbs",
    title: "Breadcrumbs",
  },
  button: {
    category: "forms",
    description: "Allows a user to perform an action",
    href: "/docs/components/button",
    name: "button",
    title: "Button",
  },
  buttongroup: {
    category: "forms",
    description: "Group related buttons together",
    href: "/docs/components/button-group",
    name: "buttongroup",
    title: "ButtonGroup",
  },
  calendar: {
    category: "date-time",
    description: "Interactive month grid for selecting dates",
    href: "/docs/components/calendar",
    name: "calendar",
    title: "Calendar",
  },
  card: {
    category: "layout",
    description: "Content container with header, body, and footer",
    href: "/docs/components/card",
    name: "card",
    title: "Card",
  },
  checkbox: {
    category: "forms",
    description: "Binary choice input control",
    href: "/docs/components/checkbox",
    name: "checkbox",
    title: "Checkbox",
  },
  checkboxgroup: {
    category: "forms",
    description: "Group of checkboxes with shared state",
    href: "/docs/components/checkbox-group",
    name: "checkboxgroup",
    title: "CheckboxGroup",
  },
  chip: {
    category: "display",
    description: "Compact elements for tags and filters",
    href: "/docs/components/chip",
    name: "chip",
    title: "Chip",
  },
  closebutton: {
    category: "forms",
    description: "Button for dismissing overlays",
    href: "/docs/components/close-button",
    name: "closebutton",
    title: "CloseButton",
  },
  colorarea: {
    category: "colors",
    description: "2D color picker for selecting colors from a gradient area",
    href: "/docs/components/color-area",
    name: "colorarea",
    title: "ColorArea",
  },
  colorfield: {
    category: "colors",
    description: "Input for entering color values with hex format",
    href: "/docs/components/color-field",
    name: "colorfield",
    title: "ColorField",
  },
  colorpicker: {
    category: "colors",
    description: "Composable color picker with popover",
    href: "/docs/components/color-picker",
    name: "colorpicker",
    title: "ColorPicker",
  },
  colorslider: {
    category: "colors",
    description: "Slider for adjusting individual color channel values",
    href: "/docs/components/color-slider",
    name: "colorslider",
    title: "ColorSlider",
  },
  colorswatch: {
    category: "colors",
    description: "Visual preview of a color value",
    href: "/docs/components/color-swatch",
    name: "colorswatch",
    title: "ColorSwatch",
  },
  colorswatchpicker: {
    category: "colors",
    description: "Color swatch selection from a list of colors",
    href: "/docs/components/color-swatch-picker",
    name: "colorswatchpicker",
    title: "ColorSwatchPicker",
  },
  combobox: {
    category: "forms",
    description: "Text input with searchable dropdown list",
    href: "/docs/components/combo-box",
    name: "combobox",
    title: "ComboBox",
  },
  datefield: {
    category: "date-time",
    description: "Date input field with labels, descriptions, and validation",
    href: "/docs/components/date-field",
    name: "datefield",
    title: "DateField",
  },
  datepicker: {
    category: "date-time",
    description: "Composable date picker with date field trigger and calendar popover",
    href: "/docs/components/date-picker",
    name: "datepicker",
    title: "DatePicker",
  },
  daterangepicker: {
    category: "date-time",
    description: "Composable date range picker with date field trigger and range calendar popover",
    href: "/docs/components/date-range-picker",
    name: "daterangepicker",
    title: "DateRangePicker",
  },
  description: {
    category: "forms",
    description: "Helper text for form fields",
    href: "/docs/components/description",
    name: "description",
    title: "Description",
  },
  disclosure: {
    category: "layout",
    description: "Single collapsible content section",
    href: "/docs/components/disclosure",
    name: "disclosure",
    title: "Disclosure",
  },
  disclosuregroup: {
    category: "layout",
    description: "Group of collapsible panels",
    href: "/docs/components/disclosure-group",
    name: "disclosuregroup",
    title: "DisclosureGroup",
  },
  drawer: {
    category: "layout",
    description: "Slide-out panel for supplementary content and actions",
    href: "/docs/components/drawer",
    name: "drawer",
    title: "Drawer",
  },
  dropdown: {
    category: "display",
    description: "Context menu with actions and options",
    href: "/docs/components/dropdown",
    name: "dropdown",
    title: "Dropdown",
  },
  errormessage: {
    category: "forms",
    description: "Displays validation error messages for components with validation support",
    href: "/docs/components/error-message",
    name: "errormessage",
    title: "ErrorMessage",
  },
  fielderror: {
    category: "forms",
    description: "Inline validation messages for form fields",
    href: "/docs/components/field-error",
    name: "fielderror",
    title: "FieldError",
  },
  fieldset: {
    category: "forms",
    description: "Group related form controls with legends",
    href: "/docs/components/fieldset",
    name: "fieldset",
    title: "Fieldset",
  },
  form: {
    category: "forms",
    description: "Form validation and submission handling",
    href: "/docs/components/form",
    name: "form",
    title: "Form",
  },
  input: {
    category: "forms",
    description: "Single-line text input built on React Aria",
    href: "/docs/components/input",
    name: "input",
    title: "Input",
  },
  inputgroup: {
    category: "forms",
    description: "Group related input controls with prefix and suffix elements",
    href: "/docs/components/input-group",
    name: "inputgroup",
    title: "InputGroup",
  },
  inputotp: {
    category: "forms",
    description: "One-time password input",
    href: "/docs/components/input-otp",
    name: "inputotp",
    title: "InputOTP",
  },
  kbd: {
    category: "display",
    description: "Keyboard key display",
    href: "/docs/components/kbd",
    name: "kbd",
    title: "Kbd",
  },
  label: {
    category: "forms",
    description: "Accessible label for form controls",
    href: "/docs/components/label",
    name: "label",
    title: "Label",
  },
  link: {
    category: "navigation",
    description: "Styled anchor links",
    href: "/docs/components/link",
    name: "link",
    title: "Link",
  },
  listbox: {
    category: "display",
    description: "Scrollable list of selectable items",
    href: "/docs/components/list-box",
    name: "list-box",
    title: "Listbox",
  },
  meter: {
    category: "feedback",
    description: "A quantity indicator within a known range",
    href: "/docs/components/meter",
    name: "meter",
    title: "Meter",
  },
  modal: {
    category: "layout",
    description: "Displays content in a modal overlay",
    href: "/docs/components/modal",
    name: "modal",
    title: "Modal",
  },
  numberfield: {
    category: "forms",
    description: "Number input with increment/decrement buttons and validation",
    href: "/docs/components/number-field",
    name: "numberfield",
    title: "NumberField",
  },
  pagination: {
    category: "navigation",
    description: "Page navigation with composable page links and controls",
    href: "/docs/components/pagination",
    name: "pagination",
    title: "Pagination",
  },
  popover: {
    category: "display",
    description: "Displays content in context with a trigger",
    href: "/docs/components/popover",
    name: "popover",
    title: "Popover",
  },
  progressbar: {
    category: "feedback",
    description: "Shows determinate or indeterminate progress of an operation",
    href: "/docs/components/progress-bar",
    name: "progressbar",
    title: "ProgressBar",
  },
  progresscircle: {
    category: "feedback",
    description: "Circular progress indicator for operations",
    href: "/docs/components/progress-circle",
    name: "progresscircle",
    title: "ProgressCircle",
  },
  radiogroup: {
    category: "forms",
    description: "Single selection from multiple options",
    href: "/docs/components/radio-group",
    name: "radiogroup",
    title: "RadioGroup",
  },
  rangecalendar: {
    category: "date-time",
    description: "Interactive month grid for selecting date ranges",
    href: "/docs/components/range-calendar",
    name: "rangecalendar",
    title: "RangeCalendar",
  },
  scrollshadow: {
    category: "utilities",
    description: "Visual shadows for scrollable content overflow",
    href: "/docs/components/scroll-shadow",
    name: "scrollshadow",
    title: "ScrollShadow",
  },
  searchfield: {
    category: "forms",
    description: "Search input field with clear button and search icon",
    href: "/docs/components/search-field",
    name: "searchfield",
    title: "SearchField",
  },
  select: {
    category: "forms",
    description: "Dropdown select control",
    href: "/docs/components/select",
    name: "select",
    title: "Select",
  },
  separator: {
    category: "layout",
    description: "Visual divider between content",
    href: "/docs/components/separator",
    name: "separator",
    title: "Separator",
  },
  skeleton: {
    category: "display",
    description: "Loading placeholder",
    href: "/docs/components/skeleton",
    name: "skeleton",
    title: "Skeleton",
  },
  slider: {
    category: "forms",
    description: "Range selection slider",
    href: "/docs/components/slider",
    name: "slider",
    title: "Slider",
  },
  spinner: {
    category: "display",
    description: "Loading indicator",
    href: "/docs/components/spinner",
    name: "spinner",
    title: "Spinner",
  },
  surface: {
    category: "layout",
    description: "Base container surface",
    href: "/docs/components/surface",
    name: "surface",
    title: "Surface",
  },
  switch: {
    category: "controls",
    description: "Toggle between two states",
    href: "/docs/components/switch",
    name: "switch",
    title: "Switch",
  },
  table: {
    category: "display",
    description: "Structured data display in rows and columns",
    href: "/docs/components/table",
    name: "table",
    title: "Table",
  },
  tabs: {
    category: "layout",
    description: "Organize content into tabbed views",
    href: "/docs/components/tabs",
    name: "tabs",
    title: "Tabs",
  },
  taggroup: {
    category: "display",
    description: "Focusable list of tags with selection and removal support",
    href: "/docs/components/tag-group",
    name: "taggroup",
    title: "TagGroup",
  },
  text: {
    category: "display",
    description: "Semantic typography primitive for headings, body copy, and inline code",
    href: "/docs/components/text",
    name: "text",
    title: "Text",
  },
  textarea: {
    category: "forms",
    description: "Multiline text input with focus management",
    href: "/docs/components/text-area",
    name: "textarea",
    title: "TextArea",
  },
  textfield: {
    category: "forms",
    description: "Composition-friendly fields with labels and validation",
    href: "/docs/components/text-field",
    name: "textfield",
    title: "TextField",
  },
  timefield: {
    category: "date-time",
    description: "Time input field with labels, descriptions, and validation",
    href: "/docs/components/time-field",
    name: "timefield",
    title: "TimeField",
  },
  toast: {
    category: "display",
    description:
      "Display temporary notifications and messages to users with automatic dismissal and customizable placement",
    href: "/docs/components/toast",
    name: "toast",
    title: "Toast",
  },
  togglebutton: {
    category: "forms",
    description: "Interactive toggle control for on/off states",
    href: "/docs/components/toggle-button",
    name: "togglebutton",
    title: "ToggleButton",
  },
  togglebuttongroup: {
    category: "forms",
    description: "Group multiple toggle buttons into a unified control",
    href: "/docs/components/toggle-button-group",
    name: "togglebuttongroup",
    title: "ToggleButtonGroup",
  },
  toolbar: {
    category: "layout",
    description: "Container for interactive controls with arrow key navigation",
    href: "/docs/components/toolbar",
    name: "toolbar",
    title: "Toolbar",
  },
  tooltip: {
    category: "display",
    description: "Contextual information on hover or focus",
    href: "/docs/components/tooltip",
    name: "tooltip",
    title: "Tooltip",
  },
  typography: {
    category: "display",
    description: "Semantic typography primitive for headings, body copy, and inline code",
    href: "/docs/components/typography",
    name: "typography",
    title: "Typography",
  },
};

// Define relationships between components
const componentRelationships: Record<string, string[]> = {
  accordion: ["disclosuregroup", "disclosure"],
  alert: ["closebutton", "button", "spinner", "toast"],
  alertdialog: ["button", "closebutton"],
  autocomplete: [
    "listbox",
    "popover",
    "input",
    "label",
    "fielderror",
    "form",
    "surface",
    "description",
    "avatar",
    "button",
  ],
  avatar: ["separator", "badge"],
  badge: ["avatar", "chip"],
  breadcrumbs: ["link", "separator", "tabs"],
  button: [
    "popover",
    "tooltip",
    "form",
    "alert",
    "alertdialog",
    "closebutton",
    "dropdown",
    "toast",
  ],
  buttongroup: ["button", "dropdown", "chip"],
  calendar: ["rangecalendar", "datefield", "datepicker", "timefield", "inputgroup", "form"],
  card: ["surface", "avatar", "form", "button", "link", "closebutton"],
  checkbox: ["label", "checkboxgroup", "description", "button"],
  checkboxgroup: [
    "checkbox",
    "label",
    "fieldset",
    "surface",
    "description",
    "form",
    "button",
    "fielderror",
  ],
  chip: ["avatar", "closebutton", "separator"],
  closebutton: ["alert", "alertdialog", "chip", "modal"],
  colorarea: ["colorswatch", "colorswatchpicker", "colorfield", "colorpicker"],
  colorfield: [
    "colorswatch",
    "colorswatchpicker",
    "colorpicker",
    "form",
    "label",
    "description",
    "fielderror",
  ],
  colorpicker: [
    "colorarea",
    "colorslider",
    "colorswatch",
    "colorswatchpicker",
    "colorfield",
    "popover",
  ],
  colorslider: ["colorswatch", "colorswatchpicker", "colorpicker", "slider"],
  colorswatch: ["colorswatchpicker", "colorfield", "colorarea", "colorpicker"],
  colorswatchpicker: ["colorswatch", "colorfield", "colorarea", "colorpicker"],
  combobox: [
    "listbox",
    "popover",
    "input",
    "label",
    "fielderror",
    "form",
    "surface",
    "description",
    "separator",
    "avatar",
    "spinner",
    "button",
  ],
  datefield: ["datepicker", "calendar", "label", "fielderror", "description", "form", "surface"],
  datepicker: [
    "calendar",
    "rangecalendar",
    "datefield",
    "daterangepicker",
    "timefield",
    "inputgroup",
    "form",
    "popover",
  ],
  daterangepicker: [
    "rangecalendar",
    "calendar",
    "datefield",
    "datepicker",
    "timefield",
    "inputgroup",
    "form",
    "popover",
  ],
  description: [
    "textfield",
    "input",
    "textarea",
    "checkbox",
    "radiogroup",
    "switch",
    "checkboxgroup",
    "slider",
    "select",
    "combobox",
    "numberfield",
    "datefield",
  ],
  disclosure: ["accordion", "disclosuregroup", "button"],
  disclosuregroup: ["accordion", "disclosure", "button", "separator"],
  drawer: ["modal", "button", "closebutton", "alertdialog"],
  dropdown: ["button", "popover", "separator", "listbox"],
  errormessage: ["taggroup"],
  fielderror: [
    "textfield",
    "input",
    "textarea",
    "combobox",
    "form",
    "numberfield",
    "datefield",
    "datepicker",
    "timefield",
  ],
  fieldset: ["textfield", "label", "checkboxgroup", "surface"],
  form: [
    "button",
    "fieldset",
    "textfield",
    "input",
    "textarea",
    "label",
    "fielderror",
    "checkbox",
    "checkboxgroup",
    "radiogroup",
    "switch",
    "select",
    "combobox",
    "slider",
    "inputotp",
    "numberfield",
    "datefield",
    "datepicker",
    "timefield",
  ],
  input: [
    "textfield",
    "textarea",
    "label",
    "fielderror",
    "form",
    "surface",
    "description",
    "combobox",
  ],
  inputgroup: [
    "textfield",
    "input",
    "label",
    "fielderror",
    "form",
    "surface",
    "description",
    "button",
    "chip",
    "kbd",
    "spinner",
  ],
  inputotp: ["input", "form", "surface", "button", "link", "spinner"],
  kbd: [],
  label: [
    "input",
    "textarea",
    "fieldset",
    "checkbox",
    "checkboxgroup",
    "radiogroup",
    "switch",
    "slider",
    "select",
    "combobox",
    "numberfield",
    "datefield",
    "timefield",
  ],
  link: ["breadcrumbs"],
  listbox: ["select", "combobox", "avatar", "kbd", "separator", "surface", "dropdown"],
  modal: ["button", "tooltip", "select", "avatar", "drawer"],
  numberfield: ["label", "description", "fielderror", "form", "surface", "button"],
  pagination: ["button", "link"],
  popover: ["button", "tooltip", "select", "combobox", "avatar", "dropdown"],
  radiogroup: ["fieldset", "surface", "description", "form", "button", "fielderror"],
  rangecalendar: [
    "calendar",
    "datefield",
    "datepicker",
    "daterangepicker",
    "timefield",
    "inputgroup",
    "form",
  ],
  scrollshadow: [],
  searchfield: ["label", "description", "fielderror", "form", "surface", "input", "closebutton"],
  select: [
    "listbox",
    "popover",
    "label",
    "fielderror",
    "form",
    "surface",
    "description",
    "spinner",
    "button",
    "separator",
    "avatar",
    "combobox",
  ],
  separator: [
    "card",
    "chip",
    "avatar",
    "disclosuregroup",
    "listbox",
    "select",
    "combobox",
    "dropdown",
    "breadcrumbs",
  ],
  skeleton: ["card", "avatar"],
  slider: ["label", "form", "description"],
  spinner: [],
  surface: [
    "checkboxgroup",
    "fieldset",
    "inputotp",
    "input",
    "radiogroup",
    "select",
    "combobox",
    "textfield",
    "textarea",
    "numberfield",
    "datefield",
    "datepicker",
    "timefield",
    "card",
    "listbox",
  ],
  switch: ["label", "description", "button", "form"],
  table: ["pagination", "checkbox", "chip", "avatar", "button", "spinner"],
  tabs: ["breadcrumbs"],
  taggroup: ["tag", "label", "description", "errormessage", "closebutton"],
  textarea: ["textfield", "input", "label", "fielderror", "form", "surface", "description"],
  textfield: [
    "input",
    "textarea",
    "fieldset",
    "label",
    "fielderror",
    "surface",
    "description",
    "numberfield",
    "inputgroup",
    "datefield",
  ],
  timefield: ["label", "fielderror", "description", "form", "surface"],
  toast: ["button", "alert", "closebutton", "spinner"],
  togglebutton: ["button", "switch", "checkbox", "togglebuttongroup"],
  togglebuttongroup: ["togglebutton", "buttongroup", "button"],
  toolbar: ["buttongroup", "togglebuttongroup", "separator", "button"],
  tooltip: ["button", "popover"],
};

/**
 * Get information about a specific component
 */
export function getComponentInfo(componentName: string): ComponentInfo | undefined {
  const normalizedName = componentName.toLowerCase().replace(/[-_\s]/g, "");

  return componentsMap[normalizedName];
}

/**
 * Get related components for a given component
 */
export function getRelatedComponents(componentName: string): ComponentInfo[] {
  const normalizedName = componentName.toLowerCase().replace(/[-_\s]/g, "");
  const relatedNames = componentRelationships[normalizedName] || [];

  return relatedNames
    .map((name) => componentsMap[name])
    .filter((name): name is ComponentInfo => name !== undefined);
}

/**
 * Get all components in a specific category
 */
export function getComponentsByCategory(category: string): ComponentInfo[] {
  return Object.values(componentsMap).filter((comp) => comp.category === category);
}
