/**
 * ErrorView —— 通用失败态组件（F2）。
 *
 * NFR-UX-02「失败必有原因 + 下一步指引」的落地组件：
 *  - message：失败原因（对应 ApiError.message）
 *  - hint：下一步指引（对应 ApiError.hint，可空则不渲染）
 *  - onRetry：可选「重试」回调，不传则不渲染按钮
 * 其它 FE 任务可直接 import 本组件复用（目录带 f2 前缀，迁移由协调者做）。
 */

import { COLOR_PRIMARY } from '../../core/Theme'

const TEXT_PRIMARY: string = '#222222'
const TEXT_SECONDARY: string = '#8A9099'
const WARN: string = '#FF9F0A'
const WARN_BG: string = '#FFF4E0'
const ACCENT: string = COLOR_PRIMARY

@Component
export struct ErrorView {
  @Prop message: string = '请求失败，请检查网络'
  @Prop hint: string = ''
  @Prop retryText: string = '重试'
  onRetry?: () => void

  build() {
    Column({ space: 10 }) {
      Text('!')
        .fontSize(26)
        .fontWeight(FontWeight.Bold)
        .fontColor(WARN)
        .width(56)
        .height(56)
        .textAlign(TextAlign.Center)
        .borderRadius(28)
        .backgroundColor(WARN_BG)
      Text(this.message)
        .fontSize(15)
        .fontWeight(FontWeight.Medium)
        .fontColor(TEXT_PRIMARY)
        .textAlign(TextAlign.Center)
      if (this.hint !== '') {
        Text(this.hint)
          .fontSize(13)
          .fontColor(TEXT_SECONDARY)
          .textAlign(TextAlign.Center)
      }
      if (this.onRetry !== undefined) {
        Button(this.retryText)
          .fontSize(15)
          .fontColor(Color.White)
          .backgroundColor(ACCENT)
          .borderRadius(20)
          .height(40)
          .padding({ left: 32, right: 32 })
          .margin({ top: 6 })
          .onClick(() => {
            if (this.onRetry !== undefined) {
              this.onRetry()
            }
          })
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .padding({ left: 32, right: 32 })
  }
}