Styling System

/**
 * Core stylesheet management with Windows optimizations
 * Provides style creation, composition, and performance optimizations
 */
interface StyleSheet {
  /** Create optimized stylesheet */
  create<T extends NamedStyles<T>>(styles: T): T;

  /** Flatten style objects */
  flatten<T>(style: T): T;

  /** Compose multiple styles */
  compose<T>(style1: T, style2: T): T;

  /** Absolute fill object */
  absoluteFillObject: {
    position: 'absolute';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  };

  /** Absolute fill style */
  absoluteFill: number;

  /** Hairline width for thin borders */
  hairlineWidth: number;
}

type NamedStyles<T> = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle };

declare const StyleSheet: StyleSheet;

import { StyleSheet } from 'react-native-windows';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    padding: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 16,
  },
  button: {
    backgroundColor: '#0078d4',
    padding: 12,
    borderRadius: 4,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
  },
});

/**
 * Windows brush-based platform colors
 * Automatically adapts to system themes and high contrast
 */
function PlatformColor(...names: string[]): PlatformColor;

type PlatformColor = {
  /** Platform color identifier */
  semantic: string[];
};

import { PlatformColor } from 'react-native-windows';

// Windows system brush colors
const windowsColors = {
  // Accent colors
  accent: PlatformColor('SystemAccentColor'),
  accentLight1: PlatformColor('SystemAccentColorLight1'),
  accentLight2: PlatformColor('SystemAccentColorLight2'),
  accentLight3: PlatformColor('SystemAccentColorLight3'),
  accentDark1: PlatformColor('SystemAccentColorDark1'),
  accentDark2: PlatformColor('SystemAccentColorDark2'),
  accentDark3: PlatformColor('SystemAccentColorDark3'),

  // Base colors
  altHigh: PlatformColor('SystemAltHighColor'),
  altLow: PlatformColor('SystemAltLowColor'),
  altMedium: PlatformColor('SystemAltMediumColor'),
  altMediumHigh: PlatformColor('SystemAltMediumHighColor'),
  altMediumLow: PlatformColor('SystemAltMediumLowColor'),

  // Base high colors
  baseHigh: PlatformColor('SystemBaseHighColor'),
  baseLow: PlatformColor('SystemBaseLowColor'),
  baseMedium: PlatformColor('SystemBaseMediumColor'),
  baseMediumHigh: PlatformColor('SystemBaseMediumHighColor'),
  baseMediumLow: PlatformColor('SystemBaseMediumLowColor'),

  // Chrome colors
  chromeAltLow: PlatformColor('SystemChromeAltLowColor'),
  chromeBlackHigh: PlatformColor('SystemChromeBlackHighColor'),
  chromeBlackLow: PlatformColor('SystemChromeBlackLowColor'),
  chromeBlackMedium: PlatformColor('SystemChromeBlackMediumColor'),
  chromeBlackMediumLow: PlatformColor('SystemChromeBlackMediumLowColor'),
  chromeDisabledHigh: PlatformColor('SystemChromeDisabledHighColor'),
  chromeDisabledLow: PlatformColor('SystemChromeDisabledLowColor'),
  chromeHigh: PlatformColor('SystemChromeHighColor'),
  chromeLow: PlatformColor('SystemChromeLowColor'),
  chromeMedium: PlatformColor('SystemChromeMediumColor'),
  chromeMediumLow: PlatformColor('SystemChromeMediumLowColor'),
  chromeWhite: PlatformColor('SystemChromeWhiteColor'),

  // List colors
  listLow: PlatformColor('SystemListLowColor'),
  listMedium: PlatformColor('SystemListMediumColor'),
};

// Usage in styles
const platformStyles = StyleSheet.create({
  accentButton: {
    backgroundColor: PlatformColor('SystemAccentColor'),
    borderColor: PlatformColor('SystemAccentColorDark1'),
  },
  systemBackground: {
    backgroundColor: PlatformColor('SystemAltHighColor'),
  },
  systemText: {
    color: PlatformColor('SystemBaseHighColor'),
  },
});

/**
 * iOS dynamic color support (limited Windows compatibility)
 * Enables cross-platform color definitions
 */
interface DynamicColorIOS {
  (descriptor: {
    light: string;
    dark: string;
    highContrastLight?: string;
    highContrastDark?: string;
  }): any;
}

declare const DynamicColorIOS: DynamicColorIOS;

/**
 * Color processing and normalization utilities
 * Handles color format conversion and validation
 */
function processColor(color: number | string): number | null;

import { processColor } from 'react-native-windows';

// Process various color formats
const colors = {
  hexColor: processColor('#ff0000'),        // Red
  rgbString: processColor('rgb(255, 0, 0)'), // Red
  rgbaString: processColor('rgba(255, 0, 0, 0.5)'), // Semi-transparent red
  namedColor: processColor('red'),          // Named color
  transparentColor: processColor('transparent'), // Fully transparent
  invalidColor: processColor('invalid'),    // Returns null
};

// Use in native modules or advanced styling
const nativeColor = processColor('#0078d4');
if (nativeColor !== null) {
  // Pass to native module
  NativeModule.setColor(nativeColor);
}

/**
 * View styling properties with Windows-specific enhancements
 */
interface ViewStyle {
  // Layout
  alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around';
  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
  alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
  aspectRatio?: number;
  borderBottomWidth?: number;
  borderEndWidth?: number;
  borderLeftWidth?: number;
  borderRightWidth?: number;
  borderStartWidth?: number;
  borderTopWidth?: number;
  borderWidth?: number;
  bottom?: number | string;
  display?: 'none' | 'flex';
  end?: number | string;
  flex?: number;
  flexBasis?: number | string;
  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
  flexGrow?: number;
  flexShrink?: number;
  flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
  height?: number | string;
  justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
  left?: number | string;
  margin?: number | string;
  marginBottom?: number | string;
  marginEnd?: number | string;
  marginHorizontal?: number | string;
  marginLeft?: number | string;
  marginRight?: number | string;
  marginStart?: number | string;
  marginTop?: number | string;
  marginVertical?: number | string;
  maxHeight?: number | string;
  maxWidth?: number | string;
  minHeight?: number | string;
  minWidth?: number | string;
  overflow?: 'visible' | 'hidden' | 'scroll';
  padding?: number | string;
  paddingBottom?: number | string;
  paddingEnd?: number | string;
  paddingHorizontal?: number | string;
  paddingLeft?: number | string;
  paddingRight?: number | string;
  paddingStart?: number | string;
  paddingTop?: number | string;
  paddingVertical?: number | string;
  position?: 'absolute' | 'relative';
  right?: number | string;
  start?: number | string;
  top?: number | string;
  width?: number | string;
  zIndex?: number;

  // Appearance
  backgroundColor?: string | PlatformColor;
  borderBottomColor?: string | PlatformColor;
  borderBottomEndRadius?: number;
  borderBottomLeftRadius?: number;
  borderBottomRightRadius?: number;
  borderBottomStartRadius?: number;
  borderColor?: string | PlatformColor;
  borderEndColor?: string | PlatformColor;
  borderLeftColor?: string | PlatformColor;
  borderRadius?: number;
  borderRightColor?: string | PlatformColor;
  borderStartColor?: string | PlatformColor;
  borderStyle?: 'solid' | 'dotted' | 'dashed';
  borderTopColor?: string | PlatformColor;
  borderTopEndRadius?: number;
  borderTopLeftRadius?: number;
  borderTopRightRadius?: number;
  borderTopStartRadius?: number;
  opacity?: number;

  // Shadow (Windows specific)
  elevation?: number;
  shadowColor?: string | PlatformColor;
  shadowOffset?: { width: number; height: number };
  shadowOpacity?: number;
  shadowRadius?: number;

  // Transform
  transform?: Transform[];
  transformMatrix?: number[];
  rotation?: number;
  scaleX?: number;
  scaleY?: number;
  translateX?: number;
  translateY?: number;
}

type Transform =
  | { perspective: number }
  | { rotate: string }
  | { rotateX: string }
  | { rotateY: string }
  | { rotateZ: string }
  | { scale: number }
  | { scaleX: number }
  | { scaleY: number }
  | { translateX: number }
  | { translateY: number }
  | { skewX: string }
  | { skewY: string }
  | { matrix: number[] };

/**
 * Text styling properties with Windows font support
 */
interface TextStyle extends ViewStyle {
  // Font
  color?: string | PlatformColor;
  fontFamily?: string;
  fontSize?: number;
  fontStyle?: 'normal' | 'italic';
  fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
  fontVariant?: FontVariant[];

  // Layout
  letterSpacing?: number;
  lineHeight?: number;
  textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify';
  textAlignVertical?: 'auto' | 'top' | 'bottom' | 'center';
  textDecorationLine?: 'none' | 'underline' | 'line-through' | 'underline line-through';
  textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed';
  textDecorationColor?: string | PlatformColor;
  textShadowColor?: string | PlatformColor;
  textShadowOffset?: { width: number; height: number };
  textShadowRadius?: number;
  textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';

  // Windows specific
  includeFontPadding?: boolean;
  textBreakStrategy?: 'simple' | 'highQuality' | 'balanced';
  writingDirection?: 'auto' | 'ltr' | 'rtl';
}

type FontVariant =
  | 'small-caps'
  | 'oldstyle-nums'
  | 'lining-nums'
  | 'tabular-nums'
  | 'proportional-nums';

/**
 * Image styling properties
 */
interface ImageStyle extends ViewStyle {
  resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
  tintColor?: string | PlatformColor;
  overlayColor?: string | PlatformColor;
}

// Automatic high contrast adaptation
const adaptiveStyles = StyleSheet.create({
  button: {
    backgroundColor: PlatformColor('SystemAccentColor'),
    borderColor: PlatformColor('SystemAccentColorDark1'),
    borderWidth: 1,
  },
  text: {
    color: PlatformColor('SystemBaseHighColor'),
  },
  background: {
    backgroundColor: PlatformColor('SystemAltHighColor'),
  },
});

// Manual high contrast handling
const getHighContrastStyles = (isHighContrast: boolean, colors: IHighContrastColors) => {
  if (isHighContrast) {
    return StyleSheet.create({
      button: {
        backgroundColor: colors.ButtonFaceColor,
        borderColor: colors.ButtonTextColor,
        borderWidth: 2, // Increased border in high contrast
      },
      text: {
        color: colors.WindowTextColor,
        fontSize: 16, // Larger text in high contrast
      },
      background: {
        backgroundColor: colors.WindowColor,
      },
    });
  }

  return adaptiveStyles;
};

// Automatic theme adaptation using platform colors
const themeAwareStyles = StyleSheet.create({
  surface: {
    backgroundColor: PlatformColor('SystemChromeMediumLowColor'),
    borderColor: PlatformColor('SystemBaseLowColor'),
  },
  primaryButton: {
    backgroundColor: PlatformColor('SystemAccentColor'),
    color: PlatformColor('SystemChromeWhiteColor'),
  },
  secondaryButton: {
    backgroundColor: 'transparent',
    borderColor: PlatformColor('SystemAccentColor'),
    borderWidth: 1,
    color: PlatformColor('SystemAccentColor'),
  },
  text: {
    color: PlatformColor('SystemBaseHighColor'),
  },
  subtleText: {
    color: PlatformColor('SystemBaseMediumColor'),
  },
});

// Windows font stack and typography
const typographyStyles = StyleSheet.create({
  // Segoe UI font stack
  heading1: {
    fontFamily: 'Segoe UI',
    fontSize: 32,
    fontWeight: '300', // Light
    lineHeight: 40,
  },
  heading2: {
    fontFamily: 'Segoe UI',
    fontSize: 24,
    fontWeight: '400', // Regular
    lineHeight: 32,
  },
  body: {
    fontFamily: 'Segoe UI',
    fontSize: 14,
    fontWeight: '400',
    lineHeight: 20,
  },
  caption: {
    fontFamily: 'Segoe UI',
    fontSize: 12,
    fontWeight: '400',
    lineHeight: 16,
  },

  // Variable fonts support
  variableFont: {
    fontFamily: 'Segoe UI Variable',
    fontWeight: '350', // Custom weight with variable fonts
    fontSize: 16,
  },
});

import { Dimensions } from 'react-native-windows';

// Responsive breakpoints
const { width } = Dimensions.get('window');
const isTablet = width >= 768;
const isDesktop = width >= 1024;

const responsiveStyles = StyleSheet.create({
  container: {
    padding: isDesktop ? 32 : isTablet ? 24 : 16,
    maxWidth: isDesktop ? 1200 : '100%',
    alignSelf: 'center',
  },
  grid: {
    flexDirection: isTablet ? 'row' : 'column',
    flexWrap: 'wrap',
  },
  gridItem: {
    width: isDesktop ? '25%' : isTablet ? '50%' : '100%',
    padding: 8,
  },
});

// Use StyleSheet.create for performance
const optimizedStyles = StyleSheet.create({
  // Styles are cached and optimized
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
});

// Avoid inline styles for performance
// ❌ Poor performance
<View style={{ flex: 1, backgroundColor: '#f5f5f5' }} />

// ✅ Good performance
<View style={optimizedStyles.container} />

// Compose styles efficiently
const baseButton = StyleSheet.create({
  button: {
    padding: 12,
    borderRadius: 4,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

const primaryButton = StyleSheet.create({
  button: {
    backgroundColor: PlatformColor('SystemAccentColor'),
    color: 'white',
  },
});

// Compose styles
const composedStyle = [baseButton.button, primaryButton.button];