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

Item {
    id: tab

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

    // ===== 桥层信号 =====
    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: "添加图片"; enabled: false }
                    SecondaryButton { text: "📋 粘贴图片"; enabled: false }
                    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 {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    color: App.Theme.bgSubtle
                    radius: App.Theme.radiusMd
                    border.width: 2
                    border.color: App.Theme.borderDefault

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

        // ===== 提示词 + 生成设置（并排）=====
        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: false }
                        Label {
                            text: "快速选择:"
                            font.family: App.Theme.fontFamily
                            font.pointSize: App.Theme.fontSm
                            color: App.Theme.textSecondary
                        }
                        ThemedComboBox {
                            id: quickPromptCombo
                            Layout.fillWidth: true
                            model: ["主石换成闪耀的祖母绿", "改成玫瑰金材质", "增加更多碎钻"]
                            onActivated: promptArea.text = currentText
                        }
                        SecondaryButton { text: "删除"; enabled: false }
                    }

                    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
                        }
                    }
                }
            }
        }
    }
}