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: '#FF5A5F',
    accent: '#FFB6C1',
    accentSoft: '#FFE5EC',
    success: '#06D6A0',
    warning: '#F5C542',
    danger: '#E04848',
    surface: '#ffffff',
    muted: '#F4ECE8',
    border: '#F2E4DA',
    text: '#1F2937',
  },
  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: '#FFF8F5',
    backgroundHover: '#FFF1EC',
    backgroundPress: '#FFE7E0',
    backgroundStrong: tokens.color.surface,
    backgroundTransparent: 'rgba(255, 248, 245, 0)',
    color: tokens.color.text,
    colorHover: '#111827',
    colorPress: '#0F172A',
    colorFocus: '#0F172A',
    borderColor: tokens.color.border,
    borderColorHover: '#EAD5C9',
    borderColorPress: '#E0C9BC',
    shadowColor: 'rgba(31, 41, 55, 0.12)',
    shadowColorPress: 'rgba(31, 41, 55, 0.16)',
    shadowColorFocus: 'rgba(31, 41, 55, 0.18)',
    surface: tokens.color.surface,
    muted: tokens.color.muted,
    blue3: tokens.color.accentSoft,
    blue6: tokens.color.accent,
    blue10: tokens.color.primary,
    blue11: '#C2413B',
  },
  dark: {
    ...baseThemes.dark,
    primary: tokens.color.primary,
    accent: tokens.color.accent,
    background: '#171219',
    backgroundHover: '#1F1A23',
    backgroundPress: '#26212B',
    backgroundStrong: '#1F1A23',
    backgroundTransparent: 'rgba(23, 18, 25, 0)',
    color: '#F8F6F2',
    colorHover: '#FFFFFF',
    colorPress: '#FDF8F5',
    colorFocus: '#FFFFFF',
    borderColor: '#2C2531',
    borderColorHover: '#3A3240',
    borderColorPress: '#443C4A',
    shadowColor: 'rgba(0, 0, 0, 0.55)',
    shadowColorPress: 'rgba(0, 0, 0, 0.65)',
    shadowColorFocus: 'rgba(0, 0, 0, 0.6)',
    surface: '#1F1A23',
    muted: '#241E28',
    blue3: '#2B1D23',
    blue6: '#5A2D34',
    blue10: '#FF7A7F',
    blue11: '#FFB3B6',
  },
};

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: 'Manrope',
    weight: sharedWeights,
  },
  display: {
    ...defaultConfig.fonts.heading,
    family: 'Fraunces',
    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 {}
}