import {
  createTheme,
  rem,
  type MantineColorsTuple,
} from '@mantine/core';

// ---- Coastal Modern palette ----------------------------------------------
// Portal-only theme. Lives here (not in @ema-platform/shared) so the backoffice
// is unaffected.

const emaPrimary: MantineColorsTuple = [
  '#eef4ff', '#dce7fb', '#b6cdf4', '#8db0ee', '#6c97e9',
  '#5887e6', '#4b7fe5', '#3b6ccc', '#3160b7', '#2453a2',
];

// Teal accent — the "coastal" half of the palette.
const emaTeal: MantineColorsTuple = [
  '#e1fbf6', '#cdf3eb', '#9ee6d7', '#6bd9c1', '#46cdaf',
  '#30c7a5', '#1fc29d', '#0aab89', '#009879', '#008368',
];

// Cool neutral grays (slightly blue-tinted) for surfaces & text.
const emaGray: MantineColorsTuple = [
  '#f6f8fb', '#eceff4', '#dde2eb', '#c8d0dd', '#aab5c7',
  '#8d9bb3', '#73839e', '#5c6b85', '#46546b', '#333f52',
];

export const portalTheme = createTheme({
  primaryColor: 'emaPrimary',
  primaryShade: { light: 6, dark: 5 },
  colors: {
    emaPrimary,
    emaTeal,
    gray: emaGray,
  },
  fontFamily:
    'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
  headings: {
    fontFamily: 'Inter, sans-serif',
    fontWeight: '700',
    sizes: {
      h1: { fontSize: rem(32), lineHeight: '1.25' },
      h2: { fontSize: rem(25), lineHeight: '1.3' },
      h3: { fontSize: rem(21), lineHeight: '1.35' },
      h4: { fontSize: rem(17), lineHeight: '1.4' },
      h5: { fontSize: rem(15), lineHeight: '1.45' },
    },
  },
  defaultRadius: 'md',
  radius: {
    xs: rem(6),
    sm: rem(8),
    md: rem(12),
    lg: rem(16),
    xl: rem(22),
  },
  shadows: {
    xs: '0 1px 2px rgba(15,23,42,0.06)',
    sm: '0 2px 8px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04)',
    md: '0 8px 24px rgba(15,23,42,0.08)',
    lg: '0 16px 40px rgba(15,23,42,0.12)',
    xl: '0 24px 64px rgba(15,23,42,0.16)',
  },
  breakpoints: {
    xs: '36em',
    sm: '48em',
    md: '62em',
    lg: '75em',
    xl: '88em',
  },
  cursorType: 'pointer',
  components: {
    Paper: {
      defaultProps: { radius: 'lg' },
    },
    Card: {
      defaultProps: { radius: 'lg' },
    },
    Button: {
      defaultProps: { radius: 'md' },
      styles: { root: { fontWeight: 600 } },
    },
    Badge: {
      defaultProps: { radius: 'sm' },
    },
    ThemeIcon: {
      defaultProps: { radius: 'md' },
    },
    NavLink: {
      styles: { root: { borderRadius: rem(10), fontWeight: 500 } },
    },
    TextInput: { defaultProps: { radius: 'md' } },
    Textarea: { defaultProps: { radius: 'md' } },
    Select: { defaultProps: { radius: 'md' } },
    PasswordInput: { defaultProps: { radius: 'md' } },
    // Mantine's stock scroll wrapper (NativeScrollArea) discards the
    // max-height it's handed unless scrollAreaComponent is set, so a modal
    // taller than the viewport just gets clipped with no way to scroll it.
    // Making the body the scrollport here fixes every Modal/Drawer at once.
    Modal: {
      styles: {
        content: { display: 'flex', flexDirection: 'column', maxHeight: '90dvh' },
        body: { flex: '1 1 auto', minHeight: 0, overflowY: 'auto' },
      },
    },
    Drawer: {
      styles: {
        content: { display: 'flex', flexDirection: 'column' },
        body: { flex: '1 1 auto', minHeight: 0, overflowY: 'auto' },
      },
    },
  },
  other: {
    heroGradient: 'linear-gradient(135deg, #3160b7 0%, #1fc29d 100%)',
  },
});
