import type { ThemeConfig } from 'ant-design-vue/es/config-provider/context';

/**
 * Central Ant Design Vue v4 theme for Montact.
 * Migrated pages must consume this via App ConfigProvider — do not fork in views.
 *
 * controlHeight: 36 is the system default (Ant derives SM/LG).
 * Do not set controlHeight* under components — inherit the token.
 */
/** Tailwind gray-50 / gray-100 / gray-200 — layout fill, segmented track, borders */
const GRAY_50 = '#f9fafb';
const GRAY_100 = '#f3f4f6';
const GRAY_200 = '#e5e7eb';

export const antdTheme = {
  token: {
    colorPrimary: '#10b981',
    fontFamily: '"IRANSans", Tahoma, sans-serif',

    /** Page / subtle surface fill */
    colorBgLayout: GRAY_50,
    colorFillQuaternary: GRAY_50,
    colorFillAlter: GRAY_50,

    /** Control, card, and divider borders */
    colorBorder: GRAY_200,
    colorBorderSecondary: GRAY_200,

    borderRadius: 8,
    borderRadiusSM: 6,
    borderRadiusLG: 12,

    /** Default Ant control size for the whole app (buttons, inputs, selects, …). */
    controlHeight: 36,

    /* Spacing scale: 8, 12, 16, 20, 24 */
    paddingXXS: 4,
    paddingXS: 8,
    paddingSM: 12,
    padding: 16,
    paddingMD: 20,
    paddingLG: 24,
    paddingXL: 32,

    marginXXS: 4,
    marginXS: 8,
    marginSM: 12,
    margin: 16,
    marginMD: 20,
    marginLG: 24,
    marginXL: 32,

    boxShadow:
      '0 1px 2px 0 rgba(15, 23, 42, 0.04), 0 1px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px 0 rgba(15, 23, 42, 0.04)',
    boxShadowSecondary:
      '0 6px 16px 0 rgba(15, 23, 42, 0.08), 0 3px 6px -4px rgba(15, 23, 42, 0.1), 0 9px 28px 8px rgba(15, 23, 42, 0.05)',
  },
  components: {
    Card: {
      paddingLG: 24,
      headerBg: 'transparent',
    },
    Collapse: {
      headerBg: GRAY_50,
      contentBg: GRAY_50,
      colorBorder: GRAY_200,
    },
    /**
     * Segmented track uses colorBgLayout. Page chrome is gray-50, so the
     * default track disappears. Keep the track on gray-100 for every Segmented.
     */
    Segmented: {
      colorBgLayout: GRAY_100,
      trackBg: GRAY_100,
    },
    Input: {
      colorBorder: GRAY_200,
    },
    Select: {
      colorBorder: GRAY_200,
    },
    Form: {
      itemMarginBottom: 18,
    },
  },
} as ThemeConfig;