import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import qs.Services
import qs.Widgets

ColumnLayout {
  id: root

  spacing: 0

  ScrollView {
    id: scrollView

    Layout.fillWidth: true
    Layout.fillHeight: true
    padding: Style.marginMedium * scaling
    clip: true
    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
    ScrollBar.vertical.policy: ScrollBar.AsNeeded

    ColumnLayout {
      width: scrollView.availableWidth
      spacing: 0

      Item {
        Layout.fillWidth: true
        Layout.preferredHeight: 0
      }

      ColumnLayout {
        spacing: Style.marginTiny * scaling
        Layout.fillWidth: true

        NText {
          text: "Screen Recording"
          font.pointSize: Style.fontSizeXL * scaling
          font.weight: Style.fontWeightBold
          color: Colors.textPrimary
          Layout.bottomMargin: Style.marginSmall * scaling
        }

        // Output Directory
        ColumnLayout {
          spacing: Style.marginSmall * scaling
          Layout.fillWidth: true
          Layout.topMargin: Style.marginSmall * scaling

          ColumnLayout {
            spacing: Style.marginTiny * scaling

            NText {
              text: "Output Directory"
              font.weight: Style.fontWeightBold
              color: Colors.textPrimary
            }

            NText {
              text: "Directory where screen recordings will be saved"
              font.pointSize: Style.fontSizeSmall * scaling
              color: Colors.textSecondary
              wrapMode: Text.WordWrap
            }
          }

          NTextInput {
            text: Settings.data.screenRecorder.directory
            onEditingFinished: {
              Settings.data.screenRecorder.directory = text
            }
          }

          ColumnLayout {
            spacing: Style.marginSmall * scaling
            Layout.fillWidth: true
            Layout.topMargin: Style.marginMedium * scaling
            // Show Cursor
            NToggle {
              label: "Show Cursor"
              description: "Record mouse cursor in the video"
              value: Settings.data.screenRecorder.showCursor
              onToggled: function (newValue) {
                Settings.data.screenRecorder.showCursor = newValue
              }
            }
          }
        }

        NDivider {
          Layout.fillWidth: true
          Layout.topMargin: Style.marginLarge * 2 * scaling
          Layout.bottomMargin: Style.marginLarge * scaling
        }

        // Video Settings
        ColumnLayout {
          spacing: Style.marginTiny * scaling
          Layout.fillWidth: true

          NText {
            text: "Video Settings"
            font.pointSize: Style.fontSizeXL * scaling
            font.weight: Style.fontWeightBold
            color: Colors.textPrimary
            Layout.bottomMargin: Style.marginSmall * scaling
          }

          // Frame Rate
          ColumnLayout {
            spacing: Style.marginSmall * scaling
            Layout.fillWidth: true
            Layout.topMargin: Style.marginSmall * scaling

            ColumnLayout {
              spacing: Style.marginTiny * scaling
              NText {
                text: "Frame Rate"
                font.weight: Style.fontWeightBold
                color: Colors.textPrimary
              }

              NText {
                text: "Target frame rate for screen recordings (default: 60)"
                font.pointSize: Style.fontSizeSmall * scaling
                color: Colors.textSecondary
                wrapMode: Text.WordWrap
              }
            }
            NComboBox {
              optionsKeys: ["30", "60", "120", "2Style.marginLarge * scaling0"]
              optionsLabels: ["30 FPS", "60 FPS", "120 FPS", "2Style.marginLarge * scaling0 FPS"]
              currentKey: Settings.data.screenRecorder.frameRate
              onSelected: function (key) {
                Settings.data.screenRecorder.frameRate = key
              }
            }
          }

          // Video Quality
          ColumnLayout {
            spacing: Style.marginSmall * scaling
            Layout.fillWidth: true
            Layout.topMargin: Style.marginSmall * scaling

            NText {
              text: "Video Quality"
              font.pointSize: 13
              font.weight: Style.fontWeightBold
              color: Colors.textPrimary
            }

            NText {
              text: "Higher quality results in larger file sizes"
              font.pointSize: 12
              color: Colors.textSecondary
              wrapMode: Text.WordWrap
              Layout.fillWidth: true
            }

            NComboBox {
              optionsKeys: ["medium", "high", "very_high", "ultra"]
              optionsLabels: ["Medium", "High", "Very High", "Ultra"]
              currentKey: Settings.data.screenRecorder.quality
              onSelected: function (key) {
                Settings.data.screenRecorder.quality = key
              }
            }
          }

          // Video Codec
          ColumnLayout {
            spacing: Style.marginTiny * scaling
            Layout.fillWidth: true
            Layout.topMargin: Style.marginSmall * scaling

            NText {
              text: "Video Codec"
              font.weight: Style.fontWeightBold
              color: Colors.textPrimary
            }

            NText {
              text: "Different codecs offer different compression and compatibility"
              font.pointSize: Style.fontSizeSmall * scaling
              color: Colors.textSecondary
              wrapMode: Text.WordWrap
              Layout.fillWidth: true
            }

            NComboBox {
              optionsKeys: ["h264", "hevc", "av1", "vp8", "vp9"]
              optionsLabels: ["H264", "HEVC", "AV1", "VP8", "VP9"]
              currentKey: Settings.data.screenRecorder.videoCodec
              onSelected: function (key) {
                Settings.data.screenRecorder.videoCodec = key
              }
            }
          }

          // Color Range
          ColumnLayout {
            spacing: Style.marginSmall * scaling
            Layout.fillWidth: true
            Layout.topMargin: Style.marginSmall * scaling

            NText {
              text: "Color Range"

              font.weight: Style.fontWeightBold
              color: Colors.textPrimary
            }

            NText {
              text: "Limited is recommended for better compatibility"
              font.pointSize: Style.fontSizeSmall * scaling
              color: Colors.textSecondary
              wrapMode: Text.WordWrap
              Layout.fillWidth: true
            }

            NComboBox {
              optionsKeys: ["limited", "full"]
              optionsLabels: ["Limited", "Full"]
              currentKey: Settings.data.screenRecorder.colorRange
              onSelected: function (key) {
                Settings.data.screenRecorder.colorRange = key
              }
            }
          }
        }

        NDivider {
          Layout.fillWidth: true
          Layout.topMargin: Style.marginLarge * 2 * scaling
          Layout.bottomMargin: Style.marginLarge * scaling
        }

        // Audio Settings
        ColumnLayout {
          spacing: Style.spacingTiny * scaling
          Layout.fillWidth: true

          NText {
            text: "Audio Settings"
            font.pointSize: Style.fontSizeXL * scaling
            font.weight: Style.fontWeightBold
            color: Colors.textPrimary
            Layout.bottomMargin: Style.marginSmall * scaling
          }

          // Audio Source
          ColumnLayout {
            spacing: Style.marginSmall * scaling
            Layout.fillWidth: true
            Layout.topMargin: Style.marginSmall * scaling

            NText {
              text: "Audio Source"

              font.weight: Style.fontWeightBold
              color: Colors.textPrimary
            }

            NText {
              text: "Audio source to capture during recording"
              font.pointSize: Style.fontSizeSmall * scaling
              color: Colors.textSecondary
              wrapMode: Text.WordWrap
              Layout.fillWidth: true
            }

            NComboBox {
              optionsKeys: ["default_output", "default_input", "both"]
              optionsLabels: ["System Audio", "Microphone", "System Audio + Microphone"]
              currentKey: Settings.data.screenRecorder.audioSource
              onSelected: function (key) {
                Settings.data.screenRecorder.audioSource = key
              }
            }
          }

          // Audio Codec
          ColumnLayout {
            spacing: Style.marginSmall * scaling
            Layout.fillWidth: true
            Layout.topMargin: Style.marginSmall * scaling

            NText {
              text: "Audio Codec"
              font.pointSize: 13
              font.weight: Style.fontWeightBold
              color: Colors.textPrimary
            }

            NText {
              text: "Opus is recommended for best performance and smallest audio size"
              font.pointSize: 12
              color: Colors.textSecondary
              wrapMode: Text.WordWrap
              Layout.fillWidth: true
            }

            NComboBox {
              optionsKeys: ["opus", "aac"]
              optionsLabels: ["OPUS", "AAC"]
              currentKey: Settings.data.screenRecorder.audioCodec
              onSelected: function (key) {
                Settings.data.screenRecorder.audioCodec = key
              }
            }
          }
        }
      }
    }
  }
}