import { defaultConfig } from '@tamagui/config/v4';
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: '#FF5C5C',
    accent: '#3D5AFE',
    accentSoft: '#E8ECFF',
    success: '#22C55E',
    warning: '#FBBF24',
    danger: '#EF4444',
    surface: '#ffffff',
    muted: '#FFF6F0',
    border: '#F3D6C9',
    text: '#0B132B',
  },
  radius: {
    ...baseTokens.radius,
    card: 20,
    tile: 14,
    pill: 999,
  },
  size: {
    ...baseTokens.size,
    card: 20,
  },
};

const themes = {
  ...baseThemes,
  light: {
    ...baseThemes.light,
    primary: tokens.color.primary,
    accent: tokens.color.accent,
    background: '#FFF1E8',
    backgroundHover: '#FFE8DD',
    backgroundPress: '#FFE1D2',
    backgroundStrong: tokens.color.surface,
    backgroundTransparent: 'rgba(255, 241, 232, 0)',
    color: tokens.color.text,
    colorHover: '#091024',
    colorPress: '#091024',
    colorFocus: '#091024',
    borderColor: tokens.color.border,
    borderColorHover: '#EBCABA',
    borderColorPress: '#E1BFAE',
    shadowColor: 'rgba(11, 19, 43, 0.16)',
    shadowColorPress: 'rgba(11, 19, 43, 0.2)',
    shadowColorFocus: 'rgba(11, 19, 43, 0.24)',
    surface: tokens.color.surface,
    muted: tokens.color.muted,
    blue3: tokens.color.accentSoft,
    blue6: tokens.color.accent,
    blue10: tokens.color.primary,
    blue11: '#1E36F1',
  },
  dark: {
    ...baseThemes.dark,
    primary: tokens.color.primary,
    accent: tokens.color.accent,
    background: '#0B132B',
    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 sharedWeights = {
  4: '400',
  5: '500',
  6: '600',
  7: '700',
  8: '800',
  9: '900',
};

const fonts = {
  ...defaultConfig.fonts,
  body: {
    ...defaultConfig.fonts.body,
    family: 'Manrope',
    weight: sharedWeights,
  },
  heading: {
    ...defaultConfig.fonts.heading,
    family: 'Archivo Black',
    weight: sharedWeights,
  },
  display: {
    ...defaultConfig.fonts.heading,
    family: 'Archivo Black',
    weight: sharedWeights,
  },
};

const config = createTamagui({
  ...defaultConfig,
  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 {}
}