//
//  LoginView.swift
//  punchnet
//
//  Created by 安礼成 on 2026/1/15.
//

import SwiftUI
import Observation

// 登陆页面
struct LoginView: View {
    @State private var state = LoginState()
    
    var body: some View {
        VStack {
            Text("PunchNet")
            
            HStack(alignment: .center, spacing: 30) {
                HStack {
                    Image("logo")
                        .resizable()
                        .clipped()
                        .frame(width: 25, height: 25)
                    
                    Text("密钥登陆")
                        .foregroundColor(state.loginMode == .token ? .blue : .black)
                }
                .contentShape(Rectangle())
                .onTapGesture {
                    self.state.loginMode = .token
                }
                
                HStack {
                    Image("logo")
                        .resizable()
                        .clipped()
                        .frame(width: 25, height: 25)
                    Text("账户登陆")
                        .foregroundColor(state.loginMode == .account ? .blue : .black)
                }
                .contentShape(Rectangle())
                .onTapGesture {
                    self.state.loginMode = .account
                }
            }
           
            Group {
                switch state.loginMode {
                case .token:
                    LoginTokenView(state: self.state)
                case .account:
                    LoginAccountView(state: self.state)
                }
            }
            
            Spacer()
        }
        .frame(width: 400, height: 400)
    }
    
}

struct LoginTokenView: View {
    @Bindable var state: LoginState
    
    var body: some View {
        TextField("认证密钥", text: self.$state.token)
            .multilineTextAlignment(.leading)
            .textFieldStyle(PlainTextFieldStyle())
            .frame(width: 200, height: 25)
            .background(Color.clear)
            .foregroundColor(Color.black)
            .overlay(
                Rectangle()
                    .frame(height: 1)
                    .foregroundColor(.blue)
                    .padding(.top, 25)
                , alignment: .topLeading)
        
        Rectangle()
            .overlay {
                Text("登陆")
                    .font(.system(size: 14, weight: .regular))
                    .foregroundColor(.black)
            }
            .frame(width: 120, height: 35)
            .foregroundColor(Color(red: 74 / 255, green: 207 / 255, blue: 154 / 255))
            .cornerRadius(5.0)
            .onTapGesture {
                print("call me here")
            }
    }
    
}

struct LoginAccountView: View {
    @Bindable var state: LoginState

    var body: some View {
        TextField("手机号/邮箱", text: $state.account)
            .multilineTextAlignment(.leading)
            .textFieldStyle(PlainTextFieldStyle())
            .frame(width: 200, height: 25)
            .background(Color.clear)
            .foregroundColor(Color.black)
            .overlay(
                Rectangle()
                    .frame(height: 1)
                    .foregroundColor(.blue)
                    .padding(.top, 25)
                , alignment: .topLeading)
        
        SecureField("密码", text: $state.password)
            .multilineTextAlignment(.leading)
            .textFieldStyle(PlainTextFieldStyle())
            .frame(width: 200, height: 25)
            .background(Color.clear)
            .foregroundColor(Color.black)
            .overlay(
                Rectangle()
                    .frame(height: 1)
                    .foregroundColor(.blue)
                    .padding(.top, 25)
                , alignment: .topLeading)
        
        Rectangle()
            .overlay {
                Text("登陆")
                    .font(.system(size: 14, weight: .regular))
                    .foregroundColor(.black)
            }
            .frame(width: 120, height: 35)
            .foregroundColor(Color(red: 74 / 255, green: 207 / 255, blue: 154 / 255))
            .cornerRadius(5.0)
            .onTapGesture {
                print("call me here")
            }
    }
    
}

#Preview {
    LoginView()
}