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

ApplicationWindow {
    id: shell
    visible: true
    width: 1024
    height: 768
    title: qsTr("Wino Mail Qt")

    // Set the title from translator in Component.onCompleted
    Component.onCompleted: {
        title = translator.tr("appName")
    }

    // Drawer for navigation
    Drawer {
        id: drawer
        width: 200
        height: shell.height
        Container {
            anchors.fill: parent
            Layout.alignment: Qt.AlignTop
            ScrollView {
                anchors.fill: parent
                ColumnLayout {
                    spacing: 0
                    // App logo/name
                    Rectangle {
                        Layout.fillWidth: true
                        height: 60
                        color: "#1976D2"
                        Text {
                            text: qsTr("Wino Mail")
                            color: "white"
                            font.pointSize: 18
                            anchors.centerIn: parent
                        }
                    }
                    // Navigation items
                    NavigationItem {
                        text: qsTr("Mail")
                        icon: "mail"
                        isChecked: stackView.currentIndex === 0
                        onClicked: {
                            drawer.close()
                            stackView.currentIndex = 0
                        }
                    }
                    NavigationItem {
                        text: qsTr("Calendar")
                        icon: "calendar"
                        isChecked: stackView.currentIndex === 1
                        onClicked: {
                            drawer.close()
                            stackView.currentIndex = 1
                        }
                    }
                    NavigationItem {
                        text: qsTr("Contacts")
                        icon: "contacts"
                        isChecked: stackView.currentIndex === 2
                        onClicked: {
                            drawer.close()
                            stackView.currentIndex = 2
                        }
                    }
                    NavigationItem {
                        text: qsTr("Settings")
                        icon: "settings"
                        isChecked: stackView.currentIndex === 3
                        onClicked: {
                            drawer.close()
                            stackView.currentIndex = 3
                        }
                    }
                }
            }
        }
    }

    // Define pages
    MailListPage {
        id: mailListPage
        onEmailSelected: {
            stackView.push(readerPage, { "emailId": emailId })
        }
        onComposeRequested: {
            stackView.push(composePage)
        }
    }

    ReaderPage {
        id: readerPage
    }

    ComposePage {
        id: composePage
    }

    // Placeholder for other pages
    CalendarPage {
        id: calendarPage
    }
    ContactsPage {
        id: contactsPage
    }
    SettingsPage {
        id: settingsPage
    }

    // Main content area with StackView for pages
    StackView {
        id: stackView
        anchors.fill: parent
        initialItem: mailListPage
    }

    // Hamburger button to open drawer
    MenuButton {
        icon: "menu"
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.margins: 10
        onClicked: drawer.open()
    }
}

// Helper components
component NavigationItem: Button {
    Layout.fillWidth: true
    height: 48
    padding: 0
    contentItem: RowLayout {
        spacing: 16
        anchors.fill: parent
        anchors.margins: 24
        Icon {
            source: icon
            width: 24
            height: 24
            color: isChecked ? "#1976D2" : "#666"
        }
        Text {
            text: text
            font.pointSize: 14
            verticalAlignment: Text.AlignVCenter
            color: isChecked ? "#1976D2" : "#666"
        }
    }
    background: Rectangle {
        color: isChecked ? "#E3F2FD" : "transparent"
        radius: 0
    }
}

component MenuButton: IconButton {
    iconSource: icon
}