/**
 * 分享指引弹窗（文本分享用；图片分享走系统分享面板、不经此）。居中卡片：
 * 标题「{渠道}分享准备完成」+「内容已复制到剪贴板」+ 分步指引 + 「稍后分享」/「立即打开{渠道}」。
 * 纯展示组件：动作经 onPick 回容器，由容器一次性 resultEvent 回投 ShareProvider。
 */
@Component
export struct ShareGuideDialog {
  /** 渠道：'wechat' | 'qq' | 'douyin'。 */
  platform: string = 'wechat';
  /** 是否朋友圈直发（true=微信朋友圈，引导发朋友圈；false=好友/群聊）。 */
  timeline: boolean = false;
  /** 动作回调：'open'（立即打开App）| 'cancel'（稍后分享/点空白）。 */
  onPick: (action: string) => void = () => { };

  private appName(): string {
    if (this.platform === 'qq') {
      return 'QQ';
    }
    if (this.platform === 'douyin') {
      return '抖音';
    }
    return '微信';
  }

  /** 渠道主题色（标题序号徽标 + 打开按钮）。 */
  private appColor(): string {
    if (this.platform === 'qq') {
      return '#12B7F5';
    }
    if (this.platform === 'douyin') {
      return '#FE2C55';
    }
    return '#07C160';
  }

  /** 步骤标题。 */
  private stepHeader(): string {
    return this.timeline ? '🎯 分享到朋友圈步骤：' : '🎯 分享到好友或群聊步骤：';
  }

  /** 分步文案：朋友圈直发一套；否则各渠道"好友或群聊"一套（差异在第 1 步进入聊天的入口）。 */
  private steps(): string[] {
    if (this.timeline) {
      // 微信朋友圈（sharefriend==2 直发微信）
      return ['打开微信，进入「发现」→「朋友圈」', '长按右上角相机图标（发表文字）', '在输入框长按粘贴内容', '点击「发表」即可分享'];
    }
    if (this.platform === 'qq') {
      return ['打开QQ，进入「消息」列表', '选择好友或群聊进入聊天', '在输入框长按粘贴内容', '点击发送即可分享'];
    }
    if (this.platform === 'douyin') {
      return ['打开抖音，点击右下角「消息」', '选择好友或群聊进入聊天', '在输入框长按粘贴内容', '点击发送即可分享'];
    }
    return ['打开微信，进入聊天列表', '选择好友或群聊进入聊天', '在输入框长按粘贴内容', '点击发送即可分享'];
  }

  @Builder
  stepRow(index: number, text: string) {
    Row() {
      Text(`${index + 1}`)
        .fontSize(13)
        .fontColor(Color.White)
        .width(20)
        .height(20)
        .textAlign(TextAlign.Center)
        .backgroundColor(this.appColor())
        .borderRadius(4)
      Text(text)
        .fontSize(14)
        .fontColor('#333333')
        .margin({ left: 10 })
        .layoutWeight(1)
    }
    .width('100%')
    .margin({ top: 10 })
    .alignItems(VerticalAlign.Center)
  }

  build() {
    Column() {
      Column() {
        Text(`${this.appName()}分享准备完成`)
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .fontColor('#222222')
          .width('100%')

        Row() {
          Text('✅').fontSize(15)
          Text('内容已复制到剪贴板')
            .fontSize(14)
            .fontColor('#333333')
            .margin({ left: 6 })
        }
        .width('100%')
        .margin({ top: 14 })

        Text(this.stepHeader())
          .fontSize(14)
          .fontColor('#666666')
          .width('100%')
          .margin({ top: 14 })

        ForEach(this.steps(), (item: string, index: number) => {
          this.stepRow(index, item)
        })

        Row() {
          Button('稍后分享')
            .fontSize(16)
            .fontColor('#666666')
            .backgroundColor('#F2F2F2')
            .layoutWeight(1)
            .onClick(() => this.onPick('cancel'))
          Button(`立即打开${this.appName()}`)
            .fontSize(16)
            .fontColor(Color.White)
            .backgroundColor(this.appColor())
            .layoutWeight(1)
            .margin({ left: 12 })
            .onClick(() => this.onPick('open'))
        }
        .width('100%')
        .margin({ top: 22 })
      }
      .width('82%')
      .padding(20)
      .backgroundColor(Color.White)
      .borderRadius(16)
      .onClick(() => { /* 消费点击，避免穿透到遮罩 */ })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('rgba(0,0,0,0.45)')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .onClick(() => this.onPick('cancel'))
  }
}