Material3 Components

/**
 * Primary Material3 button with filled background
 * @param onClick callback invoked when button is clicked
 * @param modifier modifier applied to the button
 * @param enabled whether the button is enabled
 * @param shape shape of the button
 * @param colors color configuration for the button
 * @param elevation elevation configuration for the button
 * @param border border configuration for the button
 * @param contentPadding padding applied to button content
 * @param interactionSource interaction source for handling interactions
 * @param content button content composable
 */
@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.shape,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable RowScope.() -> Unit
)

/**
 * Outlined Material3 button with transparent background and border
 */
@Composable
fun OutlinedButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.outlinedShape,
    colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
    elevation: ButtonElevation? = null,
    border: BorderStroke? = ButtonDefaults.outlinedButtonBorder,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable RowScope.() -> Unit
)

/**
 * Text-only Material3 button with no background
 */
@Composable
fun TextButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.textShape,
    colors: ButtonColors = ButtonDefaults.textButtonColors(),
    elevation: ButtonElevation? = null,
    border: BorderStroke? = null,
    contentPadding: PaddingValues = ButtonDefaults.TextButtonContentPadding,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable RowScope.() -> Unit
)

/**
 * Icon-only button for actions
 */
@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable () -> Unit
)

import androidx.compose.material3.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite

Column {
    Button(onClick = { /* action */ }) {
        Text("Primary Button")
    }
    
    OutlinedButton(onClick = { /* action */ }) {
        Text("Outlined Button")
    }
    
    TextButton(onClick = { /* action */ }) {
        Text("Text Button")
    }
    
    IconButton(onClick = { /* action */ }) {
        Icon(Icons.Default.Favorite, contentDescription = "Favorite")
    }
}

/**
 * Material3 text component with typography integration
 * @param text the text to display
 * @param modifier modifier applied to the text
 * @param color color of the text
 * @param fontSize font size of the text
 * @param fontStyle font style (normal, italic)
 * @param fontWeight font weight (normal, bold, etc.)
 * @param fontFamily font family
 * @param letterSpacing spacing between letters
 * @param textDecoration text decoration (underline, strikethrough)
 * @param textAlign text alignment
 * @param lineHeight height of each line
 * @param overflow how to handle text overflow
 * @param softWrap whether text should break at soft line breaks
 * @param maxLines maximum number of lines
 * @param minLines minimum number of lines
 * @param onTextLayout callback for text layout information
 * @param style text style from Material3 typography
 */
@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    minLines: Int = 1,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = MaterialTheme.typography.bodyLarge
)

Column {
    Text(
        text = "Display Large",
        style = MaterialTheme.typography.displayLarge
    )
    
    Text(
        text = "Headline Medium", 
        style = MaterialTheme.typography.headlineMedium,
        color = MaterialTheme.colorScheme.primary
    )
    
    Text(
        text = "Body text with custom color",
        style = MaterialTheme.typography.bodyMedium,
        color = MaterialTheme.colorScheme.onSurface
    )
}

/**
 * Material3 card component with elevation and Material theming
 * @param onClick optional click handler for making card clickable
 * @param modifier modifier applied to the card
 * @param enabled whether the card is enabled (for clickable cards)
 * @param shape shape of the card
 * @param colors color configuration for the card
 * @param elevation elevation configuration for the card
 * @param border border configuration for the card
 * @param interactionSource interaction source for handling interactions
 * @param content card content composable
 */
@Composable
fun Card(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardColors(),
    elevation: CardElevation = CardDefaults.cardElevation(),
    border: BorderStroke? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable ColumnScope.() -> Unit
)

/**
 * Non-clickable Material3 card
 */
@Composable
fun Card(
    modifier: Modifier = Modifier,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardColors(),
    elevation: CardElevation = CardDefaults.cardElevation(),
    border: BorderStroke? = null,
    content: @Composable ColumnScope.() -> Unit
)

/**
 * Outlined Material3 card with border instead of elevation
 */
@Composable
fun OutlinedCard(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = CardDefaults.outlinedShape,
    colors: CardColors = CardDefaults.outlinedCardColors(),
    elevation: CardElevation = CardDefaults.outlinedCardElevation(),
    border: BorderStroke = CardDefaults.outlinedCardBorder(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable ColumnScope.() -> Unit
)

LazyColumn {
    items(dataList) { item ->
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp),
            onClick = { /* handle click */ }
        ) {
            Column(modifier = Modifier.padding(16.dp)) {
                Text(
                    text = item.title,
                    style = MaterialTheme.typography.headlineSmall
                )
                Text(
                    text = item.description,
                    style = MaterialTheme.typography.bodyMedium,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
            }
        }
    }
}

/**
 * Material3 app structure component with app bars and content area
 * @param modifier modifier applied to the scaffold
 * @param topBar top app bar composable
 * @param bottomBar bottom navigation bar composable  
 * @param snackbarHost snackbar host for displaying snackbars
 * @param floatingActionButton floating action button
 * @param floatingActionButtonPosition position of the FAB
 * @param containerColor background color of the scaffold
 * @param contentColor content color for the scaffold
 * @param contentWindowInsets window insets for content
 * @param content main content composable receiving padding values
 */
@Composable
fun Scaffold(
    modifier: Modifier = Modifier,
    topBar: @Composable () -> Unit = {},
    bottomBar: @Composable () -> Unit = {},
    snackbarHost: @Composable () -> Unit = {},
    floatingActionButton: @Composable () -> Unit = {},
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    containerColor: Color = MaterialTheme.colorScheme.background,
    contentColor: Color = contentColorFor(containerColor),
    contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
    content: @Composable (PaddingValues) -> Unit
)

/**
 * Material3 top app bar for navigation and actions
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable () -> Unit = {},
    actions: @Composable RowScope.() -> Unit = {},
    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
    colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(),
    scrollBehavior: TopAppBarScrollBehavior? = null
)

/**
 * Material3 bottom navigation bar
 */
@Composable
fun NavigationBar(
    modifier: Modifier = Modifier,
    containerColor: Color = MaterialTheme.colorScheme.surface,
    contentColor: Color = MaterialTheme.colorScheme.onSurface,
    tonalElevation: Dp = NavigationBarDefaults.Elevation,
    windowInsets: WindowInsets = NavigationBarDefaults.windowInsets,
    content: @Composable RowScope.() -> Unit
)

/**
 * Individual navigation item for NavigationBar
 */
@Composable
fun RowScope.NavigationBarItem(
    selected: Boolean,
    onClick: () -> Unit,
    icon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    label: @Composable (() -> Unit)? = null,
    alwaysShowLabel: Boolean = true,
    colors: NavigationBarItemColors = NavigationBarDefaults.itemColors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
)

val selectedTab = remember { mutableIntStateOf(0) }

Scaffold(
    topBar = {
        TopAppBar(
            title = { Text("My App") },
            navigationIcon = {
                IconButton(onClick = { /* handle back */ }) {
                    Icon(Icons.Default.ArrowBack, contentDescription = "Back")
                }
            },
            actions = {
                IconButton(onClick = { /* handle search */ }) {
                    Icon(Icons.Default.Search, contentDescription = "Search")
                }
            }
        )
    },
    bottomBar = {
        NavigationBar {
            NavigationBarItem(
                selected = selectedTab.intValue == 0,
                onClick = { selectedTab.intValue = 0 },
                icon = { Icon(Icons.Default.Home, contentDescription = null) },
                label = { Text("Home") }
            )
            NavigationBarItem(
                selected = selectedTab.intValue == 1,
                onClick = { selectedTab.intValue = 1 },
                icon = { Icon(Icons.Default.Settings, contentDescription = null) },
                label = { Text("Settings") }
            )
        }
    }
) { paddingValues ->
    // Main content
}

/**
 * Material3 checkbox for boolean selection
 * @param checked whether the checkbox is checked
 * @param onCheckedChange callback when checked state changes
 * @param modifier modifier applied to the checkbox
 * @param enabled whether the checkbox is enabled
 * @param colors color configuration for the checkbox
 * @param interactionSource interaction source for handling interactions
 */
@Composable
fun Checkbox(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: CheckboxColors = CheckboxDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
)

/**
 * Material3 radio button for single selection
 */
@Composable
fun RadioButton(
    selected: Boolean,
    onClick: (() -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: RadioButtonColors = RadioButtonDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
)

/**
 * Material3 slider for continuous value selection
 */
@Composable
fun Slider(
    value: Float,
    onValueChange: (Float) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    steps: Int = 0,
    onValueChangeFinished: (() -> Unit)? = null,
    colors: SliderColors = SliderDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
)

Column {
    // Checkbox
    val checkedState = remember { mutableStateOf(false) }
    Row(
        modifier = Modifier.selectable(
            selected = checkedState.value,
            onClick = { checkedState.value = !checkedState.value }
        )
    ) {
        Checkbox(
            checked = checkedState.value,
            onCheckedChange = { checkedState.value = it }
        )
        Text("Enable notifications")
    }
    
    // Radio Button Group
    val selectedOption = remember { mutableStateOf("Option 1") }
    val options = listOf("Option 1", "Option 2", "Option 3")
    
    options.forEach { option ->
        Row(
            modifier = Modifier.selectable(
                selected = selectedOption.value == option,
                onClick = { selectedOption.value = option }
            )
        ) {
            RadioButton(
                selected = selectedOption.value == option,
                onClick = { selectedOption.value = option }
            )
            Text(option)
        }
    }
    
    // Slider
    val sliderValue = remember { mutableFloatStateOf(0.5f) }
    Text("Value: ${sliderValue.floatValue}")
    Slider(
        value = sliderValue.floatValue,
        onValueChange = { sliderValue.floatValue = it }
    )
}

/**
 * Material3 surface container with Material theming
 * @param onClick optional click handler for making surface clickable
 * @param modifier modifier applied to the surface
 * @param enabled whether the surface is enabled (for clickable surfaces)
 * @param shape shape of the surface
 * @param color background color of the surface
 * @param contentColor content color for the surface
 * @param tonalElevation tonal elevation for color overlay
 * @param shadowElevation shadow elevation for drop shadow
 * @param border border configuration for the surface
 * @param interactionSource interaction source for handling interactions
 * @param content surface content composable
 */
@Composable
fun Surface(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colorScheme.surface,
    contentColor: Color = contentColorFor(color),
    tonalElevation: Dp = 0.dp,
    shadowElevation: Dp = 0.dp,
    border: BorderStroke? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable () -> Unit
)

/**
 * Non-clickable Material3 surface
 */
@Composable
fun Surface(
    modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colorScheme.surface,
    contentColor: Color = contentColorFor(color),
    tonalElevation: Dp = 0.dp,
    shadowElevation: Dp = 0.dp,
    border: BorderStroke? = null,
    content: @Composable () -> Unit
)

/**
 * Horizontal divider for visual separation
 */
@Composable
fun HorizontalDivider(
    modifier: Modifier = Modifier,
    thickness: Dp = DividerDefaults.Thickness,
    color: Color = DividerDefaults.color
)

Surface(
    modifier = Modifier.fillMaxSize(),
    color = MaterialTheme.colorScheme.background
) {
    LazyColumn {
        items(dataList) { item ->
            Column {
                Text(
                    text = item.title,
                    modifier = Modifier.padding(16.dp)
                )
                HorizontalDivider()
            }
        }
    }
}