import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Quickshell
import Quickshell.Wayland
import qs.Commons
import qs.Services
import qs.Widgets

NLoader {
  id: root

  content: Component {
    NPanel {
      id: demoPanel

      // Override hide function to animate first
      function hide() {
        // Start hide animation
        bgRect.scaleValue = 0.8
        bgRect.opacityValue = 0.0

        // Hide after animation completes
        hideTimer.start()
      }

      // Connect to NPanel's dismissed signal to handle external close events
      Connections {
        target: demoPanel
        function onDismissed() {
          // Start hide animation
          bgRect.scaleValue = 0.8
          bgRect.opacityValue = 0.0

          // Hide after animation completes
          hideTimer.start()
        }
      }

      // Also handle visibility changes from external sources
      onVisibleChanged: {
        if (!visible && bgRect.opacityValue > 0) {
          // Start hide animation
          bgRect.scaleValue = 0.8
          bgRect.opacityValue = 0.0

          // Hide after animation completes
          hideTimer.start()
        }
      }

      // Timer to hide panel after animation
      Timer {
        id: hideTimer
        interval: Style.animationSlow
        repeat: false
        onTriggered: {
          demoPanel.visible = false
          demoPanel.dismissed()
        }
      }

      // Ensure panel shows itself once created
      Component.onCompleted: {
        show()
      }

      Rectangle {
        id: bgRect
        color: Colors.mSurfaceVariant
        radius: Style.radiusMedium * scaling
        border.color: Colors.mOutlineVariant
        border.width: Math.max(1, Style.borderThin * scaling)
        width: 500 * scaling
        height: 900 * scaling
        anchors.centerIn: parent

        // Animation properties
        property real scaleValue: 0.8
        property real opacityValue: 0.0

        scale: scaleValue
        opacity: opacityValue

        // Animate in when component is completed
        Component.onCompleted: {
          scaleValue = 1.0
          opacityValue = 1.0
        }

        // Prevent closing when clicking in the panel bg
        MouseArea {
          anchors.fill: parent
        }

        // Animation behaviors
        Behavior on scale {
          NumberAnimation {
            duration: Style.animationSlow
            easing.type: Easing.OutExpo
          }
        }

        Behavior on opacity {
          NumberAnimation {
            duration: Style.animationNormal
            easing.type: Easing.OutQuad
          }
        }

        ColumnLayout {
          anchors.fill: parent
          anchors.margins: Style.marginXL * scaling

          NText {
            text: "DemoPanel"
            color: Colors.mPrimary
            font.pointSize: Style.fontSizeXL * scaling
            font.weight: Style.fontWeightBold
            Layout.alignment: Qt.AlignHCenter
          }

          ColumnLayout {

            spacing: Style.marginMedium * scaling

            // NSlider
            ColumnLayout {
              spacing: Style.marginLarge * scaling
              NText {
                text: "Scaling"
                color: Colors.mSecondary
                font.weight: Style.fontWeightBold
              }
              NText {
                text: `${Math.round(ScalingService.overrideScale * 100)}%`
                Layout.alignment: Qt.AlignVCenter
              }
              RowLayout {
                spacing: Style.marginSmall * scaling
                NSlider {
                  id: scaleSlider
                  from: 0.6
                  to: 1.8
                  stepSize: 0.01
                  value: ScalingService.overrideScale
                  implicitWidth: bgRect.width * 0.75
                  onMoved: {

                  }
                  onPressedChanged: {
                    ScalingService.overrideScale = value
                    ScalingService.overrideEnabled = true
                  }
                }
                NIconButton {
                  icon: "refresh"
                  tooltipText: "Reset Scaling"
                  fontPointSize: Style.fontSizeLarge * scaling
                  onClicked: {
                    ScalingService.overrideEnabled = false
                    ScalingService.overrideScale = 1.0
                  }
                }
              }
              NDivider {
                Layout.fillWidth: true
              }
            }

            // NIconButton
            ColumnLayout {
              spacing: Style.marginLarge * scaling
              NText {
                text: "NIconButton"
                color: Colors.mSecondary
                font.weight: Style.fontWeightBold
              }

              NIconButton {
                id: myIconButton
                icon: "celebration"
                tooltipText: "A nice tooltip"
                fontPointSize: Style.fontSizeLarge * scaling
              }

              NDivider {
                Layout.fillWidth: true
              }
            }

            // NToggle
            ColumnLayout {
              spacing: Style.marginMedium * scaling
              NText {
                text: "NToggle"
                color: Colors.mSecondary
                font.weight: Style.fontWeightBold
              }

              NToggle {
                label: "Label"
                description: "Description"
                onToggled: checked => {
                             console.log("[DemoPanel] NToggle:", checked)
                           }
              }

              NDivider {
                Layout.fillWidth: true
              }
            }

            // NComboBox
            ColumnLayout {
              spacing: Style.marginMedium * scaling
              NText {
                text: "NComboBox"
                color: Colors.mSecondary
                font.weight: Style.fontWeightBold
              }

              NComboBox {
                label: "Animal"
                description: "What's your favorite?"
                model: ListModel {
                  ListElement {
                    key: "cat"
                    name: "Cat"
                  }
                  ListElement {
                    key: "dog"
                    name: "Dog"
                  }
                  ListElement {
                    key: "bird"
                    name: "Bird"
                  }
                  ListElement {
                    key: "fish"
                    name: "Fish"
                  }
                  ListElement {
                    key: "turtle"
                    name: "Turtle"
                  }
                  ListElement {
                    key: "elephant"
                    name: "Elephant"
                  }
                  ListElement {
                    key: "tiger"
                    name: "Tiger"
                  }
                }
                currentKey: "dog"
                onSelected: function (key) {
                  console.log("[DemoPanel] NComboBox: selected ", key)
                }
              }

              NDivider {
                Layout.fillWidth: true
              }
            }

            // NTextInput
            ColumnLayout {
              spacing: Style.marginMedium * scaling
              NText {
                text: "NTextInput"
                color: Colors.mSecondary
                font.weight: Style.fontWeightBold
              }

              NTextInput {
                label: "Input label"
                description: "A cool description"
                text: "Type anything"
                Layout.fillWidth: true
                onEditingFinished: {

                }
              }
              NDivider {
                Layout.fillWidth: true
              }
            }

            // NBusyIndicator
            ColumnLayout {
              spacing: Style.marginMedium * scaling
              NText {
                text: "NBusyIndicator"
                color: Colors.mSecondary
                font.weight: Style.fontWeightBold
              }

              NBusyIndicator {}

              NDivider {
                Layout.fillWidth: true
              }
            }

            // Brightness Control
            ColumnLayout {
              spacing: Style.marginMedium * scaling
              NText {
                text: "Brightness Control"
                color: Colors.mSecondary
                font.weight: Style.fontWeightBold
              }

              NText {
                text: `Brightness: ${Math.round(BrightnessService.brightness)}%`
                Layout.alignment: Qt.AlignVCenter
              }

              RowLayout {
                spacing: Style.marginSmall * scaling
                NIconButton {
                  icon: "brightness_low"
                  tooltipText: "Decrease Brightness"
                  fontPointSize: Style.fontSizeLarge * scaling
                  onClicked: {
                    BrightnessService.decreaseBrightness()
                  }
                }
                NSlider {
                  from: 0
                  to: 100
                  stepSize: 1
                  value: BrightnessService.brightness
                  implicitWidth: bgRect.width * 0.5
                  onMoved: {
                    BrightnessService.setBrightnessDebounced(value)
                  }
                }
                NIconButton {
                  icon: "brightness_high"
                  tooltipText: "Increase Brightness"
                  fontPointSize: Style.fontSizeLarge * scaling
                  onClicked: {
                    BrightnessService.increaseBrightness()
                  }
                }
              }

              NText {
                text: `Method: ${BrightnessService.currentMethod} | Available: ${BrightnessService.available}`
                color: Colors.mOnSurfaceVariant
                font.pointSize: Style.fontSizeSmall * scaling
                Layout.alignment: Qt.AlignHCenter
              }

              NDivider {
                Layout.fillWidth: true
              }
            }
          }
        }
      }
    }
  }
}