// 我的页签（对齐小程序 profile：用户信息 + 菜单 + 退出登录，ArkTS 严格类型，无 any）
import { router, promptAction, uiMaterial } from '@kit.ArkUI';
import { common } from '@kit.AbilityKit';
import { pasteboard } from '@kit.BasicServicesKit';
import { UnifiedRole, ROLE_NAME_MAP } from '../../common/ApiConstants';
import { AuthStore } from '../../utils/AuthStore';
import { PushManager } from '../../utils/PushManager';
import { FontScaleLevel, FontScaleOption, FONT_SCALE_LABELS, loadFontScale, setFontScale } from '../../utils/FontScale';

interface ProfileMenu {
  key: string;
  title: string;
  desc: string;
  route: string; // 空字符串表示未实现
}

@Component
export struct ProfileTab {
  @State userName: string = '';
  @State role: UnifiedRole | null = null;
  @State isLoggedIn: boolean = false;
  @State pushToken: string = '';
  @State fontScale: FontScaleLevel = 'system';
  @StorageProp('fontScale') fontScaleLevel: FontScaleLevel = 'system';

  menus: Array<ProfileMenu> = [
    { key: 'notifications', title: '消息通知', desc: '系统与预警通知', route: 'pages/notifications/Notifications' },
    { key: 'records', title: '我的记录', desc: '我提交过的护理记录', route: 'pages/nurse/History' },
    { key: 'feedback', title: '意见反馈', desc: '提交使用建议', route: 'pages/profile/Feedback' },
    { key: 'about', title: '关于应用', desc: '版本与说明', route: 'pages/profile/About' },
  ];

  // 按角色过滤"我的"菜单：消防的记录是巡更记录，销售无记录入口
  private visibleMenus(): Array<ProfileMenu> {
    const role = this.role;
    if (role === 'fire_control') {
      return this.menus.map((m: ProfileMenu): ProfileMenu => {
        if (m.key === 'records') {
          return { key: 'records_fire', title: '我的巡更记录', desc: '我提交过的巡更打卡', route: 'pages/fire-control/FirePatrolHome' } as ProfileMenu;
        }
        return m;
      });
    }
    if (role === 'sales') {
      return this.menus.filter((m: ProfileMenu): boolean => m.key !== 'records');
    }
    return this.menus;
  }

  aboutToAppear(): void {
    this.loadAuth();
  }

  private async loadAuth(): Promise<void> {
    const state = await AuthStore.getState();
    this.userName = state.userName;
    this.role = state.role;
    this.isLoggedIn = state.token.length > 0;
    this.pushToken = PushManager.getToken();
    loadFontScale(getContext(this) as common.UIAbilityContext).then((level: FontScaleLevel) => {
      this.fontScale = level;
    });
  }

  private changeFontScale(level: FontScaleLevel): void {
    this.fontScale = level;
    setFontScale(getContext(this) as common.UIAbilityContext, level);
    const label = FONT_SCALE_LABELS.find((item: FontScaleOption) => item.level === level)?.label ?? '';
    promptAction.showToast({ message: `字体已调整为${label}` });
  }

  private copyPushToken(): void {
    if (this.pushToken.length === 0) {
      promptAction.showToast({ message: '推送令牌为空（未获取成功）' });
      return;
    }
    const data = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, this.pushToken);
    pasteboard.getSystemPasteboard().setData(data).then(() => {
      promptAction.showToast({ message: '推送令牌已复制' });
    }).catch(() => {
      promptAction.showToast({ message: '复制失败' });
    });
  }

  private onMenuClick(menu: ProfileMenu): void {
    if (menu.route.length === 0) {
      promptAction.showToast({ message: '功能开发中' });
      return;
    }
    router.pushUrl({ url: menu.route }).catch(() => {});
  }

  private async logout(): Promise<void> {
    await AuthStore.logout();
    this.isLoggedIn = false;
    promptAction.showToast({ message: '已退出登录' });
    router.replaceUrl({ url: 'pages/Login' }).catch(() => {});
  }

  private roleName(): string {
    if (!this.isLoggedIn) {
      return '未登录';
    }
    return this.role ? (ROLE_NAME_MAP[this.role] ?? '员工') : '员工';
  }

  @Builder
  MenuRow(menu: ProfileMenu) {
    Row({ space: 12 }) {
      Column({ space: 4 }) {
        Text(menu.title)
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .fontColor($r('app.color.text_primary'))
        Text(menu.desc)
          .fontSize(12)
          .fontColor($r('app.color.text_secondary'))
      }
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)

      Text('›')
        .fontSize(22)
        .fontColor($r('app.color.inactive_tab'))
    }
    .width('100%')
    .padding(16)
    .backgroundColor(Color.Transparent)
    .backgroundBlurStyle(BlurStyle.Thin)
    .borderRadius(14)
    .onClick(() => {
      this.onMenuClick(menu);
    })
  }

  build() {
    Scroll() {
      Column({ space: 16 }) {
        // 用户信息卡
        Row({ space: 14 }) {
          Stack() {
            Circle()
              .width(60)
              .height(60)
              .fill(this.isLoggedIn ? $r('app.color.accent_blue') : $r('app.color.inactive_tab'))
            Text(this.isLoggedIn && this.userName.length > 0 ? this.userName.substring(0, 1) : '未')
              .fontSize(22)
              .fontWeight(FontWeight.Bold)
              .fontColor('#FFFFFF')
          }
          .width(60)
          .height(60)

          Column({ space: 4 }) {
            Text(this.isLoggedIn ? this.userName : '未登录')
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
              .fontColor($r('app.color.text_primary'))
            Text(this.roleName())
              .fontSize(13)
              .fontColor($r('app.color.text_secondary'))
          }
          .layoutWeight(1)
          .alignItems(HorizontalAlign.Start)
        }
        .width('92%')
        .padding(20)
        .backgroundColor($r('app.color.background_card'))
        .borderRadius(16)
        .margin({ top: 24 })

        // 推送令牌（调试用）
        Column({ space: 6 }) {
          Text('推送令牌（点按复制）')
            .fontSize(14)
            .fontColor($r('app.color.text_secondary'))
          Text(this.pushToken.length > 0 ? this.pushToken : '未获取到推送令牌')
            .fontSize(11)
            .fontColor($r('app.color.text_primary'))
            .maxLines(3)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .width('100%')
        }
        .width('92%')
        .padding(16)
        .backgroundColor($r('app.color.background_card'))
        .borderRadius(14)
        .alignItems(HorizontalAlign.Start)
        .onClick(() => {
          this.copyPushToken();
        })

        // 字体大小（家属）
        if (this.role === 'family') {
          Column({ space: 8 }) {
            Text('字体大小')
              .fontSize(15)
              .fontColor($r('app.color.text_primary'))
              .width('100%')
            Flex({ wrap: FlexWrap.Wrap, alignItems: ItemAlign.Center }) {
              ForEach(FONT_SCALE_LABELS, (item: FontScaleOption) => {
                Text(item.label)
                  .fontSize(15)
                  .fontColor(this.fontScale === item.level ? '#FFFFFF' : $r('app.color.text_primary'))
                  .padding({ left: 18, right: 18, top: 10, bottom: 10 })
                  .backgroundColor(this.fontScale === item.level ? $r('app.color.accent_blue') : $r('app.color.background_card'))
                  .borderRadius(10)
                  .margin({ right: 10, bottom: 10 })
                  .onClick(() => {
                    this.changeFontScale(item.level);
                  })
              }, (item: FontScaleOption) => item.level)
            }
            .width('100%')
          }
          .width('92%')
          .padding(16)
          .backgroundColor($r('app.color.background_card'))
          .borderRadius(14)
          .alignItems(HorizontalAlign.Start)
        }

        // 菜单列表
        Column({ space: 8 }) {
          ForEach(this.visibleMenus(), (menu: ProfileMenu) => {
            this.MenuRow(menu)
          }, (menu: ProfileMenu) => menu.key)
        }
        .width('92%')

        // 登录/退出
        if (this.isLoggedIn) {
          Button('退出登录')
            .width('92%')
            .height(48)
            .fontColor('#FFFFFF')
            .backgroundColor($r('app.color.accent_red'))
            .borderRadius(12)
            .onClick(() => {
              this.logout();
            })
        } else {
          Button('去登录')
            .width('92%')
            .height(48)
            .fontColor('#FFFFFF')
            .backgroundColor($r('app.color.accent_blue'))
            .borderRadius(12)
            .onClick(() => {
              router.pushUrl({ url: 'pages/Login' }).catch(() => {});
            })
        }
      }
      .width('100%')
      .alignItems(HorizontalAlign.Center)
      .padding({ bottom: 120 })
    }
    .scrollBar(BarState.Auto)
    .edgeEffect(EdgeEffect.Spring)
    .width('100%')
    .height('100%')
  }
}