Theming & Design System

import androidx.compose.material3.*
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.Typography
import androidx.compose.material3.Shapes

/**
 * The root Material3 theme composable that provides design tokens throughout the component tree
 * @param colorScheme Color palette for the theme (light or dark)
 * @param typography Typography scale defining text styles
 * @param shapes Shape definitions for component corners and borders
 * @param content The UI content to be themed
 */
@Composable
fun MaterialTheme(
    colorScheme: ColorScheme = lightColorScheme(),
    typography: Typography = Typography(),
    shapes: Shapes = Shapes(),
    content: @Composable () -> Unit
)

@Composable
fun MyApp() {
    MaterialTheme(
        colorScheme = if (isSystemInDarkTheme()) darkColorScheme() else lightColorScheme(),
        typography = Typography(),
        shapes = Shapes()
    ) {
        // Your app content here
        MainScreen()
    }
}

/**
 * Creates a light Material3 color scheme with default or custom colors
 * @param primary Primary brand color
 * @param onPrimary Color for content on primary surfaces
 * @param primaryContainer Color for primary container backgrounds
 * @param onPrimaryContainer Color for content on primary containers
 * @param secondary Secondary brand color
 * @param onSecondary Color for content on secondary surfaces
 * @param secondaryContainer Color for secondary container backgrounds
 * @param onSecondaryContainer Color for content on secondary containers
 * @param tertiary Tertiary accent color
 * @param onTertiary Color for content on tertiary surfaces
 * @param tertiaryContainer Color for tertiary container backgrounds
 * @param onTertiaryContainer Color for content on tertiary containers
 * @param error Error state color
 * @param onError Color for content on error surfaces
 * @param errorContainer Color for error container backgrounds
 * @param onErrorContainer Color for content on error containers
 * @param background Main background color
 * @param onBackground Color for content on background
 * @param surface Default surface color
 * @param onSurface Color for content on surfaces
 * @param surfaceVariant Alternative surface color
 * @param onSurfaceVariant Color for content on surface variants
 * @param surfaceTint Color used for surface tinting
 * @param inverseSurface Inverse surface color for contrast
 * @param inverseOnSurface Color for content on inverse surfaces
 * @param inversePrimary Inverse primary color
 * @param outline Outline color for borders and dividers
 * @param outlineVariant Variant outline color for subtle borders
 * @param scrim Scrim color for overlays
 * @returns ColorScheme configured for light theme
 */
fun lightColorScheme(
    primary: Color = ColorLightTokens.Primary,
    onPrimary: Color = ColorLightTokens.OnPrimary,
    primaryContainer: Color = ColorLightTokens.PrimaryContainer,
    onPrimaryContainer: Color = ColorLightTokens.OnPrimaryContainer,
    secondary: Color = ColorLightTokens.Secondary,
    onSecondary: Color = ColorLightTokens.OnSecondary,
    secondaryContainer: Color = ColorLightTokens.SecondaryContainer,
    onSecondaryContainer: Color = ColorLightTokens.OnSecondaryContainer,
    tertiary: Color = ColorLightTokens.Tertiary,
    onTertiary: Color = ColorLightTokens.OnTertiary,
    tertiaryContainer: Color = ColorLightTokens.TertiaryContainer,
    onTertiaryContainer: Color = ColorLightTokens.OnTertiaryContainer,
    error: Color = ColorLightTokens.Error,
    onError: Color = ColorLightTokens.OnError,
    errorContainer: Color = ColorLightTokens.ErrorContainer,
    onErrorContainer: Color = ColorLightTokens.OnErrorContainer,
    background: Color = ColorLightTokens.Background,
    onBackground: Color = ColorLightTokens.OnBackground,
    surface: Color = ColorLightTokens.Surface,
    onSurface: Color = ColorLightTokens.OnSurface,
    surfaceVariant: Color = ColorLightTokens.SurfaceVariant,
    onSurfaceVariant: Color = ColorLightTokens.OnSurfaceVariant,
    surfaceTint: Color = primary,
    inverseSurface: Color = ColorLightTokens.InverseSurface,
    inverseOnSurface: Color = ColorLightTokens.InverseOnSurface,
    inversePrimary: Color = ColorLightTokens.InversePrimary,
    outline: Color = ColorLightTokens.Outline,
    outlineVariant: Color = ColorLightTokens.OutlineVariant,
    scrim: Color = ColorLightTokens.Scrim,
): ColorScheme

/**
 * Creates a dark Material3 color scheme with default or custom colors
 * @param primary Primary brand color for dark theme
 * @param onPrimary Color for content on primary surfaces in dark theme
 * @param primaryContainer Color for primary container backgrounds in dark theme
 * @param onPrimaryContainer Color for content on primary containers in dark theme
 * @param secondary Secondary brand color for dark theme
 * @param onSecondary Color for content on secondary surfaces in dark theme
 * @param secondaryContainer Color for secondary container backgrounds in dark theme
 * @param onSecondaryContainer Color for content on secondary containers in dark theme
 * @param tertiary Tertiary accent color for dark theme
 * @param onTertiary Color for content on tertiary surfaces in dark theme
 * @param tertiaryContainer Color for tertiary container backgrounds in dark theme
 * @param onTertiaryContainer Color for content on tertiary containers in dark theme
 * @param error Error state color for dark theme
 * @param onError Color for content on error surfaces in dark theme
 * @param errorContainer Color for error container backgrounds in dark theme
 * @param onErrorContainer Color for content on error containers in dark theme
 * @param background Main background color for dark theme
 * @param onBackground Color for content on background in dark theme
 * @param surface Default surface color for dark theme
 * @param onSurface Color for content on surfaces in dark theme
 * @param surfaceVariant Alternative surface color for dark theme
 * @param onSurfaceVariant Color for content on surface variants in dark theme
 * @param surfaceTint Color used for surface tinting in dark theme
 * @param inverseSurface Inverse surface color for contrast in dark theme
 * @param inverseOnSurface Color for content on inverse surfaces in dark theme
 * @param inversePrimary Inverse primary color for dark theme
 * @param outline Outline color for borders and dividers in dark theme
 * @param outlineVariant Variant outline color for subtle borders in dark theme
 * @param scrim Scrim color for overlays in dark theme
 * @returns ColorScheme configured for dark theme
 */
fun darkColorScheme(
    primary: Color = ColorDarkTokens.Primary,
    onPrimary: Color = ColorDarkTokens.OnPrimary,
    primaryContainer: Color = ColorDarkTokens.PrimaryContainer,
    onPrimaryContainer: Color = ColorDarkTokens.OnPrimaryContainer,
    secondary: Color = ColorDarkTokens.Secondary,
    onSecondary: Color = ColorDarkTokens.OnSecondary,
    secondaryContainer: Color = ColorDarkTokens.SecondaryContainer,
    onSecondaryContainer: Color = ColorDarkTokens.OnSecondaryContainer,
    tertiary: Color = ColorDarkTokens.Tertiary,
    onTertiary: Color = ColorDarkTokens.OnTertiary,
    tertiaryContainer: Color = ColorDarkTokens.TertiaryContainer,
    onTertiaryContainer: Color = ColorDarkTokens.OnTertiaryContainer,
    error: Color = ColorDarkTokens.Error,
    onError: Color = ColorDarkTokens.OnError,
    errorContainer: Color = ColorDarkTokens.ErrorContainer,
    onErrorContainer: Color = ColorDarkTokens.OnErrorContainer,
    background: Color = ColorDarkTokens.Background,
    onBackground: Color = ColorDarkTokens.OnBackground,
    surface: Color = ColorDarkTokens.Surface,
    onSurface: Color = ColorDarkTokens.OnSurface,
    surfaceVariant: Color = ColorDarkTokens.SurfaceVariant,
    onSurfaceVariant: Color = ColorDarkTokens.OnSurfaceVariant,
    surfaceTint: Color = primary,
    inverseSurface: Color = ColorDarkTokens.InverseSurface,
    inverseOnSurface: Color = ColorDarkTokens.InverseOnSurface,
    inversePrimary: Color = ColorDarkTokens.InversePrimary,
    outline: Color = ColorDarkTokens.Outline,
    outlineVariant: Color = ColorDarkTokens.OutlineVariant,
    scrim: Color = ColorDarkTokens.Scrim,
): ColorScheme

// Basic light/dark theme setup
val colorScheme = if (isSystemInDarkTheme()) {
    darkColorScheme()
} else {
    lightColorScheme()
}

// Custom brand colors
val customLightScheme = lightColorScheme(
    primary = Color(0xFF6750A4),
    secondary = Color(0xFF625B71),
    tertiary = Color(0xFF7D5260)
)

val customDarkScheme = darkColorScheme(
    primary = Color(0xFFD0BCFF),
    secondary = Color(0xFFCCC2DC),
    tertiary = Color(0xFFEFB8C8)
)

/**
 * Material3 typography scale defining text styles for consistent text hierarchy
 * @param displayLarge Largest display text (57sp) for hero content
 * @param displayMedium Medium display text (45sp) for prominent headings
 * @param displaySmall Small display text (36sp) for section headings
 * @param headlineLarge Large headline text (32sp) for primary headings
 * @param headlineMedium Medium headline text (28sp) for secondary headings
 * @param headlineSmall Small headline text (24sp) for tertiary headings
 * @param titleLarge Large title text (22sp) for screen titles
 * @param titleMedium Medium title text (16sp) for component titles
 * @param titleSmall Small title text (14sp) for compact titles
 * @param bodyLarge Large body text (16sp) for primary content
 * @param bodyMedium Medium body text (14sp) for secondary content
 * @param bodySmall Small body text (12sp) for captions and metadata
 * @param labelLarge Large label text (14sp) for button labels
 * @param labelMedium Medium label text (12sp) for form labels
 * @param labelSmall Small label text (11sp) for overlines and tags
 */
class Typography(
    val displayLarge: TextStyle = TypographyTokens.DisplayLarge,
    val displayMedium: TextStyle = TypographyTokens.DisplayMedium,
    val displaySmall: TextStyle = TypographyTokens.DisplaySmall,
    val headlineLarge: TextStyle = TypographyTokens.HeadlineLarge,
    val headlineMedium: TextStyle = TypographyTokens.HeadlineMedium,
    val headlineSmall: TextStyle = TypographyTokens.HeadlineSmall,
    val titleLarge: TextStyle = TypographyTokens.TitleLarge,
    val titleMedium: TextStyle = TypographyTokens.TitleMedium,
    val titleSmall: TextStyle = TypographyTokens.TitleSmall,
    val bodyLarge: TextStyle = TypographyTokens.BodyLarge,
    val bodyMedium: TextStyle = TypographyTokens.BodyMedium,
    val bodySmall: TextStyle = TypographyTokens.BodySmall,
    val labelLarge: TextStyle = TypographyTokens.LabelLarge,
    val labelMedium: TextStyle = TypographyTokens.LabelMedium,
    val labelSmall: TextStyle = TypographyTokens.LabelSmall,
)

@Composable
fun TextShowcase() {
    Column {
        Text(
            text = "Display Large",
            style = MaterialTheme.typography.displayLarge
        )
        Text(
            text = "Headline Medium", 
            style = MaterialTheme.typography.headlineMedium
        )
        Text(
            text = "Body Large",
            style = MaterialTheme.typography.bodyLarge
        )
        Text(
            text = "Label Small",
            style = MaterialTheme.typography.labelSmall
        )
    }
}

/**
 * Material3 shape scale defining corner radius values for consistent component shapes
 * @param extraSmall Extra small corner radius (4dp) for small components
 * @param small Small corner radius (8dp) for buttons and chips
 * @param medium Medium corner radius (12dp) for cards and containers
 * @param large Large corner radius (16dp) for prominent surfaces
 * @param extraLarge Extra large corner radius (28dp) for hero elements
 */
class Shapes(
    val extraSmall: CornerBasedShape = ShapeDefaults.ExtraSmall,
    val small: CornerBasedShape = ShapeDefaults.Small,
    val medium: CornerBasedShape = ShapeDefaults.Medium,
    val large: CornerBasedShape = ShapeDefaults.Large,
    val extraLarge: CornerBasedShape = ShapeDefaults.ExtraLarge,
)

/**
 * Calculates the appropriate content color to use on top of the given color
 * @param backgroundColor The background color to calculate content color for
 * @returns Color that provides sufficient contrast for readability
 */
fun contentColorFor(backgroundColor: Color): Color

/**
 * Calculates the surface color at the given elevation using tonal elevation
 * @param color Base surface color
 * @param elevation Elevation in dp to apply tonal elevation
 * @returns Color with elevation tinting applied
 */
fun ColorScheme.surfaceColorAtElevation(elevation: Dp): Color

interface ColorScheme {
    val primary: Color
    val onPrimary: Color
    val primaryContainer: Color
    val onPrimaryContainer: Color
    val secondary: Color
    val onSecondary: Color
    val secondaryContainer: Color
    val onSecondaryContainer: Color
    val tertiary: Color
    val onTertiary: Color
    val tertiaryContainer: Color
    val onTertiaryContainer: Color
    val error: Color
    val onError: Color
    val errorContainer: Color
    val onErrorContainer: Color
    val background: Color
    val onBackground: Color
    val surface: Color
    val onSurface: Color
    val surfaceVariant: Color
    val onSurfaceVariant: Color
    val surfaceTint: Color
    val inverseSurface: Color
    val inverseOnSurface: Color
    val inversePrimary: Color
    val outline: Color
    val outlineVariant: Color
    val scrim: Color
}

data class TextStyle(
    val color: Color = Color.Unspecified,
    val fontSize: TextUnit = TextUnit.Unspecified,
    val fontWeight: FontWeight? = null,
    val fontStyle: FontStyle? = null,
    val fontFamily: FontFamily? = null,
    val letterSpacing: TextUnit = TextUnit.Unspecified,
    val textDecoration: TextDecoration? = null,
    val textAlign: TextAlign? = null,
    val lineHeight: TextUnit = TextUnit.Unspecified
)

interface CornerBasedShape : Shape {
    val topStart: CornerSize
    val topEnd: CornerSize
    val bottomEnd: CornerSize
    val bottomStart: CornerSize
}