import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtWebEngine 1.15
import QtQml 2.15

Item {
    id: composePage
    anchors.fill: parent

    // Expose a bridge to C++ for sending email and getting Quill content
    property var emailBridge: emailComposerBridge

    // Back button
    Rectangle {
        anchors {
            top: parent.top
            left: parent.left
            margins: 10
        }
        width: 40
        height: 40
        color: "#e0e0e0"
        radius: 5
        MouseArea {
            anchors.fill: parent
            onClicked: {
                StackView.view.pop()
            }
        }
        Text {
            text: "←"
            anchors.centerIn: parent
            font.pointSize: 20
            color: "#333"
        }
    }

    // Form for composing email
    Rectangle {
        anchors {
            top: backButton.bottom
            bottom: parent.bottom
            left: parent.left
            right: parent.right
            margins: 10
        }
        color: "#fafafa"
        ColumnLayout {
            anchors.fill: parent
            spacing: 10

            // To field
            Text {
                text: qsTr("To:")
                font.pointSize: 14
                Layout.alignment: Qt.AlignLeft
            }
            TextField {
                id: toField
                placeholderText: qsTr("Recipient")
                Layout.fillWidth: true
            }

            // Subject field
            Text {
                text: qsTr("Subject:")
                font.pointSize: 14
                Layout.alignment: Qt.AlignLeft
            }
            TextField {
                id: subjectField
                placeholderText: qsTr("Subject")
                Layout.fillWidth: true
            }

            // Body - WebEngineView loading editor.html with Quill
            Text {
                text: qsTr("Body:")
                font.pointSize: 14
                Layout.alignment: Qt.AlignLeft
            }
            WebEngineView {
                id: bodyWebView
                Layout.fillWidth: true
                Layout.fillHeight: true
                url: "qrc:/resources/web/editor.html"
                // Settings to enable webchannel
                settings.javascriptEnabled: true
                settings.localContentCanAccessRemoteUrls: true
                settings.localContentCanAccessFileUrls: true
            }

            // Attachments area (simple list placeholder)
            RowLayout {
                id: attachmentsRow
                Layout.fillWidth: true
                spacing: 5
                // Will be populated dynamically via C++ model or JS array
                // For now, placeholder
                Text {
                    text: qsTr("Attachments: ")
                    font.pointSize: 12
                }
                Text {
                    id: attachmentsText
                    text: qsTr("None")
                    font.pointSize: 12
                    color: "#666"
                }
                Button {
                    text: qsTr("Attach")
                    onClicked: {
                        // Call C++ to open file dialog and get selected files
                        emailBridge.openAttachmentDialog()
                    }
                }
            }

            // Send button
            Rectangle {
                id: sendButton
                Layout.alignment: Qt.AlignRight
                width: 80
                height: 30
                color: "#1976D2"
                radius: 4
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        // Trigger sending via bridge
                        emailBridge.sendComposedEmail(
                            toField.text,
                            subjectField.text
                        )
                    }
                }
                Text {
                    text: qsTr("Send")
                    color: "white"
                    anchors.centerIn: parent
                    font.pointSize: 12
                }
            }
        }
    }
}