import Quickshell
import Quickshell.Wayland
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Effects
import qs.Settings
import qs.Widgets.SettingsWindow.Tabs
import qs.Widgets.SettingsWindow.Tabs.Components

PanelWindow {
    id: panelMain
    implicitHeight: screen.height / 2
    implicitWidth: screen.width / 2
    color: "transparent"

    property int activeTabIndex: 0

    WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand


    Component {
        id: generalSettings
        General {}
    }

    Component {
        id: barSettings
        Bar {}
    }

    Component {
        id: timeWeatherSettings
        TimeWeather {}
    }

    Component {
        id: recordingSettings
        Recording {}
    }

    Component {
        id: networkSettings
        Network {}
    }

    Component {
        id: miscSettings
        Misc {}
    }

    Component {
        id: aboutSettings
        About {}
    }

    Component {
        id: displaySettings
        Display {}
    }

    Component {
        id: wallpaperSettings
        Wallpaper {}
    }

    Rectangle {
        id: background
        color: Theme.backgroundPrimary
        anchors.fill: parent
        radius: 20
        border.color: Theme.outline
        border.width: 1

        MultiEffect {
            source: background
            anchors.fill: background
            shadowEnabled: true
            shadowColor: Theme.shadow
            shadowOpacity: 0.3
            shadowHorizontalOffset: 0
            shadowVerticalOffset: 2
            shadowBlur: 12
        }
    }


    Rectangle {
        id: settings
        color: Theme.backgroundPrimary
        anchors {
            left: tabs.right
            top: parent.top
            bottom: parent.bottom
            right: parent.right
            margins: 12
        }
        topRightRadius: 20
        bottomRightRadius: 20


        Rectangle {
            id: headerArea
            anchors {
                top: parent.top
                left: parent.left
                right: parent.right
                margins: 16
            }
            height: 48
            color: "transparent"

            RowLayout {
                anchors.fill: parent
                spacing: 12

    
                Text {
                    id: tabName
                    text: wallpaperSelector.visible ? "Select Wallpaper" : (activeTabIndex === 0 ? "General" : 
                         activeTabIndex === 1 ? "Bar" : 
                         activeTabIndex === 2 ? "Time & Weather" : 
                         activeTabIndex === 3 ? "Recording" : 
                         activeTabIndex === 4 ? "Network" : 
                         activeTabIndex === 5 ? "Display" : 
                         activeTabIndex === 6 ? "Wallpaper" : 
                         activeTabIndex === 7 ? "Misc" : 
                         activeTabIndex === 8 ? "About" : "General")
                    font.pixelSize: 18
                    font.bold: true
                    color: Theme.textPrimary
                    Layout.fillWidth: true
                }

                // Wallpaper Selection Button (only visible on Wallpaper tab)
                Rectangle {
                    width: 32
                    height: 32
                    radius: 16
                    color: wallpaperButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
                    border.color: Theme.accentPrimary
                    border.width: 1
                    visible: activeTabIndex === 6 // Wallpaper tab index

                    Text {
                        anchors.centerIn: parent
                        text: "image"
                        font.family: wallpaperButtonArea.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined"
                        font.pixelSize: 18
                        color: wallpaperButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
                    }

                    MouseArea {
                        id: wallpaperButtonArea
                        anchors.fill: parent
                        hoverEnabled: true
                        cursorShape: Qt.PointingHandCursor
                        onClicked: {
                            // Show the wallpaper selector
                            wallpaperSelector.show();
                        }
                    }
                }

                Rectangle {
                    width: 32
                    height: 32
                    radius: 16
                    color: closeButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
                    border.color: Theme.accentPrimary
                    border.width: 1

                    Text {
                        anchors.centerIn: parent
                        text: "close"
                        font.family: closeButtonArea.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined"
                        font.pixelSize: 18
                        color: closeButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
                    }

                    MouseArea {
                        id: closeButtonArea
                        anchors.fill: parent
                        hoverEnabled: true
                        cursorShape: Qt.PointingHandCursor
                        onClicked: panelMain.visible = false
                    }
                }
            }
        }


        Rectangle {
            anchors {
                top: headerArea.bottom
                left: parent.left
                right: parent.right
                margins: 16
            }
            height: 1
            color: Theme.outline
            opacity: 0.3
        }

        Item {
            id: settingsContainer
            anchors {
                top: headerArea.bottom
                left: parent.left
                right: parent.right
                bottom: parent.bottom
                margins: 24
                topMargin: 32
            }

    
            Loader {
                id: settingsLoader
                anchors.fill: parent
                sourceComponent: generalSettings
                opacity: 1
                visible: opacity > 0

                Behavior on opacity {
                    NumberAnimation {
                        duration: 150
                        easing.type: Easing.InOutQuad
                    }
                }
            }

    
            Loader {
                id: settingsLoader2
                anchors.fill: parent
                opacity: 0
                visible: opacity > 0

                Behavior on opacity {
                    NumberAnimation {
                        duration: 150
                        easing.type: Easing.InOutQuad
                    }
                }
            }

            // Wallpaper Selector Component
            WallpaperSelector {
                id: wallpaperSelector
                anchors.fill: parent
            }
        }
    }

    
    Rectangle {
        id: tabs
        color: Theme.surface
        width: screen.width / 9
        height: panelMain.height
        topLeftRadius: 20
        bottomLeftRadius: 20
        border.color: Theme.outline
        border.width: 1

        Column {
            width: parent.width
            spacing: 0
            topPadding: 8
            bottomPadding: 8

            Repeater {
                id: repeater
                model: [
                    { icon: "tune", text: "General" },
                    { icon: "space_dashboard", text: "Bar" },
                    { icon: "schedule", text: "Time & Weather" },
                    { icon: "photo_camera", text: "Recording" },
                    { icon: "wifi", text: "Network" },
                    { icon: "monitor", text: "Display" },
                    { icon: "wallpaper", text: "Wallpaper" },
                    { icon: "settings_suggest", text: "Misc" },
                    { icon: "info", text: "About" }
                ]

                delegate: Rectangle {
                    width: tabs.width
                    height: 48
                    color: "transparent"

                    RowLayout {
                        anchors.fill: parent
                        spacing: 8

                        Rectangle {
                            id: activeIndicator
                            Layout.leftMargin: 8
                            Layout.preferredWidth: 3
                            Layout.preferredHeight: 24
                            Layout.alignment: Qt.AlignVCenter
                            radius: 2
                            color: Theme.accentPrimary
                            opacity: index === activeTabIndex ? 1 : 0
                            Behavior on opacity { NumberAnimation { duration: 200 } }
                        }

                        Label {
                            id: icon
                            text: modelData.icon
                            font.family: "Material Symbols Outlined"
                            font.pixelSize: 24
                            color: index === activeTabIndex ? Theme.accentPrimary : Theme.textPrimary
                            opacity: index === activeTabIndex ? 1 : 0.8
                            Layout.leftMargin: 20
                            Layout.preferredWidth: 24
                            Layout.preferredHeight: 24
                            Layout.alignment: Qt.AlignVCenter
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                        }

                        Label {
                            id: label
                            text: modelData.text
                            font.pixelSize: 16
                            color: index === activeTabIndex ? Theme.accentPrimary : 
                                   (tabMouseArea.containsMouse ? Theme.accentPrimary : Theme.textSecondary)
                            font.weight: index === activeTabIndex ? Font.DemiBold : 
                                       (tabMouseArea.containsMouse ? Font.DemiBold : Font.Normal)
                            Layout.fillWidth: true
                            Layout.preferredHeight: 24
                            Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
                            Layout.leftMargin: 4
                            Layout.rightMargin: 16
                            verticalAlignment: Text.AlignVCenter
                        }
                    }

                    MouseArea {
                        id: tabMouseArea
                        anchors.fill: parent
                        hoverEnabled: true
                        cursorShape: Qt.PointingHandCursor
                        onClicked: {
                            activeTabIndex = index;
                
                            const newComponent = {
                                0: generalSettings,
                                1: barSettings,
                                2: timeWeatherSettings,
                                3: recordingSettings,
                                4: networkSettings,
                                5: displaySettings,
                                6: wallpaperSettings,
                                7: miscSettings,
                                8: aboutSettings
                            }[index];

                
                            const tabNames = [
                                "General",
                                "Bar",
                                "Time & Weather", 
                                "Recording",
                                "Network",
                                "Display",
                                "Wallpaper",
                                "Misc",
                                "About"
                            ];
                            tabName.text = tabNames[index];

                
                            if (settingsLoader.opacity === 1) {
                    
                                settingsLoader2.sourceComponent = newComponent;
                                settingsLoader.opacity = 0;
                                settingsLoader2.opacity = 1;
                            } else {
                    
                                settingsLoader.sourceComponent = newComponent;
                                settingsLoader2.opacity = 0;
                                settingsLoader.opacity = 1;
                            }

                
                            // Tab colors and indicators are now handled by property bindings
                        }
                    }

                    Rectangle {
                        width: parent.width
                        height: 1
                        color: Theme.outline
                        opacity: 0.6
                        visible: index < (repeater.count - 1)
                        anchors.bottom: parent.bottom
                    }
                }
            }
        }
    }
}