import SwiftUI
import FlixyDesign
import PlexKit

/// Der Anmeldebildschirm.
///
/// Ein Knopf, mehr nicht. Die Anmeldemaske kommt von Plex und öffnet sich in
/// einem Fenster innerhalb der App; das Passwort wird dort eingegeben und
/// erreicht Flixy nie. Nach dem Anmelden schließt sich das Fenster von selbst.
struct SignInView: View {
    let phase: FlixySession.Phase
    let onSignIn: () -> Void

    @Environment(\.flixyAccent) private var accent

    private var isAuthenticating: Bool {
        if case .authenticating = phase { return true }
        return false
    }

    var body: some View {
        VStack(spacing: FlixySpacing.section) {
            Spacer()

            VStack(spacing: FlixySpacing.regular) {
                Image(systemName: "play.rectangle.on.rectangle")
                    .font(.system(size: 52))
                    .foregroundStyle(accent)

                Text(Branding.appName)
                    .font(.flixyHero)
                    .foregroundStyle(Color.flixyTextPrimary)

                Text("signIn.tagline")
                    .font(.flixyBody)
                    .foregroundStyle(Color.flixyTextSecondary)
                    .multilineTextAlignment(.center)
            }

            Spacer()

            VStack(spacing: FlixySpacing.regular) {
                Button(action: onSignIn) {
                    Group {
                        if isAuthenticating {
                            ProgressView().tint(Color.flixyCanvas)
                        } else {
                            Text("signIn.action").font(.flixyRowHeader)
                        }
                    }
                    .frame(maxWidth: .infinity)
                    .padding(.vertical, FlixySpacing.regular)
                }
                .buttonStyle(.borderedProminent)
                .tint(accent)
                .disabled(isAuthenticating)

                Text("signIn.privacy")
                    .font(.flixyCaption)
                    .foregroundStyle(Color.flixyTextMuted)
                    .multilineTextAlignment(.center)
            }

            Spacer().frame(height: FlixySpacing.section)
        }
        .padding(.horizontal, FlixySpacing.section)
        .frame(maxWidth: 420)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.flixyCanvas)
    }
}