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

Item {
    id: settingsPage
    anchors.fill: parent

    Rectangle {
        anchors.fill: parent
        color: "#fafafa"

        ColumnLayout {
            anchors.fill: parent
            anchors.margins: 20
            spacing: 20

            // Accounts section
            GroupBox {
                title: qsTr("Email Accounts")
                Layout.fillWidth: true
                Layout.preferredHeight: 200

                ColumnLayout {
                    anchors.fill: parent
                    anchors.margins: 15
                    spacing: 10

                    // Accounts list placeholder
                    ListView {
                        id: accountsListView
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        model: 0 // Placeholder - would be connected to actual accounts model
                        delegate: Item {
                            height: 60
                            width: parent.width

                            Rectangle {
                                anchors.fill: parent
                                color: "#ffffff"
                                radius: 4
                                border.color: "#e0e0e0"

                                RowLayout {
                                    anchors.fill: parent
                                    anchors.margins: 10
                                    spacing: 10

                                    Image {
                                        source: "account-outline.svg"
                                        width: 24
                                        height: 24
                                        color: "#1976D2"
                                    }

                                    ColumnLayout {
                                        Label {
                                            text: "example@email.com"
                                            font.bold: true
                                            color: "#333"
                                        }
                                        Label {
                                            text: "Outlook • john.doe@example.com"
                                            font.pointSize: 10
                                            color: "#666"
                                        }
                                    }

                                    Item {
                                        Layout.fillWidth: true
                                    }

                                    IconButton {
                                        icon: "edit"
                                        iconSize: 20
                                        color: "#666"
                                        onClicked: {
                                            // Would open edit account dialog
                                        }
                                    }

                                    IconButton {
                                        icon: "delete"
                                        iconSize: 20
                                        color: "#f44336"
                                        onClicked: {
                                            // Would delete account
                                        }
                                    }
                                }
                            }
                        }
                    }

                    // Add account button
                    RowLayout {
                        Layout.fillWidth: true

                        Button {
                            text: qsTr("Add Email Account")
                            icon: "plus"
                            Layout.fillWidth: true
                            height: 40
                            onClicked: {
                                accountSetupDialogLauncher.showDialog()
                            }
                        }
                    }
                }
            }

            // General settings section
            GroupBox {
                title: qsTr("General Settings")
                Layout.fillWidth: true

                ColumnLayout {
                    anchors.fill: parent
                    anchors.margins: 15
                    spacing: 15

                    Switch {
                        text: qsTr("Start application on login")
                        checked: true
                    }

                    Switch {
                        text: qsTr("Enable notifications")
                        checked: true
                    }

                    Switch {
                        text: qsTr("Minimize to tray on close")
                        checked: true
                    }

                    Label {
                        text: qsTr("Sync Interval:")
                        font.bold: true
                    }
                    RowLayout {
                        ComboBox {
                            width: 100
                            model: [15, 30, 60, 120]
                            textRole: "display"
                            currentIndex: 1 // 30 minutes
                        }
                        Label {
                            text: qsTr("minutes")
                        }
                    }
                }
            }

            // Appearance section
            GroupBox {
                title: qsTr("Appearance")
                Layout.fillWidth: true

                ColumnLayout {
                    anchors.fill: parent
                    anchors.margins: 15
                    spacing: 15

                    Label {
                        text: qsTr("Theme:")
                        font.bold: true
                    }
                    RowLayout {
                        RadioButton {
                            text: qsTr("Light")
                            checked: true
                        }
                        RadioButton {
                            text: qsTr("Dark")
                        }
                        RadioButton {
                            text: qsTr("System")
                        }
                    }

                    Switch {
                        text: qsTr("Use Deepin theme")
                        checked: true
                    }
                }
            }
        }
    }
}