import QtQuick
import QtQuick.Controls.Basic
import QtQuick.Layouts
import "components"
import "." as App

Rectangle {
    id: root
    color: App.Theme.bgCanvas

    RowLayout {
        anchors.fill: parent
        spacing: 0

        // ===== 主内容区 =====
        ColumnLayout {
            Layout.fillWidth: true
            Layout.fillHeight: true
            spacing: 0

            // Tab Bar
            Rectangle {
                Layout.fillWidth: true
                implicitHeight: 48
                color: App.Theme.bgCanvas

                Row {
                    anchors.left: parent.left
                    anchors.leftMargin: App.Theme.space5
                    anchors.bottom: parent.bottom
                    spacing: App.Theme.space2

                    Repeater {
                        model: ["图片生成", "款式设计", "历史记录"]
                        delegate: Rectangle {
                            width: tabText.implicitWidth + App.Theme.space5 * 2
                            height: 40
                            color: "transparent"

                            property bool isActive: index === appState.currentTab

                            Text {
                                id: tabText
                                anchors.centerIn: parent
                                text: modelData
                                font.family: App.Theme.fontFamily
                                font.pointSize: App.Theme.fontBase
                                font.weight: parent.isActive ? Font.DemiBold : Font.Normal
                                color: parent.isActive
                                    ? App.Theme.accent
                                    : (mouseArea.containsMouse
                                        ? App.Theme.textPrimary
                                        : App.Theme.textSecondary)
                            }

                            // 激活态下划线
                            Rectangle {
                                anchors.bottom: parent.bottom
                                anchors.left: parent.left
                                anchors.right: parent.right
                                anchors.leftMargin: App.Theme.space4
                                anchors.rightMargin: App.Theme.space4
                                height: 2
                                radius: 1
                                color: App.Theme.accent
                                visible: parent.isActive
                            }

                            MouseArea {
                                id: mouseArea
                                anchors.fill: parent
                                hoverEnabled: true
                                cursorShape: Qt.PointingHandCursor
                                onClicked: appState.setTab(index)
                            }
                        }
                    }
                }

                // 底部分隔线
                Rectangle {
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.bottom: parent.bottom
                    height: 1
                    color: App.Theme.divider
                }
            }

            // Tab Content
            StackLayout {
                Layout.fillWidth: true
                Layout.fillHeight: true
                currentIndex: appState.currentTab

                ImageGenTab {}

                // 款式设计 — 占位
                Item {
                    Text {
                        anchors.centerIn: parent
                        text: "款式设计 tab 内容\n(QML PoC 暂未实现)"
                        color: App.Theme.textTertiary
                        font.family: App.Theme.fontFamily
                        font.pointSize: App.Theme.fontLg
                        horizontalAlignment: Text.AlignHCenter
                    }
                }

                HistoryTab {}
            }
        }

        // ===== 任务队列 sidebar =====
        Rectangle {
            Layout.preferredWidth: 200
            Layout.fillHeight: true
            color: App.Theme.bgSurface

            // 左侧分隔线
            Rectangle {
                anchors.left: parent.left
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                width: 1
                color: App.Theme.divider
            }

            ColumnLayout {
                anchors.fill: parent
                spacing: 0

                // Sidebar header（与主区 tab bar 等高 48px）
                Rectangle {
                    Layout.fillWidth: true
                    implicitHeight: 48
                    color: App.Theme.bgSurface

                    RowLayout {
                        anchors.left: parent.left
                        anchors.right: parent.right
                        anchors.leftMargin: App.Theme.space4
                        anchors.rightMargin: App.Theme.space4
                        anchors.verticalCenter: parent.verticalCenter
                        spacing: App.Theme.space2

                        Label {
                            text: "任务队列"
                            font.family: App.Theme.fontFamily
                            font.pointSize: App.Theme.fontBase
                            font.weight: Font.DemiBold
                            color: App.Theme.textPrimary
                        }
                        Item { Layout.fillWidth: true }
                        Label {
                            visible: taskQueue.runningCount + taskQueue.pendingCount > 0
                            text: taskQueue.runningCount + taskQueue.pendingCount + " 进行中"
                            font.family: App.Theme.fontFamily
                            font.pointSize: App.Theme.fontXs
                            color: App.Theme.textSecondary
                        }
                    }

                    // 底部分隔线
                    Rectangle {
                        anchors.left: parent.left
                        anchors.right: parent.right
                        anchors.bottom: parent.bottom
                        height: 1
                        color: App.Theme.divider
                    }
                }

                // 列表
                ListView {
                    id: taskList
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.margins: App.Theme.space2
                    spacing: 6
                    clip: true

                    model: taskQueue.model

                    // 空状态占位
                    Label {
                        anchors.centerIn: parent
                        text: "暂无任务"
                        font.family: App.Theme.fontFamily
                        font.pointSize: App.Theme.fontSm
                        color: App.Theme.textTertiary
                        visible: taskList.count === 0
                    }

                    delegate: Rectangle {
                        required property string taskId
                        required property string prompt
                        required property string status
                        required property real progress
                        required property string statusText
                        required property string elapsed

                        width: ListView.view.width
                        height: 56
                        radius: App.Theme.radiusSm
                        color: itemMouse.containsMouse ? App.Theme.bgHover : "transparent"
                        border.width: 1
                        border.color: App.Theme.divider

                        ColumnLayout {
                            anchors.fill: parent
                            anchors.margins: App.Theme.space2
                            spacing: 2

                            // 第一行: prompt 摘要（最多约 14 字）
                            Text {
                                text: prompt.length > 14 ? prompt.substring(0, 14) + "…" : prompt
                                color: App.Theme.textPrimary
                                font.family: App.Theme.fontFamily
                                font.pointSize: App.Theme.fontXs
                                Layout.fillWidth: true
                                elide: Text.ElideRight
                            }

                            // 第二行: 状态彩色 + elapsed
                            RowLayout {
                                Layout.fillWidth: true
                                spacing: 4

                                Text {
                                    text: statusText
                                    color: status === "completed" ? App.Theme.success
                                         : status === "failed"    ? App.Theme.danger
                                         : status === "running"   ? App.Theme.accent
                                         : App.Theme.warning  // pending
                                    font.family: App.Theme.fontFamily
                                    font.pointSize: App.Theme.fontXs
                                    Layout.fillWidth: true
                                    elide: Text.ElideRight
                                }
                                Text {
                                    visible: elapsed.length > 0
                                    text: elapsed
                                    color: App.Theme.textTertiary
                                    font.family: App.Theme.fontFamily
                                    font.pointSize: App.Theme.fontXs
                                }
                            }

                            // 第三行: running 时显示细进度条
                            Rectangle {
                                visible: status === "running"
                                Layout.fillWidth: true
                                Layout.preferredHeight: 2
                                color: App.Theme.bgSubtle
                                radius: 1

                                Rectangle {
                                    width: parent.width * Math.max(0.05, Math.min(progress, 1.0))
                                    height: parent.height
                                    color: App.Theme.accent
                                    radius: 1
                                }
                            }
                        }

                        MouseArea {
                            id: itemMouse
                            anchors.fill: parent
                            hoverEnabled: true
                            cursorShape: Qt.PointingHandCursor
                            acceptedButtons: Qt.LeftButton | Qt.RightButton
                            onClicked: function(mouse) {
                                if (mouse.button === Qt.RightButton
                                    && (status === "pending" || status === "running")) {
                                    taskQueue.cancelTask(taskId)
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}