import SwiftUI

struct WanStepView: View {
    @ObservedObject var viewModel: SetupViewModel
    let availableInterfaces: [NetworkInterface]
    @AppStorage("appLanguage") private var appLanguage: String = "de"

    var body: some View {
        Form {
            Section(L10n.t("Internet-Anschluss", appLanguage)) {
                Picker(L10n.t("Anschluss (Port)", appLanguage), selection: $viewModel.wanConfig.interfaceName) {
                    ForEach(availableInterfaces) { interface in
                        Text(interface.name).tag(interface.name)
                    }
                }
                .help(L10n.t("Der Netzwerkport, über den dein Router mit dem Internet verbunden ist (z.B. das Kabel zu deinem Modem oder deiner Anschlussdose).", appLanguage))

                Picker(L10n.t("Verbindungsart", appLanguage), selection: $viewModel.wanConfig.mode) {
                    ForEach(WanConnectionMode.allCases) { mode in
                        Text(L10n.t(mode.label, appLanguage)).tag(mode)
                    }
                }
                .pickerStyle(.inline)
                .help(L10n.t("Wie sich der Router beim Internetanbieter anmeldet. \"Automatisch (DHCP)\" passt für die meisten Kabel-/Glasfaseranschlüsse.", appLanguage))
            }

            switch viewModel.wanConfig.mode {
            case .dhcpClient:
                Section {
                    Text(L10n.t("Der Router bezieht seine Internetadresse automatisch von deinem Anbieter. Für die meisten Kabel-/Glasfaser-Anschlüsse die richtige Wahl.", appLanguage))
                        .foregroundStyle(.secondary)
                }
            case .staticIP:
                Section(L10n.t("Statische Adresse", appLanguage)) {
                    TextField(L10n.t("IP-Adresse (z.B. 203.0.113.5/24)", appLanguage), text: $viewModel.wanConfig.staticAddress)
                        .help(L10n.t("Die feste IP-Adresse, die dir dein Anbieter zugewiesen hat, inklusive Netzmaske (die Zahl nach dem /, z.B. /24).", appLanguage))
                    TextField(L10n.t("Gateway (z.B. 203.0.113.1)", appLanguage), text: $viewModel.wanConfig.staticGateway)
                        .help(L10n.t("Die Adresse des nächsten Geräts Richtung Internet — steht meist in den Unterlagen deines Anbieters.", appLanguage))
                }
            case .pppoe:
                Section(L10n.t("PPPoE-Zugangsdaten", appLanguage)) {
                    TextField(L10n.t("Benutzername", appLanguage), text: $viewModel.wanConfig.pppoeUsername)
                        .help(L10n.t("Zugangsdaten von deinem Internetanbieter für die Einwahl (z.B. bei DSL-Anschlüssen).", appLanguage))
                    SecureField(L10n.t("Passwort", appLanguage), text: $viewModel.wanConfig.pppoePassword)
                        .help(L10n.t("Das zum Benutzernamen gehörende Passwort von deinem Internetanbieter.", appLanguage))
                    Text(L10n.t("Diese Zugangsdaten bekommst du von deinem Internetanbieter (z.B. Telekom, Vodafone).", appLanguage))
                        .appFont(.caption)
                        .foregroundStyle(.secondary)
                }
            }

            Section {
                HStack {
                    Button(L10n.t("Zurück", appLanguage)) { viewModel.goBack() }
                    Spacer()
                    Button(L10n.t("Weiter", appLanguage)) { viewModel.goNext() }
                        .disabled(!isStepValid)
                }
            }
        }
        .formStyle(.grouped)
        .navigationTitle(LocalizedStringKey(L10n.t("Internet einrichten", appLanguage)))
.toolbar { ToolbarItem { ManualHelpButton(anchor: ManualAnchor.stepWAN) } }
    }

    private var isStepValid: Bool {
        guard !viewModel.wanConfig.interfaceName.isEmpty else { return false }
        switch viewModel.wanConfig.mode {
        case .dhcpClient:
            return true
        case .staticIP:
            return !viewModel.wanConfig.staticAddress.isEmpty
        case .pppoe:
            return !viewModel.wanConfig.pppoeUsername.isEmpty && !viewModel.wanConfig.pppoePassword.isEmpty
        }
    }
}