// paladin_simple.ce - Simple test for prosperon rendering

log.console("paladin simple test starting")

var sprite = use('sprite')
var clay = use('clay')
var core = use('core')
var fx_graph = use('fx_graph')
var sdl_gpu = use('sdl_gpu')

var fcfg = {font_path: 'examples/fonts/dos'}

core.start({
  width: 640,
  height: 480,
  title: "Paladin Simple",
  framerate: 60,
  update: function(dt) {},
  render: build_render_graph,
  input: function(ev) {
    if (ev.type == 'quit') $stop()
  }
})

function build_render_graph() {
  var win_size = core.window_size()
  var graph = fx_graph.create()

  // Simple sprite scene
  var scene = {
    type: 'group',
    children: [{
      type: 'sprite',
      image: 'examples/tiles/fireball',
      pos: {x: win_size.width / 2, y: win_size.height / 2},
      width: win_size.height / 2, // Half screen height
      height: win_size.height / 2,
      anchor_x: 0.5,
      anchor_y: 0.5,
      color: {r: 1, g: 1, b: 1, a: 1}
    }]
  }

  var camera = {
    pos: [0, 0],
    width: win_size.width,
    height: win_size.height,
    anchor: [0, 0],
    ortho: true,
    background: {r: 0.2, g: 0.2, b: 0.3, a: 1}
  }

  // Render to screen

    var ui_scene = clay.layout(function() {
    clay.container({padding: 20, contain: clay.contain.content}, function() {
      // Top-left HUD panel
      clay.vstack({
        background_image: 'examples/tiles/brick_brown',
        slice: 0.33,
        padding: 20,
        spacing: 10,
        width: 200
      }, function() {
        clay.text("PALADIN UI", [{font_size: 24, color: {r:1, g:0.8, b:0.2, a:1}}, fcfg])

        clay.hstack({spacing: 10}, function() {
           clay.image('examples/tiles/hud_heart', {width: 24, height: 24})
           clay.text("x 3", [{font_size: 20}, fcfg])
        })

        clay.button("PAUSE", function() { log.console("Pause clicked") }, fcfg)

        // Scissored scroll area test
        clay.container({
          width: 160, height: 60,
          background_color: {r:0, g:0, b:0, a:0.5},
          clipped: true
        }, function() {
          clay.vstack({offset: {x:0, y: -10}}, function() {
             clay.text("Item 1", fcfg)
             clay.text("Item 2", fcfg)
             clay.text("Item 3", fcfg)
             clay.text("Item 4", fcfg)
          })
        })
      })
    })
  }, {width: win_size.width, height: win_size.height})

  graph.add_node('render_view', {
    root: ui_scene,
    camera: {pos: [0, 0], width: win_size.width, height: win_size.height, anchor: [0, 0], ortho: true},
    target: 'screen',
    clear_color: {r:0,g:0,b:0,a:0} // Cleared transparent
  })

  return graph
}