import SwiftUI

struct HeaderView: View {
    @ObservedObject var model: AppModel

    var body: some View {
        VStack(spacing: 10) {
            HStack(spacing: 10) {
                VStack(alignment: .leading, spacing: 2) {
                    Text("BLASTOISE")
                        .font(Theme.display(28))
                        .foregroundStyle(Theme.text)
                    Text(model.currentUser?.username ?? "signed out")
                        .font(Theme.mono(12))
                        .foregroundStyle(Theme.muted)
                }

                Spacer()

                Button {
                    Task { await model.connectToServer() }
                } label: {
                    Image(systemName: "arrow.clockwise")
                        .frame(width: 38, height: 36)
                }
                .buttonStyle(.bordered)

                Button(role: .destructive) {
                    Task { await model.logout() }
                } label: {
                    Image(systemName: "rectangle.portrait.and.arrow.right")
                        .frame(width: 38, height: 36)
                }
                .buttonStyle(.bordered)
            }

            HStack(spacing: 8) {
                Image(systemName: "server.rack")
                    .foregroundStyle(Theme.amber)
                TextField("server", text: $model.serverURL)
                    .textInputAutocapitalization(.never)
                    .autocorrectionDisabled()
                    .font(Theme.mono(12))
                    .foregroundStyle(Theme.text)
            }
            .padding(10)
            .background(Theme.panel2)
            .clipShape(RoundedRectangle(cornerRadius: Theme.corner))
        }
        .padding(14)
        .background(Theme.background)
    }
}
