/**
 * Tema canônico do AntD para o SAR.
 * Espelha brand.md + design-artifacts/A-Product-Brief/03-visual-direction.md.
 * NÃO alterar tokens primários (jcsBlue, font family) sem RFC.
 */
import type { ThemeConfig } from 'antd';

// Tokens canônicos sincronizados com tokens.css (manter espelhados manualmente
// ou centralizar quando build pipeline permitir).
export const brandTokens = {
  jcsBlue: '#004a99',
  jcsBlueHover: '#003a7a',
  jcsBlueLight: '#e6eff8',
  bgBody: '#f4f7fa',
  textMain: '#2d3748',
  textMuted: '#718096',
  green: '#38a169',
  orange: '#ed8936',
  red: '#e53e3e',
  whatsappGreen: '#25d366',
  borderSubtle: '#e2e8f0',
} as const;

export const sarTheme: ThemeConfig = {
  token: {
    // === Cor primária ===
    colorPrimary: brandTokens.jcsBlue,
    colorPrimaryHover: brandTokens.jcsBlueHover,
    colorPrimaryBg: brandTokens.jcsBlueLight,
    colorPrimaryBgHover: brandTokens.jcsBlueLight,

    // === Estados funcionais ===
    colorSuccess: brandTokens.green,
    colorWarning: brandTokens.orange,
    colorError: brandTokens.red,
    colorInfo: brandTokens.jcsBlue,

    // === Background ===
    colorBgBase: '#ffffff',
    colorBgLayout: brandTokens.bgBody,
    colorBgContainer: '#ffffff',
    colorBgElevated: '#ffffff',

    // === Texto ===
    colorText: brandTokens.textMain,
    colorTextSecondary: brandTokens.textMuted,
    colorTextTertiary: brandTokens.textMuted,
    colorTextQuaternary: brandTokens.textMuted,

    // === Borda ===
    colorBorder: brandTokens.borderSubtle,
    colorBorderSecondary: brandTokens.borderSubtle,

    // === Tipografia (Visual DNA: Plus Jakarta) ===
    fontFamily:
      "'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
    fontSize: 14, // baseline body
    fontSizeSM: 13,
    fontSizeLG: 16,
    fontSizeXL: 18,
    fontSizeHeading1: 32,
    fontSizeHeading2: 24,
    fontSizeHeading3: 20,
    fontSizeHeading4: 18,
    fontSizeHeading5: 16,
    lineHeight: 1.5,

    // === Radius (brand.md) ===
    borderRadius: 12,
    borderRadiusLG: 20,
    borderRadiusSM: 6,

    // === Box shadow (brand.md canon — sutil único) ===
    boxShadow: '0 4px 25px rgba(0, 0, 0, 0.05)',
    boxShadowSecondary: '0 4px 25px rgba(0, 0, 0, 0.05)',
    boxShadowTertiary: '0 1px 2px rgba(0, 0, 0, 0.04)',

    // === Motion (Visual DNA: sutis funcionais) ===
    motionDurationFast: '0.15s',
    motionDurationMid: '0.2s',
    motionDurationSlow: '0.25s',
    motionEaseInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',

    // === Wireframe off — usamos look próprio ===
    wireframe: false,
  },
  components: {
    Layout: {
      headerHeight: 80, // brand.md
      headerBg: '#ffffff',
      bodyBg: brandTokens.bgBody,
      siderBg: '#ffffff',
    },
    Menu: {
      itemBorderRadius: 12,
      itemHeight: 44,
      itemMarginInline: 8,
      itemSelectedBg: brandTokens.jcsBlueLight,
      itemSelectedColor: brandTokens.jcsBlue,
      itemHoverBg: brandTokens.jcsBlueLight,
      itemHoverColor: brandTokens.jcsBlue,
    },
    Button: {
      borderRadius: 12,
      controlHeight: 40,
      controlHeightLG: 48,
      controlHeightSM: 32,
      fontWeight: 600,
      primaryShadow: 'none',
      defaultShadow: 'none',
    },
    Card: {
      borderRadiusLG: 20,
      paddingLG: 24,
      headerBg: 'transparent',
    },
    Input: {
      borderRadius: 12,
      controlHeight: 40,
    },
    Select: {
      borderRadius: 12,
      controlHeight: 40,
    },
    Table: {
      headerBg: brandTokens.bgBody,
      headerSplitColor: 'transparent',
      rowHoverBg: brandTokens.jcsBlueLight,
    },
    Tag: {
      borderRadiusSM: 6,
    },
    Tooltip: {
      borderRadius: 8,
    },
    Notification: {
      borderRadiusLG: 12,
    },
  },
};
