CSS Styling

/**
 * Apply inline styles to an element (used within attrs blocks)
 * @param builder Style scope builder for CSS properties
 */
fun AttrsScope<*>.style(builder: StyleScope.() -> Unit)

/**
 * Mount CSS rules into the document
 * @param cssRules Pre-built CSS rule declarations
 */
@Composable
fun Style(cssRules: CSSRuleDeclarationList)

/**
 * Mount CSS rules with optional attributes
 * @param applyAttrs Optional attributes for the style element
 * @param rulesBuild CSS rules builder
 */
@Composable
fun Style(
    applyAttrs: (AttrsScope<HTMLStyleElement>.() -> Unit)? = null,
    rulesBuild: StyleSheetBuilder.() -> Unit
)

/**
 * CSS stylesheet class for defining reusable styles
 * @param customPrefix Optional custom prefix for generated class names
 * @param rulesHolder Optional holder for CSS rules
 */
class StyleSheet(
    customPrefix: String? = null,
    rulesHolder: CSSRulesHolder? = null
) {
    /**
     * Define a CSS class with properties
     * @param builder Style scope for CSS properties
     * @return Generated CSS class name
     */
    fun style(builder: StyleScope.() -> Unit): String
    
    /**
     * Define CSS keyframes for animations
     * @param builder Keyframes builder
     * @return Generated keyframes name
     */
    fun keyframes(builder: CSSKeyframesRuleDeclaration.() -> Unit): String
}

/**
 * Interface for CSS rule collections
 */
interface CSSRulesHolder

/**
 * Display mode property
 * @param value Display style (Block, Inline, Flex, Grid, None, etc.)
 */
fun StyleScope.display(value: DisplayStyle)

/**
 * Position type property
 * @param value Position type (Static, Relative, Absolute, Fixed, Sticky)
 */
fun StyleScope.position(value: Position)

/**
 * Position offset properties
 */
fun StyleScope.top(value: CSSNumeric)
fun StyleScope.bottom(value: CSSNumeric)
fun StyleScope.left(value: CSSNumeric)
fun StyleScope.right(value: CSSNumeric)

/**
 * Stacking order
 * @param value Z-index value
 */
fun StyleScope.zIndex(value: Int)

// Display style constants
enum class DisplayStyle {
    Block, Inline, InlineBlock, Flex, InlineFlex, Grid, InlineGrid, 
    Table, TableRow, TableCell, None, Contents, FlowRoot,
    ListItem, RunIn, Compact, Marker
}

// Position constants
enum class Position {
    Static, Relative, Absolute, Fixed, Sticky
}

/**
 * Width and height properties
 */
fun StyleScope.width(value: CSSNumeric)
fun StyleScope.height(value: CSSNumeric)
fun StyleScope.minWidth(value: CSSNumeric)
fun StyleScope.maxWidth(value: CSSNumeric)
fun StyleScope.minHeight(value: CSSNumeric)
fun StyleScope.maxHeight(value: CSSNumeric)

/**
 * Box sizing model
 * @param value BoxSizing mode (ContentBox, BorderBox)
 */
fun StyleScope.boxSizing(value: BoxSizing)

/**
 * Margin properties
 */
fun StyleScope.margin(value: CSSNumeric)
fun StyleScope.marginTop(value: CSSNumeric)
fun StyleScope.marginBottom(value: CSSNumeric)
fun StyleScope.marginLeft(value: CSSNumeric)
fun StyleScope.marginRight(value: CSSNumeric)
fun StyleScope.marginBlock(value: CSSNumeric)
fun StyleScope.marginInline(value: CSSNumeric)

/**
 * Padding properties
 */
fun StyleScope.padding(value: CSSNumeric)
fun StyleScope.paddingTop(value: CSSNumeric)
fun StyleScope.paddingBottom(value: CSSNumeric)
fun StyleScope.paddingLeft(value: CSSNumeric)
fun StyleScope.paddingRight(value: CSSNumeric)
fun StyleScope.paddingBlock(value: CSSNumeric)
fun StyleScope.paddingInline(value: CSSNumeric)

/**
 * Border properties
 */
fun StyleScope.border(
    width: CSSNumeric? = null,
    style: LineStyle? = null,
    color: CSSColorValue? = null
)
fun StyleScope.borderTop(width: CSSNumeric?, style: LineStyle?, color: CSSColorValue?)
fun StyleScope.borderBottom(width: CSSNumeric?, style: LineStyle?, color: CSSColorValue?)
fun StyleScope.borderLeft(width: CSSNumeric?, style: LineStyle?, color: CSSColorValue?)
fun StyleScope.borderRight(width: CSSNumeric?, style: LineStyle?, color: CSSColorValue?)

fun StyleScope.borderWidth(value: CSSNumeric)
fun StyleScope.borderStyle(value: LineStyle)
fun StyleScope.borderColor(value: CSSColorValue)
fun StyleScope.borderRadius(value: CSSNumeric)

// Box sizing constants
enum class BoxSizing { ContentBox, BorderBox }

// Line style constants  
enum class LineStyle { None, Solid, Dashed, Dotted, Double, Groove, Ridge, Inset, Outset }

/**
 * Flex direction (main axis direction)
 * @param value FlexDirection (Row, Column, RowReverse, ColumnReverse)
 */
fun StyleScope.flexDirection(value: FlexDirection)

/**
 * Flex wrapping behavior
 * @param value FlexWrap (Wrap, Nowrap, WrapReverse)
 */
fun StyleScope.flexWrap(value: FlexWrap)

/**
 * Main axis alignment
 * @param value JustifyContent alignment
 */
fun StyleScope.justifyContent(value: JustifyContent)

/**
 * Cross axis alignment for items
 * @param value AlignItems alignment
 */
fun StyleScope.alignItems(value: AlignItems)

/**
 * Cross axis alignment for content lines
 * @param value AlignContent alignment
 */
fun StyleScope.alignContent(value: AlignContent)

/**
 * Individual item cross axis alignment
 * @param value AlignSelf alignment
 */
fun StyleScope.alignSelf(value: AlignSelf)

/**
 * Flex grow, shrink, and basis shorthand
 * @param value Flex value (number or auto)
 */
fun StyleScope.flex(value: CSSNumeric)

/**
 * Individual flex properties
 */
fun StyleScope.flexGrow(value: Number)
fun StyleScope.flexShrink(value: Number)
fun StyleScope.flexBasis(value: CSSNumeric)

/**
 * Gap between flex items
 */
fun StyleScope.gap(value: CSSNumeric)
fun StyleScope.rowGap(value: CSSNumeric)
fun StyleScope.columnGap(value: CSSNumeric)

// Flexbox constants
enum class FlexDirection { Row, Column, RowReverse, ColumnReverse }
enum class FlexWrap { Wrap, Nowrap, WrapReverse }
enum class JustifyContent { FlexStart, FlexEnd, Center, SpaceBetween, SpaceAround, SpaceEvenly }
enum class AlignItems { FlexStart, FlexEnd, Center, Baseline, Stretch }
enum class AlignContent { FlexStart, FlexEnd, Center, SpaceBetween, SpaceAround, SpaceEvenly, Stretch }
enum class AlignSelf { Auto, FlexStart, FlexEnd, Center, Baseline, Stretch }

/**
 * Grid track definitions
 */
fun StyleScope.gridTemplateColumns(value: String)
fun StyleScope.gridTemplateRows(value: String)

/**
 * Named grid areas
 * @param value Grid area template string
 */
fun StyleScope.gridTemplateAreas(value: String)

/**
 * Grid item placement
 */
fun StyleScope.gridColumn(value: String)
fun StyleScope.gridRow(value: String)
fun StyleScope.gridColumnStart(value: String)
fun StyleScope.gridColumnEnd(value: String)
fun StyleScope.gridRowStart(value: String)
fun StyleScope.gridRowEnd(value: String)

/**
 * Named area placement
 * @param value Grid area name
 */
fun StyleScope.gridArea(value: String)

/**
 * Auto-placement algorithm
 * @param value GridAutoFlow direction
 */
fun StyleScope.gridAutoFlow(value: GridAutoFlow)

/**
 * Implicit track sizes
 */
fun StyleScope.gridAutoColumns(value: String)
fun StyleScope.gridAutoRows(value: String)

// Grid constants
enum class GridAutoFlow { Row, Column, RowDense, ColumnDense }

/**
 * Font family stack
 * @param families Ordered list of font family names
 */
fun StyleScope.fontFamily(vararg families: String)

/**
 * Font size
 * @param value Font size value
 */
fun StyleScope.fontSize(value: CSSNumeric)

/**
 * Font weight
 * @param value Font weight (normal, bold, or 100-900)
 */
fun StyleScope.fontWeight(value: FontWeight)

/**
 * Font style
 * @param value FontStyle (Normal, Italic, Oblique)
 */
fun StyleScope.fontStyle(value: FontStyle)

/**
 * Line height
 * @param value Line height multiplier or absolute value
 */
fun StyleScope.lineHeight(value: CSSNumeric)

/**
 * Letter and word spacing
 */
fun StyleScope.letterSpacing(value: CSSNumeric)
fun StyleScope.wordSpacing(value: CSSNumeric)

/**
 * Text alignment
 * @param value TextAlign alignment
 */
fun StyleScope.textAlign(value: TextAlign)

/**
 * Text decoration (underline, etc.)
 * @param value Text decoration string
 */
fun StyleScope.textDecoration(value: String)

/**
 * Text case transformation  
 * @param value TextTransform case
 */
fun StyleScope.textTransform(value: TextTransform)

/**
 * Text overflow handling
 * @param value TextOverflow behavior
 */
fun StyleScope.textOverflow(value: TextOverflow)

/**
 * Whitespace handling
 * @param value WhiteSpace behavior
 */
fun StyleScope.whiteSpace(value: WhiteSpace)

/**
 * Word breaking rules
 * @param value WordBreak behavior
 */
fun StyleScope.wordBreak(value: WordBreak)

// Typography constants
enum class FontStyle { Normal, Italic, Oblique }
enum class TextAlign { Left, Right, Center, Justify, Start, End }
enum class TextTransform { None, Capitalize, Uppercase, Lowercase }
enum class TextOverflow { Clip, Ellipsis }
enum class WhiteSpace { Normal, Nowrap, Pre, PreWrap, PreLine }
enum class WordBreak { Normal, BreakAll, KeepAll }

/**
 * Text color
 * @param value Color value
 */
fun StyleScope.color(value: CSSColorValue)

/**
 * Background color
 * @param value Color value
 */
fun StyleScope.backgroundColor(value: CSSColorValue)

/**
 * Background shorthand property
 * @param value Background value string
 */
fun StyleScope.background(value: String)

/**
 * Background image
 * @param value Background image URL or gradient
 */
fun StyleScope.backgroundImage(value: String)

/**
 * Background size
 * @param value Background size (cover, contain, or dimensions)
 */
fun StyleScope.backgroundSize(value: String)

/**
 * Background position
 * @param value Background position keywords or coordinates
 */
fun StyleScope.backgroundPosition(value: String)

/**
 * Background repetition
 * @param value BackgroundRepeat behavior
 */
fun StyleScope.backgroundRepeat(value: BackgroundRepeat)

/**
 * Background attachment
 * @param value BackgroundAttachment behavior
 */
fun StyleScope.backgroundAttachment(value: BackgroundAttachment)

/**
 * Element opacity
 * @param value Opacity value (0.0 to 1.0)
 */
fun StyleScope.opacity(value: Number)

// Background constants
enum class BackgroundRepeat { Repeat, RepeatX, RepeatY, NoRepeat, Space, Round }
enum class BackgroundAttachment { Scroll, Fixed, Local }

/**
 * Length units
 */
val Number.px: CSSNumeric        // Pixels
val Number.em: CSSNumeric        // Em units (relative to font size)
val Number.rem: CSSNumeric       // Root em units
val Number.percent: CSSNumeric   // Percentage
val Number.vh: CSSNumeric        // Viewport height
val Number.vw: CSSNumeric        // Viewport width
val Number.vmin: CSSNumeric      // Viewport minimum
val Number.vmax: CSSNumeric      // Viewport maximum
val Number.ch: CSSNumeric        // Character width
val Number.ex: CSSNumeric        // X-height
val Number.cm: CSSNumeric        // Centimeters
val Number.mm: CSSNumeric        // Millimeters
val Number.inches: CSSNumeric    // Inches
val Number.pt: CSSNumeric        // Points
val Number.pc: CSSNumeric        // Picas

/**
 * Time units
 */
val Number.s: CSSNumeric         // Seconds
val Number.ms: CSSNumeric        // Milliseconds

/**
 * Angle units
 */
val Number.deg: CSSNumeric       // Degrees
val Number.rad: CSSNumeric       // Radians
val Number.grad: CSSNumeric      // Gradians
val Number.turn: CSSNumeric      // Turns

/**
 * Color creation functions
 */
fun Color(r: Number, g: Number, b: Number, a: Number = 1.0): CSSColorValue
fun rgb(r: Number, g: Number, b: Number): CSSColorValue
fun rgba(r: Number, g: Number, b: Number, a: Number): CSSColorValue
fun hsl(h: Number, s: Number, l: Number): CSSColorValue
fun hsla(h: Number, s: Number, l: Number, a: Number): CSSColorValue

/**
 * Named colors
 */
object Color {
    val red: CSSColorValue
    val green: CSSColorValue
    val blue: CSSColorValue
    val black: CSSColorValue
    val white: CSSColorValue
    val transparent: CSSColorValue
    val currentColor: CSSColorValue
    // ... many more named colors
}

/**
 * CSS keyword values
 */
object StyleKeywords {
    val auto: CSSKeyword
    val none: CSSKeyword
    val inherit: CSSKeyword
    val initial: CSSKeyword
    val unset: CSSKeyword
}

import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.dom.*

// Inline styling
Div({
    style {
        display(DisplayStyle.Flex)
        flexDirection(FlexDirection.Column)
        gap(16.px)
        padding(20.px)
        backgroundColor(Color.lightgray)
        borderRadius(8.px)
        border(1.px, LineStyle.Solid, Color.gray)
    }
}) {
    H1({
        style {
            fontSize(24.px)
            fontWeight(FontWeight.Bold)
            color(Color.darkblue)
            marginBottom(16.px)
        }
    }) {
        Text("Flex Container")
    }
    
    P({
        style {
            lineHeight(1.5)
            textAlign(TextAlign.Justify)
        }
    }) {
        Text("This paragraph has custom line height and justified text alignment.")
    }
}

// Stylesheet approach
object AppStyles : StyleSheet() {
    val container by style {
        display(DisplayStyle.Grid)
        gridTemplateColumns("1fr 2fr 1fr")
        gridTemplateRows("auto 1fr auto")
        minHeight(100.vh)
        gap(20.px)
        padding(20.px)
    }
    
    val header by style {
        gridColumn("1 / -1")
        backgroundColor(Color.navy)
        color(Color.white)
        padding(20.px)
        textAlign(TextAlign.Center)
    }
    
    val sidebar by style {
        backgroundColor(Color.lightgray)
        padding(15.px)
        
        // Nested selector for links
        self + " a" {
            display(DisplayStyle.Block)
            padding(8.px)
            textDecoration("none")
            color(Color.darkblue)
        }
    }
}

// Using stylesheet classes
Div({ classes(AppStyles.container) }) {
    Header({ classes(AppStyles.header) }) {
        H1 { Text("My Website") }
    }
    
    Aside({ classes(AppStyles.sidebar) }) {
        A(href = "/home") { Text("Home") }
        A(href = "/about") { Text("About") }
    }
    
    Main {
        P { Text("Main content area") }
    }
}