import { useColorScheme, Platform } from 'react-native';
import { useThemeStore } from '../stores/themeStore';

// ─── Brand colors ─────────────────────────────────────────────────────────────
export const COLORS = {
  primary:          '#6366f1',
  primaryDark:      '#4f46e5',
  primaryLight:     '#818cf8',
  primaryUltraLight:'#eef2ff',
  primaryMid:       '#c7d2fe',

  success:  '#10b981',
  successBg:'#d1fae5',
  warning:  '#f59e0b',
  warningBg:'#fef3c7',
  error:    '#ef4444',
  errorBg:  '#fee2e2',
  info:     '#3b82f6',
  infoBg:   '#dbeafe',
  purple:   '#8b5cf6',
  purpleBg: '#ede9fe',

  white: '#ffffff',
  black: '#000000',

  light: {
    bg:           '#f8fafc',
    bgSecondary:  '#f1f5f9',
    surface:      '#ffffff',
    surfaceHover: '#f8fafc',
    border:       '#e2e8f0',
    borderLight:  '#f1f5f9',
    text:         '#0f172a',
    textSecondary:'#475569',
    textMuted:    '#94a3b8',
    inputBg:      '#ffffff',
    tabBar:       '#ffffff',
    tabBarBorder: '#f1f5f9',
    placeholder:  '#94a3b8',
    icon:         '#64748b',
    overlay:      'rgba(15,23,42,0.4)',
  },

  dark: {
    bg:           '#0a0f1e',
    bgSecondary:  '#0f172a',
    surface:      '#151f32',
    surfaceHover: '#1e293b',
    border:       '#1e293b',
    borderLight:  '#162033',
    text:         '#f1f5f9',
    textSecondary:'#94a3b8',
    textMuted:    '#475569',
    inputBg:      '#151f32',
    tabBar:       '#0a0f1e',
    tabBarBorder: '#151f32',
    placeholder:  '#475569',
    icon:         '#64748b',
    overlay:      'rgba(0,0,0,0.6)',
  },
};

// ─── Spacing ──────────────────────────────────────────────────────────────────
export const SPACING = {
  xs:   4,
  sm:   8,
  md:   12,
  lg:   16,
  xl:   20,
  xxl:  24,
  xxxl: 32,
  huge: 48,
};

// ─── Border radius ────────────────────────────────────────────────────────────
export const RADIUS = {
  xs:   4,
  sm:   8,
  md:   12,
  lg:   16,
  xl:   20,
  xxl:  24,
  full: 9999,
};

// ─── Typography ───────────────────────────────────────────────────────────────
export const FONT_SIZE = {
  xs:   11,
  sm:   13,
  md:   15,
  lg:   17,
  xl:   20,
  xxl:  24,
  xxxl: 30,
  huge: 38,
};

export const FONT = {
  regular:  '400' as const,
  medium:   '500' as const,
  semibold: '600' as const,
  bold:     '700' as const,
  extrabold:'800' as const,
};

// Pre-built text style objects (use with spread)
export const TEXT = {
  h1:      { fontSize: FONT_SIZE.xxxl, fontWeight: FONT.bold,     lineHeight: 38 },
  h2:      { fontSize: FONT_SIZE.xxl,  fontWeight: FONT.bold,     lineHeight: 32 },
  h3:      { fontSize: FONT_SIZE.xl,   fontWeight: FONT.semibold, lineHeight: 28 },
  h4:      { fontSize: FONT_SIZE.lg,   fontWeight: FONT.semibold, lineHeight: 24 },
  body:    { fontSize: FONT_SIZE.md,   fontWeight: FONT.regular,  lineHeight: 22 },
  bodyM:   { fontSize: FONT_SIZE.md,   fontWeight: FONT.medium,   lineHeight: 22 },
  small:   { fontSize: FONT_SIZE.sm,   fontWeight: FONT.regular,  lineHeight: 18 },
  smallM:  { fontSize: FONT_SIZE.sm,   fontWeight: FONT.medium,   lineHeight: 18 },
  caption: { fontSize: FONT_SIZE.xs,   fontWeight: FONT.regular,  lineHeight: 16 },
  captionM:{ fontSize: FONT_SIZE.xs,   fontWeight: FONT.medium,   lineHeight: 16 },
  overline:{ fontSize: FONT_SIZE.xs,   fontWeight: FONT.bold,     letterSpacing: 1, lineHeight: 16 },
} as const;

// ─── Shadows ──────────────────────────────────────────────────────────────────
export const SHADOWS = {
  none: {},
  xs: Platform.select({
    ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.04, shadowRadius: 3 },
    android: { elevation: 1 },
  }) ?? {},
  sm: Platform.select({
    ios: { shadowColor: '#0f172a', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.06, shadowRadius: 8 },
    android: { elevation: 2 },
  }) ?? {},
  md: Platform.select({
    ios: { shadowColor: '#0f172a', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.09, shadowRadius: 16 },
    android: { elevation: 4 },
  }) ?? {},
  lg: Platform.select({
    ios: { shadowColor: '#0f172a', shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.12, shadowRadius: 24 },
    android: { elevation: 8 },
  }) ?? {},
  xl: Platform.select({
    ios: { shadowColor: '#0f172a', shadowOffset: { width: 0, height: 16 }, shadowOpacity: 0.18, shadowRadius: 40 },
    android: { elevation: 16 },
  }) ?? {},
  // Tinted primary shadow
  primary: Platform.select({
    ios: { shadowColor: '#6366f1', shadowOffset: { width: 0, height: 6 }, shadowOpacity: 0.3, shadowRadius: 16 },
    android: { elevation: 6 },
  }) ?? {},
};

// ─── Theme hook ───────────────────────────────────────────────────────────────
export function useTheme() {
  const scheme = useColorScheme();
  const mode = useThemeStore(s => s.mode);
  const isDark = mode === 'system' ? scheme === 'dark' : mode === 'dark';
  const theme = isDark ? COLORS.dark : COLORS.light;
  return { isDark, colors: COLORS, theme, shadows: SHADOWS };
}