import { defaultConfig } from '@tamagui/config/v5';
import { createTamagui } from '@tamagui/core';
import { shorthands } from '@tamagui/shorthands';
import { tokens as baseTokens, themes as baseThemes } from '@tamagui/themes';
import { createAnimations } from '@tamagui/animations-css';

const tokens = {
  ...baseTokens,
  color: {
    ...baseTokens.color,
    primary: '#FF5A5F', // Brand Rose
    accent: '#F43F5E', // Rose 500
    accentSoft: '#E0E7FF', // Indigo 100
    success: '#10B981', // Emerald 500
    warning: '#F59E0B', // Amber 500
    danger: '#EF4444', // Red 500
    surface: '#ffffff',
    muted: '#F8FAFC', // Slate 50
    border: '#E2E8F0', // Slate 200
    text: '#0F172A', // Slate 900
  },
  radius: {
// ... existing radius tokens ...
    card: 16,
    tile: 14,
    bento: 24,
    bentoLg: 32,
    pill: 999,
  },
// ...
};

const lightTheme = {
  ...baseThemes.light,
  primary: tokens.color.primary,
  accent: tokens.color.accent,
  background: '#FFF8F5', // Brand Cream
  backgroundHover: '#E2E8F0',
  backgroundPress: '#CBD5E1',
  backgroundStrong: tokens.color.surface,
  backgroundTransparent: 'rgba(241, 245, 249, 0)',
  color: tokens.color.text,
  colorHover: '#1E293B',
  colorPress: '#1E293B',
  colorFocus: '#1E293B',
  borderColor: tokens.color.border,
  borderColorHover: '#CBD5E1',
  borderColorPress: '#94A3B8',
  shadowColor: 'rgba(15, 23, 42, 0.08)',
  shadowColorPress: 'rgba(15, 23, 42, 0.12)',
  shadowColorFocus: 'rgba(15, 23, 42, 0.12)',
  surface: tokens.color.surface,
  muted: tokens.color.muted,
  blue3: tokens.color.accentSoft,
  blue6: '#6366F1', // Indigo 500
  blue10: tokens.color.primary,
  blue11: '#4338CA', // Indigo 700
};

const adminLightTheme = {
  ...lightTheme,
  accentSoft: tokens.color.accentSoft,
  colorMuted: '#64748B', // Slate 500
  colorSubtle: '#94A3B8', // Slate 400
};

const guestLightTheme = {
  ...baseThemes.light,
  primary: 'var(--guest-primary, #FF5A5F)',
  accent: 'var(--guest-secondary, #F43F5E)',
  background: 'var(--guest-background, #FFF8F5)',
  backgroundHover: '#F1E7E2',
  backgroundPress: '#EBDCD6',
  backgroundStrong: 'var(--guest-surface, #FFFFFF)',
  backgroundTransparent: 'rgba(255, 248, 245, 0)',
  color: 'var(--foreground, #0F172A)',
  colorHover: 'var(--foreground, #0F172A)',
  colorPress: 'var(--foreground, #0F172A)',
  colorFocus: 'var(--foreground, #0F172A)',
  borderColor: 'var(--border, #E2E8F0)',
  borderColorHover: '#CBD5E1',
  borderColorPress: '#94A3B8',
  shadowColor: 'rgba(15, 23, 42, 0.08)',
  shadowColorPress: 'rgba(15, 23, 42, 0.12)',
  shadowColorFocus: 'rgba(15, 23, 42, 0.12)',
  surface: 'var(--guest-surface, #FFFFFF)',
  muted: 'var(--muted, #F8FAFC)',
  blue3: 'var(--guest-secondary, #F43F5E)',
  blue6: 'var(--guest-secondary, #F43F5E)',
  blue10: 'var(--guest-primary, #FF5A5F)',
  blue11: '#4338CA',
};

const darkTheme = {
  ...baseThemes.dark,
  primary: tokens.color.primary,
  accent: tokens.color.accent,
  background: '#171219',
  backgroundHover: '#101A36',
  backgroundPress: '#132142',
  backgroundStrong: '#101A36',
  backgroundTransparent: 'rgba(11, 19, 43, 0)',
  color: '#F8FAFF',
  colorHover: '#FFFFFF',
  colorPress: '#F2F6FF',
  colorFocus: '#FFFFFF',
  borderColor: '#1F2A4A',
  borderColorHover: '#29345A',
  borderColorPress: '#313D67',
  shadowColor: 'rgba(0, 0, 0, 0.55)',
  shadowColorPress: 'rgba(0, 0, 0, 0.65)',
  shadowColorFocus: 'rgba(0, 0, 0, 0.6)',
  surface: '#0F1B36',
  muted: '#121F3D',
  blue3: '#1B2550',
  blue6: '#3D5AFE',
  blue10: '#FF5C5C',
  blue11: '#FF8A8A',
};

const adminDarkTheme = {
  ...darkTheme,
  background: '#0F172A',
  backgroundHover: '#101A36',
  backgroundPress: '#132142',
  backgroundStrong: '#16223A',
  backgroundTransparent: 'rgba(15, 23, 42, 0)',
  color: '#F8FAFF',
  colorHover: '#FFFFFF',
  colorPress: '#E8EEFF',
  colorFocus: '#FFFFFF',
  borderColor: 'rgba(148, 163, 184, 0.25)',
  borderColorHover: 'rgba(148, 163, 184, 0.35)',
  borderColorPress: 'rgba(148, 163, 184, 0.45)',
  shadowColor: 'rgba(2, 6, 23, 0.7)',
  shadowColorPress: 'rgba(2, 6, 23, 0.8)',
  shadowColorFocus: 'rgba(2, 6, 23, 0.8)',
  surface: '#16223A',
  muted: '#1C2844',
  blue3: 'rgba(255, 90, 95, 0.18)',
  blue6: '#FF5A5F',
  blue10: '#FF5A5F',
  blue11: '#FF8A8A',
  accentSoft: 'rgba(255, 90, 95, 0.18)',
  colorMuted: 'rgba(248, 250, 255, 0.68)',
  colorSubtle: 'rgba(248, 250, 255, 0.5)',
};

const guestNightTheme = {
  ...baseThemes.dark,
  primary: 'var(--guest-primary, #FF4FD8)',
  accent: 'var(--guest-secondary, #4FD1FF)',
  accentSoft: 'rgba(79, 209, 255, 0.18)',
  background: 'var(--guest-background, #0A0F1F)',
  backgroundHover: '#10172A',
  backgroundPress: '#0D1324',
  backgroundStrong: 'var(--guest-surface, #121A32)',
  backgroundTransparent: 'rgba(10, 15, 31, 0)',
  color: '#F8FAFF',
  colorHover: '#FFFFFF',
  colorPress: '#E8EEFF',
  colorFocus: '#FFFFFF',
  borderColor: 'rgba(255, 255, 255, 0.08)',
  borderColorHover: 'rgba(255, 255, 255, 0.16)',
  borderColorPress: 'rgba(255, 255, 255, 0.22)',
  shadowColor: 'rgba(2, 6, 23, 0.7)',
  shadowColorPress: 'rgba(2, 6, 23, 0.8)',
  shadowColorFocus: 'rgba(2, 6, 23, 0.8)',
  surface: 'var(--guest-surface, #131B33)',
  muted: '#0F152B',
  blue3: 'rgba(79, 209, 255, 0.15)',
  blue6: 'var(--guest-secondary, #4FD1FF)',
  blue10: 'var(--guest-primary, #FF4FD8)',
  blue11: '#F9A8D4',
};

const themes = {
  ...baseThemes,
  light: lightTheme,
  dark: darkTheme,
  adminLight: adminLightTheme,
  adminDark: adminDarkTheme,
  guestLight: { ...guestLightTheme },
  guestDark: { ...darkTheme },
  guestNight: { ...guestNightTheme },
};

const sharedWeights = {
  4: '400',
  5: '500',
  6: '600',
  7: '700',
  8: '800',
  9: '900',
};

const fonts = {
  ...defaultConfig.fonts,
  body: {
    ...defaultConfig.fonts.body,
    family: 'var(--guest-body-font, Manrope)',
    weight: sharedWeights,
  },
  heading: {
    ...defaultConfig.fonts.heading,
    family: 'var(--guest-heading-font, Fraunces)',
    weight: sharedWeights,
  },
  display: {
    ...defaultConfig.fonts.heading,
    family: 'var(--guest-heading-font, Fraunces)',
    weight: sharedWeights,
  },
};

const config = createTamagui({
  ...defaultConfig,
  settings: {
    ...(defaultConfig.settings ?? {}),
    addThemeClassName: 'html',
  },
  animations: createAnimations({
    fast: 'cubic-bezier(0.2, 0.7, 0.2, 1) 150ms',
    medium: 'cubic-bezier(0.2, 0.7, 0.2, 1) 250ms',
    slow: 'cubic-bezier(0.2, 0.7, 0.2, 1) 400ms',
  }),
  tokens,
  themes,
  fonts,
  defaultFont: 'body',
  shorthands,
  media: {
    ...defaultConfig.media,
    xs: { maxWidth: 660 },
    sm: { maxWidth: 840 },
    md: { maxWidth: 1024 },
  },
});

export type AppConfig = typeof config;
export default config;

declare module '@tamagui/core' {
  interface TamaguiCustomConfig extends AppConfig {}
}