import SwiftUI

struct AuthView: View {
    @ObservedObject var model: AppModel
    @Binding var username: String
    @Binding var password: String
    @FocusState private var focused: Field?

    private enum Field {
        case server
        case username
        case password
    }

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 18) {
                VStack(alignment: .leading, spacing: 8) {
                    Text("BLASTOISE")
                        .font(Theme.display(40))
                        .foregroundStyle(Theme.text)
                    Text("Tune into a shared room, stream the queue, and keep your local player in sync.")
                        .foregroundStyle(Theme.muted)
                }

                VStack(alignment: .leading, spacing: 12) {
                    Label("Server", systemImage: "server.rack")
                        .foregroundStyle(Theme.text)
                        .font(Theme.headlineFont)
                    field("http://host:3001", text: $model.serverURL, field: .server)

                    HStack(spacing: 10) {
                        Button {
                            model.serverURL = "http://mhsgroove.peterino.com:3001"
                        } label: {
                            Label("Default", systemImage: "radio")
                                .frame(maxWidth: .infinity)
                        }
                        .buttonStyle(.bordered)

                        Button {
                            model.serverURL = "http://localhost:3001"
                        } label: {
                            Label("Local", systemImage: "desktopcomputer")
                                .frame(maxWidth: .infinity)
                        }
                        .buttonStyle(.bordered)
                    }
                }
                .panel()

                VStack(alignment: .leading, spacing: 12) {
                    Label("Account", systemImage: "person.crop.circle")
                        .foregroundStyle(Theme.text)
                        .font(Theme.headlineFont)
                    field("username", text: $username, field: .username)
                    SecureField("password", text: $password)
                        .textInputAutocapitalization(.never)
                        .autocorrectionDisabled()
                        .focused($focused, equals: .password)
                        .textFieldStyle()

                    HStack(spacing: 10) {
                        Button {
                            focused = nil
                            Task { await model.signIn(username: username, password: password) }
                        } label: {
                            Label("Sign In", systemImage: "arrow.right.circle")
                                .frame(maxWidth: .infinity)
                        }
                        .buttonStyle(.borderedProminent)
                        .tint(Theme.accent)

                        Button {
                            focused = nil
                            Task { await model.signUp(username: username, password: password) }
                        } label: {
                            Label("Sign Up", systemImage: "person.badge.plus")
                                .frame(maxWidth: .infinity)
                        }
                        .buttonStyle(.bordered)
                    }
                }
                .panel()

                StatusStrip(model: model)
            }
            .padding(18)
            .frame(maxWidth: 640, alignment: .topLeading)
        }
    }

    private func field(_ placeholder: String, text: Binding<String>, field: Field) -> some View {
        TextField(placeholder, text: text)
            .textInputAutocapitalization(.never)
            .autocorrectionDisabled()
            .keyboardType(field == .server ? .URL : .default)
            .focused($focused, equals: field)
            .textFieldStyle()
    }
}
