import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Item {
    id: mailListPage
    anchors.fill: parent

    // Layout: SplitView for resizable panes
    SplitView {
        anchors.fill: parent

        // Left pane: Folder list
        Rectangle {
            width: 200
            color: "#fafafa"
            ListView {
                id: folderListView
                anchors.fill: parent
                clip: true
                model: FolderModel {}
                delegate: Item {
                    height: 40
                    Layout.fillWidth: true
                    Rectangle {
                        anchors.fill: parent
                        color: ListView.isCurrentItem ? "#e3f2fd" : "transparent"
                        Text {
                            text: folderName
                            anchors.left: parent.left
                            anchors.leftMargin: 16
                            anchors.verticalCenter: parent.verticalCenter
                            font.pointSize: 14
                            color: ListView.isCurrentItem ? "#1976d2" : "#666"
                        }
                    }
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            folderListView.currentIndex = index
                            // TODO: Load emails for selected folder
                        }
                    }
                }
            }
        }

        // Right pane: Email list and preview
        Rectangle {
            color: "#fafafa"
            SplitView {
                orientation: Qt.Vertical
                anchors.fill: parent

                // Email list (top)
                Rectangle {
                    Layout.minimumHeight: 200
                    color: "#fafafa"
                    ListView {
                        id: emailListView
                        anchors.fill: parent
                        clip: true
                        model: EmailModel {}
                        delegate: Item {
                            height: 60
                            Layout.fillWidth: true
                            Rectangle {
                                anchors.fill: parent
                                color: ListView.isCurrentItem ? "#e3f2fd" : "transparent"
                                RowLayout {
                                    anchors.fill: parent
                                    anchors.margins: 8
                                    // Sender avatar/initial
                                    Rectangle {
                                        width: 40
                                        height: 40
                                        color: "#cccccc"
                                        Text {
                                            text: senderInitial
                                            anchors.centerIn: parent
                                            font.pointSize: 16
                                            color: "#666"
                                        }
                                    }
                                    ColumnLayout {
                                        Layout.fillWidth: true
                                        spacing: 4
                                        Text {
                                            text: senderName
                                            font.pointSize: 14
                                            color: "#333"
                                            elide: Text.ElideRight
                                            Layout.fillWidth: true
                                        }
                                        Text {
                                            text: subject
                                            font.pointSize: 13
                                            color: "#666"
                                            elide: Text.ElideRight
                                            Layout.fillWidth: true
                                        }
                                        Text {
                                            text: time
                                            font.pointSize: 12
                                            color: "#999"
                                        }
                                    }
                                }
                            }
                            MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    emailListView.currentIndex = index
                                    // TODO: Show email preview in the bottom pane
                                }
                            }
                        }
                    }
                }

                // Email preview (bottom)
                Rectangle {
                    Layout.minimumHeight: 200
                    color: "#ffffff"
                    Text {
                        id: emailPreview
                        text: "Select an email to preview"
                        anchors.centerIn: parent
                        font.pointSize: 14
                        color: "#666"
                    }
                }
            }
        }
    }
}