// A living reference for Panama's shared visual language. This deliberately
// renders the production widgets instead of lookalike mock components, so a
// change to a control or Theme token is visible here immediately.

import Quickshell
import QtQuick
import QtQuick.Layouts
import qs.config
import qs.widgets

ShellRoot {
    FloatingWindow {
        id: galleryWindow

        title: "Panama Prism Gallery"
        visible: true
        implicitWidth: 1120
        implicitHeight: 760
        minimumSize: Qt.size(920, 640)
        color: Theme.bg

        Rectangle {
            anchors.fill: parent
            color: Theme.bg

            PrismEdge {
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.right: parent.right
                inset: 0
            }

            RowLayout {
                anchors.fill: parent
                anchors.margins: 34
                spacing: 34

                // Quiet editorial rail: enough context to make screenshots
                // self-explanatory without competing with the components.
                ColumnLayout {
                    Layout.preferredWidth: 222
                    Layout.fillHeight: true
                    spacing: 0

                    Rectangle {
                        Layout.preferredWidth: 38
                        Layout.preferredHeight: 38
                        radius: 12
                        color: Theme.alpha(Theme.fg, 0.07)

                        ThemedIcon {
                            anchors.centerIn: parent
                            size: 20
                            icon: "applications-graphics-symbolic"
                            tint: Theme.accent
                        }
                    }

                    Text {
                        Layout.topMargin: 20
                        text: "PRISM"
                        color: Theme.fg
                        font.family: Theme.fontFamily
                        font.pixelSize: 26
                        font.weight: Font.DemiBold
                        font.letterSpacing: 1.4
                    }

                    Text {
                        Layout.topMargin: 5
                        Layout.maximumWidth: 210
                        text: "Panama's living interface reference. Calm by default, vivid with purpose."
                        color: Theme.fgDim
                        wrapMode: Text.WordWrap
                        lineHeight: 1.25
                        font.family: Theme.fontFamily
                        font.pixelSize: Theme.fontSize
                    }

                    Item { Layout.preferredHeight: 36 }

                    Repeater {
                        model: [
                            { label: "Tokyo Night Moon", color: Theme.bgHighlight },
                            { label: "Signal blue", color: Theme.accent },
                            { label: "Prism orchid", color: Theme.accentSecondary }
                        ]

                        RowLayout {
                            required property var modelData
                            Layout.topMargin: 10
                            spacing: 10

                            Rectangle {
                                Layout.preferredWidth: 12
                                Layout.preferredHeight: 12
                                radius: 6
                                color: modelData.color
                            }

                            Text {
                                text: modelData.label
                                color: Theme.fgDim
                                font.family: Theme.fontFamily
                                font.pixelSize: Theme.fontSizeSmall
                            }
                        }
                    }

                    Item { Layout.fillHeight: true }

                    Text {
                        text: "REAL COMPONENTS · LIVE TOKENS"
                        color: Theme.fgMuted
                        font.family: Theme.fontFamily
                        font.pixelSize: 10
                        font.weight: Font.DemiBold
                        font.letterSpacing: 1.1
                    }
                }

                Rectangle {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    radius: Theme.popoverRadius
                    color: Theme.alpha(Theme.bgPopover, Theme.popoverAlpha)
                    border.width: 1
                    border.color: Theme.alpha(Theme.fg, 0.08)

                    PrismEdge {
                        anchors.top: parent.top
                        anchors.left: parent.left
                        anchors.right: parent.right
                        inset: parent.radius
                    }

                    Flickable {
                        anchors.fill: parent
                        anchors.margins: 30
                        contentWidth: width
                        contentHeight: content.implicitHeight
                        clip: true
                        boundsBehavior: Flickable.StopAtBounds

                        ColumnLayout {
                            id: content
                            width: parent.width
                            spacing: 28

                            RowLayout {
                                Layout.fillWidth: true

                                ColumnLayout {
                                    spacing: 4

                                    Text {
                                        text: "Interface inventory"
                                        color: Theme.fg
                                        font.family: Theme.fontFamily
                                        font.pixelSize: Theme.fontSizeTitle
                                        font.weight: Font.DemiBold
                                    }

                                    Text {
                                        text: "Production controls in their canonical states"
                                        color: Theme.fgDim
                                        font.family: Theme.fontFamily
                                        font.pixelSize: Theme.fontSize
                                    }
                                }

                                Item { Layout.fillWidth: true }

                                Pill {
                                    interactive: false
                                    horizontalPadding: 12

                                    ThemedIcon {
                                        size: 14
                                        icon: "emblem-ok-symbolic"
                                        tint: Theme.green
                                    }

                                    Text {
                                        text: "TOKYO NIGHT MOON"
                                        color: Theme.fgDim
                                        font.family: Theme.fontFamily
                                        font.pixelSize: 10
                                        font.weight: Font.DemiBold
                                        font.letterSpacing: 0.8
                                    }
                                }
                            }

                            ColumnLayout {
                                Layout.fillWidth: true
                                spacing: 12

                                Text {
                                    text: "QUICK CONTROLS"
                                    color: Theme.fgMuted
                                    font.family: Theme.fontFamily
                                    font.pixelSize: 10
                                    font.weight: Font.DemiBold
                                    font.letterSpacing: 1.1
                                }

                                RowLayout {
                                    Layout.fillWidth: true
                                    spacing: 12

                                    Toggle {
                                        id: wifiToggle
                                        Layout.fillWidth: true
                                        icon: "network-wireless-signal-excellent-symbolic"
                                        label: "Wi-Fi"
                                        sublabel: active ? "Connected" : "Off"
                                        active: true
                                        onToggled: active = !active
                                    }

                                    Toggle {
                                        id: bluetoothToggle
                                        Layout.fillWidth: true
                                        icon: "bluetooth-active-symbolic"
                                        label: "Bluetooth"
                                        sublabel: active ? "2 devices" : "Off"
                                        active: false
                                        onToggled: active = !active
                                    }

                                    Toggle {
                                        id: focusToggle
                                        Layout.fillWidth: true
                                        icon: "weather-clear-night-symbolic"
                                        label: "Focus"
                                        sublabel: active ? "Until 5:30" : "Available"
                                        active: false
                                        onToggled: active = !active
                                    }
                                }
                            }

                            ColumnLayout {
                                Layout.fillWidth: true
                                spacing: 12

                                Text {
                                    text: "CONTINUOUS VALUES"
                                    color: Theme.fgMuted
                                    font.family: Theme.fontFamily
                                    font.pixelSize: 10
                                    font.weight: Font.DemiBold
                                    font.letterSpacing: 1.1
                                }

                                Rectangle {
                                    Layout.fillWidth: true
                                    Layout.preferredHeight: 126
                                    radius: Theme.cardRadius
                                    color: Theme.alpha(Theme.fg, 0.045)

                                    ColumnLayout {
                                        anchors.fill: parent
                                        anchors.margins: 18
                                        spacing: 12

                                        RowLayout {
                                            Layout.fillWidth: true

                                            Text {
                                                text: "System audio"
                                                color: Theme.fg
                                                font.family: Theme.fontFamily
                                                font.pixelSize: Theme.fontSize
                                                font.weight: Font.Medium
                                            }

                                            Item { Layout.fillWidth: true }

                                            Text {
                                                text: Math.round(volumeSlider.value * 100) + "%"
                                                color: Theme.fgDim
                                                font.family: Theme.fontFamily
                                                font.features: Theme.tabularFigures
                                                font.pixelSize: Theme.fontSize
                                            }
                                        }

                                        ValueSlider {
                                            id: volumeSlider
                                            Layout.fillWidth: true
                                            value: 0.68
                                            icon: "audio-volume-high-symbolic"
                                            onMoved: newValue => volumeSlider.value = newValue
                                        }
                                    }
                                }
                            }

                            ColumnLayout {
                                Layout.fillWidth: true
                                spacing: 12

                                Text {
                                    text: "BAR MATERIAL"
                                    color: Theme.fgMuted
                                    font.family: Theme.fontFamily
                                    font.pixelSize: 10
                                    font.weight: Font.DemiBold
                                    font.letterSpacing: 1.1
                                }

                                Rectangle {
                                    Layout.fillWidth: true
                                    Layout.preferredHeight: 74
                                    radius: Theme.cardRadius
                                    color: Theme.alpha(Theme.bg, 0.62)

                                    Row {
                                        anchors.centerIn: parent
                                        spacing: 8

                                        Pill {
                                            ThemedIcon {
                                                size: 15
                                                icon: "view-grid-symbolic"
                                                tint: Theme.accent
                                            }
                                            Text {
                                                text: "1  2  3"
                                                color: Theme.fg
                                                font.family: Theme.fontFamily
                                                font.pixelSize: Theme.fontSizeSmall
                                            }
                                        }

                                        Pill {
                                            ThemedIcon {
                                                size: 15
                                                icon: "edit-copy-symbolic"
                                                tint: Theme.fgDim
                                            }
                                            Text {
                                                text: "Clipboard"
                                                color: Theme.fg
                                                font.family: Theme.fontFamily
                                                font.pixelSize: Theme.fontSizeSmall
                                            }
                                        }

                                        Pill {
                                            ThemedIcon {
                                                size: 15
                                                icon: "appointment-soon-symbolic"
                                                tint: Theme.fgDim
                                            }
                                            Text {
                                                text: "Tue Aug 18  ·  4:46 AM"
                                                color: Theme.fg
                                                font.family: Theme.fontFamily
                                                font.features: Theme.tabularFigures
                                                font.pixelSize: Theme.fontSizeSmall
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
