import SwiftUI

struct LoginView: View {
    @ObservedObject var vm: AuthViewModel

    var body: some View {
        VStack(spacing: 16) {
            Spacer()
            Image("BeebLogo")
                .resizable()
                .scaledToFit()
                .frame(width: 96, height: 96)
                .clipShape(Circle())
            Text("login_title".localized)
                .font(.title2).bold()
            Text("login_subtitle".localized)
                .font(.subheadline)
                .foregroundStyle(.secondary)
                .multilineTextAlignment(.center)

            TextField("phone_hint".localized, text: $vm.phone)
                .textFieldStyle(.roundedBorder)
                .keyboardType(.phonePad)
                .textContentType(.telephoneNumber)

            if let error = vm.error {
                Text(error).font(.footnote).foregroundStyle(.red)
            }

            BrandButton(title: "send_code".localized, loading: vm.loading) {
                vm.requestCode()
            }
            Spacer()
        }
        .padding(24)
    }
}

struct OtpView: View {
    @ObservedObject var vm: AuthViewModel

    var body: some View {
        VStack(spacing: 16) {
            Spacer()
            Text("otp_title".localized)
                .font(.title2).bold()
            Text("otp_subtitle".localized(vm.phone))
                .font(.subheadline)
                .foregroundStyle(.secondary)
                .multilineTextAlignment(.center)

            TextField("code_hint".localized, text: $vm.code)
                .textFieldStyle(.roundedBorder)
                .keyboardType(.numberPad)
                .textContentType(.oneTimeCode)

            if let error = vm.error {
                Text(error).font(.footnote).foregroundStyle(.red)
            }

            BrandButton(title: "verify".localized, loading: vm.loading) {
                vm.verify()
            }
            Button("back".localized) { vm.back() }
                .buttonStyle(.bordered)
            Spacer()
        }
        .padding(24)
    }
}