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

Item {
    id: mailListPage
    anchors.fill: parent

    // Models
    FolderListModel {
        id: folderModel
    }
    EmailListModel {
        id: emailModel
    }

    // Signals
    signal emailSelected(int emailId)
    signal composeRequested

    // Header
    Rectangle {
        id: header
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        height: 50
        color: "#1976D2"

        // Title
        Text {
            text: qsTr("Wino Mail")
            color: "white"
            font.pointSize: 18
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 16
        }

        // Compose button
        Rectangle {
            id: composeButton
            anchors.top: parent.top
            anchors.right: parent.right
            anchors.margins: 10
            width: 40
            height: 40
            color: "#e0e0e0"
            radius: 5
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    mailListPage.composeRequested()
                }
            }
            Text {
                text: "✎"
                anchors.centerIn: parent
                font.pointSize: 20
                color: "#333"
            }
        }
    }

    // Main content: SplitView for folder list and email list
    SplitView {
        anchors {
            top: header.bottom
            bottom: parent.bottom
            left: parent.left
            right: parent.right
        }

        // 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
                            // Load emails for selected folder
                            // For now, we'll map folder names to IDs (hardcoded for demo)
                            var folderId = 0; // Inbox
                            switch (folderName) {
                                case "Inbox": folderId = 0; break;
                                case "Sent": folderId = 1; break;
                                case "Drafts": folderId = 2; break;
                                case "Trash": folderId = 3; break;
                                case "Spam": folderId = 4; break;
                                default: folderId = 0;
                            }
                            emailModel.setFolderId(folderId);
                        }
                    }
                }
            }
        }

        // Right pane: Email list (full height)
        Rectangle {
            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
                            // Emit signal with email id
                            emailSelected(model.id)
                        }
                    }
                }
            }
        }
    }
}