import { PRESETS, getPreset, generateShades } from './chunk-OJJK27GC.js';
import { Tooltip, Tree, Text, TagsInput, Tabs, Table, Stack, SimpleGrid, Select, Combobox, SegmentedControl, ScrollArea, Paper, Popover, Notification, MultiSelect, Modal, Menu, Input, HoverCard, Group, Grid, Flex, Drawer, Code, Divider, Card, Button, Accordion, createTheme } from '@mantine/core';
import { createContext, useContext, useMemo } from 'react';

// src/theme/cssVariables.ts
var TOKEN_VAR_MAP = {
  primary: "--color-primary",
  primaryContrast: "--color-primary-contrast",
  background: "--color-background",
  surface: "--color-surface",
  surfaceHover: "--color-surface-hover",
  elevatedSurface: "--color-elevated",
  text: "--color-text",
  textDimmed: "--color-text-dimmed",
  textSubtle: "--color-text-subtle",
  border: "--color-border",
  error: "--color-error",
  warning: "--color-warning",
  success: "--color-success",
  glassBackground: "--glass-background",
  glassBlur: "--glass-blur",
  shadow: "--standard-box-shadow",
  cardShadow: "--card-shadow",
  durationFast: "--duration-fast",
  durationNormal: "--duration-normal",
  easing: "--easing",
  destructiveFg: "--color-destructive-fg",
  fontHeading: "--font-heading",
  fontSans: "--font-sans"
};
var FRAMEWORK_BRIDGE = {
  "--mantine-color-text": "var(--color-text)",
  "--mantine-color-body": "var(--color-background)",
  "--mantine-color-dimmed": "var(--color-text-dimmed)",
  // Primary color functional variants — used by Tabs, SegmentedControl, Badge, Button, etc.
  "--mantine-primary-color-filled": "var(--color-primary)",
  "--mantine-primary-color-filled-hover": "color-mix(in srgb, var(--color-primary) 90%, black)",
  "--mantine-primary-color-light": "color-mix(in srgb, var(--color-primary) 15%, transparent)",
  "--mantine-primary-color-light-hover": "color-mix(in srgb, var(--color-primary) 20%, transparent)",
  "--mantine-primary-color-light-color": "var(--color-primary)",
  "--mantine-primary-color-contrast": "var(--color-primary-contrast)",
  // Active/selected state — used by selectable cards, active filters, plan tiers, etc.
  "--surface-primary-faint": "color-mix(in srgb, var(--color-primary) 5%, var(--color-elevated))",
  "--surface-primary-subtle": "color-mix(in srgb, var(--color-primary) 6%, var(--color-elevated))",
  "--surface-primary-muted": "color-mix(in srgb, var(--color-primary) 8%, var(--color-elevated))",
  "--surface-primary-strong": "color-mix(in srgb, var(--color-primary) 18%, var(--color-elevated))",
  "--border-primary-faint": "color-mix(in srgb, var(--color-primary) 12%, var(--color-border))",
  "--border-primary-soft": "color-mix(in srgb, var(--color-primary) 16%, var(--color-border))",
  "--border-primary-subtle": "color-mix(in srgb, var(--color-primary) 18%, var(--color-border))",
  "--border-primary-muted": "color-mix(in srgb, var(--color-primary) 34%, var(--color-border))",
  "--border-primary-strong": "color-mix(in srgb, var(--color-primary) 40%, var(--color-border))",
  "--active-border": "1px solid var(--border-primary-strong)",
  "--active-background": "var(--surface-primary-muted)",
  "--input-value-background": "var(--surface-primary-strong)",
  "--input-value-border": "1px solid var(--border-primary-muted)"
};
var RIGHT_PANEL_BACKGROUND = {
  light: "color-mix(in srgb, var(--color-elevated) 88%, var(--color-background))",
  dark: "color-mix(in srgb, color-mix(in srgb, var(--color-elevated) 82%, var(--glass-background)) 78%, rgba(8, 9, 11, 0.96))"
};
function shadesToVars(shades) {
  const vars = {};
  for (let i = 0; i < shades.length; i++) {
    vars[`--mantine-color-primary-${i}`] = shades[i];
  }
  return vars;
}
function presetToVars(tokens) {
  const result = {};
  for (const [key, varName] of Object.entries(TOKEN_VAR_MAP)) {
    const value = tokens[key];
    if (value) result[varName] = value;
  }
  return result;
}
function mapTokens(tokens) {
  if (!tokens) return {};
  const result = {};
  for (const [key, varName] of Object.entries(TOKEN_VAR_MAP)) {
    const value = tokens[key];
    if (value) result[varName] = value;
  }
  return result;
}
function createCssVariablesResolver(tokens, preset, presetsMap) {
  const resolved = getPreset(preset ?? "default", presetsMap);
  const lightDefaults = presetToVars(resolved.light);
  const darkDefaults = presetToVars(resolved.dark);
  const flat = mapTokens(tokens);
  const light = mapTokens(tokens?.light);
  const dark = mapTokens(tokens?.dark);
  const lightPrimary = tokens?.light?.primary ?? tokens?.primary ?? resolved.light.primary;
  const darkPrimary = tokens?.dark?.primary ?? tokens?.primary ?? resolved.dark.primary;
  const lightShades = shadesToVars(generateShades(lightPrimary));
  const darkShades = shadesToVars(generateShades(darkPrimary));
  return () => ({
    variables: { ...FRAMEWORK_BRIDGE },
    light: {
      ...lightShades,
      ...lightDefaults,
      ...flat,
      ...light,
      "--right-panel-background": RIGHT_PANEL_BACKGROUND.light
    },
    dark: {
      ...darkShades,
      ...darkDefaults,
      ...flat,
      ...dark,
      "--right-panel-background": RIGHT_PANEL_BACKGROUND.dark
    }
  });
}
var DEFAULT_SIZE = "sm";
var glassBase = {
  backdropFilter: "var(--glass-blur)",
  WebkitBackdropFilter: "var(--glass-blur)",
  border: "1px solid var(--color-border)"
};
var inputValuePillStyles = {
  backgroundColor: "var(--input-value-background)",
  border: "var(--input-value-border)",
  color: "var(--color-text)"
};
var componentThemes = {
  Accordion: Accordion.extend({
    styles: {
      item: {
        borderColor: "var(--color-border)"
      },
      content: {
        backgroundColor: "var(--color-surface)"
      }
    }
  }),
  // Button data-variant selector styles are in custom.css (attribute selectors unsupported in styles object)
  Button: Button.extend({
    styles: {
      root: {
        transition: `all var(--duration-fast) var(--easing)`
      }
    }
  }),
  Card: Card.extend({
    defaultProps: {
      p: DEFAULT_SIZE
    },
    styles: {
      root: {
        backgroundColor: "var(--color-surface)",
        ...glassBase,
        boxShadow: "var(--card-shadow)"
      }
    }
  }),
  // Checkbox styles are in custom.css to support :checked pseudo-selector
  Divider: Divider.extend({
    styles: {
      root: {
        borderColor: "var(--color-border)"
      }
    }
  }),
  Code: Code.extend({
    styles: {
      root: {
        backgroundColor: "var(--color-surface)",
        border: "1px solid var(--color-border)"
      }
    }
  }),
  Drawer: Drawer.extend({
    styles: {
      header: {
        backgroundColor: "transparent"
      },
      title: {
        fontFamily: "var(--font-sans, var(--mantine-font-family))",
        fontSize: "var(--mantine-font-size-xl)",
        fontWeight: 600,
        color: "var(--color-text)"
      },
      content: {
        backgroundColor: "var(--color-elevated, var(--color-background))",
        ...glassBase
      }
    }
  }),
  Flex: Flex.extend({
    defaultProps: {
      gap: DEFAULT_SIZE
    }
  }),
  Grid: Grid.extend({
    defaultProps: {
      gutter: DEFAULT_SIZE
    }
  }),
  Group: Group.extend({
    defaultProps: {
      gap: DEFAULT_SIZE
    }
  }),
  HoverCard: HoverCard.extend({
    styles: {
      dropdown: {
        backgroundColor: "var(--glass-background)",
        ...glassBase,
        boxShadow: "var(--standard-box-shadow)"
      }
    }
  }),
  Input: Input.extend({
    styles: {
      input: {
        backgroundColor: "var(--color-surface)",
        border: "none",
        borderBottom: "1px solid var(--color-border)",
        borderRadius: "0"
      }
    }
  }),
  Menu: Menu.extend({
    styles: {
      dropdown: {
        backgroundColor: "var(--glass-background)",
        ...glassBase,
        boxShadow: "var(--standard-box-shadow)"
      }
    }
  }),
  Modal: Modal.extend({
    defaultProps: {
      withCloseButton: false,
      centered: true,
      padding: "xs"
    },
    styles: {
      header: {
        backgroundColor: "transparent"
      },
      title: {
        fontFamily: "var(--font-sans, var(--mantine-font-family))",
        fontSize: "var(--mantine-font-size-xl)",
        fontWeight: 600,
        color: "var(--color-text)"
      },
      content: {
        backgroundColor: "var(--color-elevated, var(--color-background))",
        ...glassBase
      }
    }
  }),
  MultiSelect: MultiSelect.extend({
    styles: {
      pill: inputValuePillStyles
    }
  }),
  Notification: Notification.extend({
    styles: {
      root: {
        backgroundColor: "var(--glass-background)",
        ...glassBase
      }
    }
  }),
  Popover: Popover.extend({
    styles: {
      dropdown: {
        backgroundColor: "var(--glass-background)",
        ...glassBase,
        boxShadow: "var(--standard-box-shadow)"
      }
    }
  }),
  Paper: Paper.extend({
    styles: {
      root: {
        backgroundColor: "var(--glass-background)",
        ...glassBase,
        boxShadow: "var(--card-shadow)",
        padding: `var(--mantine-spacing-${DEFAULT_SIZE})`
      }
    }
  }),
  ScrollArea: ScrollArea.extend({
    defaultProps: {
      scrollbarSize: 8
    },
    styles: {
      scrollbar: {
        background: "transparent",
        '&[data-orientation="vertical"]': {
          width: "8px"
        },
        '&[data-orientation="horizontal"]': {
          height: "8px"
        }
      },
      thumb: {
        borderRadius: "var(--mantine-radius-default)",
        background: "color-mix(in srgb, var(--color-text-subtle) 50%, var(--color-border))",
        "&:hover": {
          background: "var(--color-text-subtle)"
        }
      }
    }
  }),
  SegmentedControl: SegmentedControl.extend({
    styles: {
      root: {
        backgroundColor: "var(--color-surface)"
      },
      indicator: {
        backgroundColor: "var(--color-surface-hover)",
        boxShadow: "var(--standard-box-shadow)"
      }
    }
  }),
  Combobox: Combobox.extend({
    styles: {
      dropdown: {
        backgroundColor: "var(--color-surface)"
      }
    }
  }),
  Select: Select.extend({
    styles: {
      dropdown: {
        backgroundColor: "var(--color-surface)"
      }
    }
  }),
  // Switch styles are in custom.css to support [data-checked] attribute selector
  SimpleGrid: SimpleGrid.extend({
    defaultProps: {
      spacing: DEFAULT_SIZE,
      verticalSpacing: DEFAULT_SIZE
    }
  }),
  Stack: Stack.extend({
    defaultProps: {
      gap: DEFAULT_SIZE
    }
  }),
  Table: Table.extend({
    defaultProps: {
      highlightOnHover: true
    },
    styles: {
      table: {
        "--table-border-color": "var(--color-border)",
        "--table-highlight-on-hover-color": "var(--color-surface-hover)"
      }
    }
  }),
  Tabs: Tabs.extend({}),
  TagsInput: TagsInput.extend({
    styles: {
      pill: inputValuePillStyles
    }
  }),
  Text: Text.extend({
    styles: {
      root: {
        fontFamily: 'Roboto, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
      }
    }
  }),
  // Tree pseudo-class/attribute state selectors (&:focus-visible, &[data-hovered],
  // &[data-selected]) are in custom.css -- Mantine's styles object applies these
  // as inline styles and React rejects selector keys.
  Tree: Tree.extend({
    defaultProps: {
      levelOffset: DEFAULT_SIZE
    },
    styles: {
      root: {
        listStyle: "none",
        margin: 0,
        padding: "var(--mantine-spacing-xs)",
        color: "var(--color-text)"
      },
      node: {
        listStyle: "none",
        outline: "none"
      },
      subtree: {
        listStyle: "none",
        margin: 0,
        marginInlineStart: "var(--mantine-spacing-xs)",
        paddingInlineStart: "var(--mantine-spacing-sm)",
        borderInlineStart: "1px solid var(--color-border)"
      },
      label: {
        display: "flex",
        alignItems: "center",
        gap: "var(--mantine-spacing-xs)",
        minHeight: "calc(var(--mantine-spacing-xl) + var(--mantine-spacing-xs))",
        padding: "var(--mantine-spacing-xs) var(--mantine-spacing-sm)",
        border: "1px solid transparent",
        borderRadius: "var(--mantine-radius-sm)",
        color: "var(--color-text)",
        transition: `background-color var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--easing), color var(--duration-fast) var(--easing)`
      }
    }
  }),
  // Timeline styles are in custom.css to override color-scheme-specific selectors
  Tooltip: Tooltip.extend({
    styles: {
      tooltip: {
        backgroundColor: "var(--glass-background)",
        ...glassBase,
        color: "var(--color-text)",
        boxShadow: "var(--standard-box-shadow)"
      }
    }
  })
  // Pagination styles are in custom.css to support :not([data-active]) selector
};

// src/theme/MantineThemeOverride.ts
var mantineThemeOverride = createTheme({
  defaultRadius: "xs",
  fontFamily: 'Roboto, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
  cursorType: "pointer",
  spacing: {
    xs: "0.5rem",
    sm: "0.75rem",
    md: "1rem",
    lg: "1.5rem",
    xl: "2rem"
  },
  radius: {
    xs: "0.25rem",
    sm: "0.5rem",
    md: "0.75rem",
    lg: "1rem",
    xl: "1.5rem"
  },
  fontSizes: {
    xs: "0.75rem",
    sm: "0.875rem",
    md: "1rem",
    lg: "1.125rem",
    xl: "1.25rem"
  },
  components: componentThemes
});
var PresetsContext = createContext(PRESETS);
var PresetsProvider = PresetsContext.Provider;
function usePresetsContext() {
  return useContext(PresetsContext);
}
var BUILT_IN_NAMES = /* @__PURE__ */ new Set([
  "default",
  "tactical",
  "regal",
  "cyber-volt",
  "aurora",
  "rose-gold",
  "midnight",
  "titanium",
  "obsidian",
  "honey",
  "abyss",
  "canopy",
  "slate",
  "cyber-strike",
  "cyber-chrome",
  "cyber-void",
  "quarry"
]);
function titleCase(str) {
  return str.replace(/(^|-)(\w)/g, (_, sep, char) => (sep ? " " : "") + char.toUpperCase());
}
function useAvailablePresets() {
  const presetsMap = usePresetsContext();
  return useMemo(() => {
    return Object.entries(presetsMap).map(([key, preset]) => ({
      value: key,
      label: preset.label ?? titleCase(key),
      description: preset.description ?? "",
      colors: preset.colors ?? [preset.dark.primary, preset.dark.background, preset.light.background],
      isCustom: !BUILT_IN_NAMES.has(key)
    }));
  }, [presetsMap]);
}

export { PresetsProvider, TOKEN_VAR_MAP, componentThemes, createCssVariablesResolver, glassBase, mantineThemeOverride, useAvailablePresets, usePresetsContext };
