export type StatusTone =
  | 'open'
  | 'pending'
  | 'inProgress'
  | 'resolved'
  | 'closed'
  | 'breached'
  | 'warning'
  | 'paused'
  | 'active'
  | 'unread'
  | 'success'
  | 'error'
  | 'draft'
  | 'neutral';

export interface StatusColors {
  bg: string;
  border: string;
  text: string;
}

export interface Theme {
  mode: 'light' | 'dark';
  colors: {
    primary: string;
    primaryLight: string;
    primaryDark: string;
    secondary: string;
    secondaryLight: string;
    secondaryDark: string;
    accent: string;
    accentLight: string;
    success: string;
    successLight: string;
    successDark: string;
    warning: string;
    warningLight: string;
    warningDark: string;
    error: string;
    errorLight: string;
    errorDark: string;
    info: string;
    infoLight: string;
    infoDark: string;

    gray: {
      50: string;
      100: string;
      200: string;
      300: string;
      400: string;
      500: string;
      600: string;
      700: string;
      800: string;
      900: string;
      950: string;
    };

    background: string;
    surface: string;
    surfaceElevated: string;
    surfaceMuted: string;
    surfaceInset: string;
    border: string;
    borderStrong: string;
    divider: string;
    overlay: string;
    text: {
      primary: string;
      secondary: string;
      tertiary: string;
      disabled: string;
      inverse: string;
    };

    status: Record<StatusTone, StatusColors>;
    borderSoft: string;
    conversation: {
      inboundBg: string;
      inboundBorder: string;
      inboundText: string;
      outboundBg: string;
      outboundText: string;
    };
    priority: {
      low: StatusColors;
      medium: StatusColors;
      high: StatusColors;
      urgent: StatusColors;
    };
    sla: {
      active: StatusColors;
      warning: StatusColors;
      breached: StatusColors;
      met: StatusColors;
      paused: StatusColors;
    };
  };
  typography: {
    fontFamily: {
      sans: string;
      headline: string;
      arabic: string;
      mono: string;
    };
    fontSize: {
      xs: string;
      sm: string;
      base: string;
      lg: string;
      xl: string;
      '2xl': string;
      '3xl': string;
      '4xl': string;
      '5xl': string;
    };
    fontWeight: {
      light: number;
      normal: number;
      medium: number;
      semibold: number;
      bold: number;
      extrabold: number;
    };
    lineHeight: {
      tight: number;
      heading: number;
      subhead: number;
      base: number;
      normal: number;
      relaxed: number;
    };
    letterSpacing: {
      tighter: string;
      tight: string;
      normal: string;
      wide: string;
      wider: string;
      widest: string;
    };
  };
  spacing: {
    0: string;
    1: string;
    2: string;
    3: string;
    4: string;
    5: string;
    6: string;
    8: string;
    10: string;
    12: string;
    16: string;
    20: string;
    24: string;
    32: string;
    40: string;
    48: string;
    56: string;
    64: string;
    80: string;
    96: string;
  };
  layout: {
    pagePadding: string;
    pageTop: string;
    sectionGap: string;
    cardGap: string;
    cardTitleGap: string;
    stackGap: string;
    inlineGap: string;
    toolbarGap: string;
    controlGap: string;
    sidebarGap: string;
    sidebarRowGap: string;
    headerHeight: string;
    sidebarWidth: string;
    sidebarWidthCollapsed: string;
    sidebarWidthMin: string;
    sidebarWidthMax: string;
    conversationMaxWidth: string;
    dashboardStatGap: string;
    dashboardSectionGap: string;
    contentMaxWidth: string;
    headerMaxWidth: string;
    cardPaddingSm: string;
    cardPaddingMd: string;
    cardPaddingLg: string;
    table: {
      rowPadding: string;
      headerPadding: string;
      toolbarPadding: string;
    };
  };
  form: {
    labelGap: string;
    hintGap: string;
    fieldGap: string;
    sectionGap: string;
    actionsGap: string;
  };
  breakpoints: {
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    '2xl': string;
  };
  borderRadius: {
    none: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    '2xl': string;
    '3xl': string;
    bubble: string;
    full: string;
  };
  motion: {
    hoverLift: string;
    cardHover: string;
    pressScale: string;
  };
  shadows: {
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    '2xl': string;
    inner: string;
  };
  transitions: {
    fast: string;
    normal: string;
    slow: string;
  };
  zIndex: {
    dropdown: number;
    sticky: number;
    fixed: number;
    modal: number;
    popover: number;
    tooltip: number;
  };
}

const baseTheme = {
  typography: {
    fontFamily: {
      sans: 'Inter, system-ui, -apple-system, sans-serif',
      headline: '"Plus Jakarta Sans", system-ui, -apple-system, sans-serif',
      arabic: 'Cairo, system-ui, -apple-system, sans-serif',
      mono: '"Fira Code", ui-monospace, monospace',
    },
    fontSize: {
      xs: '0.75rem',
      sm: '0.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
      '2xl': '1.375rem',
      '3xl': '1.875rem',
      '4xl': '2.5rem',
      '5xl': '3rem',
    },
    fontWeight: {
      light: 300,
      normal: 400,
      medium: 500,
      semibold: 600,
      bold: 700,
      extrabold: 800,
    },
    lineHeight: {
      tight: 1.15,
      heading: 1.2,
      subhead: 1.3,
      base: 1.4,
      normal: 1.6,
      relaxed: 1.7,
    },
    letterSpacing: {
      tighter: '-0.02em',
      tight: '-0.01em',
      normal: '0',
      wide: '0.01em',
      wider: '0.02em',
      widest: '0.08em',
    },
  },
  spacing: {
    0: '0',
    1: '0.25rem',
    2: '0.5rem',
    3: '0.75rem',
    4: '1rem',
    5: '1.25rem',
    6: '1.5rem',
    8: '2rem',
    10: '2.5rem',
    12: '3rem',
    16: '4rem',
    20: '5rem',
    24: '6rem',
    32: '8rem',
    40: '10rem',
    48: '12rem',
    56: '14rem',
    64: '16rem',
    80: '20rem',
    96: '24rem',
  },
  layout: {
    pagePadding: '1.5rem',
    pageTop: '1rem',
    sectionGap: '2.5rem',
    cardGap: '1.5rem',
    cardTitleGap: '1rem',
    stackGap: '1rem',
    inlineGap: '0.75rem',
    toolbarGap: '1rem',
    controlGap: '0.875rem',
    sidebarGap: '1.25rem',
    sidebarRowGap: '1rem',
    headerHeight: '64px',
    sidebarWidth: '296px',
    sidebarWidthCollapsed: '72px',
    sidebarWidthMin: '300px',
    sidebarWidthMax: '400px',
    conversationMaxWidth: '720px',
    dashboardStatGap: '1rem',
    dashboardSectionGap: '1.75rem',
    contentMaxWidth: '1440px',
    headerMaxWidth: '1280px',
    cardPaddingSm: '1rem',
    cardPaddingMd: '1.25rem',
    cardPaddingLg: '1.5rem',
    table: {
      rowPadding: '0.875rem 1.25rem',
      headerPadding: '0.75rem 1.25rem',
      toolbarPadding: '1rem 1.25rem',
    },
  },
  form: {
    labelGap: '0.5rem',
    hintGap: '0.375rem',
    fieldGap: '1.125rem',
    sectionGap: '2rem',
    actionsGap: '1rem',
  },
  breakpoints: {
    xs: '480px',
    sm: '640px',
    md: '768px',
    lg: '1024px',
    xl: '1280px',
    '2xl': '1536px',
  },
  borderRadius: {
    none: '0',
    sm: '0.25rem',
    md: '0.375rem',
    lg: '0.5rem',
    xl: '0.625rem',
    '2xl': '0.75rem',
    '3xl': '0.875rem',
    bubble: '1rem',
    full: '9999px',
  },
  motion: {
    hoverLift: 'translateY(-1px)',
    cardHover: 'translateY(-2px)',
    pressScale: 'scale(0.98)',
  },
  transitions: {
    fast: '140ms cubic-bezier(0.25, 0.1, 0.25, 1)',
    normal: '220ms cubic-bezier(0.25, 0.1, 0.25, 1)',
    slow: '320ms cubic-bezier(0.25, 0.1, 0.25, 1)',
  },
  zIndex: {
    dropdown: 1000,
    sticky: 1100,
    fixed: 1200,
    modal: 1300,
    popover: 1400,
    tooltip: 1500,
  },
};

const lightStatus: Record<StatusTone, StatusColors> = {
  open: { bg: '#E9EFFA', border: '#C5D4F0', text: '#1B4BA8' },
  pending: { bg: '#FFFBEB', border: '#FDE68A', text: '#B45309' },
  inProgress: { bg: '#F5F3FF', border: '#DDD6FE', text: '#6D28D9' },
  resolved: { bg: '#ECFDF5', border: '#A7F3D0', text: '#047857' },
  closed: { bg: '#F1F5F9', border: '#CBD5E1', text: '#475569' },
  breached: { bg: '#FEF2F2', border: '#FECACA', text: '#B91C1C' },
  warning: { bg: '#FFF7ED', border: '#FED7AA', text: '#C2410C' },
  paused: { bg: '#F8FAFC', border: '#E2E8F0', text: '#64748B' },
  active: { bg: '#ECFEFF', border: '#A5F3FC', text: '#0E7490' },
  unread: { bg: '#EEF2FF', border: '#C7D2FE', text: '#4338CA' },
  success: { bg: '#F0FDF4', border: '#BBF7D0', text: '#15803D' },
  error: { bg: '#FEF2F2', border: '#FECACA', text: '#DC2626' },
  draft: { bg: '#FAFAF9', border: '#E7E5E4', text: '#78716C' },
  neutral: { bg: '#F1F5F9', border: '#E2E8F0', text: '#64748B' },
};

const darkStatus: Record<StatusTone, StatusColors> = {
  open: { bg: '#172554', border: '#1E40AF', text: '#93C5FD' },
  pending: { bg: '#422006', border: '#92400E', text: '#FCD34D' },
  inProgress: { bg: '#2E1065', border: '#5B21B6', text: '#C4B5FD' },
  resolved: { bg: '#064E3B', border: '#047857', text: '#6EE7B7' },
  closed: { bg: '#1E293B', border: '#334155', text: '#94A3B8' },
  breached: { bg: '#450A0A', border: '#991B1B', text: '#FCA5A5' },
  warning: { bg: '#431407', border: '#9A3412', text: '#FDBA74' },
  paused: { bg: '#1E293B', border: '#334155', text: '#94A3B8' },
  active: { bg: '#164E63', border: '#0E7490', text: '#67E8F9' },
  unread: { bg: '#312E81', border: '#4338CA', text: '#A5B4FC' },
  success: { bg: '#064E3B', border: '#047857', text: '#6EE7B7' },
  error: { bg: '#450A0A', border: '#991B1B', text: '#FCA5A5' },
  draft: { bg: '#292524', border: '#44403C', text: '#A8A29E' },
  neutral: { bg: '#1E293B', border: '#334155', text: '#94A3B8' },
};

export const lightTheme: Theme = {
  mode: 'light',
  colors: {
    primary: '#1B4BA8',
    primaryLight: '#E9EFFA',
    primaryDark: '#123880',
    secondary: '#2E6BB5',
    secondaryLight: '#E9EFFA',
    secondaryDark: '#163CA0',
    accent: '#5B7DB8',
    accentLight: '#F0F4FA',
    success: '#16A34A',
    successLight: '#F0FDF4',
    successDark: '#15803D',
    warning: '#D97706',
    warningLight: '#FFFBEB',
    warningDark: '#B45309',
    error: '#DC2626',
    errorLight: '#FEF2F2',
    errorDark: '#B91C1C',
    info: '#1B4BA8',
    infoLight: '#E9EFFA',
    infoDark: '#123880',

    gray: {
      50: '#F8FAFC',
      100: '#F1F5F9',
      200: '#E2E8F0',
      300: '#CBD5E1',
      400: '#94A3B8',
      500: '#64748B',
      600: '#475569',
      700: '#334155',
      800: '#1E293B',
      900: '#0F172A',
      950: '#020617',
    },

    background: '#F5F3EF',
    surface: '#FFFFFF',
    surfaceElevated: '#FFFFFF',
    surfaceMuted: '#FFFFFF',
    surfaceInset: '#FAF9F7',
    border: '#E8E4DE',
    borderStrong: '#D8D2C8',
    borderSoft: '#EFEBE5',
    divider: '#EDE9E3',
    overlay: 'rgba(15, 23, 42, 0.4)',
    text: {
      primary: '#0F172A',
      secondary: '#64748B',
      tertiary: '#94A3B8',
      disabled: '#CBD5E1',
      inverse: '#FFFFFF',
    },

    status: lightStatus,
    conversation: {
      inboundBg: '#E8ECF2',
      inboundBorder: '#DDE2EA',
      inboundText: '#1E293B',
      outboundBg: '#4A7FD4',
      outboundText: '#FFFFFF',
    },
    priority: {
      low: { bg: '#F1F5F9', border: '#E2E8F0', text: '#475569' },
      medium: { bg: '#E9EFFA', border: '#C5D4F0', text: '#1B4BA8' },
      high: { bg: '#FFF7ED', border: '#FED7AA', text: '#C2410C' },
      urgent: { bg: '#FEF2F2', border: '#FECACA', text: '#B91C1C' },
    },
    sla: {
      active: lightStatus.active,
      warning: lightStatus.warning,
      breached: lightStatus.breached,
      met: lightStatus.resolved,
      paused: lightStatus.paused,
    },
  },
  ...baseTheme,
  shadows: {
    xs: '0 1px 2px rgba(15, 23, 42, 0.04)',
    sm: '0 2px 6px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03)',
    md: '0 4px 14px rgba(15, 23, 42, 0.06)',
    lg: '0 10px 28px rgba(15, 23, 42, 0.08)',
    xl: '0 16px 36px rgba(15, 23, 42, 0.1)',
    '2xl': '0 24px 48px rgba(15, 23, 42, 0.12)',
    inner: 'inset 0 1px 2px rgba(15, 23, 42, 0.04), inset 0 0 0 1px #EFEBE5',
  },
};

export const darkTheme: Theme = {
  mode: 'dark',
  colors: {
    primary: '#5B8FD9',
    primaryLight: '#1A2744',
    primaryDark: '#8BB4F0',
    secondary: '#4A7FC4',
    secondaryLight: '#152238',
    secondaryDark: '#7AA8E8',
    accent: '#7A9BC8',
    accentLight: '#152238',
    success: '#22C55E',
    successLight: '#064E3B',
    successDark: '#4ADE80',
    warning: '#FBBF24',
    warningLight: '#422006',
    warningDark: '#FDE047',
    error: '#F87171',
    errorLight: '#450A0A',
    errorDark: '#FCA5A5',
    info: '#5B8FD9',
    infoLight: '#1A2744',
    infoDark: '#8BB4F0',

    gray: {
      50: '#020617',
      100: '#0F172A',
      200: '#1E293B',
      300: '#334155',
      400: '#475569',
      500: '#64748B',
      600: '#94A3B8',
      700: '#CBD5E1',
      800: '#E2E8F0',
      900: '#F1F5F9',
      950: '#F8FAFC',
    },

    background: '#0B0F14',
    surface: '#141A22',
    surfaceElevated: '#1A222D',
    surfaceMuted: '#1A222D',
    surfaceInset: '#0F1419',
    border: '#243044',
    borderStrong: '#334155',
    divider: '#1E293B',
    overlay: 'rgba(0, 0, 0, 0.65)',
    text: {
      primary: '#F1F5F9',
      secondary: '#94A3B8',
      tertiary: '#64748B',
      disabled: '#475569',
      inverse: '#0F172A',
    },

    status: darkStatus,
    borderSoft: '#1E293B',
    conversation: {
      inboundBg: '#1A222D',
      inboundBorder: '#243044',
      inboundText: '#F1F5F9',
      outboundBg: '#4A7FC4',
      outboundText: '#FFFFFF',
    },
    priority: {
      low: { bg: '#1E293B', border: '#334155', text: '#94A3B8' },
      medium: { bg: '#172554', border: '#1E40AF', text: '#93C5FD' },
      high: { bg: '#431407', border: '#9A3412', text: '#FDBA74' },
      urgent: { bg: '#450A0A', border: '#991B1B', text: '#FCA5A5' },
    },
    sla: {
      active: darkStatus.active,
      warning: darkStatus.warning,
      breached: darkStatus.breached,
      met: darkStatus.resolved,
      paused: darkStatus.paused,
    },
  },
  ...baseTheme,
  shadows: {
    xs: '0 1px 2px rgba(0, 0, 0, 0.3)',
    sm: '0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3)',
    md: '0 4px 12px rgba(0, 0, 0, 0.45)',
    lg: '0 12px 32px rgba(0, 0, 0, 0.55)',
    xl: '0 20px 40px rgba(0, 0, 0, 0.6)',
    '2xl': '0 25px 50px rgba(0, 0, 0, 0.7)',
    inner: 'inset 0 0 0 1px #243044',
  },
};