// ssr-counter/Counter.el
//
// A counter component that demonstrates:
//   - State with initial value
//   - {#if} conditional rendering
//   - {#each} list rendering
//   - Interpolation
//   - Event binding
//   - SSR + client hydration
//
// Run `node render.js Counter` to see the server-rendered HTML.
// Open index.html in a browser to see the full SSR + hydration lifecycle.

component Counter {
    props {
        initialValue: Int = 0
        label: String = "Counter"
    }

    state {
        count: Int = 0
        history: String = ""
    }

    fn increment() -> Void {
        count = count + 1
        history = history + "+" + count + " "
    }

    fn decrement() -> Void {
        count = count - 1
        history = history + "-" + count + " "
    }

    fn reset() -> Void {
        count = 0
        history = ""
    }

    template {
        <div class="counter">
            <h2 class="counter-label">{label}</h2>
            <div class="count-display">
                <span class={count > 0 ? "count positive" : count < 0 ? "count negative" : "count zero"}>
                    {count}
                </span>
            </div>
            <div class="buttons">
                <button class="btn btn-decrement" on:click={() => decrement()}>-</button>
                <button class="btn btn-reset" on:click={() => reset()}>reset</button>
                <button class="btn btn-increment" on:click={() => increment()}>+</button>
            </div>
            {#if history != ""}
                <div class="history">
                    <span class="history-label">history:</span>
                    <code>{history}</code>
                </div>
            {/if}
            {#if count == 0}
                <p class="hint">Press + or - to begin.</p>
            {/if}
        </div>
    }
}

component CounterPair {
    template {
        <div class="counter-pair">
            <Counter label="Left" />
            <Counter label="Right" />
        </div>
    }
}

component App {
    template {
        <div class="app">
            <header class="app-header">
                <h1>el-ui SSR + Hydration</h1>
                <p class="subtitle">Server-rendered, client-hydrated with spreading activation</p>
            </header>
            <main class="app-main">
                <Counter label="Main Counter" />
                <CounterPair />
            </main>
        </div>
    }
}