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: '#4F46E5', // Indigo 600
    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,
    pill: 999,
  },
// ...
};

const themes = {
  ...baseThemes,
  light: {
    ...baseThemes.light,
    primary: tokens.color.primary,
    accent: tokens.color.accent,
    background: '#F1F5F9', // Slate 100
    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
  },
  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: 'Playfair Display',
    weight: sharedWeights,
  },
  display: {
    ...defaultConfig.fonts.heading,
    family: 'Playfair Display',
    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 {}
}