import { Platform, type ViewStyle } from 'react-native';

/** Proulr UI theme — Night Stalker OLED (fonte única para app + SDUI). */

export const m3Colors = {
  primary: '#D946EF',
  onPrimary: '#FFFFFF',
  primaryContainer: 'rgba(217,70,239,0.22)',
  onPrimaryContainer: '#F0ABFC',
  secondary: '#00E5FF',
  onSecondary: '#000000',
  secondaryContainer: 'rgba(0,229,255,0.18)',
  onSecondaryContainer: '#84FFFF',
  tertiary: '#FF2D55',
  onTertiary: '#FFFFFF',
  tertiaryContainer: 'rgba(255,45,85,0.20)',
  onTertiaryContainer: '#FF8FA8',
  surface: '#000000',
  onSurface: '#FFFFFF',
  onSurfaceVariant: '#A3A3A3',
  surfaceContainer: '#0A0A0A',
  surfaceContainerHigh: '#141414',
  surfaceContainerHighest: '#222222',
  outline: '#1A1A1A',
  outlineVariant: '#2A2A2A',
  error: '#FF4444',
  onError: '#FFFFFF',
  errorContainer: 'rgba(255,68,68,0.22)',
  onErrorContainer: '#FF8A80',
  inverseSurface: '#FFFFFF',
  inverseOnSurface: '#000000',
  scrim: 'rgba(0,0,0,0.78)',
  storyInteractionScrim: 'rgba(0,0,0,0.48)',
  online: '#34FF88',
  /** Saiu recentemente (≤24h) — laranja, distinto do online verde e do ciano de marca. */
  presenceRecent: '#FF9F0A',
} as const;

/** Accent/soft por reação Flash (conteúdo) — fonte única, sem hex solto nos apps. */
export const flashReactionColors = {
  flash: { accent: m3Colors.secondary, soft: m3Colors.secondaryContainer },
  fire: { accent: m3Colors.primary, soft: m3Colors.primaryContainer },
  heart: { accent: '#FF6B8A', soft: 'rgba(255,107,138,0.22)' },
  eyes: { accent: '#40C4FF', soft: 'rgba(64,196,255,0.22)' },
  wave: { accent: '#FFD740', soft: 'rgba(255,215,64,0.22)' },
  chat: { accent: '#B388FF', soft: 'rgba(179,136,255,0.22)' },
} as const;

/** Paleta estável para nome de remetente em grupos (estilo WhatsApp/Telegram). */
export const chatGroupSenderPalette = [
  m3Colors.primary,
  m3Colors.secondary,
  m3Colors.tertiary,
  '#7C4DFF',
  '#00BFA5',
  '#FF6D00',
  '#FF4081',
  '#40C4FF',
] as const;

export const m3Shape = {
  cornerExtraSmall: 4,
  cornerSmall: 8,
  cornerMedium: 12,
  cornerLarge: 16,
  cornerExtraLarge: 24,
  cornerFull: 999,
} as const;

export const m3Type = {
  display: { fontFamily: 'Montserrat_800ExtraBold', fontSize: 57, lineHeight: 64 },
  headline: { fontFamily: 'Montserrat_700Bold', fontSize: 28, lineHeight: 36 },
  title: { fontFamily: 'Montserrat_600SemiBold', fontSize: 22, lineHeight: 28 },
  titleSmall: { fontFamily: 'Montserrat_600SemiBold', fontSize: 16, lineHeight: 24 },
  body: { fontFamily: 'Montserrat_400Regular', fontSize: 16, lineHeight: 24 },
  bodySmall: { fontFamily: 'Montserrat_400Regular', fontSize: 14, lineHeight: 20 },
  label: { fontFamily: 'Montserrat_500Medium', fontSize: 14, lineHeight: 20 },
  labelSmall: { fontFamily: 'Montserrat_500Medium', fontSize: 12, lineHeight: 16 },
} as const;

export const colors = {
  bg: '#000000',
  surface: '#0A0A0A',
  surface2: '#141414',
  border: '#1A1A1A',
  borderStrong: '#2A2A2A',
  textPrimary: '#FFFFFF',
  textSecondary: '#A3A3A3',
  textMuted: '#666666',
  white: '#FFFFFF',
  textOnAccent: '#FFFFFF',
  accent: '#D946EF',
  accentSoft: 'rgba(217,70,239,0.22)',
  accentText: '#F0ABFC',
  highlight: '#00E5FF',
  highlightSoft: 'rgba(0,229,255,0.18)',
  headerStart: '#2D0A35',
  headerEnd: '#D946EF',
  online: '#34FF88',
  onlineSoft: 'rgba(52,255,136,0.18)',
  /** Presence: recently active (not online). */
  presenceRecent: '#FF9F0A',
  presenceRecentSoft: 'rgba(255,159,10,0.22)',
  danger: '#FF4444',
  dangerSoft: 'rgba(255,68,68,0.22)',
  dangerSoft18: 'rgba(239,68,68,0.18)',
  overlay: 'rgba(0,0,0,0.78)',
  surfaceGlass: 'rgba(255,255,255,0.06)',
  /** Pílula / chrome sem BlurView — preto OLED. */
  chromePillBackground: 'rgba(0, 0, 0, 0.82)',
  /** Overlay sobre BlurView — véu quase preto puxando pro fundo OLED (estilo
   * Telegram): vidro escuro, com só um sussurro de fuchsia no hue. Opacidade
   * alta escurece o conteúdo borrado sem matar o frost. */
  chromeGlassOverlay: 'rgba(7, 4, 10, 0.64)',
  /** Véu quase preto sobre glass de painéis grandes (drawer) — legibilidade máxima. */
  chromeGlassPanelVeil: 'rgba(6, 3, 9, 0.7)',
  chromePillBorder: 'rgba(255, 255, 255, 0.08)',
  videoControlBackground: 'rgba(0,0,0,0.45)',
  videoTrackBackground: 'rgba(255,255,255,0.25)',
  scrollbarThumb: 'rgba(255, 255, 255, 0.28)',
  scrollbarThumbHover: 'rgba(255, 255, 255, 0.45)',
  primary: '#D946EF',
  primarySoft18: 'rgba(217,70,239,0.18)',
  primarySoft35: 'rgba(217,70,239,0.35)',
  onSurface: '#FFFFFF',
  onSurfaceVariant: '#A3A3A3',
  shadow: '#000',
  whiteAlpha08: 'rgba(255,255,255,0.08)',
  whiteAlpha12: 'rgba(255,255,255,0.12)',
  whiteAlpha16: 'rgba(255,255,255,0.16)',
  whiteAlpha22: 'rgba(255,255,255,0.22)',
  whiteAlpha28: 'rgba(255,255,255,0.28)',
  whiteAlpha35: 'rgba(255,255,255,0.35)',
  whiteAlpha38: 'rgba(255,255,255,0.38)',
  whiteAlpha72: 'rgba(255,255,255,0.72)',
  whiteAlpha78: 'rgba(255,255,255,0.78)',
  whiteAlpha82: 'rgba(255,255,255,0.82)',
  whiteAlpha88: 'rgba(255,255,255,0.88)',
  blackAlpha08: 'rgba(0,0,0,0.08)',
  blackAlpha10: 'rgba(0,0,0,0.1)',
  blackAlpha12: 'rgba(0,0,0,0.12)',
  blackAlpha14: 'rgba(0,0,0,0.14)',
  blackAlpha18: 'rgba(0,0,0,0.18)',
  blackAlpha28: 'rgba(0,0,0,0.28)',
  blackAlpha30: 'rgba(0,0,0,0.3)',
  blackAlpha35: 'rgba(0,0,0,0.35)',
  blackAlpha40: 'rgba(0,0,0,0.4)',
  blackAlpha45: 'rgba(0,0,0,0.45)',
  blackAlpha48: 'rgba(0,0,0,0.48)',
  blackAlpha38: 'rgba(0,0,0,0.38)',
  blackAlpha50: 'rgba(0,0,0,0.5)',
  blackAlpha55: 'rgba(0,0,0,0.55)',
  blackAlpha60: 'rgba(0,0,0,0.6)',
  blackAlpha62: 'rgba(0,0,0,0.62)',
  blackAlpha72: 'rgba(0,0,0,0.72)',
  blackAlpha75: 'rgba(0,0,0,0.75)',
  blackAlpha78: 'rgba(0,0,0,0.78)',
  blackAlpha80: 'rgba(0,0,0,0.8)',
  blackAlpha85: 'rgba(0,0,0,0.85)',
  blackAlpha90: 'rgba(0,0,0,0.9)',
  creamAlpha35: 'rgba(250,250,249,0.35)',
  creamAlpha72: 'rgba(250,250,249,0.72)',
  creamAlpha78: 'rgba(250,250,249,0.78)',
  creamAlpha82: 'rgba(250,250,249,0.82)',
  creamAlpha85: 'rgba(250,250,249,0.85)',
  creamAlpha92: 'rgba(250,250,249,0.92)',
  orangeSoft14: 'rgba(255,87,51,0.14)',
  presenceOffline: 'rgba(163,163,163,0.45)',
  presenceBorder: 'rgba(0,0,0,0.85)',
  surfaceElevated82: 'rgba(28,28,30,0.82)',
  surfaceElevated95: 'rgba(28,28,30,0.95)',
} as const;

export const spacing = {
  xs: 4,
  sm: 8,
  md: 12,
  lg: 16,
  xl: 24,
  xxl: 32,
};

export const radius = {
  sm: 8,
  md: 12,
  lg: 16,
  xl: 24,
  pill: 999,
};

export const gradients = {
  brand: ['#7A0D8A', '#D946EF'] as const,
  header: ['#2D0A35', '#D946EF'] as const,
  headerGlow: ['rgba(217,70,239,0.20)', 'rgba(217,70,239,0)'] as const,
  authHero: ['rgba(217,70,239,0.14)', 'rgba(0,229,255,0.06)', 'transparent'] as const,
  authHeroWelcomeTop: [colors.blackAlpha62, colors.blackAlpha18, 'transparent'] as const,
  authHeroWelcomeBottom: ['transparent', colors.blackAlpha12, colors.blackAlpha50] as const,
  mediaHeroShade: ['transparent', colors.blackAlpha90] as const,
  mediaBrowseShade: ['transparent', colors.blackAlpha78] as const,
  neonBorder: [colors.headerEnd, colors.accent] as const,
  videoControlsShade: ['transparent', colors.blackAlpha72] as const,
  chromeScrollFadeBottom: [
    'transparent',
    'rgba(0,0,0,0.22)',
    'rgba(0,0,0,0.65)',
    '#000000',
  ] as const,
  chromeScrollFadeBottomLocations: [0, 0.45, 0.82, 1] as const,
  chromeScrollFadeTop: [
    '#000000',
    'rgba(0,0,0,0.65)',
    'rgba(0,0,0,0.22)',
    'transparent',
  ] as const,
  chromeScrollFadeTopLocations: [0, 0.18, 0.55, 1] as const,
};

export const fonts = {
  regular: 'Montserrat_400Regular',
  medium: 'Montserrat_500Medium',
  semibold: 'Montserrat_600SemiBold',
  bold: 'Montserrat_700Bold',
  extrabold: 'Montserrat_800ExtraBold',
} as const;

export const shadows = {
  card: Platform.select<ViewStyle>({
    ios: {
      shadowColor: '#D946EF',
      shadowOffset: { width: 0, height: 4 },
      shadowOpacity: 0.12,
      shadowRadius: 12,
    },
    android: { elevation: 3 },
    default: {},
  }),
  elevated: Platform.select<ViewStyle>({
    ios: {
      shadowColor: '#00E5FF',
      shadowOffset: { width: 0, height: 6 },
      shadowOpacity: 0.14,
      shadowRadius: 16,
    },
    android: { elevation: 6 },
    default: {},
  }),
  subtle: Platform.select<ViewStyle>({
    ios: {
      shadowColor: '#000000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.4,
      shadowRadius: 6,
    },
    android: { elevation: 2 },
    default: {},
  }),
};

export const m3Elevation = {
  level0: {},
  level1: shadows.subtle,
  level2: shadows.card,
  level3: shadows.elevated,
} as const;

export const cardStyle = {
  backgroundColor: m3Colors.surfaceContainer,
  borderRadius: m3Shape.cornerLarge,
  padding: spacing.sm,
  borderWidth: 1,
  borderColor: m3Colors.outlineVariant,
  ...m3Elevation.level2,
} as const;