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

Item {
    id: tab

    property string selectedTimestamp: ""
    property var selectedItem: ({})
    // 右键菜单当前操作的 timestamp
    property string contextTimestamp: ""

    // 单条删除确认
    MessageDialog {
        id: confirmDeleteDialog
        title: "确认删除"
        text: "确定要删除这条历史记录吗？这将删除相关的所有文件。"
        buttons: MessageDialog.Yes | MessageDialog.No
        onAccepted: {
            if (tab.contextTimestamp) {
                history.deleteItem(tab.contextTimestamp)
                tab.contextTimestamp = ""
            }
        }
    }

    // 全部清空确认
    MessageDialog {
        id: confirmClearDialog
        title: "确认清空"
        text: "确定要清空所有历史记录吗？这将删除所有历史图片文件，且无法恢复。"
        buttons: MessageDialog.Yes | MessageDialog.No
        onAccepted: history.clearAll()
    }

    // 列表项右键菜单
    Menu {
        id: itemContextMenu

        MenuItem {
            text: "在文件管理器中打开"
            onTriggered: {
                if (tab.contextTimestamp) {
                    var item = history.getItem(tab.contextTimestamp)
                    if (item.generatedImagePath) {
                        history.revealInExplorer(item.generatedImagePath)
                    }
                }
            }
        }
        MenuItem {
            text: "复制提示词"
            onTriggered: {
                if (tab.contextTimestamp) {
                    var item = history.getItem(tab.contextTimestamp)
                    if (item.prompt) history.copyToClipboard(item.prompt)
                }
            }
        }
        MenuSeparator {}
        MenuItem {
            text: "删除此项"
            onTriggered: confirmDeleteDialog.open()
        }
    }

    function selectTimestamp(ts) {
        if (!ts) {
            tab.selectedTimestamp = ""
            tab.selectedItem = ({})
            return
        }
        tab.selectedTimestamp = ts
        tab.selectedItem = history.getItem(ts) || ({})
    }

    // 列表数据变化时校正选中项
    Connections {
        target: history
        function onItemRemoved(ts) {
            if (tab.selectedTimestamp === ts) tab.selectTimestamp("")
        }
        function onCountChanged() {
            // 自动选中第一条（首次加载 / 新增时）
            if (tab.selectedTimestamp === "" && historyList.count > 0) {
                var idx = historyList.model.index(0, 0)
                var ts = historyList.model.data(idx, Qt.UserRole)
                if (ts) tab.selectTimestamp(ts)
            }
        }
    }

    Component.onCompleted: {
        if (historyList.count > 0) {
            var idx = historyList.model.index(0, 0)
            var ts = historyList.model.data(idx, Qt.UserRole)
            if (ts) tab.selectTimestamp(ts)
        }
    }

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

        // ===== 左侧：列表 =====
        Card {
            Layout.preferredWidth: 340
            Layout.fillHeight: true

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

                RowLayout {
                    spacing: App.Theme.space2
                    CaptionLabel {
                        text: "历史记录"
                        font.pointSize: App.Theme.fontLg
                    }
                    Label {
                        text: history.count + " 条"
                        font.family: App.Theme.fontFamily
                        font.pointSize: App.Theme.fontSm
                        color: App.Theme.textSecondary
                    }
                    Item { Layout.fillWidth: true }
                    SecondaryButton {
                        text: "🔄 刷新"
                        onClicked: history.refresh()
                    }
                    SecondaryButton {
                        text: "🗑️ 清空"
                        enabled: history.count > 0
                        onClicked: confirmClearDialog.open()
                    }
                }

                // 空态
                Label {
                    visible: historyList.count === 0
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    text: "暂无历史记录\n生成图片后会自动出现在这里"
                    font.family: App.Theme.fontFamily
                    font.pointSize: App.Theme.fontSm
                    color: App.Theme.textTertiary
                }

                ListView {
                    id: historyList
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.rightMargin: 4  // 给 ScrollBar 留视觉空间
                    visible: count > 0
                    spacing: 4
                    clip: true
                    model: history.model

                    ScrollBar.vertical: ScrollBar {
                        id: historyScrollBar
                        policy: ScrollBar.AlwaysOn
                        // 默认 Basic 主题滚动条太细 — 自定义 contentItem，
                        // 8px 常驻 + hover/press 加深，扫一眼就看见。
                        contentItem: Rectangle {
                            implicitWidth: 8
                            radius: 4
                            color: historyScrollBar.pressed
                                ? App.Theme.borderStrong
                                : (historyScrollBar.hovered
                                    ? App.Theme.borderDefault
                                    : Qt.rgba(0, 0, 0, 0.18))
                            Behavior on color { ColorAnimation { duration: 100 } }
                        }
                    }

                    delegate: Rectangle {
                        required property int index
                        required property string display
                        required property string toolTip
                        required property string timestamp

                        width: ListView.view.width
                        height: 76
                        radius: App.Theme.radiusSm
                        color: tab.selectedTimestamp === timestamp ? App.Theme.accentSubtle
                             : itemMouse.containsMouse                ? App.Theme.bgHover
                             : "transparent"
                        border.width: tab.selectedTimestamp === timestamp ? 1 : 0
                        border.color: App.Theme.accent

                        RowLayout {
                            anchors.fill: parent
                            anchors.margins: App.Theme.space2
                            spacing: App.Theme.space3

                            // 缩略图
                            Rectangle {
                                Layout.preferredWidth: 60
                                Layout.preferredHeight: 60
                                radius: App.Theme.radiusSm
                                color: App.Theme.bgSubtle

                                Image {
                                    id: thumb
                                    anchors.fill: parent
                                    anchors.margins: 1
                                    source: {
                                        var p = history.thumbnailPath(timestamp)
                                        return p ? "file:///" + p : ""
                                    }
                                    fillMode: Image.PreserveAspectCrop
                                    smooth: true
                                    asynchronous: true
                                }
                            }

                            // 文字
                            ColumnLayout {
                                Layout.fillWidth: true
                                Layout.fillHeight: true
                                spacing: 2

                                Text {
                                    Layout.fillWidth: true
                                    text: timestamp
                                    color: App.Theme.textPrimary
                                    font.family: App.Theme.fontFamily
                                    font.pointSize: App.Theme.fontXs
                                    font.weight: Font.DemiBold
                                }
                                Text {
                                    Layout.fillWidth: true
                                    text: display.split("\n").slice(1).join(" ")
                                    color: App.Theme.textSecondary
                                    font.family: App.Theme.fontFamily
                                    font.pointSize: App.Theme.fontXs
                                    elide: Text.ElideRight
                                    maximumLineCount: 2
                                    wrapMode: Text.Wrap
                                }
                            }
                        }

                        MouseArea {
                            id: itemMouse
                            anchors.fill: parent
                            hoverEnabled: true
                            cursorShape: Qt.PointingHandCursor
                            acceptedButtons: Qt.LeftButton | Qt.RightButton
                            onClicked: function(mouse) {
                                if (mouse.button === Qt.RightButton) {
                                    tab.contextTimestamp = timestamp
                                    itemContextMenu.popup()
                                } else {
                                    tab.selectTimestamp(timestamp)
                                }
                            }
                        }

                        ToolTip.text: toolTip
                        ToolTip.visible: itemMouse.containsMouse && toolTip.length > 0
                        ToolTip.delay: 600
                    }
                }
            }
        }

        // ===== 右侧：详情 =====
        Card {
            Layout.fillWidth: true
            Layout.fillHeight: true

            // 空态
            Label {
                anchors.centerIn: parent
                visible: tab.selectedTimestamp === ""
                text: "选择左侧记录查看详情"
                font.family: App.Theme.fontFamily
                font.pointSize: App.Theme.fontSm
                color: App.Theme.textTertiary
            }

            ColumnLayout {
                visible: tab.selectedTimestamp !== ""
                anchors.fill: parent
                anchors.margins: App.Theme.space4
                spacing: App.Theme.space3

                // header: 时间 + 操作按钮
                RowLayout {
                    Layout.fillWidth: true
                    spacing: App.Theme.space3

                    CaptionLabel {
                        text: tab.selectedItem.timestamp || ""
                        font.pointSize: App.Theme.fontLg
                    }
                    Label {
                        text: tab.selectedItem.createdAt || ""
                        font.family: App.Theme.fontFamily
                        font.pointSize: App.Theme.fontSm
                        color: App.Theme.textSecondary
                    }
                    Item { Layout.fillWidth: true }
                    SecondaryButton {
                        text: "在文件管理器中打开"
                        onClicked: {
                            if (tab.selectedItem.generatedImagePath) {
                                history.revealInExplorer(tab.selectedItem.generatedImagePath)
                            }
                        }
                    }
                    SecondaryButton {
                        text: "删除"
                        onClicked: {
                            if (tab.selectedTimestamp) {
                                tab.contextTimestamp = tab.selectedTimestamp
                                confirmDeleteDialog.open()
                            }
                        }
                    }
                }

                // 大图
                Rectangle {
                    Layout.fillWidth: true
                    Layout.preferredHeight: 320
                    color: App.Theme.bgSubtle
                    radius: App.Theme.radiusMd

                    Image {
                        anchors.fill: parent
                        anchors.margins: App.Theme.space3
                        source: tab.selectedItem.generatedImagePath
                            ? "file:///" + tab.selectedItem.generatedImagePath
                            : ""
                        fillMode: Image.PreserveAspectFit
                        smooth: true
                        asynchronous: true

                        MouseArea {
                            anchors.fill: parent
                            cursorShape: Qt.PointingHandCursor
                            onDoubleClicked: {
                                if (tab.selectedItem.generatedImagePath) {
                                    Qt.openUrlExternally("file:///" + tab.selectedItem.generatedImagePath)
                                }
                            }
                        }
                    }
                }

                // 参考图（可能没有）
                ColumnLayout {
                    Layout.fillWidth: true
                    spacing: App.Theme.space2
                    visible: (tab.selectedItem.referenceImagePaths || []).length > 0

                    CaptionLabel {
                        text: "参考图（" + (tab.selectedItem.referenceImagePaths || []).length + " 张）"
                    }

                    Flow {
                        Layout.fillWidth: true
                        spacing: App.Theme.space2

                        Repeater {
                            model: tab.selectedItem.referenceImagePaths || []
                            delegate: Rectangle {
                                width: 80
                                height: 80
                                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
                                }

                                // 左下角 "图 N" badge
                                Rectangle {
                                    anchors.left: parent.left
                                    anchors.bottom: parent.bottom
                                    anchors.margins: 3
                                    width: refIdx.implicitWidth + 8
                                    height: 16
                                    radius: App.Theme.radiusSm
                                    color: Qt.rgba(0, 0, 0, 0.6)

                                    Text {
                                        id: refIdx
                                        anchors.centerIn: parent
                                        text: "图 " + (index + 1)
                                        color: "white"
                                        font.family: App.Theme.fontFamily
                                        font.pointSize: App.Theme.fontXs
                                        font.weight: Font.DemiBold
                                    }
                                }

                                MouseArea {
                                    anchors.fill: parent
                                    cursorShape: Qt.PointingHandCursor
                                    onDoubleClicked: Qt.openUrlExternally("file:///" + modelData)
                                }
                            }
                        }
                    }
                }

                // 元信息（不暴露具体模型 ID）
                GridLayout {
                    Layout.fillWidth: true
                    columns: 4
                    columnSpacing: App.Theme.space4
                    rowSpacing: App.Theme.space2

                    CaptionLabel { text: "宽高比" }
                    Label {
                        text: tab.selectedItem.aspectRatio || "—"
                        font.family: App.Theme.fontFamily
                        font.pointSize: App.Theme.fontSm
                        color: App.Theme.textPrimary
                    }
                    CaptionLabel { text: "尺寸" }
                    Label {
                        text: tab.selectedItem.imageSize || "—"
                        font.family: App.Theme.fontFamily
                        font.pointSize: App.Theme.fontSm
                        color: App.Theme.textPrimary
                    }
                }

                // prompt header + 重做 + 复制按钮
                RowLayout {
                    Layout.fillWidth: true
                    spacing: App.Theme.space2

                    CaptionLabel { text: "提示词" }
                    Item { Layout.fillWidth: true }
                    SecondaryButton {
                        text: "🔁 重做"
                        enabled: tab.selectedTimestamp.length > 0
                        onClicked: {
                            // 走桥层 redoRequested 信号 → ImageGenTab 接住回填，并切到 tab 0
                            history.redoToImageGen(tab.selectedTimestamp)
                        }
                    }
                    SecondaryButton {
                        id: copyBtn
                        property bool justCopied: false
                        text: justCopied ? "✓ 已复制" : "📋 复制"
                        enabled: (tab.selectedItem.prompt || "").length > 0
                        onClicked: {
                            if (history.copyToClipboard(tab.selectedItem.prompt || "")) {
                                copyBtn.justCopied = true
                                copyResetTimer.restart()
                            }
                        }

                        Timer {
                            id: copyResetTimer
                            interval: 1500
                            onTriggered: copyBtn.justCopied = false
                        }
                    }
                }
                ScrollView {
                    Layout.fillWidth: true
                    Layout.preferredHeight: 80
                    Rectangle {
                        anchors.fill: parent
                        color: App.Theme.bgSubtle
                        radius: App.Theme.radiusMd
                        Text {
                            anchors.fill: parent
                            anchors.margins: App.Theme.space3
                            text: tab.selectedItem.prompt || ""
                            color: App.Theme.textPrimary
                            font.family: App.Theme.fontFamily
                            font.pointSize: App.Theme.fontSm
                            wrapMode: Text.Wrap
                        }
                    }
                }

                Item { Layout.fillHeight: true }
            }
        }
    }
}