// OT-MMO: ventana de talentos (N). Elegir especialización a nivel 10 y repartir puntos en su árbol.
// Lo pinta game_talentos.lua con lo que manda el servidor (server/scripts/talentos/talentos.lua).
// Clases comunes de data/styles/50-otmmo.otui (fase 4); los estados del cuadro los fija el Lua con tokens.

// Un cuadro del árbol: casilla de 40, ícono de 32 y el rango en la esquina.
TlCuadro < GameCell
  UIWidget
    id: icono
    anchors.centerIn: parent
    size: 32 32
    image-source: /images/game/spells/spell-icons-32x32
    image-clip: 0 0 32 32
    phantom: true

  Label
    id: rango
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    margin-right: -6
    margin-bottom: -6
    height: 15
    padding: 0 3
    text-auto-resize: true
    ttf-font: $otmmo-font-num
    ttf-font-size: $otmmo-size-xs
    color: $otmmo-text-2
    background-color: $otmmo-bg
    border-width: 1
    border-color: $otmmo-border
    phantom: true

// Tramo de flecha de requisito (vertical u horizontal): lo coloca el script.
TlVeta < UIWidget
  background-color: $otmmo-border
  phantom: true

// Puntos necesarios para abrir cada fila (0, 5, 10...), a la izquierda del árbol.
TlFila < Label
  width: 26
  ttf-font: $otmmo-font-num
  ttf-font-size: $otmmo-size-xs
  color: $otmmo-text-2
  text-align: right
  phantom: true

// Rama en la pantalla de elección (una por especialización; el Lua marca la que se está confirmando).
TlRama < GamePanel
  size: 196 392

  UIWidget
    id: veta
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    height: 2
    background-color: $otmmo-accent
    phantom: true

  GameCell
    id: marco
    anchors.top: parent.top
    anchors.horizontalCenter: parent.horizontalCenter
    margin-top: 24
    size: 72 72
    phantom: true

  UIWidget
    id: icono
    anchors.centerIn: marco
    size: 64 64
    image-source: /images/game/spells/spell-icons-32x32
    image-clip: 0 0 32 32
    phantom: true

  GameTitle
    id: nombre
    anchors.top: marco.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    margin-top: 12
    text-auto-resize: false
    height: 20
    text-align: center

  GameTextMuted
    id: rol
    anchors.top: nombre.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    margin-top: 4
    text-auto-resize: false
    text-align: center

  GameTextMuted
    id: lema
    anchors.top: rol.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    margin: 12 12 0 12
    height: 48
    text-auto-resize: false
    text-wrap: true
    text-align: center

  GameSection
    id: tFirma
    anchors.top: lema.bottom
    anchors.left: parent.left
    margin: 12 12 0 12
    text: Habilidad propia

  GameText
    id: firma
    anchors.top: tFirma.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    margin: 4 12 0 12
    height: 96
    text-auto-resize: false
    text-wrap: true

  Button
    id: elegir
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    margin: 0 12 12 12
    height: 24

MainWindow
  id: ventanaTalentos
  size: 640 548
  text: Talentos
  @onEscape: modules.game_talentos.cerrar()

  // Árbol
  Panel
    id: arbolVista
    anchors.fill: parent

    GameTitle
      id: espec
      anchors.top: parent.top
      anchors.left: parent.left

    GameTextMuted
      id: rol
      anchors.left: espec.right
      anchors.bottom: espec.bottom
      margin-left: 8
      margin-bottom: 1

    GameLabelStrong
      id: libres
      anchors.top: parent.top
      anchors.right: parent.right
      ttf-font-size: $otmmo-size-md

    GameTextSmall
      id: gastados
      anchors.top: libres.bottom
      anchors.right: parent.right
      margin-top: 2

    UIWidget
      id: raya
      anchors.top: gastados.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      margin-top: 8
      height: 1
      background-color: $otmmo-border
      phantom: true

    Panel
      id: arbol
      anchors.top: raya.bottom
      anchors.left: parent.left
      margin-top: 16
      size: 318 400

    UIWidget
      id: separador
      anchors.top: raya.bottom
      anchors.bottom: pie.top
      anchors.left: arbol.right
      margin: 0 0 8 8
      width: 1
      background-color: $otmmo-border
      phantom: true

    // ficha fija del talento bajo el ratón (o de la habilidad propia)
    Panel
      id: ficha
      anchors.top: raya.bottom
      anchors.left: separador.right
      anchors.right: parent.right
      anchors.bottom: pie.top
      margin: 16 0 8 16

      GameCell
        id: marco
        anchors.top: parent.top
        anchors.left: parent.left
        size: 48 48
        phantom: true

      UIWidget
        id: icono
        anchors.centerIn: marco
        size: 32 32
        image-source: /images/game/spells/spell-icons-32x32
        image-clip: 0 0 32 32
        phantom: true

      GameLabelStrong
        id: nombre
        anchors.top: marco.top
        anchors.left: marco.right
        anchors.right: parent.right
        margin-left: 12
        margin-top: 6
        height: 18
        text-auto-resize: false
        ttf-font-size: $otmmo-size-md

      GameTextMuted
        id: tipo
        anchors.top: nombre.bottom
        anchors.left: nombre.left
        margin-top: 2

      GameText
        id: datos
        anchors.top: marco.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        margin-top: 12
        text-wrap: true

      GameSection
        id: tAhora
        anchors.top: datos.bottom
        anchors.left: parent.left
        margin-top: 12

      GameParagraph
        id: ahora
        anchors.top: tAhora.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        margin-top: 4

      GameSection
        id: tSiguiente
        anchors.top: ahora.bottom
        anchors.left: parent.left
        margin-top: 12

      GameParagraph
        id: siguiente
        anchors.top: tSiguiente.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        margin-top: 4

      GameParagraph
        id: requisito
        anchors.top: siguiente.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        margin-top: 12
        color: $otmmo-error-text

      GameTextSmall
        id: ayuda
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        text: Clic: sumar. Clic derecho: quitar.

    Panel
      id: pie
      anchors.bottom: parent.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      height: 24

      GameTextSmall
        id: reinicio
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter

      PrimaryButton
        id: aplicar
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        size: 112 24
        text: Aplicar
        @onClick: modules.game_talentos.aplicar()

      Button
        id: deshacer
        anchors.right: aplicar.left
        anchors.verticalCenter: parent.verticalCenter
        margin-right: 8
        size: 88 24
        text: Deshacer
        @onClick: modules.game_talentos.deshacer()

  // Elección de rama (nivel 10)
  Panel
    id: eleccion
    anchors.fill: parent
    visible: false

    GameTitle
      id: titulo
      anchors.top: parent.top
      anchors.horizontalCenter: parent.horizontalCenter
      ttf-font-size: $otmmo-size-xl
      text: Elige tu camino

    GameTextMuted
      id: aviso
      anchors.top: titulo.bottom
      anchors.horizontalCenter: parent.horizontalCenter
      margin-top: 8

    Panel
      id: ramas
      anchors.top: aviso.bottom
      anchors.horizontalCenter: parent.horizontalCenter
      margin-top: 24
      size: 608 392
      layout:
        type: horizontalBox
        spacing: 8
        fit-children: true