-- DreamStack Showcase
-- Demonstrates: imports, slots, when/else, each, match, reactive state

import { Card } from "../registry/components/card"
import { Badge } from "../registry/components/badge"

let count = 0
let loggedIn = false
let mood = "happy"
let items = ["Alpha", "Beta", "Gamma", "Delta"]

view main = column [
  -- Header
  text "🚀 DreamStack Showcase" { variant: "title" }
  text "Everything working together" { variant: "subtitle" }

  -- 1. Slot Composition: Card with interactive children
  Card { title: "Interactive Counter", subtitle: "slot composition + reactivity" } [
    text "Count: {count}" { variant: "title" }
    row [
      button "-1" { click: count -= 1, variant: "secondary" }
      button "+1" { click: count += 1, variant: "primary" }
      button "Reset" { click: count = 0, variant: "ghost" }
    ]
  ]

  -- 2. When/Else: Conditional rendering
  Card { title: "Auth Status", subtitle: "when/else branching" } [
    button "Toggle Login" { click: loggedIn = !loggedIn, variant: "primary" }
    when loggedIn ->
      row [
        Badge { label: "ONLINE", variant: "success" }
        text "Welcome back, admin!"
      ]
    else ->
      row [
        Badge { label: "OFFLINE", variant: "error" }
        text "Please log in to continue"
      ]
  ]

  -- 3. Match: Pattern matching on state
  Card { title: "Mood Selector", subtitle: "match expressions" } [
    row [
      button "😊 Happy" { click: mood = "happy", variant: "primary" }
      button "😢 Sad" { click: mood = "sad", variant: "secondary" }
      button "😡 Angry" { click: mood = "angry", variant: "ghost" }
    ]
    match mood
      "happy" -> text "You're feeling great! 🌟" { variant: "success" }
      "sad" -> text "Hang in there... 💙" { variant: "info" }
      "angry" -> text "Take a deep breath 🔥" { variant: "warning" }
      _ -> text "How are you?" { variant: "subtitle" }
  ]

  -- 4. Each: List rendering
  Card { title: "Team Members", subtitle: "each loop iteration" } [
    each item in items ->
      row [
        text "→"
        text item
      ]
  ]

  -- 5. Nested Features: when/else inside Card slot inside each
  Card { title: "Feature Matrix", subtitle: "nested composition" } [
    text "Count is {count}"
    when count > 5 ->
      Badge { label: "HIGH", variant: "warning" }
    else ->
      Badge { label: "LOW", variant: "info" }
  ]
]