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

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

export const ProGray1 = "#f7f9fa";
export const ProGray2 = "#F1F1F1";
export const ProGray3 = "#edf0f2"; // for modal header background
export const ProGray4 = "#DCDCDC"; // lines color
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 COLOR = {
  50: "#e0f1ff",
  100: "#b0d2ff",
  200: "#7fb0ff",
  300: "#4d8bff",
  400: "#1e79fe",
  500: "#1890ff",
  600: "#09237D",
  700: "#004f81",
  800: "#003650",
  900: "#001620",
  borderColor: "#E7EAF3B2",
  primaryColor: "#FFC600",
  primaryColor2: "#09237D",
  whiteColor: "#FFF",
  blackColor: "#000000e0",
  sidebarBg: "#FFFFFF",
  tableBg: "#FFFFFF",
  cardBg: "#FFFFFF",
  headerBg: "#FFFFFF",
  hoverBg: "#F1F5F9",
  activeBg: "#E2E8F0",
};

// Enhanced Dark theme colors with better contrast and modern aesthetics
export const DARK_COLOR = {
  // 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",
  primaryColor2: "#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)",

  // 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 componentBackground = "#f7f7f7";
export const darkComponentBackground = "#181818";

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: componentBackground,
  colorBgElevated: componentBackground,
  colorBgLayout: componentBackground,

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

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

  // ------ Pro colors
  proSiderColor: DARK_COLOR[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: COLOR.blackColor,
    colorBgLayout: componentBackground,
  },
  components: {
    Breadcrumb: {
      linkColor: "rgba(0,0,0,.8)",
      itemColor: "rgba(0,0,0,.8)",
    },
    Button: {
      colorLink: COLOR["600"],
      colorLinkActive: COLOR["700"],
      colorLinkHover: COLOR["300"],
      borderRadius: 1000,
      borderRadiusLG: 1000,
      // defaultShadow: "none",
    },
    Calendar: {
      colorBgContainer: "none",
    },
    Card: {
      colorBgContainer: COLOR.cardBg,
      colorBorderSecondary: COLOR["borderColor"],
      boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
      padding: 16,
      paddingLG: 16,
      borderRadius: 24,
      borderRadiusLG: 24,
    },
    Carousel: {
      colorBgContainer: COLOR["800"],
      dotWidth: 8,
    },
    Rate: {
      colorFillContent: COLOR["100"],
      colorText: COLOR["600"],
    },
    Segmented: {
      colorBgLayout: COLOR["100"],
      borderRadius: 6,
      colorTextLabel: "#000000",
    },
    Table: {
      borderColor: COLOR["100"],
      headerBg: COLOR.primaryColor,
      headerColor: COLOR.whiteColor,
      rowSelectedBg: COLOR.primaryColor,
      cellPaddingBlock: 8,
      colorBgContainer: COLOR.tableBg,
      colorFillAlter: COLOR.hoverBg,
    },
    Tabs: {
      colorBorderSecondary: COLOR["100"],
    },
    Timeline: {
      dotBg: "none",
    },
    Typography: {
      colorLink: COLOR["600"],
      colorLinkActive: COLOR["700"],
      colorLinkHover: COLOR["300"],
      linkHoverDecoration: "underline",
    },
    Drawer: {
      wireframe: true,
      colorSplit: ProGray4,
      lineWidth: 3,
      controlHeightLG: 30,
    },
    Menu: {
      colorItemBg: COLOR.sidebarBg,
      colorItemText: COLOR["800"],
      colorItemTextSelected: COLOR.primaryColor2,
      colorItemBgSelected: COLOR.activeBg,
      colorItemBgHover: COLOR.hoverBg,
    },
    Layout: {
      headerBg: COLOR.headerBg,
      bodyBg: componentBackground,
    },
    Input: {
      borderRadiusLG: 1000,

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

// Enhanced Dark theme configuration
export const darkThemeConfig: ThemeConfig = {
  token: {
    // Primary colors
    colorPrimary: DARK_COLOR.primaryColor,
    colorPrimaryHover: DARK_COLOR.primaryColorHover,
    colorPrimaryActive: DARK_COLOR.primaryColorActive,
    colorLink: DARK_COLOR.primaryColor,
    colorLinkHover: DARK_COLOR.primaryColorHover,
    colorLinkActive: DARK_COLOR.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: DARK_COLOR[300],
    colorBgElevated: DARK_COLOR[200],
    colorBgLayout: darkComponentBackground,
    colorBgSpotlight: DARK_COLOR[400],
    colorBgMask: DARK_COLOR.maskBg,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    // DatePicker component
    DatePicker: {
      colorBgContainer: DARK_COLOR[300],
      colorBgElevated: DARK_COLOR[200],
      colorBorder: DARK_COLOR.borderColor,
      colorText: DARK_COLOR.textPrimary,
      colorTextPlaceholder: DARK_COLOR.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);`,
};