<template>
  <view class="page">
    <view class="header-fixed">
      <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
      <text class="page-title">我的</text>
    </view>

    <view class="profile-card" @tap="goProfileEdit">
      <view class="p-avatar">
        <image v-if="userStore.avatarUrl" :src="userStore.avatarUrl" class="p-avatar-img" mode="aspectFill" />
        <Icon v-else name="user" :size="64" color="#FFFFFF" />
      </view>
      <view class="p-info">
        <text class="p-name">{{ userStore.nickname }}</text>
        <text class="p-tagline">{{ userStore.slogan }}</text>
        <text class="p-streak">累计 {{ txStore.total }} 笔记录</text>
      </view>
      <Icon name="chevronRight" :size="28" color="rgba(255,255,255,0.6)" />
    </view>

    <!-- 身份切换 -->
    <view class="identity-card" @tap="showIdentityPicker">
      <Icon name="user" :size="32" color="#FF8C69" />
      <view class="id-info">
        <text class="id-name">{{ groupStore.isGroupMode ? groupStore.currentGroup?.name : '个人账本' }}</text>
        <text class="id-desc">{{ groupStore.isGroupMode ? groupStore.currentGroup?.member_count + ' 人共享' : '仅自己可见' }}</text>
      </view>
      <Icon name="chevronRight" :size="24" color="#BFB3B3" />
    </view>

    <view class="quick-stats">
      <view class="qs-card">
        <text class="qs-label">本月支出</text>
        <text class="qs-value" v-if="!loading">{{ formatAmount(overview.expense) }}</text>
        <view class="qs-skeleton" v-else></view>
      </view>
      <view class="qs-card">
        <text class="qs-label">本月收入</text>
        <text class="qs-value income" v-if="!loading">{{ formatAmount(overview.income) }}</text>
        <view class="qs-skeleton" v-else></view>
      </view>
    </view>

    <view class="menu-card">
      <view class="menu-item" @tap="goBudget">
        <text class="mi-label">预算设置</text>
        <text class="mi-extra" v-if="budget">{{ formatAmount(budget.amount) }}</text>
        <Icon name="chevronRight" :size="24" color="#BFB3B3" />
      </view>
      <view class="menu-item" @tap="goCategoryManage">
        <text class="mi-label">分类管理</text>
        <Icon name="chevronRight" :size="24" color="#BFB3B3" />
      </view>
      <view class="menu-item" @tap="exportData">
        <text class="mi-label">数据导出</text>
        <Icon name="chevronRight" :size="24" color="#BFB3B3" />
      </view>
    </view>

    <view class="menu-card mt">
      <view class="menu-item" @tap="goFeedback">
        <text class="mi-label">意见反馈</text>
        <Icon name="chevronRight" :size="24" color="#BFB3B3" />
      </view>
      <view class="menu-item" @tap="showAbout = true">
        <text class="mi-label">关于小菜</text>
        <Icon name="chevronRight" :size="24" color="#BFB3B3" />
      </view>
      <view class="menu-item" @tap="goPrivacy">
        <text class="mi-label">隐私政策</text>
        <Icon name="chevronRight" :size="24" color="#BFB3B3" />
      </view>
    </view>

    <!-- 管理员入口 -->
    <view v-if="userStore.userInfo?.role === 'admin'" class="menu-card mt">
      <view class="menu-item admin-entry" @tap="goAdmin">
        <Icon name="settings" :size="32" color="#FF8C69" />
        <text class="mi-label">管理后台</text>
        <Icon name="chevronRight" :size="24" color="#BFB3B3" />
      </view>
    </view>

    <!-- 关于弹窗 -->
    <view class="modal-mask" v-if="showAbout" @tap="showAbout = false">
      <view class="modal" @tap.stop>
        <text class="about-title">{{ configStore.appName }}</text>
        <text class="about-version">v{{ configStore.config.app_version || '1.0.0' }}</text>
        <text class="about-desc">{{ configStore.appSlogan }}</text>
        <text class="about-desc">{{ configStore.appDescription }}</text>
        <view class="modal-btns modal-btns-top">
          <view class="modal-btn confirm" @tap="showAbout = false">知道了</view>
        </view>
      </view>
    </view>

    <!-- 身份选择弹窗 -->
    <view class="modal-mask" v-if="showIdentity" @tap="showIdentity = false">
      <view class="identity-modal" @tap.stop>
        <text class="modal-title">切换账本</text>

        <view class="id-option" :class="{ active: !groupStore.isGroupMode }" @tap="switchToPersonal">
          <Icon name="user" :size="36" :color="!groupStore.isGroupMode ? '#FF8C69' : '#8B7E7E'" />
          <text class="id-option-name">个人账本</text>
          <Icon v-if="!groupStore.isGroupMode" name="check" :size="28" color="#FF8C69" />
        </view>

        <view v-for="g in groupStore.groups" :key="g.id"
          class="id-option" :class="{ active: groupStore.currentGroupId === g.id }"
          @tap="switchToGroup(g.id)">
          <Icon name="user" :size="36" :color="groupStore.currentGroupId === g.id ? '#FF8C69' : '#8B7E7E'" />
          <view class="id-option-info">
            <text class="id-option-name">{{ g.name }}</text>
            <text class="id-option-desc">{{ g.member_count }} 人</text>
          </view>
          <Icon v-if="groupStore.currentGroupId === g.id" name="check" :size="28" color="#FF8C69" />
        </view>

        <view class="id-actions">
          <view class="id-action-btn" @tap="promptCreateGroup">
            <text class="id-action-text">创建群组</text>
          </view>
          <view class="id-action-btn" @tap="promptJoinGroup">
            <text class="id-action-text">加入群组</text>
          </view>
        </view>

        <view class="id-manage" @tap="goGroupManage">
          <text class="id-manage-text">管理群组</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
import { useTransactionStore } from '@/stores/transaction'
import { useStatsStore } from '@/stores/stats'
import { useBudgetStore } from '@/stores/budget'
import { useUserStore } from '@/stores/user'
import { useGroupStore } from '@/stores/group'
import { useConfigStore } from '@/stores/config'
import { waitForReady } from '@/utils/app-ready'
import { getTransactions } from '@/api/transaction'
import { formatAmount } from '@/utils/format'
import { statusBarHeight } from '@/utils/system'
import Icon from '@/components/Icon/Icon.vue'

const txStore = useTransactionStore()
const statsStore = useStatsStore()
const budgetStore = useBudgetStore()
const userStore = useUserStore()
const groupStore = useGroupStore()
const configStore = useConfigStore()

const overview = computed(() => statsStore.overview)
const budget = computed(() => budgetStore.budget)
const loading = ref(true)
const showAbout = ref(false)
const showIdentity = ref(false)
const initialLoaded = ref(false)

onMounted(async () => {
  await waitForReady()
  loading.value = true
  try {
    await Promise.all([
      statsStore.fetchOverview(),
      budgetStore.fetchBudget(),
      txStore.fetchTransactions({ page: 1, pageSize: 1 }),
      userStore.fetchUserInfo(),
      groupStore.fetchGroups()
    ])
  } catch (e) {
    console.error('Profile load error:', e)
  } finally {
    loading.value = false
    initialLoaded.value = true
  }
})

// 返回页面时静默刷新
onShow(async () => {
  if (!initialLoaded.value) return
  try {
    await Promise.all([
      statsStore.fetchOverview(),
      budgetStore.fetchBudget(),
      txStore.fetchTransactions({ page: 1, pageSize: 1 }),
      groupStore.fetchGroups(),
      userStore.fetchUserInfo()
    ])
  } catch {}
})

onPullDownRefresh(async () => {
  try {
    await Promise.all([
      statsStore.fetchOverview(),
      budgetStore.fetchBudget(),
      txStore.fetchTransactions({ page: 1, pageSize: 1 }),
      groupStore.fetchGroups(),
      userStore.fetchUserInfo(),
      configStore.fetchConfig()
    ])
  } catch {}
  uni.stopPullDownRefresh()
})

function goBudget() {
  uni.navigateTo({ url: '/pages/budget/index' })
}

function goCategoryManage() {
  uni.navigateTo({ url: '/pages/category-manage/index' })
}

function goPrivacy() {
  uni.navigateTo({ url: '/pages/privacy/index' })
}

function goFeedback() {
  uni.navigateTo({ url: '/pages/feedback/index' })
}

function goProfileEdit() {
  uni.navigateTo({ url: '/pages/profile-edit/index' })
}

function showIdentityPicker() {
  showIdentity.value = true
}

function switchToPersonal() {
  groupStore.switchToPersonal()
  showIdentity.value = false
}

function switchToGroup(id: number) {
  groupStore.switchToGroup(id)
  showIdentity.value = false
}

function goGroupManage() {
  showIdentity.value = false
  uni.navigateTo({ url: '/pages/group-manage/index' })
}

function goAdmin() {
  uni.navigateTo({ url: '/pages/admin/index' })
}

function promptCreateGroup() {
  // #ifdef MP-WEIXIN
  // 小程序不支持 prompt，使用输入框页面
  uni.showModal({
    title: '创建群组',
    editable: true,
    placeholderText: '请输入群组名称',
    success: async (res) => {
      if (res.confirm && res.content) {
        try {
          const result = await groupStore.createGroup(res.content.trim())
          uni.setClipboardData({
            data: result.invite_code,
            success: () => uni.showToast({ title: '邀请码已复制', icon: 'success' })
          })
        } catch (e: any) {
          uni.showToast({ title: e.message || '创建失败', icon: 'none' })
        }
      }
    }
  })
  // #endif
  // #ifdef H5
  const name = window.prompt('请输入群组名称')
  if (name) {
    groupStore.createGroup(name.trim()).then((result) => {
      navigator.clipboard?.writeText(result.invite_code)
      uni.showToast({ title: `邀请码 ${result.invite_code} 已复制`, icon: 'success' })
    }).catch((e: any) => {
      uni.showToast({ title: e.message || '创建失败', icon: 'none' })
    })
  }
  // #endif
}

function promptJoinGroup() {
  // #ifdef MP-WEIXIN
  uni.showModal({
    title: '加入群组',
    editable: true,
    placeholderText: '请输入邀请码',
    success: async (res) => {
      if (res.confirm && res.content) {
        try {
          const result = await groupStore.joinGroup(res.content.trim())
          uni.showToast({ title: `已加入「${result.name}」`, icon: 'success' })
        } catch (e: any) {
          uni.showToast({ title: e.message || '加入失败', icon: 'none' })
        }
      }
    }
  })
  // #endif
  // #ifdef H5
  const code = window.prompt('请输入邀请码')
  if (code) {
    groupStore.joinGroup(code.trim()).then((result) => {
      uni.showToast({ title: `已加入「${result.name}」`, icon: 'success' })
    }).catch((e: any) => {
      uni.showToast({ title: e.message || '加入失败', icon: 'none' })
    })
  }
  // #endif
}

function getLocalDateStr(): string {
  const d = new Date()
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
}

async function exportData() {
  uni.showLoading({ title: '导出中 0%' })
  try {
    // 分页获取全部数据（服务端 pageSize 上限 100）
    const allList: any[] = []
    let page = 1
    let total = 0
    do {
      const data = await getTransactions({ page, pageSize: 100, group_id: groupStore.currentGroupId })
      allList.push(...data.list)
      total = data.total
      page++
      // 更新进度
      const progress = Math.min(100, Math.round((allList.length / total) * 100))
      uni.showLoading({ title: `导出中 ${progress}%` })
    } while (allList.length < total)

    if (allList.length === 0) {
      uni.hideLoading()
      uni.showToast({ title: '暂无数据', icon: 'none' })
      return
    }

    function csvEscape(val: string): string {
      if (val.includes(',') || val.includes('"') || val.includes('\n')) {
        return '"' + val.replace(/"/g, '""') + '"'
      }
      return val
    }
    const header = '日期,类型,分类,金额(元),备注\n'
    const rows = allList.map(t => {
      const amount = (t.amount / 100).toFixed(2)
      const type = t.type === 'expense' ? '支出' : '收入'
      return [t.date, type, t.category_name || '未分类', amount, t.note || ''].map(csvEscape).join(',')
    }).join('\n')

    const csv = '﻿' + header + rows

    // #ifdef H5
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `小菜记账_${getLocalDateStr()}.csv`
    a.click()
    URL.revokeObjectURL(url)
    uni.hideLoading()
    uni.showToast({ title: '导出成功', icon: 'success' })
    // #endif

    // #ifdef MP-WEIXIN
    const fs = uni.getFileSystemManager()
    const filePath = `${wx.env.USER_DATA_PATH}/小菜记账_${getLocalDateStr()}.csv`
    fs.writeFileSync(filePath, csv, 'utf-8')
    uni.hideLoading()
    uni.openDocument({
      filePath,
      fileType: 'csv',
      success: () => {},
      fail: () => uni.showToast({ title: '导出失败', icon: 'none' })
    })
    // #endif
  } catch {
    uni.hideLoading()
    uni.showToast({ title: '导出失败', icon: 'none' })
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixins.scss';

.page {
  @include page-base;
}

.header-fixed {
  @include sticky-header;
}

.status-bar {
  @include status-bar;
}

.page-title {
  display: block;
  text-align: center;
  font-size: $font-2xl;
  font-weight: 600;
  color: $text;
  padding: $space-sm 0 $space-md;
}

.profile-card {
  margin: 0 $space-xl;
  padding: $space-2xl;
  background: linear-gradient(135deg, $primary, #FFB89A);
  border-radius: $radius-2xl;
  box-shadow: 8rpx 8rpx 24rpx rgba(45, 27, 27, 0.1);
  display: flex;
  align-items: center;
  gap: $space-lg;

  &:active { opacity: 0.85; }
}

.p-avatar {
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  border: 6rpx solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-name {
  font-size: $font-3xl;
  font-weight: 600;
  color: $surface;
  display: block;
}

.p-tagline {
  font-size: $font-lg;
  color: rgba(255, 255, 255, 0.8);
  display: block;
  margin-top: 4rpx;
}

.p-streak {
  font-size: $font-md;
  color: rgba(255, 255, 255, 0.65);
  display: block;
  margin-top: $space-sm;
}

.quick-stats {
  display: flex;
  gap: $space-md;
  padding: 0 $space-xl;
  margin-top: $space-lg;
}

.qs-card {
  flex: 1;
  padding: $space-lg $space-md;
  background: $surface;
  border-radius: 32rpx;
  border: 2rpx solid $border;
  box-shadow: $shadow-md;
  text-align: center;
}

.qs-label {
  font-size: $font-md;
  color: $text-sec;
  display: block;
  margin-bottom: $space-xs;
}

.qs-value {
  font-family: 'Fredoka', sans-serif;
  font-size: $font-xl;
  font-weight: 600;
  color: $text;

  &.income { color: $success; }
}

.qs-skeleton {
  width: 160rpx;
  height: 40rpx;
  @include shimmer;
  border-radius: $radius-xs;
  margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .qs-skeleton {
    animation: none;
  }
}

.menu-card {
  margin: $space-xl $space-xl 0;
  background: $surface;
  border-radius: $radius-2xl;
  border: 2rpx solid $border;
  box-shadow: $shadow-md;
  overflow: hidden;

  &.mt { margin-top: $space-lg; }
}

.menu-item {
  height: 112rpx;
  padding: 0 $space-xl;
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid $border;

  &:last-child { border-bottom: none; }
  &:active { background: $bg; }
}

.mi-label { flex: 1; font-size: $font-lg; font-weight: 500; color: $text; }
.mi-extra { font-size: $font-lg; color: $primary; font-weight: 600; margin-right: $space-sm; }

.admin-entry {
  gap: $space-sm;
  .mi-label { color: $primary; font-weight: 600; }
}

.about-title {
  font-size: $font-3xl;
  font-weight: 600;
  color: $primary;
  display: block;
  text-align: center;
}

.about-version {
  font-size: $font-md;
  color: $text-muted;
  display: block;
  text-align: center;
  margin: $space-xs 0 $space-md;
}

.about-desc {
  font-size: $font-lg;
  color: $text-sec;
  display: block;
  text-align: center;
  margin-bottom: $space-xs;
}

.modal-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal {
  width: 600rpx;
  background: $surface;
  border-radius: $space-lg;
  padding: $space-2xl;
}

.modal-btns {
  display: flex;
  gap: $space-md;
}

.modal-btns-top {
  margin-top: $space-xl;
}

.modal-btn {
  flex: 1;
  height: 88rpx;
  border-radius: $space-md;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: $font-lg;
  font-weight: 600;

  &.confirm {
    background: linear-gradient(135deg, $primary, #E67355);
    color: $surface;
  }
}

.p-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.identity-card {
  margin: $space-md $space-xl 0;
  padding: $font-lg $space-lg;
  background: $surface;
  border-radius: $radius-xl;
  border: 2rpx solid $border;
  box-shadow: $shadow-md;
  display: flex;
  align-items: center;
  gap: $space-lg;

  &:active { background: $surface-warm; }
}

.id-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.id-name {
  font-size: $font-lg;
  font-weight: 600;
  color: $text;
}

.id-desc {
  font-size: $font-md;
  color: $text-muted;
  margin-top: 4rpx;
}

.identity-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: $surface;
  border-radius: $radius-2xl $radius-2xl 0 0;
  padding: $space-xl;
  padding-bottom: calc($space-xl + env(safe-area-inset-bottom));
  max-height: 70vh;
  overflow-y: auto;
}

.modal-title {
  font-size: $font-xl;
  font-weight: 600;
  color: $text;
  display: block;
  text-align: center;
  margin-bottom: $space-lg;
}

.id-option {
  display: flex;
  align-items: center;
  gap: $space-lg;
  padding: $font-lg $space-md;
  border-radius: $radius-lg;
  margin-bottom: 12rpx;

  &.active { background: $surface-warm; }
  &:active { background: $bg; }
}

.id-option-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.id-option-name {
  font-size: $font-lg;
  font-weight: 500;
  color: $text;
}

.id-option-desc {
  font-size: $font-md;
  color: $text-muted;
  margin-top: 2rpx;
}

.id-actions {
  display: flex;
  gap: $space-md;
  margin-top: $space-md;
  padding-top: $space-md;
  border-top: 1rpx solid $border;
}

.id-action-btn {
  flex: 1;
  height: 80rpx;
  border-radius: $radius-lg;
  background: $surface-warm;
  display: flex;
  align-items: center;
  justify-content: center;

  &:active { background: darken($surface-warm, 3%); }
}

.id-action-text {
  font-size: $font-lg;
  font-weight: 500;
  color: $primary;
}

.id-manage {
  margin-top: $space-sm;
  padding: $space-md $space-lg;
  text-align: center;

  &:active { background: $surface-warm; border-radius: $radius-md; }
}

.id-manage-text {
  font-size: $font-base;
  color: $text-sec;
}
</style>
