// src/appThemeConfig.ts
import type { ThemeConfig } from "antd";

export const colors = {
  primary: "#CC9300",
  secondary: "linear-gradient(135deg, #00C1D4 0%, #FF5F6D 100%)",
  darkSpace: "linear-gradient(to right, #0F0525, #2A0B45)",
};

export const ProGray1 = "#434E5C";
export const ProGreen = "#03B100";
export const ProGreen2 = "#52c41a";
export const ProDraft = "#f36c00";
export const ProBlack1 = "#181818";
export const ProBlack2 = "#0a0a0a";
export const errorColor = "#DC3545";
export const errorColorDark = "#d9363e";
export const DisabledColor = "#424242";

export const lightColors = {
  50: "#e0f1ff",
  100: "#b0d2ff",
  200: "#7fb0ff",
  300: "#4d8bff",
  400: "#1e79fe",
  500: "#1890ff",
  600: "#09237D",
  700: "#004f81",
  800: "#003650",
  900: "#001620",
  borderColor: "#E7EAF3B2",
  primaryColor: "#FFC600",
  secondaryColor: "#09237D",
  whiteColor: "#FFF",
  blackColor: "#000000e0",
  hoverBg: "#F1F5F9",
  activeBg: "#E2E8F0",

  bgColor: "#f7f7f7",
  secondaryBgColor: "#ffffff",
  fgColor: "#181818",
  secondaryFgColor: "#0a0a0a",
};

// Enhanced Dark theme colors with better contrast and modern aesthetics
export const darkColors = {
  // Background colors - from darkest to lightest
  50: "#0a0a0a", // Deepest background
  100: "#141414", // Main background
  200: "#1e1e1e", // Elevated background
  300: "#181818", // Card background
  400: "#363636", // Hover background
  500: "#424242", // Active background
  600: "#525252", // Border color
  700: "#6b6b6b", // Secondary text
  800: "#8a8a8a", // Primary text
  900: "#b0b0b0", // Highlight text

  // Semantic colors
  borderColor: "#363636",
  borderColorLight: "#424242",
  primaryColor: "#FFC600",
  primaryColorHover: "#FFD633",
  primaryColorActive: "#E6B800",
  secondaryColor: "#FFD633",

  // Background colors
  whiteColor: "#0a0a0a", // Main background
  blackColor: "#ffffff", // Primary text
  sidebarBg: "#141414",
  tableBg: "#1e1e1e",
  headerBg: "#141414",
  hoverBg: "#363636",
  activeBg: "#424242",

  // Additional semantic colors
  success: "#10b981",
  warning: "#f59e0b",
  error: "#ef4444",
  info: "#3b82f6",

  // Text colors
  textPrimary: "#ffffff",
  textSecondary: "#b0b0b0",
  textTertiary: "#8a8a8a",
  textQuaternary: "#6b6b6b",
  textDisabled: "#525252",

  // Overlay colors
  overlayBg: "rgba(0, 0, 0, 0.45)",
  maskBg: "rgba(0, 0, 0, 0.65)",

  bgColor: "#181818",
  fgColor: "#f7f7f7",
  secondaryBgColor: "#0a0a0a",
  secondaryFgColor: "#ffffff",

  // Shadow colors
  shadowLight: "0 1px 2px 0 rgba(0, 0, 0, 0.3)",
  shadowMedium: "0 4px 6px -1px rgba(0, 0, 0, 0.4)",
  shadowHeavy: "0 10px 15px -3px rgba(0, 0, 0, 0.5)",
};

export const SharedThemeVars = {
  borderRadius: 8,
  borderRadiusLG: 8,
  fontWeightStrong: 500,
  colorPrimary: colors.primary,
  fontFamily: "var(--font-roboto)",
  colorLink: colors.primary,
  // colorItemTextSelected: colors.primary // Menu Item Active Item Color
};

export const LightThemeVars = {
  ...SharedThemeVars,
  white: lightColors.bgColor,
  colorBgElevated: lightColors.bgColor,
  colorBgLayout: lightColors.bgColor,

  // ------ Pro colors
  proSiderColor: "#1E5083",
  proHeaderColor: colors.primary,
};

export const DarkThemeVars = {
  ...SharedThemeVars,
  white: darkColors.bgColor,
  colorBgElevated: darkColors[200],
  colorBgContainer: darkColors[300],
  colorBgLayout: darkColors.bgColor,
  colorText: darkColors.textPrimary,
  colorTextSecondary: darkColors.textSecondary,
  colorTextTertiary: darkColors.textTertiary,
  colorTextQuaternary: darkColors.textQuaternary,
  colorBorder: darkColors.borderColor,
  colorBorderSecondary: darkColors.borderColorLight,

  // ------ Pro colors
  proSiderColor: darkColors[200],
  proHeaderColor: colors.primary,
};

// AntD Theme Configuration
export const themeConfig: ThemeConfig = {
  token: {
    colorPrimary: colors.primary, // Cosmic purple
    colorLink: "#9d50bb", // Nebula pink
    fontFamily: "var(--font-roboto)",
    borderRadius: 8,
    // Futuristic button styles
    controlHeight: 40,
    colorTextLabel: lightColors.blackColor,
    colorBgLayout: lightColors.bgColor,
  },
  components: {
    Breadcrumb: {
      linkColor: "rgba(0,0,0,.8)",
      itemColor: "rgba(0,0,0,.8)",
    },
    Button: {
      colorLink: lightColors["600"],
      colorLinkActive: lightColors["700"],
      colorLinkHover: lightColors["300"],
      borderRadius: 1000,
      borderRadiusLG: 1000,
      // defaultShadow: "none",
    },
    Calendar: {
      colorBgContainer: "none",
    },
    Card: {
      colorBgContainer: lightColors.whiteColor,
      colorBorderSecondary: lightColors["borderColor"],
      boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
      padding: 16,
      paddingLG: 16,
      borderRadius: 24,
      borderRadiusLG: 24,
    },
    Carousel: {
      colorBgContainer: lightColors["800"],
      dotWidth: 8,
    },
    Rate: {
      colorFillContent: lightColors["100"],
      colorText: lightColors["600"],
    },
    Segmented: {
      colorBgLayout: lightColors["hoverBg"],
      borderRadius: 6,
      colorTextLabel: "#000000",
    },
    Table: {
      borderColor: lightColors["100"],
      headerBg: lightColors.primaryColor,
      headerColor: lightColors.whiteColor,
      rowSelectedBg: lightColors.primaryColor,
      cellPaddingBlock: 8,
      colorBgContainer: lightColors.whiteColor,
      colorFillAlter: lightColors.hoverBg,
    },
    Tabs: {
      colorBorderSecondary: lightColors["100"],
    },
    Timeline: {
      dotBg: "none",
    },
    Typography: {
      colorLink: lightColors["600"],
      colorLinkActive: lightColors["700"],
      colorLinkHover: lightColors["300"],
      linkHoverDecoration: "underline",
    },
    Drawer: {
      wireframe: true,
      colorSplit: ProGray1,
      lineWidth: 3,
      controlHeightLG: 30,
    },
    Menu: {
      colorItemBg: lightColors.whiteColor,
      colorItemText: lightColors["800"],
      colorItemTextSelected: lightColors.secondaryColor,
      colorItemBgSelected: lightColors.activeBg,
      colorItemBgHover: lightColors.hoverBg,
    },
    Layout: {
      headerBg: lightColors.whiteColor,
      bodyBg: lightColors.bgColor,
    },
    Input: {
      borderRadiusLG: 1000,

      fontSize: 12,
      fontSizeLG: 12,
    },
    InputNumber: {
      borderRadiusLG: 1000,
      fontSize: 12,
      fontSizeLG: 12,
    },
    DatePicker: {
      borderRadiusOuter: 1000,
      borderRadius: 1000,
    },
    Select: {
      borderRadius: 1000,
      multipleItemHeightLG: 32,
      optionSelectedBg: lightColors.activeBg,
    },
  },
};

// Enhanced Dark theme configuration
export const darkThemeConfig: ThemeConfig = {
  token: {
    // Primary colors
    colorPrimary: darkColors.primaryColor,
    colorPrimaryHover: darkColors.primaryColorHover,
    colorPrimaryActive: darkColors.primaryColorActive,
    colorLink: darkColors.primaryColor,
    colorLinkHover: darkColors.primaryColorHover,
    colorLinkActive: darkColors.primaryColorActive,

    // Typography
    fontFamily: "var(--font-roboto)",
    fontSize: 14,
    fontSizeLG: 16,
    fontSizeSM: 12,
    fontSizeXL: 20,

    // Spacing and sizing
    borderRadius: 8,
    borderRadiusLG: 8,
    borderRadiusSM: 6,
    controlHeight: 40,
    controlHeightLG: 48,
    controlHeightSM: 32,

    // Background colors
    colorBgContainer: darkColors[300],
    colorBgElevated: darkColors[200],
    colorBgLayout: darkColors.bgColor,
    colorBgSpotlight: darkColors[400],
    colorBgMask: darkColors.maskBg,

    // Text colors
    colorText: darkColors.textPrimary,
    colorTextSecondary: darkColors.textSecondary,
    colorTextTertiary: darkColors.textTertiary,
    colorTextQuaternary: darkColors.textQuaternary,
    colorTextPlaceholder: darkColors.textDisabled,
    colorTextDisabled: darkColors.textDisabled,
    colorTextLabel: darkColors.textSecondary,
    colorTextDescription: darkColors.textTertiary,

    // Border colors
    colorBorder: darkColors.borderColor,
    colorBorderSecondary: darkColors.borderColorLight,

    // Fill colors
    colorFill: darkColors[400],
    colorFillSecondary: darkColors[500],
    colorFillTertiary: darkColors[600],
    colorFillQuaternary: darkColors[700],

    // Success, warning, error colors
    colorSuccess: darkColors.success,
    colorWarning: darkColors.warning,
    colorError: darkColors.error,
    colorInfo: darkColors.info,

    // Shadow
    boxShadow: darkColors.shadowLight,
    boxShadowSecondary: darkColors.shadowMedium,
  },
  components: {
    // Layout components
    Layout: {
      headerBg: darkColors.headerBg,
      siderBg: darkColors.sidebarBg,
      bodyBg: darkColors.bgColor,
      footerBg: darkColors.headerBg,
    },

    // Card component
    Card: {
      colorBgContainer: ProBlack2,
      colorBorderSecondary: darkColors.borderColor,
      boxShadow: darkColors.shadowLight,
      boxShadowTertiary: darkColors.shadowMedium,
      padding: 16,
      paddingLG: 20,
      paddingSM: 12,
      borderRadius: 24,
      borderRadiusLG: 24,
    },

    // Button component
    Button: {
      colorPrimary: darkColors.primaryColor,
      colorPrimaryHover: darkColors.primaryColorHover,
      colorPrimaryActive: darkColors.primaryColorActive,
      colorBgContainer: darkColors[300],
      colorBorder: darkColors.borderColor,
      controlHeight: 40,
      controlHeightLG: 48,
      controlHeightSM: 32,
      defaultShadow: "none",
      borderRadius: 1000,
      borderRadiusLG: 1000,
    },

    // Input components
    Input: {
      colorBgContainer: darkColors[300],
      colorBorder: darkColors.borderColor,
      colorText: darkColors.textPrimary,
      colorTextPlaceholder: darkColors.textDisabled,
      borderRadiusLG: 1000,
      fontSize: 12,
      fontSizeLG: 12,
    },

    InputNumber: {
      colorBgContainer: darkColors[300],
      colorBorder: darkColors.borderColor,
      colorText: darkColors.textPrimary,
      borderRadiusLG: 1000,
      fontSize: 12,
      fontSizeLG: 12,
    },

    // Select component
    Select: {
      colorBgContainer: darkColors[300],
      colorBgElevated: darkColors[200],
      colorBorder: darkColors.borderColor,
      colorText: darkColors.textPrimary,
      colorTextPlaceholder: darkColors.textDisabled,
      borderRadius: 1000,
      optionSelectedBg: darkColors.activeBg,
    },

    // Menu component
    Menu: {
      colorItemBg: darkColors.sidebarBg,
      colorItemText: darkColors.textPrimary,
      colorItemTextSelected: darkColors.primaryColor,
      colorItemBgSelected: darkColors.activeBg,
      colorItemBgHover: darkColors.hoverBg,
      colorSubItemBg: darkColors[200],
      colorActiveBarWidth: 3,
      colorActiveBarBorderSize: 0,
    },

    // Table component
    Table: {
      colorBgContainer: darkColors.tableBg,
      colorFillAlter: darkColors[200],
      colorFillContent: darkColors[300],
      colorFillSecondary: darkColors[400],
      headerBg: darkColors[400],
      headerColor: darkColors.textPrimary,
      rowSelectedBg: darkColors.activeBg,
      rowHoverBg: darkColors.hoverBg,
      borderColor: darkColors.borderColor,
      headerSplitColor: darkColors.borderColor,
    },

    // Drawer component
    Drawer: {
      colorBgElevated: darkColors[200],
      colorBgMask: darkColors.maskBg,
      colorBorder: darkColors.borderColor,
      colorSplit: darkColors.borderColor,
    },

    // Modal component
    Modal: {
      colorBgElevated: darkColors[200],
      colorBgMask: darkColors.maskBg,
      colorIcon: darkColors.textSecondary,
      colorIconHover: darkColors.textPrimary,
    },

    // Tabs component
    Tabs: {
      colorBgContainer: darkColors[300],
      colorBorderSecondary: darkColors.borderColor,
      colorText: darkColors.textPrimary,
      colorTextDescription: darkColors.textSecondary,
      colorPrimary: darkColors.primaryColor,
      colorPrimaryHover: darkColors.primaryColorHover,
      colorPrimaryActive: darkColors.primaryColorActive,
    },

    // Typography component
    Typography: {
      colorText: darkColors.textPrimary,
      colorTextSecondary: darkColors.textSecondary,
      colorTextDescription: darkColors.textTertiary,
      colorLink: darkColors.primaryColor,
      colorLinkHover: darkColors.primaryColorHover,
      colorLinkActive: darkColors.primaryColorActive,
    },

    // Breadcrumb component
    Breadcrumb: {
      colorText: darkColors.textSecondary,
      colorTextDescription: darkColors.textTertiary,
      linkColor: darkColors.textSecondary,
      lastItemColor: darkColors.textPrimary,
    },

    // Divider component
    Divider: {
      colorSplit: darkColors.borderColor,
    },

    // Rate component
    Rate: {
      colorFillContent: darkColors[400],
      colorText: darkColors.primaryColor,
    },

    // Segmented component
    Segmented: {
      colorBgLayout: darkColors[200],
      colorBgElevated: darkColors[300],
      colorText: darkColors.textPrimary,
      colorTextLabel: darkColors.textPrimary,
      borderRadius: 8,
    },

    // Calendar component
    Calendar: {
      colorBgContainer: darkColors[300],
      colorBgElevated: darkColors[200],
      colorText: darkColors.textPrimary,
      colorTextSecondary: darkColors.textSecondary,
      colorBorder: darkColors.borderColor,
    },

    // Carousel component
    Carousel: {
      colorBgContainer: darkColors[400],
      dotWidth: 8,
      dotHeight: 8,
      dotActiveWidth: 24,
    },

    // Timeline component
    Timeline: {
      colorText: darkColors.textPrimary,
      colorTextSecondary: darkColors.textSecondary,
      colorSplit: darkColors.borderColor,
    },

    // DatePicker component
    DatePicker: {
      colorBgContainer: darkColors[300],
      colorBgElevated: darkColors[200],
      colorBorder: darkColors.borderColor,
      colorText: darkColors.textPrimary,
      colorTextPlaceholder: darkColors.textDisabled,
      borderRadius: 1000,
    },
  },
};

// CSS-in-JS Utilities (For global use)
export const futuristicStyles = {
  textGradient: `background: ${colors.secondary}; -webkit-background-clip: text; -webkit-text-fill-color: transparent;`,
  glassEffect: `background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1);`,
  darkGlassEffect: `background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1);`,
};