Panel.qml

import QtQuick
import QtQuick.Controls
import Quickshell
import qs.Ui
import qs.Commons
import "Model.js" as Model

Panel {
  id: root
  moduleName: "pats01.sony-ult-wear"
  ipcTarget: moduleName
  manageIpc: false

  readonly property var sony: bar && bar.shell && typeof bar.shell.serviceFor === "function"
    ? bar.shell.serviceFor(moduleName) : null
  readonly property color foreground: bar ? bar.foreground : Color.foreground
  readonly property string fontFamily: bar ? bar.fontFamily : Style.font.family
  readonly property bool hideWhenDisconnected: setting("hideWhenDisconnected", true)
  readonly property bool soundCues: setting("soundCues", true) === true
  readonly property bool hasDevice: !!(sony && sony.connected)
  readonly property var noiseModes: sony && sony.status ? sony.status.noiseModes : Model.NOISE_MODES
  readonly property var ultModes: sony && sony.status ? sony.status.ultModes : Model.ULT_MODES
  readonly property var codecs: sony && sony.status ? sony.status.codecs : []
  readonly property var sections: [
    { id: "noise", options: noiseOptions() },
    { id: "ult", options: ultOptions() },
    { id: "codec", options: codecOptions() }
  ]

  property string focusSection: "noise"
  property int selectedIndex: 0
  property bool cursorActive: false

  readonly property bool hasCodec: codecs.length > 0
  readonly property bool ldacActive: sony && sony.status && Model.canonicalCodec(sony.status.codec) === "LDAC"
  readonly property bool ldacAvailable: sony && sony.status && !!sony.status.ldacAvailable
  readonly property color statusAccent: sony && sony.phase === "error" ? Color.urgent : Color.accent
  readonly property string audioReason: sony && sony.status ? String(sony.status.audioReason || "") : ""
  readonly property string barLabel: bar && bar.vertical ? "󰋋" : (sony ? Model.barText(sony.status) : "󰋋")
  readonly property string title: sony && sony.status && sony.status.name ? sony.status.name : "Sony ULT WEAR"
  readonly property real batteryLevel: sony && sony.status ? Number(sony.status.battery) : -1
  readonly property string activeNoiseLabel: sony && sony.status ? Model.noiseLabel(sony.status.noise) : "Off"
  readonly property string activeUltLabel: sony && sony.status ? Model.ultLabel(sony.status.ult) : "Off"
  readonly property string activeCodecLabel: sony && sony.status ? Model.codecText(sony.status.codec) : "—"
  readonly property string meta: {
    if (!sony || !sony.connected) return "NOT CONNECTED"
    if (sony.phase === "refreshing") return "CONNECTING CONTROLS"
    if (sony.phase === "pending") return "SYNCING · " + Model.actionLabel(sony.pendingAction)
    if (sony.phase === "stale") return "LAST KNOWN STATE"
    if (sony.phase === "error") return "CHANGE NOT APPLIED"
    return "LIVE · " + activeNoiseLabel + " · " + activeUltLabel
  }
  readonly property bool statusCardVisible: sony && (sony.phase === "pending" || sony.phase === "stale" || sony.phase === "error")
  readonly property string statusTitle: {
    if (!sony) return ""
    if (sony.phase === "pending") return "Applying " + Model.actionLabel(sony.pendingAction) + "…"
    return sony.lastError || "Controls are temporarily unavailable"
  }
  readonly property string statusDetail: {
    if (!sony) return ""
    if (sony.phase === "pending") return "Waiting for the headset to confirm"
    if (sony.phase === "stale") return "Showing the last known state · retrying automatically"
    return "Keep the headset connected, then try again"
  }

  function persistSettings(values) {
    var entry = { id: root.moduleName }
    for (var existing in root.settings) if (existing !== "id") entry[existing] = root.settings[existing]
    for (var key in values) entry[key] = values[key]
    root.settings = entry
    if (root.hostWidget && "settings" in root.hostWidget) root.hostWidget.settings = entry
    if (root.bar && root.bar.shell && typeof root.bar.shell.updateEntryInline === "function")
      root.bar.shell.updateEntryInline(root.moduleName, entry)
  }

  function noiseOptions() {
    var values = sony && sony.status && sony.status.noiseModes ? sony.status.noiseModes : Model.NOISE_MODES
    var out = []
    var tips = {
      off: "Disable noise processing",
      anc: "Noise cancellation",
      ambient: "Hear your surroundings",
      voice: "Ambient sound with Voice Focus"
    }
    for (var i = 0; i < values.length; i++) out.push({
      value: values[i], label: Model.noiseLabel(values[i]), tooltip: tips[Model.canonicalNoise(values[i])] || ""
    })
    return out
  }

  function ultOptions() {
    var values = sony && sony.status && sony.status.ultModes ? sony.status.ultModes : Model.ULT_MODES
    var out = []
    for (var i = 0; i < values.length; i++) out.push({ value: values[i], label: Model.ultLabel(values[i]) })
    return out
  }

  function codecOptions() {
    var values = sony && sony.status && sony.status.codecs ? sony.status.codecs : []
    var out = []
    for (var i = 0; i < values.length; i++) out.push({ value: values[i], label: Model.codecText(values[i]) })
    return out
  }

  function sectionById(id) {
    for (var i = 0; i < sections.length; i++) if (sections[i].id === id) return sections[i]
    return null
  }

  function activeSections() {
    var out = []
    for (var i = 0; i < sections.length; i++) if (sections[i].options.length > 0) out.push(sections[i])
    return out
  }

  function clampCursor() {
    var list = activeSections()
    if (list.length === 0) return
    var section = sectionById(focusSection)
    if (!section || section.options.length === 0) {
      focusSection = list[0].id
      selectedIndex = 0
      return
    }
    selectedIndex = Math.max(0, Math.min(section.options.length - 1, selectedIndex))
  }

  function moveCursor(dx, dy) {
    var list = activeSections()
    if (list.length === 0) return
    if (!cursorActive) {
      cursorActive = true
      clampCursor()
      return
    }
    cursorActive = true
    clampCursor()
    var current = 0
    for (var i = 0; i < list.length; i++) if (list[i].id === focusSection) current = i
    if (dx !== 0) {
      var max = list[current].options.length - 1
      selectedIndex = Math.max(0, Math.min(max, selectedIndex + dx))
    } else if (dy !== 0) {
      var next = Math.max(0, Math.min(list.length - 1, current + (dy > 0 ? 1 : -1)))
      if (next !== current) {
        focusSection = list[next].id
        selectedIndex = Math.min(selectedIndex, list[next].options.length - 1)
      }
    }
  }

  function activateCursor() {
    clampCursor()
    var section = sectionById(focusSection)
    if (!section || !section.options[selectedIndex]) return
    activate(focusSection, section.options[selectedIndex].value)
  }

  function activate(section, value) {
    if (!sony || !sony.connected) return
    cursorActive = true
    if (section === "noise") sony.setNoise(value, root.soundCues)
    else if (section === "ult") sony.setUlt(value, root.soundCues)
    else if (section === "codec") sony.setCodec(value)
  }

  function chooseNoise(value) { activate("noise", value) }
  function chooseUlt(value) { activate("ult", value) }
  function chooseCodec(value) { activate("codec", value) }

  function directKey(value) {
    var key = String(value || "").toLowerCase()
    if (key === "n") return chooseNoise("anc")
    if (key === "a") return chooseNoise("ambient")
    if (key === "v") return chooseNoise("voice")
    if (key === "o") return chooseNoise("off")
    if (key === "0") return chooseUlt("off")
    if (key === "1") return chooseUlt("1")
    if (key === "2") return chooseUlt("2")
    if (key === "d" && root.ldacAvailable) return chooseCodec("LDAC")
    if (key === "r" && sony) return sony.refresh()
    if (key === "s") return persistSettings({ soundCues: !root.soundCues })
  }

  function hovered(section, index, isHovered) {
    if (!isHovered) return
    cursorActive = true
    focusSection = section
    selectedIndex = index
  }

  onOpenedChanged: {
    if (opened) {
      cursorActive = false
      clampCursor()
      if (sony) sony.refresh()
    }
  }
  onHasDeviceChanged: if (!hasDevice && hideWhenDisconnected && opened) close()
  onSectionsChanged: clampCursor()

  implicitWidth: hasDevice || !hideWhenDisconnected ? button.implicitWidth : 0
  implicitHeight: hasDevice || !hideWhenDisconnected ? button.implicitHeight : 0
  visible: hasDevice || !hideWhenDisconnected

  WidgetButton {
    id: button
    anchors.fill: parent
    bar: root.bar
    text: root.barLabel
    active: root.ldacActive
    activeColor: Color.accent
    fontSize: root.bar && root.bar.vertical ? Style.bar.iconFont : Style.font.bodySmall
    tooltipText: "Sony ULT WEAR"
    onPressed: function(mouseButton) {
      if (mouseButton === Qt.RightButton && root.sony) root.sony.refresh()
      else root.toggle()
    }
  }

  KeyboardPanel {
    id: popup
    anchorItem: button
    owner: root
    bar: root.bar
    open: root.opened && (root.hasDevice || !root.hideWhenDisconnected)
    focusTarget: keyCatcher
    contentWidth: popup.fittedContentWidth(Style.space(430))
    contentHeight: popup.fittedContentHeight(contentColumn.implicitHeight, Style.space(540))

    PanelKeyCatcher {
      id: keyCatcher
      anchors.fill: parent
      onMoveRequested: function(dx, dy) { root.moveCursor(dx, dy) }
      onActivateRequested: root.activateCursor()
      onCloseRequested: root.close()
      onTabRequested: function(direction) { root.switchPanel(direction) }
      onTextKey: function(value) { root.directKey(value) }

      ScrollView {
        id: scrollArea
        anchors.fill: parent
        clip: true
        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
        ScrollBar.vertical.policy: contentColumn.implicitHeight > height ? ScrollBar.AsNeeded : ScrollBar.AlwaysOff
        Binding {
          target: scrollArea.contentItem
          property: "interactive"
          value: contentColumn.implicitHeight > scrollArea.height
        }

        Column {
          id: contentColumn
          width: scrollArea.availableWidth
          spacing: Style.space(12)

          BorderSurface {
            id: heroCard
            width: parent.width
            implicitHeight: Style.space(82)
            color: Style.normalFillFor(root.foreground, Color.accent)
            borderSpec: Border.controlSpec("normal", root.foreground, Color.accent)
            radius: Style.cornerRadius

            PanelHero {
              anchors.fill: parent
              anchors.leftMargin: heroCard.borderLeft + Style.space(12)
              anchors.rightMargin: heroCard.borderRight + Style.space(12)
              anchors.topMargin: heroCard.borderTop + Style.space(10)
              anchors.bottomMargin: heroCard.borderBottom + Style.space(10)
              title: root.title
              meta: root.meta
              detail: root.activeCodecLabel === "Unknown" ? "" : root.activeCodecLabel
              foreground: root.foreground
              fontFamily: root.fontFamily
              iconComponent: Component {
                Item {
                  implicitWidth: Style.space(58)
                  implicitHeight: Style.space(58)

                  Canvas {
                    id: batteryRing
                    anchors.fill: parent
                    property real level: root.batteryLevel
                    onLevelChanged: requestPaint()
                    onPaint: {
                      var ctx = getContext("2d")
                      var size = Math.min(width, height)
                      var center = size / 2
                      var radius = size / 2 - Style.space(4)
                      var start = -Math.PI / 2
                      var amount = Math.max(0, Math.min(100, level)) / 100
                      ctx.clearRect(0, 0, width, height)
                      ctx.lineWidth = Style.space(3)
                      ctx.lineCap = "round"
                      ctx.strokeStyle = Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.18)
                      ctx.beginPath()
                      ctx.arc(center, center, radius, 0, Math.PI * 2)
                      ctx.stroke()
                      if (level >= 0) {
                        ctx.strokeStyle = Color.accent
                        ctx.beginPath()
                        ctx.arc(center, center, radius, start, start + Math.PI * 2 * amount)
                        ctx.stroke()
                      }
                    }
                  }

                  Text {
                    anchors.centerIn: parent
                    text: root.batteryLevel >= 0 ? Math.round(root.batteryLevel) + "%" : "—"
                    color: root.foreground
                    font.family: root.fontFamily
                    font.pixelSize: Style.font.bodySmall
                    font.bold: true
                  }

                  Text {
                    visible: root.sony && root.sony.status && root.sony.status.charging
                    anchors.right: parent.right
                    anchors.bottom: parent.bottom
                    text: "󰂄"
                    color: Color.accent
                    font.family: root.fontFamily
                    font.pixelSize: Style.font.bodySmall
                  }
                }
              }
            }
          }

          BorderSurface {
            id: statusCard
            visible: root.statusCardVisible
            width: parent.width
            implicitHeight: visible ? statusRow.implicitHeight + Style.space(14) : 0
            color: Style.normalFillFor(root.foreground, root.statusAccent, root.statusAccent)
            borderSpec: Border.controlSpec("normal", root.foreground, root.statusAccent, root.statusAccent)
            radius: Style.cornerRadius

            Row {
              id: statusRow
              anchors.left: parent.left
              anchors.right: parent.right
              anchors.verticalCenter: parent.verticalCenter
              anchors.leftMargin: statusCard.borderLeft + Style.space(10)
              anchors.rightMargin: statusCard.borderRight + Style.space(8)
              spacing: Style.space(8)

              Text {
                anchors.verticalCenter: parent.verticalCenter
                text: root.sony && root.sony.phase === "pending" ? "󰔟" : "󰑐"
                color: root.statusAccent
                font.family: root.fontFamily
                font.pixelSize: Style.font.body
              }

              Column {
                id: statusCopy
                width: parent.width - parent.children[0].implicitWidth
                  - (retryButton.visible ? retryButton.implicitWidth : 0) - parent.spacing * 2
                spacing: Style.space(1)

                Text {
                  width: parent.width
                  text: root.statusTitle
                  color: root.foreground
                  font.family: root.fontFamily
                  font.pixelSize: Style.font.bodySmall
                  font.bold: true
                  elide: Text.ElideRight
                }

                Text {
                  visible: root.sony && root.sony.phase !== "pending"
                  width: parent.width
                  text: root.statusDetail
                  color: Color.muted
                  font.family: root.fontFamily
                  font.pixelSize: Style.font.caption
                  elide: Text.ElideRight
                }
              }

              PanelActionButton {
                id: retryButton
                visible: root.sony && root.sony.phase !== "pending"
                anchors.verticalCenter: parent.verticalCenter
                iconText: "󰑐"
                tooltipText: "Retry headset controls"
                foreground: root.foreground
                hoverColor: root.statusAccent
                fontFamily: root.fontFamily
                onClicked: if (root.sony) root.sony.refresh()
              }
            }
          }

          Column {
            width: parent.width
            spacing: Style.space(8)
            Row {
              width: parent.width
              PanelSectionHeader { id: listeningHeader; text: "LISTENING"; foreground: root.foreground; fontFamily: root.fontFamily }
              Item { width: Math.max(0, parent.width - listeningHeader.implicitWidth - listeningValue.implicitWidth); height: 1 }
              Text {
                id: listeningValue
                text: root.activeNoiseLabel.toUpperCase()
                color: Color.accent
                font.family: root.fontFamily
                font.pixelSize: Style.font.caption
                font.bold: true
                anchors.verticalCenter: parent.verticalCenter
              }
            }
            ModePicker {
              id: noiseGroup
              width: parent.width
              options: root.noiseOptions()
              value: root.sony && root.sony.status ? root.sony.status.noise : "off"
              foreground: root.foreground
              fontFamily: root.fontFamily
              cursorIndex: root.cursorActive && root.focusSection === "noise" ? root.selectedIndex : -1
              onChanged: function(value) { root.chooseNoise(value) }
              onHovered: function(index, inside) { root.hovered("noise", index, inside) }
            }
          }

          Column {
            width: parent.width
            spacing: Style.space(8)
            Row {
              width: parent.width
              PanelSectionHeader { id: ultHeader; text: "ULT SOUND"; foreground: root.foreground; fontFamily: root.fontFamily }
              Item { width: Math.max(0, parent.width - ultHeader.implicitWidth - ultValue.implicitWidth); height: 1 }
              Text {
                id: ultValue
                text: root.activeUltLabel.toUpperCase()
                color: Color.accent
                font.family: root.fontFamily
                font.pixelSize: Style.font.caption
                font.bold: true
                anchors.verticalCenter: parent.verticalCenter
              }
            }
            ModePicker {
              id: ultGroup
              width: parent.width
              options: root.ultOptions()
              value: root.sony && root.sony.status ? root.sony.status.ult : "off"
              maximumColumns: 3
              foreground: root.foreground
              fontFamily: root.fontFamily
              cursorIndex: root.cursorActive && root.focusSection === "ult" ? root.selectedIndex : -1
              onChanged: function(value) { root.chooseUlt(value) }
              onHovered: function(index, inside) { root.hovered("ult", index, inside) }
            }
          }

          BorderSurface {
            id: codecCard
            visible: root.hasDevice
            width: parent.width
            implicitHeight: codecContent.implicitHeight + Style.space(20)
            color: root.ldacActive
              ? Style.selectedFillFor(root.foreground, Color.accent)
              : Style.normalFillFor(root.foreground, Color.accent)
            borderSpec: Border.controlSpec(root.ldacActive ? "selected" : "normal", root.foreground, Color.accent)
            radius: Style.cornerRadius

            Column {
              id: codecContent
              anchors.left: parent.left
              anchors.right: parent.right
              anchors.verticalCenter: parent.verticalCenter
              anchors.leftMargin: codecCard.borderLeft + Style.space(10)
              anchors.rightMargin: codecCard.borderRight + Style.space(10)
              spacing: Style.space(8)

              Row {
                width: parent.width
                PanelSectionHeader { id: codecHeader; text: "AUDIO CODEC"; foreground: root.foreground; fontFamily: root.fontFamily }
                Item { width: Math.max(0, parent.width - codecHeader.implicitWidth - fidelityLabel.implicitWidth); height: 1 }
                Text {
                  id: fidelityLabel
                  text: root.ldacActive ? "LDAC · HIGH FIDELITY" : root.activeCodecLabel.toUpperCase()
                  color: root.ldacActive ? Color.accent : Color.muted
                  font.family: root.fontFamily
                  font.pixelSize: Style.font.caption
                  font.bold: true
                  anchors.verticalCenter: parent.verticalCenter
                }
              }

              ModePicker {
                id: codecGroup
                width: parent.width
                options: root.codecOptions()
                value: root.sony && root.sony.status ? root.sony.status.codec : ""
                maximumColumns: 4
                foreground: root.foreground
                fontFamily: root.fontFamily
                cursorIndex: root.cursorActive && root.focusSection === "codec" ? root.selectedIndex : -1
                onChanged: function(value) { root.chooseCodec(value) }
                onHovered: function(index, inside) { root.hovered("codec", index, inside) }
              }

              Text {
                visible: !root.ldacAvailable
                width: parent.width
                text: root.hasCodec
                  ? "LDAC is unavailable. Disable multipoint and choose Priority on sound quality in Sony Sound Connect."
                  : "Codec controls are unavailable while audio is disconnected or a call profile is active."
                color: Color.muted
                font.family: root.fontFamily
                font.pixelSize: Style.font.caption
                wrapMode: Text.WordWrap
              }
            }
          }

          BorderSurface {
            id: feedbackRow
            property bool hovered: false
            width: parent.width
            implicitHeight: Style.space(38)
            color: hovered ? Style.hoverFillFor(root.foreground, Color.accent) : "transparent"
            borderSpec: hovered ? Border.controlSpec("hover-cursor", root.foreground, Color.accent) : Border.none()
            radius: Style.cornerRadius

            Row {
              anchors.left: parent.left
              anchors.right: parent.right
              anchors.verticalCenter: parent.verticalCenter
              anchors.leftMargin: feedbackRow.borderLeft + Style.space(8)
              anchors.rightMargin: feedbackRow.borderRight + Style.space(4)
              spacing: Style.space(8)

              Text {
                text: "SOUND FEEDBACK"
                color: root.foreground
                font.family: root.fontFamily
                font.pixelSize: Style.font.caption
                font.bold: true
                anchors.verticalCenter: parent.verticalCenter
              }
              Text {
                text: root.soundCues ? "ON" : "OFF"
                color: root.soundCues ? Color.accent : Color.muted
                font.family: root.fontFamily
                font.pixelSize: Style.font.caption
                font.bold: true
                anchors.verticalCenter: parent.verticalCenter
              }
              Item { width: Math.max(0, parent.width - parent.children[0].implicitWidth - parent.children[1].implicitWidth - feedbackSwitch.implicitWidth - parent.spacing * 3); height: 1 }
              ToggleSwitch {
                id: feedbackSwitch
                checked: root.soundCues
                interactive: false
                cursorRing: false
                trackHeight: Style.space(18)
                foreground: root.foreground
                accent: Color.accent
                anchors.verticalCenter: parent.verticalCenter
              }
            }

            MouseArea {
              anchors.fill: parent
              hoverEnabled: true
              cursorShape: Qt.PointingHandCursor
              onContainsMouseChanged: feedbackRow.hovered = containsMouse
              onClicked: root.persistSettings({ soundCues: !root.soundCues })
            }
          }

          Text {
            width: parent.width
            text: "n/a/v/o modes · 0/1/2 ULT · d LDAC · s sound · r refresh"
            color: Color.muted
            font.family: root.fontFamily
            font.pixelSize: Style.font.caption
            elide: Text.ElideRight
          }
        }
      }
    }
  }
}