pragma ComponentBehavior: Bound

import QtQuick
import QtQuick.Layouts
import Quickshell
import ZShell.Config
import ZShell.Internal
import ZShell.Blobs
import ZShell.Services
import ZShell.Components
import qs.Components
import qs.Modules.Settings.Common

PageBase {
	id: root

	isSubPage: true
	title: Tr.tr("Saved networks")

	Component.onCompleted: Nmcli.loadSavedConnections(() => {})

	ColumnLayout {
		anchors.horizontalCenter: parent.horizontalCenter
		anchors.top: parent.top
		spacing: Tokens.spacing.extraSmall / 2
		width: root.cappedWidth

		ItemList {
			id: savedList

			first: true
			last: true
			placeholderIcon: "wifi_find"
			placeholderText: Tr.tr("No saved networks")
			showList: true

			delegate: StateLayer {
				id: saved

				readonly property var ap: Nmcli.findNetwork(modelData)
				required property int index
				readonly property bool isActive: !!Nmcli.active && Nmcli.active.ssid === modelData
				required property var modelData

				anchors.fill: undefined
				anchors.left: savedList.list.contentItem.left
				anchors.right: savedList.list.contentItem.right
				bottomLeftRadius: index === savedList?.list.count - 1 ? Tokens.rounding.extraLarge : radius
				bottomRightRadius: index === savedList?.list.count - 1 ? Tokens.rounding.extraLarge : radius
				implicitHeight: savedLayout.implicitHeight + savedLayout.anchors.margins * 2
				radius: Tokens.rounding.extraSmall
				topLeftRadius: index === 0 ? Tokens.rounding.extraLarge : radius
				topRightRadius: index === 0 ? Tokens.rounding.extraLarge : radius

				onClicked: {
					root.nState.selectedNetworkSsid = saved.modelData;
					root.nState.networkDetailsFromSaved = true;
					root.nState.openSubPage(3); // Shared network detail/edit sub-page
				}

				RowLayout {
					id: savedLayout

					anchors.fill: parent
					anchors.leftMargin: Tokens.padding.extraLarge
					anchors.margins: Tokens.padding.large
					anchors.rightMargin: Tokens.padding.extraLarge
					spacing: Tokens.spacing.medium

					MaterialIcon {
						color: saved.isActive ? Colours.palette.m3primary : Colours.palette.m3onSurfaceVariant
						font.pointSize: Tokens.font.size.normal
						text: saved.ap ? Icons.getNetworkIcon(saved.ap.strength, !["", "none"].includes(Nmcli.savedSecurityFor(saved.modelData))) : "signal_wifi_off"
					}

					ColumnLayout {
						Layout.fillWidth: true
						spacing: 0

						CustomText {
							Layout.fillWidth: true
							elide: Text.ElideRight
							font: Tokens.font.body.small
							text: saved.modelData
						}

						CustomText {
							Layout.fillWidth: true
							color: saved.isActive ? Colours.palette.m3primary : Colours.palette.m3outline
							elide: Text.ElideRight
							font: Tokens.font.label.small
							text: {
								let security;
								if (saved.ap)
									security = saved.ap.security || Tr.trCtx("Open", "wifi security type");
								else
									security = Nmcli.securityLabel(Nmcli.savedSecurityFor(saved.modelData)) || Tr.trCtx("Unknown", "unknown wifi security");
								if (saved.isActive)
									// TRANSLATORS: %1 = security type
									return Tr.trCtx("Connected • %1", "network connected with security").arg(security);
								return security;
							}
						}
					}

					MaterialIcon {
						color: Colours.palette.m3onSurfaceVariant
						font.pointSize: Tokens.font.size.normal
						text: "chevron_right"
					}
				}
			}
			model: ScriptModel {
				values: [...Nmcli.savedConnectionSsids].sort((a, b) => a.localeCompare(b))
			}
		}
	}
}