import { router } from '@kit.ArkUI';

@Entry
@Component
struct RegisterPage {
  @State username: string = '';
  @State password: string = '';
  @State confirmPassword: string = '';
  @State isLoading: boolean = false;

  build() {
    Column() {
      // 顶部导航栏
      Row() {
        Text('←')
          .fontSize(24)
          .fontColor('#333333')
          .onClick(() => {
            router.back();
          })

        Text('注册账号')
          .fontSize(18)
          .fontWeight(FontWeight.Medium)
          .fontColor('#333333')
          .layoutWeight(1)
          .textAlign(TextAlign.Center)

        // 占位，保持标题居中
        Text('')
          .fontSize(24)
          .width(24)
      }
      .width('100%')
      .height(56)
      .padding({ left: 16, right: 16 })
      .alignItems(VerticalAlign.Center)

      // 表单区域
      Column() {
        // 账号
        Column() {
          Text('账号')
            .fontSize(14)
            .fontColor('#333333')
            .margin({ bottom: 8 })

          TextInput({ placeholder: '请输入手机号/邮箱', text: this.username })
            .height(48)
            .fontSize(16)
            .backgroundColor('#F5F6F7')
            .borderRadius(8)
            .padding({ left: 16, right: 16 })
            .onChange((value: string) => {
              this.username = value;
            })
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)

        // 密码
        Column() {
          Text('密码')
            .fontSize(14)
            .fontColor('#333333')
            .margin({ bottom: 8 })

          TextInput({ placeholder: '请输入密码（至少6位）', text: this.password })
            .height(48)
            .fontSize(16)
            .backgroundColor('#F5F6F7')
            .borderRadius(8)
            .padding({ left: 16, right: 16 })
            .type(InputType.Password)
            .onChange((value: string) => {
              this.password = value;
            })
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)
        .margin({ top: 20 })

        // 确认密码
        Column() {
          Text('确认密码')
            .fontSize(14)
            .fontColor('#333333')
            .margin({ bottom: 8 })

          TextInput({ placeholder: '请再次输入密码', text: this.confirmPassword })
            .height(48)
            .fontSize(16)
            .backgroundColor('#F5F6F7')
            .borderRadius(8)
            .padding({ left: 16, right: 16 })
            .type(InputType.Password)
            .onChange((value: string) => {
              this.confirmPassword = value;
            })
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)
        .margin({ top: 20 })

        // 密码不一致提示
        if (this.confirmPassword.length > 0 && this.password !== this.confirmPassword) {
          Text('两次输入的密码不一致')
            .fontSize(12)
            .fontColor('#FF4D4F')
            .margin({ top: 8 })
        }

        // 注册按钮
        Button(this.isLoading ? '注册中...' : '注册')
          .width('100%')
          .height(48)
          .fontSize(16)
          .fontColor(Color.White)
          .backgroundColor('#4E6EF2')
          .borderRadius(24)
          .margin({ top: 36 })
          .enabled(!this.isLoading && this.isFormValid())
          .opacity(this.isFormValid() ? 1 : 0.6)
          .onClick(() => {
            this.handleRegister();
          })

        // 返回登录
        Row() {
          Text('已有账号？')
            .fontSize(14)
            .fontColor('#999999')
          Text('返回登录')
            .fontSize(14)
            .fontColor('#4E6EF2')
            .fontWeight(FontWeight.Medium)
            .onClick(() => {
              router.back();
            })
        }
        .width('100%')
        .justifyContent(FlexAlign.Center)
        .margin({ top: 20 })
      }
      .width('100%')
      .padding({ left: 32, right: 32 })
      .margin({ top: 24 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.White)
  }

  private isFormValid(): boolean {
    return this.username.length > 0
      && this.password.length >= 6
      && this.password === this.confirmPassword;
  }

  private handleRegister(): void {
    if (!this.isFormValid()) {
      return;
    }

    this.isLoading = true;

    // 模拟注册请求
    setTimeout(() => {
      this.isLoading = false;
      // 注册成功，返回登录页
      router.back();
    }, 1500);
  }
}