import QtQuick
import qs.Commons
import qs.Ui

// ModelMap.qml - the active preset's tier-to-model map, behind a gateway.
//
// One stage of the claude-mode panel. Panel.qml hands itself in as `panel`
// and owns all the state and actions; this file only draws them.
Column {
  id: stage
  required property var panel

  width: parent.width
  visible: stage.panel.modelRows.length > 0 && stage.panel.stage === "list"
  spacing: Style.space(10)

  PanelSeparator { width: parent.width; visible: stage.panel.modelRows.length > 0 && stage.panel.stage === "list" }

  Column {
    width: parent.width
    spacing: Style.space(1)
    visible: stage.panel.modelRows.length > 0 && stage.panel.stage === "list"

    PanelSectionHeader {
      text: "MODEL MAP"
      foreground: Color.popups.text
      fontFamily: stage.panel.uiFont
    }

    Repeater {
      model: stage.panel.modelRows

      Item {
        required property var modelData
        width: stage.width
        height: Style.space(19)

        Text {
          anchors.left: parent.left
          anchors.verticalCenter: parent.verticalCenter
          text: parent.modelData.tier
          color: Color.muted
          font.family: stage.panel.uiFont
          font.pixelSize: Style.space(11)
        }

        Text {
          anchors.left: parent.left
          anchors.leftMargin: Style.space(54)
          anchors.right: parent.right
          anchors.verticalCenter: parent.verticalCenter
          horizontalAlignment: Text.AlignRight
          text: parent.modelData.id
          color: Color.popups.text
          elide: Text.ElideLeft
          font.family: stage.panel.uiFont
          font.pixelSize: Style.space(11)
        }
      }
    }
  }
}