<template>
  <view class="page">
    <NavBar title="我的" />

    <!-- Loading -->
    <view class="load-tip" v-if="loading">
      <view class="dot-row">
        <view class="pulse-dot"></view>
        <view class="pulse-dot"></view>
        <view class="pulse-dot"></view>
      </view>
    </view>

    <template v-else>
      <!-- User card -->
      <view class="user-section">
        <view class="user-card">
          <view class="user-header">
            <view class="avatar">
              <text class="avatar-text">{{ userInfo.nickname?.charAt(0) || 'A' }}</text>
            </view>
            <view class="user-info">
              <text class="user-name">{{ userInfo.nickname || '未登录' }}</text>
              <text class="user-role">{{ userInfo.roleName || '管理员' }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- Menu sections -->
      <view class="menu-section">
        <!-- Replenisher menu -->
        <view class="menu-card" v-if="isReplenisherUser">
          <text class="menu-title">补货管理</text>
          <view class="menu-list">
            <view class="menu-item" @click="handleReplenisherHome">
              <view class="menu-icon green">
                <view class="icon-device"></view>
              </view>
              <view class="menu-content">
                <text class="menu-name">补货首页</text>
                <text class="menu-desc">查看设备和执行补货</text>
              </view>
              <view class="menu-arrow"></view>
            </view>
          </view>
        </view>

        <!-- Admin menu -->
        <view class="menu-card" v-if="!isReplenisherUser">
          <text class="menu-title">业务管理</text>
          <view class="menu-list">
            <view class="menu-item" @click="navigateTo('/pages/replenish/index')">
              <view class="menu-icon amber">
                <view class="icon-replenish"></view>
              </view>
              <view class="menu-content">
                <text class="menu-name">补货管理</text>
                <text class="menu-desc">设备补货与库存管理</text>
              </view>
              <view class="menu-arrow"></view>
            </view>
            <view class="menu-item" @click="navigateTo('/pages/shop/list')">
              <view class="menu-icon amber">
                <view class="icon-shop"></view>
              </view>
              <view class="menu-content">
                <text class="menu-name">门店管理</text>
                <text class="menu-desc">查看和管理门店信息</text>
              </view>
              <view class="menu-arrow"></view>
            </view>

            <view class="menu-item" @click="navigateTo('/pages/products/list')">
              <view class="menu-icon purple">
                <view class="icon-product"></view>
              </view>
              <view class="menu-content">
                <text class="menu-name">商品管理</text>
                <text class="menu-desc">管理商品和价格</text>
              </view>
              <view class="menu-arrow"></view>
            </view>

            <view class="menu-item" @click="navigateTo('/pages/inventory/query')">
              <view class="menu-icon cyan">
                <view class="icon-chart"></view>
              </view>
              <view class="menu-content">
                <text class="menu-name">库存查询</text>
                <text class="menu-desc">查看库存情况</text>
              </view>
              <view class="menu-arrow"></view>
            </view>

            <view class="menu-item" @click="navigateTo('/pages/inventory/warning')">
              <view class="menu-icon rose">
                <view class="icon-warning"></view>
              </view>
              <view class="menu-content">
                <text class="menu-name">库存预警</text>
                <text class="menu-desc">低库存和缺货提醒</text>
              </view>
              <view class="menu-arrow"></view>
            </view>
            <view class="menu-item" @click="navigateTo('/pages/orders/refund-list')">
              <view class="menu-icon rose">
                <view class="icon-warning"></view>
              </view>
              <view class="menu-content">
                <text class="menu-name">退款管理</text>
                <text class="menu-desc">退款申请审核</text>
              </view>
              <view class="menu-arrow"></view>
            </view>
            <view class="menu-item" @click="navigateTo('/pages/products/master-library')">
              <view class="menu-icon green">
                <view class="icon-product"></view>
              </view>
              <view class="menu-content">
                <text class="menu-name">商品总库</text>
                <text class="menu-desc">全局商品库查看</text>
              </view>
              <view class="menu-arrow"></view>
            </view>

            <view class="menu-item" @click="navigateTo('/pages/customer/list')">
              <view class="menu-icon green">
                <view class="icon-user"></view>
              </view>
              <view class="menu-content">
                <text class="menu-name">客户管理</text>
                <text class="menu-desc">查看客户信息和信用分</text>
              </view>
              <view class="menu-arrow"></view>
            </view>

            <view class="menu-item" @click="navigateTo('/pages/statistics/overview')">
              <view class="menu-icon blue">
                <view class="icon-stats"></view>
              </view>
              <view class="menu-content">
                <text class="menu-name">数据统计</text>
                <text class="menu-desc">经营数据和销售排行</text>
              </view>
              <view class="menu-arrow"></view>
            </view>
          </view>
        </view>

        <!-- Replenisher system menu -->
        <view class="menu-card" v-if="isReplenisherUser">
          <text class="menu-title">系统设置</text>
          <view class="menu-list">
            <view class="menu-item" @click="handleAbout">
              <view class="menu-icon blue">
                <view class="icon-info"></view>
              </view>
              <view class="menu-content">
                <text class="menu-name">关于我们</text>
                <text class="menu-desc">版本信息</text>
              </view>
              <view class="menu-arrow"></view>
            </view>
          </view>
        </view>

        
        <!-- Marketing menu -->
        <view class="menu-card" v-if="!isReplenisherUser">
          <text class="menu-title">营销管理</text>
          <view class="menu-list">
            <view class="menu-item" @click="navigateTo('/pages/marketing/activity-list')">
              <view class="menu-icon amber">
                <view class="icon-product"></view>
              </view>
              <view class="menu-content">
                <text class="menu-name">活动管理</text>
                <text class="menu-desc">营销活动管理</text>
              </view>
              <view class="menu-arrow"></view>
            </view>
            <view class="menu-item" @click="navigateTo('/pages/marketing/coupon-list')">
              <view class="menu-icon purple">
                <view class="icon-product"></view>
              </view>
              <view class="menu-content">
                <text class="menu-name">优惠券管理</text>
                <text class="menu-desc">创建和管理优惠券</text>
              </view>
              <view class="menu-arrow"></view>
            </view>
            <view class="menu-item" @click="navigateTo('/pages/marketing/user-coupon-list')">
              <view class="menu-icon cyan">
                <view class="icon-user"></view>
              </view>
              <view class="menu-content">
                <text class="menu-name">用户优惠券</text>
                <text class="menu-desc">查看用户领券情况</text>
              </view>
              <view class="menu-arrow"></view>
            </view>
            <view class="menu-item" @click="navigateTo('/pages/marketing/timed-discount-list')">
              <view class="menu-icon rose">
                <view class="icon-chart"></view>
              </view>
              <view class="menu-content">
                <text class="menu-name">定时折扣</text>
                <text class="menu-desc">管理限时折扣活动</text>
              </view>
              <view class="menu-arrow"></view>
            </view>
          </view>
        </view>
        <!-- Admin system menu -->
        <view class="menu-card" v-if="!isReplenisherUser">
          <text class="menu-title">系统设置</text>
          <view class="menu-list">
            <view class="menu-item" @click="handleAbout">
              <view class="menu-icon blue">
                <view class="icon-info"></view>
              </view>
              <view class="menu-content">
                <text class="menu-name">关于我们</text>
                <text class="menu-desc">版本信息</text>
              </view>
              <view class="menu-arrow"></view>
            </view>
          </view>
        </view>
      </view>

      <!-- Logout -->
      <view class="logout-section">
        <view class="logout-btn" @click="handleLogout">
          <text>退出登录</text>
        </view>
      </view>

      <!-- Version -->
      <view class="version-info">
        <text>版本 1.0.0</text>
      </view>
    </template>

    <CustomTabBar />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import NavBar from '@/components/NavBar.vue';
import CustomTabBar from '@/components/CustomTabBar.vue';
import { getUserInfo, getReplenisherInfo, isReplenisher, clearAuth } from '@/utils/auth';
import { showConfirm } from '@/utils/common';

interface UserInfo {
  nickname?: string;
  roleName?: string;
  [key: string]: any;
}

const userInfo = ref<UserInfo>({});
const isReplenisherUser = ref(false);
const loading = ref(true);

const loadUserInfo = () => {
  isReplenisherUser.value = isReplenisher();

  if (isReplenisherUser.value) {
    const info = getReplenisherInfo();
    if (info) {
      userInfo.value = {
        nickname: info.nickname || info.name || '补货员',
        roleName: '补货员'
      };
    }
  } else {
    const info = getUserInfo();
    if (info) {
      userInfo.value = info;
    }
  }
};

const navigateTo = (url: string) => {
  uni.navigateTo({ url });
};

const handleAbout = () => {
  uni.showToast({ title: '富玉餐饮运营 v1.0.0', icon: 'none' });
};

const handleReplenisherHome = () => {
  uni.reLaunch({ url: '/pages/replenish/home' });
};

const handleLogout = async () => {
  const confirmed = await showConfirm('确定要退出登录吗？');
  if (confirmed) {
    clearAuth();
    uni.reLaunch({ url: '/pages/login/login' });
  }
};

onMounted(() => {
  loadUserInfo();
  loading.value = false;
});
</script>

<style lang="scss" scoped>
$font-stack: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', system-ui, sans-serif;

.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100vw;
  overflow-x: hidden;
  background: $bg-color-page;
  padding-bottom: calc(160rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
  font-family: $font-stack;
}

/* Loading */
.load-tip {
  display: flex;
  justify-content: center;
  padding: 120rpx 0;
}

.dot-row {
  display: flex;
  gap: $spacing-1;
}

.pulse-dot {
  width: 9rpx;
  height: 9rpx;
  background: $text-color-placeholder;
  border-radius: $radius-full;
  animation: pulse 1.2s ease-in-out infinite;

  &:nth-child(2) { animation-delay: 0.2s; }
  &:nth-child(3) { animation-delay: 0.4s; }
}

@keyframes pulse {
  0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* User section */
.user-section {
  padding: $spacing-2 $spacing-3;
}

.user-card {
  background: $bg-color-card;
  border-radius: $radius-lg;
  padding: $spacing-4;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.user-header {
  display: flex;
  align-items: center;

  .avatar {
    width: 96rpx;
    height: 96rpx;
    background: $primary-color-bg;
    border-radius: $radius-xl;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: $spacing-3;

    .avatar-text {
      font-size: $font-size-2xl;
      font-weight: 700;
      color: $primary-color;
    }
  }

  .user-info {
    flex: 1;

    .user-name {
      display: block;
      font-size: $font-size-lg;
      font-weight: 700;
      color: $text-color-primary;
      margin-bottom: $spacing-1;
    }

    .user-role {
      font-size: $font-size-sm;
      color: $text-color-tertiary;
    }
  }
}

/* Menu section */
.menu-section {
  padding: 0 $spacing-3;
}

.menu-card {
  background: $bg-color-card;
  border-radius: $radius-lg;
  margin-bottom: $spacing-2;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

  .menu-title {
    display: block;
    padding: $spacing-3 $spacing-3 $spacing-1;
    font-size: $font-size-sm;
    color: $text-color-muted;
    font-weight: 600;
  }
}

.menu-list {
  .menu-item {
    display: flex;
    align-items: center;
    padding: $spacing-3;
    border-bottom: 1rpx solid $border-color-light;
    transition: opacity 0.15s ease;

    &:last-child {
      border-bottom: none;
    }

    &:active {
      opacity: 0.7;
    }
  }
}

/* Menu icons */
.menu-icon {
  width: 56rpx;
  height: 56rpx;
  border-radius: $radius-md;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: $spacing-2;

  &.green  { background: $success-color-bg; }
  &.blue   { background: $info-color-bg; }
  &.amber  { background: $primary-color-bg; }
  &.purple { background: $primary-color-bg; }
  &.cyan   { background: $info-color-bg; }
  &.rose   { background: $warning-color-bg; }

  .icon-shop {
    width: 22rpx;
    height: 22rpx;
    background: $accent-color;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: -8rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 14rpx solid transparent;
      border-right: 14rpx solid transparent;
      border-bottom: 10rpx solid $accent-color;
    }
  }

  .icon-product {
    width: 20rpx;
    height: 18rpx;
    background: $primary-color;
    border-radius: $radius-xs;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: -8rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 8rpx solid transparent;
      border-right: 8rpx solid transparent;
      border-bottom: 10rpx solid $primary-color;
    }
  }

  .icon-chart {
    display: flex;
    align-items: flex-end;
    width: 24rpx;
    height: 20rpx;

    &::before, &, &::after {
      content: '';
      width: 6rpx;
      background: $info-color;
      border-radius: 3rpx;
      margin-right: 3rpx;
    }
    &::before { height: 10rpx; }
    & { height: 18rpx; }
    &::after { height: 14rpx; margin-right: 0; }
  }

  .icon-warning {
    width: 24rpx;
    height: 24rpx;
    border: 3rpx solid $warning-color;
    border-radius: $radius-full;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 3rpx;
      height: 10rpx;
      background: $warning-color;
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 3rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 3rpx;
      height: 3rpx;
      background: $warning-color;
      border-radius: $radius-full;
    }
  }

  .icon-user {
    width: 20rpx;
    height: 20rpx;
    border: 3rpx solid $success-color;
    border-radius: $radius-full;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: -8rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 10rpx;
      height: 10rpx;
      border: 3rpx solid $success-color;
      border-radius: $radius-full;
    }
  }

  .icon-stats {
    display: flex;
    align-items: flex-end;
    width: 22rpx;
    height: 18rpx;

    &::before, &::after, & {
      content: '';
      width: 6rpx;
      background: $info-color;
      border-radius: 3rpx;
    }

    &::before { height: 8rpx; margin-right: 2rpx; }
    & { height: 16rpx; margin-right: 2rpx; }
    &::after { height: 12rpx; }
  }

  .icon-info {
    width: 20rpx;
    height: 20rpx;
    border: 3rpx solid $info-color;
    border-radius: $radius-full;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 4rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 3rpx;
      height: 3rpx;
      background: $info-color;
      border-radius: $radius-full;
    }

    &::after {
      content: '';
      position: absolute;
      top: 10rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 3rpx;
      height: 6rpx;
      background: $info-color;
      border-radius: 2rpx;
    }
  }

  .icon-device {
    width: 20rpx;
    height: 16rpx;
    border: 3rpx solid $success-color;
    border-radius: $radius-xs;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      bottom: -6rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 12rpx;
      height: 6rpx;
      background: $success-color;
      border-radius: 0 0 4rpx 4rpx;
    }
  }

  .icon-replenish { width: 24rpx; height: 24rpx; border: 3rpx solid $primary-color; border-radius: 4rpx; position: relative;
    &::after { content: ''; position: absolute; top: 7rpx; left: 5rpx; right: 5rpx; height: 3rpx; background: $primary-color; border-radius: 1rpx; box-shadow: 0 5rpx 0 $primary-color; }
  }

}

.menu-content {
  flex: 1;

  .menu-name {
    display: block;
    font-size: $font-size-md;
    color: $text-color-primary;
    font-weight: 500;
    margin-bottom: 2rpx;
  }

  .menu-desc {
    font-size: $font-size-sm;
    color: $text-color-muted;
  }
}

.menu-arrow {
  width: 12rpx;
  height: 12rpx;
  border-top: 3rpx solid $text-color-placeholder;
  border-right: 3rpx solid $text-color-placeholder;
  transform: rotate(45deg);
}

/* Logout */
.logout-section {
  padding: $spacing-3 $spacing-3 0;

  .logout-btn {
    width: 100%;
    height: 96rpx;
    line-height: 96rpx;
    padding: 0;
    background: $error-color-bg;
    border-radius: $radius-md;
    font-size: $font-size-lg;
    font-weight: 600;
    color: $error-color;
    display: flex;
    align-items: center;
    justify-content: center;

    &:active {
      opacity: 0.8;
    }
  }
}

/* Version */
.version-info {
  text-align: center;
  padding: $spacing-3 0;

  text {
    font-size: $font-size-sm;
    color: $text-color-placeholder;
  }
}
</style>


