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

Item {
    id: tab

    // ===== 状态 =====
    property var refImages: []           // list[str] 参考图本地路径
    property string currentTaskId: ""    // 当前进行中的任务 id（同一时刻最多一个）
    property string lastResultPath: ""   // 最近一次 taskCompleted 的图片路径
    property string statusText: "● 就绪"
    property color statusColor: App.Theme.success

    function addRefPath(p) {
        if (!p) return
        if (tab.refImages.indexOf(p) >= 0) return  // 去重
        tab.refImages = tab.refImages.concat([p])
    }
    function addRefPaths(paths) {
        for (var i = 0; i < (paths || []).length; i++) {
            addRefPath(paths[i])
        }
    }
    function removeRefAt(idx) {
        var copy = tab.refImages.slice()
        copy.splice(idx, 1)
        tab.refImages = copy
    }

    FileDialog {
        id: addImageDialog
        title: "选择参考图片"
        fileMode: FileDialog.OpenFiles
        nameFilters: ["图片 (*.png *.jpg *.jpeg *.webp *.bmp)"]
        onAccepted: tab.addRefPaths(imageGen.normalizeFileUrls(selectedFiles))
    }

    // ===== 桥层信号 =====
    Connections {
        target: imageGen

        function onTaskSubmitted(taskId) {
            tab.currentTaskId = taskId
            tab.statusText = "● 已提交"
            tab.statusColor = App.Theme.accent
        }

        function onTaskProgress(taskId, progress, msg) {
            if (taskId !== tab.currentTaskId) return
            tab.statusText = "● " + (msg || "生成中…")
            tab.statusColor = App.Theme.accent
        }

        function onTaskCompleted(taskId, resultPath, prompt, model) {
            if (taskId !== tab.currentTaskId) return
            tab.lastResultPath = resultPath
            tab.currentTaskId = ""
            tab.statusText = "● 已完成"
            tab.statusColor = App.Theme.success
        }

        function onTaskFailed(taskId, error) {
            if (taskId !== tab.currentTaskId) return
            tab.currentTaskId = ""
            tab.statusText = "● " + (error || "失败")
            tab.statusColor = App.Theme.danger
        }
    }

    function submit() {
        if (tab.currentTaskId !== "") return  // busy
        if (promptArea.text.trim().length === 0) {
            tab.statusText = "● 请输入提示词"
            tab.statusColor = App.Theme.danger
            return
        }
        try {
            imageGen.submitTask(
                promptArea.text.trim(),
                tab.refImages,
                aspectCombo.currentText,
                sizeCombo.currentText,
                modeCombo.currentText
            )
        } catch (e) {
            tab.statusText = "● " + e
            tab.statusColor = App.Theme.danger
        }
    }

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: App.Theme.space5
        spacing: App.Theme.space4

        // ===== 参考图片卡片 =====
        Card {
            Layout.fillWidth: true
            Layout.preferredHeight: 230
            Layout.minimumHeight: 200

            ColumnLayout {
                anchors.fill: parent
                anchors.margins: App.Theme.space4
                spacing: App.Theme.space3

                RowLayout {
                    spacing: App.Theme.space3
                    CaptionLabel {
                        text: "参考图片"
                        font.pointSize: App.Theme.fontLg
                    }
                    Item { Layout.fillWidth: true }
                }

                RowLayout {
                    spacing: App.Theme.space2
                    SecondaryButton {
                        text: "添加图片"
                        onClicked: addImageDialog.open()
                    }
                    SecondaryButton {
                        text: "📋 粘贴图片"
                        onClicked: {
                            var p = imageGen.pasteFromClipboard()
                            if (p) tab.addRefPath(p)
                            else {
                                tab.statusText = "● 剪贴板没有图片"
                                tab.statusColor = App.Theme.warning
                            }
                        }
                    }
                    Label {
                        text: "已选择 " + tab.refImages.length + " 张"
                        font.family: App.Theme.fontFamily
                        font.pointSize: App.Theme.fontSm
                        color: App.Theme.textSecondary
                    }
                    Label {
                        text: "💡 拖拽或粘贴图片到下方区域"
                        font.family: App.Theme.fontFamily
                        font.pointSize: App.Theme.fontSm
                        color: App.Theme.textTertiary
                    }
                    Item { Layout.fillWidth: true }
                }

                Rectangle {
                    id: dropZone
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    color: dropArea.containsDrag ? App.Theme.accentSubtle : App.Theme.bgSubtle
                    radius: App.Theme.radiusMd
                    border.width: 2
                    border.color: dropArea.containsDrag ? App.Theme.accent : App.Theme.borderDefault

                    Text {
                        anchors.centerIn: parent
                        text: "拖拽图片到这里"
                        color: App.Theme.textTertiary
                        font.family: App.Theme.fontFamily
                        font.pointSize: App.Theme.fontSm
                        visible: tab.refImages.length === 0
                    }

                    // 缩略图 Flow（有图时显示）
                    ScrollView {
                        anchors.fill: parent
                        anchors.margins: App.Theme.space2
                        clip: true
                        visible: tab.refImages.length > 0

                        Flow {
                            width: dropZone.width - App.Theme.space2 * 2
                            spacing: App.Theme.space2

                            Repeater {
                                model: tab.refImages
                                delegate: Rectangle {
                                    width: 96
                                    height: 96
                                    radius: App.Theme.radiusSm
                                    color: App.Theme.bgSurface
                                    border.width: 1
                                    border.color: App.Theme.borderDefault

                                    Image {
                                        anchors.fill: parent
                                        anchors.margins: 2
                                        source: "file:///" + modelData
                                        fillMode: Image.PreserveAspectCrop
                                        smooth: true
                                        asynchronous: true
                                    }

                                    // 右上角删除按钮
                                    Rectangle {
                                        width: 20; height: 20; radius: 10
                                        color: App.Theme.danger
                                        anchors.top: parent.top
                                        anchors.right: parent.right
                                        anchors.margins: 2

                                        Text {
                                            anchors.centerIn: parent
                                            text: "×"
                                            color: "white"
                                            font.pixelSize: 14
                                            font.weight: Font.Bold
                                        }

                                        MouseArea {
                                            anchors.fill: parent
                                            cursorShape: Qt.PointingHandCursor
                                            onClicked: tab.removeRefAt(index)
                                        }
                                    }
                                }
                            }
                        }
                    }

                    DropArea {
                        id: dropArea
                        anchors.fill: parent
                        keys: ["text/uri-list"]
                        onDropped: function(drop) {
                            if (drop.urls && drop.urls.length > 0) {
                                tab.addRefPaths(imageGen.normalizeFileUrls(drop.urls))
                                drop.acceptProposedAction()
                            }
                        }
                    }
                }
            }
        }

        // ===== 提示词 + 生成设置（并排）=====
        RowLayout {
            spacing: App.Theme.space4
            Layout.fillWidth: true
            Layout.preferredHeight: 290
            Layout.minimumHeight: 280

            // 提示词
            Card {
                Layout.fillWidth: true
                Layout.preferredWidth: 600
                Layout.fillHeight: true

                ColumnLayout {
                    anchors.fill: parent
                    anchors.margins: App.Theme.space4
                    spacing: App.Theme.space3

                    CaptionLabel {
                        text: "提示词"
                        font.pointSize: App.Theme.fontLg
                    }

                    RowLayout {
                        spacing: App.Theme.space2
                        SecondaryButton {
                            text: "⭐ 收藏"
                            enabled: promptArea.text.trim().length > 0
                            onClicked: imageGen.addSavedPrompt(promptArea.text.trim())
                        }
                        Label {
                            text: "快速选择:"
                            font.family: App.Theme.fontFamily
                            font.pointSize: App.Theme.fontSm
                            color: App.Theme.textSecondary
                        }
                        ThemedComboBox {
                            id: quickPromptCombo
                            Layout.fillWidth: true
                            model: imageGen.savedPrompts
                            onActivated: if (currentText) promptArea.text = currentText
                        }
                        SecondaryButton {
                            text: "删除"
                            enabled: imageGen.savedPrompts.length > 0
                            onClicked: {
                                if (quickPromptCombo.currentText) {
                                    imageGen.removeSavedPrompt(quickPromptCombo.currentText)
                                }
                            }
                        }
                    }

                    ScrollView {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        TextArea {
                            id: promptArea
                            text: ""
                            placeholderText: "描述你想生成的图片…"
                            font.family: App.Theme.fontFamily
                            font.pointSize: App.Theme.fontBase
                            color: App.Theme.textPrimary
                            wrapMode: TextArea.Wrap
                            background: Rectangle {
                                color: App.Theme.bgSubtle
                                radius: App.Theme.radiusMd
                                border.width: 1
                                border.color: App.Theme.borderDefault
                            }
                        }
                    }
                }
            }

            // 生成设置
            Card {
                Layout.preferredWidth: 280
                Layout.fillHeight: true

                ColumnLayout {
                    anchors.fill: parent
                    anchors.margins: App.Theme.space4
                    spacing: App.Theme.space3

                    CaptionLabel {
                        text: "生成设置"
                        font.pointSize: App.Theme.fontLg
                    }

                    ColumnLayout {
                        spacing: 4
                        Layout.fillWidth: true
                        CaptionLabel { text: "生成模式"; font.pointSize: App.Theme.fontBase }
                        ThemedComboBox {
                            id: modeCombo
                            Layout.fillWidth: true
                            model: ["极速模式", "慢速模式"]
                        }
                    }

                    ColumnLayout {
                        spacing: 4
                        Layout.fillWidth: true
                        CaptionLabel { text: "宽高比"; font.pointSize: App.Theme.fontBase }
                        ThemedComboBox {
                            id: aspectCombo
                            Layout.fillWidth: true
                            model: ["1:1", "2:3", "3:2", "16:9", "9:16", "4:3", "3:4"]
                        }
                    }

                    ColumnLayout {
                        spacing: 4
                        Layout.fillWidth: true
                        CaptionLabel { text: "图片尺寸"; font.pointSize: App.Theme.fontBase }
                        ThemedComboBox {
                            id: sizeCombo
                            Layout.fillWidth: true
                            model: ["1K", "2K", "4K"]
                        }
                    }

                    Item { Layout.fillHeight: true }
                }
            }
        }

        // ===== 操作按钮行 =====
        RowLayout {
            spacing: App.Theme.space3
            Layout.fillWidth: true

            PrimaryButton {
                text: tab.currentTaskId !== "" ? "生成中…" : "生成图片"
                enabled: tab.currentTaskId === ""
                onClicked: tab.submit()
            }
            SecondaryButton {
                text: "下载图片"
                enabled: false
            }
            Label {
                text: tab.statusText
                font.family: App.Theme.fontFamily
                font.pointSize: App.Theme.fontSm
                color: tab.statusColor
            }
            Item { Layout.fillWidth: true }
        }

        // ===== 预览卡片 =====
        Card {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.minimumHeight: 240

            ColumnLayout {
                anchors.fill: parent
                anchors.margins: App.Theme.space4
                spacing: App.Theme.space3

                CaptionLabel {
                    text: "预览"
                    font.pointSize: App.Theme.fontLg
                }

                Rectangle {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    color: App.Theme.bgSubtle
                    radius: App.Theme.radiusMd

                    Image {
                        id: previewImage
                        anchors.fill: parent
                        anchors.margins: App.Theme.space3
                        source: tab.lastResultPath ? "file:///" + tab.lastResultPath : ""
                        fillMode: Image.PreserveAspectFit
                        smooth: true
                        asynchronous: true
                        cache: false  // 同路径下次生成会被覆盖，强制重读
                        visible: tab.lastResultPath !== ""
                    }

                    Column {
                        anchors.centerIn: parent
                        spacing: 4
                        visible: tab.lastResultPath === ""

                        Text {
                            anchors.horizontalCenter: parent.horizontalCenter
                            text: "生成的图片将在这里显示"
                            color: App.Theme.textTertiary
                            font.family: App.Theme.fontFamily
                            font.pointSize: App.Theme.fontSm
                        }
                        Text {
                            anchors.horizontalCenter: parent.horizontalCenter
                            text: "双击用系统查看器打开"
                            color: App.Theme.textTertiary
                            font.family: App.Theme.fontFamily
                            font.pointSize: App.Theme.fontXs
                        }
                    }
                }
            }
        }
    }
}