/**
 * ProfileContent —— 个人中心内容组件（可内嵌 Tab，也可被 ProfilePage 路由壳复用）。
 *
 * 与 ProfilePage 的分工：本组件承载全部 UI 与数据逻辑；路由壳只负责 @Entry。
 * 未登录时不再强制 router.replaceUrl（内嵌 Tab 时会劫持整个应用壳），
 * 改为页内提示 + 「去登录」按钮。
 *
 * 数据契约（全部走 ApiClient/AuthStore，不直接碰 http）：
 *  - 配额：GET /api/v1/quota?quota_key=agent_chat|tryon|report_basic（并行拉取）
 *  - 流水：GET /api/v1/quota/ledger?limit=10
 * 周期文案按架构文档 §7.4 配额映射：agent_chat/tryon=日、report_basic=终身一次。
 */

import router from '@ohos.router'
import { ApiClient } from '../../core/ApiClient'
import { ApiError } from '../../core/ApiTypes'
import { AuthStore } from '../../core/AuthStore'
import { ErrorBanner } from './ErrorBanner'
import { QuotaCardView } from './QuotaCard'
import { LedgerItemView } from './LedgerItem'

/** GET /api/v1/quota 响应（字段名对齐后端 JSON）。 */
interface QuotaWire {
  quota_key: string
  used: number
  limit_value: number
  bonus_granted: number
  remaining: number
  reset_at: string | null
}

/** GET /api/v1/quota/ledger 数组元素。 */
interface LedgerWire {
  tx_id: string
  delta: number
  tx_type: string
  status: string
  quota_key: string
  balance_after: number
  created_at: string
}

/** 配额卡片的 UI 状态模型。 */
class QuotaCardData {
  title: string
  used: number = 0
  total: number = 0
  remaining: number = 0
  resetText: string = ''
  loaded: boolean = false
  errorText: string = ''

  constructor(title: string) {
    this.title = title
  }
}

/** 流水行的 UI 状态模型（映射/配色在构造期完成）。 */
class LedgerRowData {
  typeText: string = ''
  statusText: string = ''
  statusColor: string = '#999999'
  statusBg: string = '#F4F4F4'
  quotaText: string = ''
  timeText: string = ''
  deltaText: string = ''
  deltaColor: string = '#666666'
  balanceText: string = ''
}

const COLOR_POSITIVE = '#2E9E5B'
const COLOR_NEGATIVE = '#C0392B'
const COLOR_MUTED = '#8A8A8A'

/** quota_key → 中文名（对齐产品方案 §3.2 / 架构文档 §7.4）。 */
function quotaName(key: string): string {
  if (key === 'agent_chat') {
    return 'AI 对话'
  }
  if (key === 'tryon') {
    return '换装试穿'
  }
  if (key === 'hairstyle') {
    return '发型试戴'
  }
  if (key === 'hd_export') {
    return '高清导出'
  }
  if (key === 'report_basic') {
    return '美学报告'
  }
  if (key === 'report_regen') {
    return '报告重新生成'
  }
  return key
}

/** 是否日配额（决定「明日恢复」文案）。 */
function isDailyQuota(key: string): boolean {
  return key === 'agent_chat' || key === 'tryon' || key === 'hairstyle' || key === 'hd_export'
}

/** 周期文案：日配额=明日恢复；月/终身有 reset_at 显示日期；null 按周期区分。 */
function resetTextFor(key: string, resetAt: string | null): string {
  if (resetAt === null || resetAt === '') {
    if (key === 'report_basic') {
      return '一次性额度'
    }
    if (key === 'report_regen') {
      return '每月重置'
    }
    return '每日重置'
  }
  if (isDailyQuota(key)) {
    return '明日恢复'
  }
  const short = resetAt.length >= 10 ? resetAt.substring(5, 10) : resetAt
  return `${short} 重置`
}

/** tx_type → 中文（V1 三种，V2 预留 purchase/gift）。 */
function txTypeText(t: string): string {
  if (t === 'consume') {
    return '消耗'
  }
  if (t === 'refund') {
    return '退还'
  }
  if (t === 'system_grant') {
    return '奖励'
  }
  if (t === 'purchase') {
    return '购买'
  }
  if (t === 'gift') {
    return '赠送'
  }
  return t
}

/** status → 中文（预扣三段式：reserved → committed；退还写反向流水）。 */
function statusTextOf(s: string): string {
  if (s === 'reserved') {
    return '进行中'
  }
  if (s === 'committed') {
    return '已入账'
  }
  if (s === 'refunded') {
    return '已退还'
  }
  return s
}

function statusColorOf(s: string): string {
  if (s === 'reserved') {
    return '#B9770E'
  }
  if (s === 'committed') {
    return COLOR_POSITIVE
  }
  if (s === 'refunded') {
    return COLOR_MUTED
  }
  return '#999999'
}

function statusBgOf(s: string): string {
  if (s === 'reserved') {
    return '#FBF0DC'
  }
  if (s === 'committed') {
    return '#E4F3EA'
  }
  return '#F4F4F4'
}

/** ISO 时间 → 'MM-DD HH:mm'。 */
function timeText(iso: string): string {
  if (iso === '') {
    return '—'
  }
  const t = iso.replace('T', ' ')
  return t.length >= 16 ? t.substring(5, 16) : t
}

/** 用户 ID 脱敏：前 6 后 4。 */
function maskUserId(id: string): string {
  if (id === '') {
    return '未登录'
  }
  if (id.length <= 10) {
    return id
  }
  return `${id.substring(0, 6)}…${id.substring(id.length - 4)}`
}

/** wire → 行视图模型（对象字面量禁裸用，故用 class + 字段赋值）。 */
function toLedgerRow(w: LedgerWire): LedgerRowData {
  const row = new LedgerRowData()
  row.typeText = txTypeText(w.tx_type)
  row.statusText = statusTextOf(w.status)
  row.statusColor = statusColorOf(w.status)
  row.statusBg = statusBgOf(w.status)
  row.quotaText = quotaName(w.quota_key)
  row.timeText = timeText(w.created_at)
  row.deltaText = w.delta > 0 ? `+${w.delta}` : `${w.delta}`
  row.deltaColor = w.delta > 0 ? COLOR_POSITIVE : (w.delta < 0 ? COLOR_NEGATIVE : COLOR_MUTED)
  row.balanceText = `余额 ${w.balance_after}`
  return row
}

function toApiError(e: Object): ApiError {
  if (e instanceof ApiError) {
    return e
  }
  return new ApiError(50000, '请求失败，请检查网络', '请稍后重试')
}

@Component
export struct ProfileContent {
  @State needLogin: boolean = false
  @State userIdMasked: string = ''
  @State cardChat: QuotaCardData = new QuotaCardData('AI 对话')
  @State cardTryon: QuotaCardData = new QuotaCardData('换装试穿')
  @State cardReport: QuotaCardData = new QuotaCardData('美学报告')
  @State ledgerRows: LedgerRowData[] = []
  @State ledgerLoaded: boolean = false
  @State ledgerError: string = ''
  @State bannerMessage: string = ''
  @State bannerHint: string = ''
  @State refreshing: boolean = false
  @State loggingOut: boolean = false
  private pendingLoads: number = 0

  aboutToAppear(): void {
    // 内嵌 Tab 场景下不能强制跳转登录页（会劫持整个应用壳），
    // 未登录展示页内提示；ProfilePage 路由壳另有拦截
    if (!AuthStore.isLoggedIn()) {
      this.needLogin = true
      return
    }
    const uid = AuthStore.getUserId()
    this.userIdMasked = maskUserId(uid !== undefined ? uid : '')
    this.startLoadAll()
  }

  /** 并行拉三张配额卡 + 流水；计数归零时收起下拉刷新。 */
  private startLoadAll(): void {
    this.bannerMessage = ''
    this.bannerHint = ''
    this.ledgerError = ''
    this.cardChat = new QuotaCardData('AI 对话')
    this.cardTryon = new QuotaCardData('换装试穿')
    this.cardReport = new QuotaCardData('美学报告')
    this.pendingLoads = 4
    this.loadQuota('agent_chat')
    this.loadQuota('tryon')
    this.loadQuota('report_basic')
    this.loadLedger()
  }

  private finishOne(): void {
    if (this.pendingLoads > 0) {
      this.pendingLoads -= 1
    }
    if (this.pendingLoads === 0) {
      this.refreshing = false
    }
  }

  private async loadQuota(key: string): Promise<void> {
    try {
      const q = await ApiClient.get<QuotaWire>(`/api/v1/quota?quota_key=${key}`)
      const data = new QuotaCardData(quotaName(key))
      data.used = q.used
      data.total = q.limit_value + q.bonus_granted
      data.remaining = q.remaining
      data.resetText = resetTextFor(key, q.reset_at)
      data.loaded = true
      this.applyQuota(key, data)
    } catch (e) {
      // 单卡失败不拖垮整页：错误落在卡片内
      const err = toApiError(e)
      const data = new QuotaCardData(quotaName(key))
      data.loaded = true
      data.errorText = err.message
      this.applyQuota(key, data)
    } finally {
      this.finishOne()
    }
  }

  private applyQuota(key: string, data: QuotaCardData): void {
    if (key === 'agent_chat') {
      this.cardChat = data
    } else if (key === 'tryon') {
      this.cardTryon = data
    } else {
      this.cardReport = data
    }
  }

  private async loadLedger(): Promise<void> {
    try {
      const list = await ApiClient.get<LedgerWire[]>('/api/v1/quota/ledger?limit=10')
      const rows: LedgerRowData[] = []
      for (let i = 0; i < list.length; i++) {
        rows.push(toLedgerRow(list[i]))
      }
      this.ledgerRows = rows
      this.ledgerLoaded = true
      this.ledgerError = ''
    } catch (e) {
      const err = toApiError(e)
      this.ledgerLoaded = true
      this.ledgerError = err.hint !== undefined && err.hint !== '' ? `${err.message}（${err.hint}）` : err.message
    } finally {
      this.finishOne()
    }
  }

  private confirmLogout(): void {
    AlertDialog.show({
      title: '确认登出',
      message: '登出后本地会话将清除，配额与报告数据仍保留在账号下。',
      primaryButton: {
        value: '取消',
        action: () => {
          // 仅关闭弹窗
        }
      },
      secondaryButton: {
        value: '登出',
        fontColor: '#C0392B',
        action: () => this.performLogout()
      }
    })
  }

  private async performLogout(): Promise<void> {
    if (this.loggingOut) {
      return
    }
    this.loggingOut = true
    try {
      await AuthStore.logout()
    } finally {
      this.loggingOut = false
      // 内嵌 Tab 时 replaceUrl 替换掉的是整个 HomePage 应用壳，行为正确
      router.replaceUrl({ url: 'pages/LoginPage' })
    }
  }

  /** 未登录占位：页内提示 + 去登录（不强制跳转）。 */
  @Builder
  LoginPrompt() {
    Column({ space: 12 }) {
      Text('☺')
        .fontSize(44)
        .fontColor('#C2C7CE')
      Text('请先登录')
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
        .fontColor('#2B2B2B')
      Text('登录后可查看配额与流水')
        .fontSize(13)
        .fontColor('#9A9A9A')
      Button('去登录')
        .fontSize(15)
        .fontColor(Color.White)
        .backgroundColor('#C2185B')
        .borderRadius(22)
        .height(44)
        .padding({ left: 28, right: 28 })
        .margin({ top: 8 })
        .onClick(() => {
          router.pushUrl({ url: 'pages/LoginPage' })
        })
    }
    .width('100%')
    .layoutWeight(1)
    .justifyContent(FlexAlign.Center)
  }

  build() {
    if (this.needLogin) {
      this.LoginPrompt()
    } else {
      Refresh({ refreshing: $$this.refreshing }) {
        Scroll() {
          Column({ space: 14 }) {
            // 顶部：用户信息 + 登出
            Row({ space: 12 }) {
              Column() {
                Text('美')
                  .fontSize(24)
                  .fontWeight(FontWeight.Bold)
                  .fontColor('#FFFFFF')
              }
              .width(56)
              .height(56)
              .borderRadius(28)
              .backgroundColor('#C2185B')
              .justifyContent(FlexAlign.Center)

              Column({ space: 4 }) {
                Text('美搭用户')
                  .fontSize(17)
                  .fontWeight(FontWeight.Medium)
                  .fontColor('#2B2B2B')
                Text(`ID ${this.userIdMasked}`)
                  .fontSize(12)
                  .fontColor('#9A9A9A')
              }
              .alignItems(HorizontalAlign.Start)
              .layoutWeight(1)

              Button(this.loggingOut ? '登出中…' : '登出')
                .fontSize(13)
                .height(32)
                .borderRadius(16)
                .padding({ left: 14, right: 14 })
                .backgroundColor('#F7E3EA')
                .fontColor('#C2185B')
                .enabled(!this.loggingOut)
                .onClick(() => this.confirmLogout())
            }
            .width('100%')
            .padding(16)
            .borderRadius(16)
            .backgroundColor('#FFFFFF')
            .alignItems(VerticalAlign.Center)

            ErrorBanner({
              message: this.bannerMessage,
              hint: this.bannerHint,
              onClose: () => {
                this.bannerMessage = ''
                this.bannerHint = ''
              }
            })

            // 配额三卡
            Row({ space: 10 }) {
              QuotaCardView({
                title: this.cardChat.title,
                remaining: this.cardChat.remaining,
                used: this.cardChat.used,
                total: this.cardChat.total,
                resetText: this.cardChat.resetText,
                loaded: this.cardChat.loaded,
                errorText: this.cardChat.errorText,
                accent: '#C2185B'
              })
                .layoutWeight(1)

              QuotaCardView({
                title: this.cardTryon.title,
                remaining: this.cardTryon.remaining,
                used: this.cardTryon.used,
                total: this.cardTryon.total,
                resetText: this.cardTryon.resetText,
                loaded: this.cardTryon.loaded,
                errorText: this.cardTryon.errorText,
                accent: '#7A5AF8'
              })
                .layoutWeight(1)

              QuotaCardView({
                title: this.cardReport.title,
                remaining: this.cardReport.remaining,
                used: this.cardReport.used,
                total: this.cardReport.total,
                resetText: this.cardReport.resetText,
                loaded: this.cardReport.loaded,
                errorText: this.cardReport.errorText,
                accent: '#2E9E5B'
              })
                .layoutWeight(1)
            }
            .width('100%')
            .alignItems(VerticalAlign.Top)

            // 最近流水
            Column({ space: 4 }) {
              Text('最近流水')
                .fontSize(16)
                .fontWeight(FontWeight.Medium)
                .fontColor('#2B2B2B')
                .width('100%')

              if (!this.ledgerLoaded) {
                Text('加载中…')
                  .fontSize(13)
                  .fontColor('#BBBBBB')
                  .width('100%')
                  .textAlign(TextAlign.Center)
                  .padding({ top: 24, bottom: 24 })
              } else if (this.ledgerError !== '') {
                Text(this.ledgerError)
                  .fontSize(13)
                  .fontColor('#C0392B')
                  .width('100%')
                  .textAlign(TextAlign.Center)
                  .padding({ top: 24, bottom: 24 })
              } else if (this.ledgerRows.length === 0) {
                Text('暂无流水记录')
                  .fontSize(13)
                  .fontColor('#BBBBBB')
                  .width('100%')
                  .textAlign(TextAlign.Center)
                  .padding({ top: 24, bottom: 24 })
              } else {
                ForEach(this.ledgerRows, (row: LedgerRowData) => {
                  LedgerItemView({
                    typeText: row.typeText,
                    statusText: row.statusText,
                    statusColor: row.statusColor,
                    statusBg: row.statusBg,
                    quotaText: row.quotaText,
                    timeText: row.timeText,
                    deltaText: row.deltaText,
                    deltaColor: row.deltaColor,
                    balanceText: row.balanceText
                  })
                }, (row: LedgerRowData) => `${row.typeText}-${row.quotaText}-${row.timeText}`)
              }

              if (this.ledgerLoaded && this.ledgerRows.length > 0) {
                Text('仅展示最近 10 条，下拉可刷新')
                  .fontSize(11)
                  .fontColor('#B3B3B3')
                  .width('100%')
                  .textAlign(TextAlign.Center)
                  .padding({ top: 8, bottom: 8 })
              }
            }
            .width('100%')
            .padding(16)
            .borderRadius(16)
            .backgroundColor('#FFFFFF')
          }
          .width('100%')
          .padding({ left: 16, right: 16, top: 14, bottom: 32 })
        }
        .scrollBar(BarState.Off)
        .edgeEffect(EdgeEffect.Spring)
        .width('100%')
      }
      .onRefreshing(() => {
        this.startLoadAll()
      })
      .layoutWeight(1)
      .width('100%')
    }
  }
}