// Wrapping a single field with transformation
data class UserId(val value: String)

@Preview
@Composable
fun UserIdFieldPreview() = PreviewLab {
    val userId: UserId = fieldValue {
        combined(
            label = "User ID",
            field1 = StringField("ID", "user-001"),
            combine = { id -> UserId(id) },
            split = { splitedOf(it.value) }
        )
    }

    Text("User ID: ${userId.value}")
}

// Point with x and y coordinates
data class Point(val x: Float, val y: Float)

@Preview
@Composable
fun PointFieldPreview() = PreviewLab {
    val point: Point = fieldValue {
        combined(
            label = "Point",
            field1 = FloatField("x", 10f),
            field2 = FloatField("y", 20f),
            combine = { x, y -> Point(x, y) },
            split = { splitedOf(it.x, it.y) }
        )
    }

    Canvas(modifier = Modifier.size(200.dp)) {
        drawCircle(Color.Red, radius = 10f, center = Offset(point.x, point.y))
    }
}

// Range with min and max
data class Range(val min: Int, val max: Int)

@Preview
@Composable
fun RangeFieldPreview() = PreviewLab {
    val range: Range = fieldValue {
        combined(
            label = "Range",
            field1 = IntField("Min", 0),
            field2 = IntField("Max", 100),
            combine = { min, max -> Range(min, max) },
            split = { splitedOf(it.min, it.max) }
        )
    }

    Text("Range: ${range.min} to ${range.max}")
}

// RGB color from three Int values
data class RgbColor(val red: Int, val green: Int, val blue: Int)

@Preview
@Composable
fun RgbFieldPreview() = PreviewLab {
    val rgb: RgbColor = fieldValue {
        combined(
            label = "RGB Color",
            field1 = IntField("Red", 255),
            field2 = IntField("Green", 0),
            field3 = IntField("Blue", 0),
            combine = { r, g, b -> RgbColor(r, g, b) },
            split = { splitedOf(it.red, it.green, it.blue) }
        )
    }

    Box(
        modifier = Modifier
            .size(100.dp)
            .background(Color(rgb.red, rgb.green, rgb.blue))
    )
}

// 3D Point
data class Point3D(val x: Float, val y: Float, val z: Float)

@Preview
@Composable
fun Point3DFieldPreview() = PreviewLab {
    val point: Point3D = fieldValue {
        combined(
            label = "3D Point",
            field1 = FloatField("X", 0f),
            field2 = FloatField("Y", 0f),
            field3 = FloatField("Z", 0f),
            combine = { x, y, z -> Point3D(x, y, z) },
            split = { splitedOf(it.x, it.y, it.z) }
        )
    }

    Text("Point: (${point.x}, ${point.y}, ${point.z})")
}

// RGBA color with alpha channel
data class RgbaColor(val red: Int, val green: Int, val blue: Int, val alpha: Float)

@Preview
@Composable
fun RgbaFieldPreview() = PreviewLab {
    val rgba: RgbaColor = fieldValue {
        combined(
            label = "RGBA Color",
            field1 = IntField("Red", 255),
            field2 = IntField("Green", 0),
            field3 = IntField("Blue", 0),
            field4 = FloatField("Alpha", 0.5f),
            combine = { r, g, b, a -> RgbaColor(r, g, b, a) },
            split = { splitedOf(it.red, it.green, it.blue, it.alpha) }
        )
    }

    Box(
        modifier = Modifier
            .size(100.dp)
            .background(Color(rgba.red, rgba.green, rgba.blue, (rgba.alpha * 255).toInt()))
    )
}

// Rectangle with position and size
data class Rectangle(val x: Dp, val y: Dp, val width: Dp, val height: Dp)

@Preview
@Composable
fun RectangleFieldPreview() = PreviewLab {
    val rect: Rectangle = fieldValue {
        combined(
            label = "Rectangle",
            field1 = DpField("X", 10.dp),
            field2 = DpField("Y", 10.dp),
            field3 = DpField("Width", 100.dp),
            field4 = DpField("Height", 50.dp),
            combine = { x, y, w, h -> Rectangle(x, y, w, h) },
            split = { splitedOf(it.x, it.y, it.width, it.height) }
        )
    }

    Box(modifier = Modifier.size(200.dp)) {
        Box(
            modifier = Modifier
                .offset(rect.x, rect.y)
                .size(rect.width, rect.height)
                .background(Color.Blue)
        )
    }
}

// Address with multiple components
data class Address(
    val street: String,
    val city: String,
    val state: String,
    val zipCode: String,
    val country: String
)

@Preview
@Composable
fun AddressFieldPreview() = PreviewLab {
    val address: Address = fieldValue {
        combined(
            label = "Address",
            field1 = StringField("Street", "123 Main St"),
            field2 = StringField("City", "New York"),
            field3 = StringField("State", "NY"),
            field4 = StringField("Zip Code", "10001"),
            field5 = StringField("Country", "USA"),
            combine = { street, city, state, zip, country ->
                Address(street, city, state, zip, country)
            },
            split = { splitedOf(it.street, it.city, it.state, it.zipCode, it.country) }
        )
    }

    Column {
        Text(address.street)
        Text("${address.city}, ${address.state} ${address.zipCode}")
        Text(address.country)
    }
}

// Box with position, size, and appearance
data class BoxStyle(
    val x: Dp,
    val y: Dp,
    val width: Dp,
    val height: Dp,
    val color: Color,
    val alpha: Float
)

@Preview
@Composable
fun BoxStyleFieldPreview() = PreviewLab {
    val boxStyle: BoxStyle = fieldValue {
        combined(
            label = "Box Style",
            field1 = DpField("X", 20.dp),
            field2 = DpField("Y", 20.dp),
            field3 = DpField("Width", 100.dp),
            field4 = DpField("Height", 100.dp),
            field5 = ColorField("Color", Color.Blue),
            field6 = FloatField("Alpha", 1f),
            combine = { x, y, w, h, color, alpha ->
                BoxStyle(x, y, w, h, color, alpha)
            },
            split = { splitedOf(it.x, it.y, it.width, it.height, it.color, it.alpha) }
        )
    }

    Box(modifier = Modifier.size(200.dp)) {
        Box(
            modifier = Modifier
                .offset(boxStyle.x, boxStyle.y)
                .size(boxStyle.width, boxStyle.height)
                .background(boxStyle.color.copy(alpha = boxStyle.alpha))
        )
    }
}

// Text style configuration
data class TextStyle(
    val text: String,
    val fontSize: TextUnit,
    val fontWeight: FontWeight,
    val color: Color,
    val letterSpacing: TextUnit,
    val lineHeight: TextUnit,
    val textAlign: TextAlign
)

@Preview
@Composable
fun TextStyleFieldPreview() = PreviewLab {
    val textStyle: TextStyle = fieldValue {
        combined(
            label = "Text Style",
            field1 = StringField("Text", "Hello World"),
            field2 = TextUnitField("Font Size", 16.sp),
            field3 = EnumField("Font Weight", FontWeight.Normal),
            field4 = ColorField("Color", Color.Black),
            field5 = TextUnitField("Letter Spacing", 0.sp),
            field6 = TextUnitField("Line Height", 20.sp),
            field7 = EnumField("Text Align", TextAlign.Start),
            combine = { text, size, weight, color, spacing, height, align ->
                TextStyle(text, size, weight, color, spacing, height, align)
            },
            split = { splitedOf(it.text, it.fontSize, it.fontWeight, it.color, it.letterSpacing, it.lineHeight, it.textAlign) }
        )
    }

    Text(
        text = textStyle.text,
        fontSize = textStyle.fontSize,
        fontWeight = textStyle.fontWeight,
        color = textStyle.color,
        letterSpacing = textStyle.letterSpacing,
        lineHeight = textStyle.lineHeight,
        textAlign = textStyle.textAlign
    )
}

// Button configuration with comprehensive styling
data class ButtonConfig(
    val text: String,
    val width: Dp,
    val height: Dp,
    val backgroundColor: Color,
    val textColor: Color,
    val cornerRadius: Dp,
    val elevation: Dp,
    val enabled: Boolean
)

@Preview
@Composable
fun ButtonConfigFieldPreview() = PreviewLab {
    val config: ButtonConfig = fieldValue {
        combined(
            label = "Button Config",
            field1 = StringField("Text", "Click Me"),
            field2 = DpField("Width", 200.dp),
            field3 = DpField("Height", 48.dp),
            field4 = ColorField("Background", Color.Blue),
            field5 = ColorField("Text Color", Color.White),
            field6 = DpField("Corner Radius", 8.dp),
            field7 = DpField("Elevation", 4.dp),
            field8 = BooleanField("Enabled", true),
            combine = { text, w, h, bgColor, txtColor, radius, elev, enabled ->
                ButtonConfig(text, w, h, bgColor, txtColor, radius, elev, enabled)
            },
            split = { splitedOf(it.text, it.width, it.height, it.backgroundColor, it.textColor, it.cornerRadius, it.elevation, it.enabled) }
        )
    }

    Button(
        onClick = {},
        enabled = config.enabled,
        modifier = Modifier
            .size(config.width, config.height)
            .shadow(config.elevation, shape = RoundedCornerShape(config.cornerRadius)),
        colors = ButtonDefaults.buttonColors(containerColor = config.backgroundColor)
    ) {
        Text(config.text, color = config.textColor)
    }
}

// Card component with extensive customization
data class CardStyle(
    val title: String,
    val width: Dp,
    val height: Dp,
    val backgroundColor: Color,
    val borderColor: Color,
    val borderWidth: Dp,
    val cornerRadius: Dp,
    val elevation: Dp,
    val padding: Dp
)

@Preview
@Composable
fun CardStyleFieldPreview() = PreviewLab {
    val cardStyle: CardStyle = fieldValue {
        combined(
            label = "Card Style",
            field1 = StringField("Title", "My Card"),
            field2 = DpField("Width", 300.dp),
            field3 = DpField("Height", 200.dp),
            field4 = ColorField("Background", Color.White),
            field5 = ColorField("Border", Color.Gray),
            field6 = DpField("Border Width", 1.dp),
            field7 = DpField("Corner Radius", 12.dp),
            field8 = DpField("Elevation", 4.dp),
            field9 = DpField("Padding", 16.dp),
            combine = { title, w, h, bg, border, bw, radius, elev, pad ->
                CardStyle(title, w, h, bg, border, bw, radius, elev, pad)
            },
            split = { splitedOf(it.title, it.width, it.height, it.backgroundColor, it.borderColor, it.borderWidth, it.cornerRadius, it.elevation, it.padding) }
        )
    }

    Card(
        modifier = Modifier
            .size(cardStyle.width, cardStyle.height)
            .shadow(cardStyle.elevation, shape = RoundedCornerShape(cardStyle.cornerRadius))
            .border(cardStyle.borderWidth, cardStyle.borderColor, RoundedCornerShape(cardStyle.cornerRadius)),
        colors = CardDefaults.cardColors(containerColor = cardStyle.backgroundColor)
    ) {
        Box(modifier = Modifier.padding(cardStyle.padding)) {
            Text(cardStyle.title)
        }
    }
}

// Complete UI theme configuration
data class ThemeConfig(
    val primaryColor: Color,
    val secondaryColor: Color,
    val backgroundColor: Color,
    val textColor: Color,
    val fontSize: TextUnit,
    val fontWeight: FontWeight,
    val cornerRadius: Dp,
    val spacing: Dp,
    val elevation: Dp,
    val darkMode: Boolean
)

@Preview
@Composable
fun ThemeConfigFieldPreview() = PreviewLab {
    val theme: ThemeConfig = fieldValue {
        combined(
            label = "Theme Config",
            field1 = ColorField("Primary", Color(0xFF6200EE)),
            field2 = ColorField("Secondary", Color(0xFF03DAC6)),
            field3 = ColorField("Background", Color.White),
            field4 = ColorField("Text", Color.Black),
            field5 = TextUnitField("Font Size", 14.sp),
            field6 = EnumField("Font Weight", FontWeight.Normal),
            field7 = DpField("Corner Radius", 8.dp),
            field8 = DpField("Spacing", 16.dp),
            field9 = DpField("Elevation", 4.dp),
            field10 = BooleanField("Dark Mode", false),
            combine = { primary, secondary, bg, text, size, weight, radius, spacing, elev, dark ->
                ThemeConfig(primary, secondary, bg, text, size, weight, radius, spacing, elev, dark)
            },
            split = { splitedOf(it.primaryColor, it.secondaryColor, it.backgroundColor, it.textColor, it.fontSize, it.fontWeight, it.cornerRadius, it.spacing, it.elevation, it.darkMode) }
        )
    }

    Surface(
        color = theme.backgroundColor,
        modifier = Modifier.padding(theme.spacing)
    ) {
        Column(spacing = theme.spacing) {
            Text("Primary", color = theme.primaryColor, fontSize = theme.fontSize, fontWeight = theme.fontWeight)
            Text("Secondary", color = theme.secondaryColor, fontSize = theme.fontSize, fontWeight = theme.fontWeight)
            Text("Text", color = theme.textColor, fontSize = theme.fontSize, fontWeight = theme.fontWeight)
        }
    }
}