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

import SwiftUI

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

struct LoginTokenView: View {
    @Binding var token: String
    
    var body: some View {
        TextField("认证密钥", text: $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 {
    @Binding var account: String
    @Binding var password: String

    var body: some View {
        TextField("手机号/邮箱", text: $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)
        
        TextField("密码", text: $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)
        
        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()
}