import SwiftUI
import FlixyDesign

/// Die Einstellungen — als Übersicht, nicht als eine lange Liste.
///
/// Vorher stand alles untereinander auf einem Bildschirm: Serverangaben,
/// Qualität, Wiedergabe, drei Verweise, Downloads, Version, Abmelden. Das
/// war beim Bauen bequem und beim Suchen anstrengend — je mehr Einstellungen
/// dazukamen, desto weiter rutschte alles nach unten.
///
/// Jetzt führt jede Zeile in einen Bildschirm, der zu **einer** Frage gehört.
struct SettingsView: View {
    @Environment(FlixySession.self) private var session
    @Environment(\.flixyAccent) private var accent
    @State private var showsSignOutConfirmation = false

    var body: some View {
        Form {
            if session.backend != nil {
                Section {
                    NavigationLink {
                        ServerSettingsView()
                    } label: {
                        LabeledContent {
                            Text(session.serverName)
                                .foregroundStyle(Color.flixyTextSecondary)
                        } label: {
                            Label("settings.server", systemImage: "externaldrive.connected.to.line.below")
                        }
                    }
                }
            }

            Section("settings.section.look") {
                row("appearance.title", symbol: "paintpalette") { AppearanceView() }
                row("homeLayout.title", symbol: "rectangle.stack") { HomeLayoutView() }
            }

            Section("settings.section.playing") {
                row("settings.playback", symbol: "play.rectangle") { PlaybackSettingsView() }
                row("languages.title", symbol: "captions.bubble") { LanguagesView() }
                row("sidebar.downloads", symbol: "arrow.down.circle") { DownloadSettingsView() }
            }

            Section {
                row("diagnostics.title", symbol: "stethoscope") { DiagnosticsView() }
            }

            Section("settings.app") {
                LabeledContent("settings.version", value: Branding.version)
                LabeledContent("settings.build", value: Branding.buildStamp)
            }

            Section {
                Button("action.signOut", role: .destructive) {
                    showsSignOutConfirmation = true
                }
            }
        }
        // Ausdrücklich, nicht nur geerbt.
        //
        // Listen und Formulare zeichnen ihre Zeilen teilweise in einem
        // eigenen Darstellungskontext, in dem eigene Umgebungswerte verloren
        // gehen können — sichtbar an Picker-Werten, die in der Standardfarbe
        // leuchteten, während die Schalter daneben schon die gewählte trugen.
        .tint(accent)
        .scrollContentBackground(.hidden)
        .background(Color.flixyCanvas)
        .navigationTitle(Text("sidebar.settings"))
        .navigationBarTitleDisplayMode(.inline)
        .confirmationDialog(
            Text("settings.signOutConfirm"),
            isPresented: $showsSignOutConfirmation,
            titleVisibility: .visible
        ) {
            Button("action.signOut", role: .destructive) { session.signOut() }
            Button("action.cancel", role: .cancel) {}
        } message: {
            Text("settings.signOutExplanation")
        }
    }

    private func row<Destination: View>(
        _ title: LocalizedStringKey,
        symbol: String,
        @ViewBuilder destination: @escaping () -> Destination
    ) -> some View {
        NavigationLink {
            destination()
        } label: {
            Label(title, systemImage: symbol)
        }
    }
}