<template>
  <view class="page page--tabbar">
    <view class="mine-hero" :style="{ paddingTop: `${navbar.totalHeight.value}px` }">
      <!-- 蓝色背景 -->
      <view class="mine-hero__bg" :style="{ background: headerBackground }" />

      <custom-navbar
        bg-color="transparent"
        title-color="var(--color-text-inverse)"
        icon-color="var(--color-text-inverse)"
        :show-back="false"
        :placeholder="false"
      >
        <template #center>
          <text class="mine-navbar__title">个人中心</text>
        </template>
      </custom-navbar>

      <view class="mine-hero__content">
        <view class="profile-card">
          <view class="profile-card__header">
            <view class="profile-card__left" @click="isLogin ? openProfile() : navigateToLogin()">
              <image
                class="profile-card__avatar"
                :src="isLogin && userInfo?.avatar ? userInfo.avatar : defaultAvatar"
                mode="aspectFill"
                lazy-load
              />
              <view v-if="isLogin" class="profile-card__online-dot" />
            </view>

            <view class="profile-card__main" @click="isLogin ? openProfile() : navigateToLogin()">
              <view class="profile-card__top">
                <text class="profile-card__name">
                  {{ isLogin ? userInfo?.nickname || "匿名用户" : "欢迎使用" }}
                </text>
              </view>

              <view v-if="isLogin" class="profile-card__tags">
                <view class="profile-tag">
                  <wd-icon name="user" size="12" color="var(--color-text-inverse)" />
                  <text>{{ isLogin ? userInfo?.username || "未设置账号" : "快捷登录" }}</text>
                </view>
                <view class="profile-tag">
                  <wd-icon
                    :name="isLogin && deptNameText ? 'home' : 'safe'"
                    size="12"
                    color="var(--color-text-inverse)"
                  />
                  <text>{{ isLogin && deptNameText ? deptNameText : "安全可靠" }}</text>
                </view>
              </view>

              <text v-else class="profile-card__hint">登录使用更多功能</text>
            </view>

            <view v-if="isLogin" class="profile-card__actions">
              <view
                class="profile-card__action-btn"
                aria-label="通知"
                @click.stop="openNotifications"
              >
                <wd-icon name="notification" size="16" color="var(--color-text-inverse)" />
              </view>
            </view>

            <view v-if="!isLogin" class="profile-card__action" @click.stop="navigateToLogin()">
              <wd-button custom-class="profile-card__button" size="small" type="primary">
                立即登录
              </wd-button>
            </view>
          </view>
        </view>

        <!-- 官方社区推广区域 -->
        <view class="community-card" @click="openOfficialAccount">
          <image
            class="community-card__bg"
            src="/static/images/official-bg.png"
            mode="aspectFill"
          />
          <view class="community-card__mask" />
          <view class="community-card__logo">
            <image src="/static/logo.png" mode="aspectFit" class="w-full h-full" />
          </view>
          <view class="community-card__body">
            <view class="community-card__title-row">
              <text class="community-card__title">关注有来技术</text>
              <wd-tag type="success" plain custom-class="community-card__tag">官方社区</wd-tag>
            </view>
            <text class="community-card__desc">开源更新、实战内容、交流群入口，统一在这里查看</text>
          </view>
          <view class="community-card__arrow">
            <wd-icon name="right" size="16" color="var(--color-text-secondary)" />
          </view>
        </view>

        <view v-if="isLogin" class="quick-cards">
          <view class="quick-card" @click="openProfile">
            <view class="quick-card__icon quick-card__icon--info">
              <wd-icon name="user" size="28" color="var(--color-primary)" />
            </view>
            <view class="quick-card__body">
              <text class="quick-card__title">我的资料</text>
              <text class="quick-card__desc">修改个人信息</text>
            </view>
          </view>
          <view class="quick-card" @click="openAccount">
            <view class="quick-card__icon quick-card__icon--success">
              <wd-icon name="safe" size="28" color="var(--color-success)" />
            </view>
            <view class="quick-card__body">
              <text class="quick-card__title">账号安全</text>
              <text class="quick-card__desc">修改密码 / 账号绑定</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="mine-body">
      <view class="section-card">
        <text class="section-title">系统工具</text>
        <view class="menu-list menu-list--flat">
          <view class="menu-row" @click="openNetworkTest">
            <view class="menu-row__icon menu-row__icon--warning">
              <wd-icon name="tool" size="18" color="var(--color-primary)" />
            </view>
            <view class="menu-row__main">
              <text class="menu-row__title">网络检测</text>
              <text class="menu-row__desc">检测接口连通性</text>
            </view>
            <wd-icon name="right" size="16" color="var(--color-text-placeholder)" />
          </view>
          <view class="menu-row" @click="handleClearCache">
            <view class="menu-row__icon menu-row__icon--danger">
              <wd-icon name="delete" size="18" color="var(--color-danger)" />
            </view>
            <view class="menu-row__main">
              <text class="menu-row__title">清理缓存</text>
              <text class="menu-row__desc">显示当前缓存大小</text>
            </view>
            <text class="menu-row__value">{{ cacheSize }}</text>
            <wd-icon name="right" size="16" color="var(--color-text-placeholder)" />
          </view>
        </view>
      </view>

      <view class="section-card">
        <text class="section-title">帮助与支持</text>
        <view class="menu-list menu-list--flat">
          <view class="menu-row" @click="openSettings">
            <view class="menu-row__icon menu-row__icon--primary">
              <wd-icon name="settings" size="18" color="var(--color-primary)" />
            </view>
            <view class="menu-row__main">
              <text class="menu-row__title">系统设置</text>
              <text class="menu-row__desc">主题、语言、通知等设置</text>
            </view>
            <wd-icon name="right" size="16" color="var(--color-text-placeholder)" />
          </view>
          <view class="menu-row" @click="openUserAgreement">
            <view class="menu-row__icon menu-row__icon--success">
              <wd-icon name="safe" size="18" color="var(--color-success)" />
            </view>
            <view class="menu-row__main">
              <text class="menu-row__title">用户协议</text>
              <text class="menu-row__desc">了解产品使用规则</text>
            </view>
            <wd-icon name="right" size="16" color="var(--color-text-placeholder)" />
          </view>
          <view class="menu-row" @click="openAbout">
            <view class="menu-row__icon menu-row__icon--info">
              <wd-icon name="info-circle" size="18" color="var(--color-info)" />
            </view>
            <view class="menu-row__main">
              <text class="menu-row__title">关于系统</text>
              <text class="menu-row__desc">产品介绍与联系方式</text>
            </view>
            <text class="menu-row__value">v{{ appVersion }}</text>
            <wd-icon name="right" size="16" color="var(--color-text-placeholder)" />
          </view>
        </view>
      </view>
    </view>

    <wd-loading
      v-if="isClearing"
      v-model="isClearing"
      text="正在清理..."
      mask
      custom-class="loading-center"
    />
    <wd-toast />
  </view>
</template>

<script lang="ts" setup>
definePage({
  name: "mine",
  style: { navigationStyle: "custom" },
  layout: "tabbar",
});

import { computed, ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { useToast, useDialog } from "@wot-ui/ui";
import { useUserStore, useThemeStore } from "@/store";
import { useRouter } from "uni-mini-router";
import { useNavbar } from "@/composables/useNavbar";
import { getAccessToken } from "@/utils/auth";
import { formatBytes } from "@/utils/format";

const toast = useToast();
  const { confirm } = useDialog();

const userStore = useUserStore();
const themeStore = useThemeStore();
const currentThemeColor = computed(() => themeStore.themeVars.colorTheme);
const userInfo = computed(() => userStore.userInfo);
const defaultAvatar = "/static/images/default-avatar.png";

const isLogin = computed(() => !!getAccessToken());

const headerBackground = computed(() => {
  const color = currentThemeColor.value || "var(--color-primary)";
  const colorWithAlpha = color.length === 7 ? `${color}E6` : color;
  const colorWithAlpha2 = color.length === 7 ? `${color}CC` : color;
  return `linear-gradient(135deg, ${colorWithAlpha} 0%, ${colorWithAlpha2} 100%)`;
});

const router = useRouter();
const appVersion = ref("1.0.0");
const navbar = useNavbar({ hasTabbar: true });

const hasUserProfile = computed(() => {
  const info = userInfo.value;
  return !!(info && (info.userId || info.username || info.nickname));
});

const deptNameText = computed(() => {
  if (!isLogin.value) return "";
  return userInfo.value?.deptName || "";
});



const fetchUserInfoIfNeeded = async () => {
  if (!isLogin.value || hasUserProfile.value) return;
  try {
    await userStore.getInfo();
  } catch {
    // ignore
  }
};

const syncMiniProgramVersion = () => {
  // #ifdef MP-WEIXIN
  appVersion.value = uni.getAccountInfoSync().miniProgram.version || "1.0.0";
  // #endif
};

onShow(async () => {
  await fetchUserInfoIfNeeded();
  await fetchCacheSize();
  syncMiniProgramVersion();
});

// 登录
const navigateToLogin = () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const currentPagePath = `/${currentPage.route}`;
  router.push({ path: "/pages/login/index", query: { redirect: currentPagePath } });
};

// 个人信息
const openProfile = () => {
  if (!isLogin.value) {
    navigateToLogin();
    return;
  }
  router.push({ path: "/pages/mine/profile/index" });
};

// 账号和安全
const openAccount = () => {
  if (!isLogin.value) {
    navigateToLogin();
    return;
  }
  router.push({ path: "/pages/mine/account/index" });
};

const openNotifications = () => {
  if (!isLogin.value) {
    navigateToLogin();
    return;
  }
  uni.showToast({
    title: "功能开发中",
    icon: "none",
  });
};

// 主题设置
const openThemeSettings = () => {
  router.push({ path: "/pages/mine/settings/theme/index" });
};

// 系统设置
const openSettings = () => {
  router.push({ path: "/pages/mine/settings/index" });
};

// 用户协议
const openUserAgreement = () => {
  router.push({ path: "/pages/mine/settings/agreement/index" });
};

// 网络测试
const openNetworkTest = () => {
  router.push({ path: "/pages/mine/settings/network/index" });
};

const openAbout = () => {
  router.push({ path: "/pages/mine/about/index" });
};

const isClearing = ref(false);
const cacheSize = ref<string>("计算中...");

const fetchCacheSize = async () => {
  try {
    // #ifdef MP-WEIXIN
    const res = await uni.getStorageInfo();
    cacheSize.value = formatBytes(res.currentSize);
    // #endif
    // #ifdef H5
    cacheSize.value = formatBytes(
      Object.keys(localStorage).reduce((size, key) => size + localStorage[key].length, 0)
    );
    // #endif
    if (!cacheSize.value) {
      cacheSize.value = "0B";
    }
  } catch {
    cacheSize.value = "获取失败";
  }
};

const handleClearCache = async () => {
  if (cacheSize.value === "获取失败") {
    uni.showToast({
      title: "获取缓存信息失败，请稍后重试",
      icon: "none",
      duration: 2000,
    });
    return;
  }
  if (cacheSize.value === "0B") {
    uni.showToast({
      title: "暂无缓存需要清理",
      icon: "none",
      duration: 2000,
    });
    return;
  }
  if (isClearing.value) {
    return;
  }

  try {
    isClearing.value = true;
    await new Promise((resolve) => setTimeout(resolve, 1500));
    await uni.clearStorage();
    await fetchCacheSize();
    uni.showToast({
      title: "清理成功",
      icon: "success",
    });
  } catch {
    uni.showToast({
      title: "清理失败",
      icon: "error",
    });
  } finally {
    isClearing.value = false;
  }
};

const handleLogout = async () => {
  try {
    await confirm({
      title: "提示",
      msg: "确定要退出登录吗？",
      headerImage: "warning",
    });
    userStore.logout();
    toast.success("已退出登录");
  } catch {
    // 用户取消
  }
};

// 有来技术公众号
const openOfficialAccount = () => {
  uni.navigateTo({
    url: "/pages/mine/official/index",
  });
};
</script>

<style lang="scss" scoped>
// ...
.mine-hero {
  position: relative;
  padding-bottom: 24rpx;
  overflow: visible;
}

.mine-hero__bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 520rpx;
  pointer-events: none;
}

.mine-hero__content,
.profile-card,
.profile-card__top,
.profile-card__tags,
.menu-row {
  display: flex;
}

.mine-hero__content {
  position: relative;
  z-index: var(--z-sticky);
  flex-direction: column;
  gap: 20rpx;
  padding: 20rpx 28rpx 0;
}

.mine-navbar__title {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--color-text-inverse);
  letter-spacing: 2rpx;
}

.profile-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-card {
  position: relative;
  padding: 28rpx 28rpx;
  overflow: hidden;
  background: var(--color-bg-alpha-95);
  border: 1rpx solid var(--color-border-glass);
  border-radius: 28rpx;
  box-shadow: var(--shadow-md);

  @supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
    background: linear-gradient(135deg, var(--color-glass) 0%, var(--color-glass-light) 100%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
}

.profile-card__header {
  display: flex;
  gap: 28rpx;
  align-items: center;
  width: 100%;
}

.profile-card__left {
  position: relative;
  flex-shrink: 0;
  width: 120rpx;
  height: 120rpx;
}

.profile-card__avatar {
  flex-shrink: 0;
  width: 120rpx;
  height: 120rpx;
  border: 3rpx solid var(--color-border-glass-strong);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}

.profile-card__online-dot {
  position: absolute;
  right: -4rpx;
  bottom: -4rpx;
  width: 16rpx;
  height: 16rpx;
  background: var(--color-success);
  border: 2rpx solid var(--color-bg);
  border-radius: 50%;
}

.profile-card__actions {
  display: flex;
  flex-shrink: 0;
  gap: 10rpx;
  align-items: center;
  margin-right: -10rpx;
  margin-left: auto;
}

.profile-card__action-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52rpx;
  height: 52rpx;
  background: var(--color-bg-alpha-95);
  border: 1rpx solid var(--color-border-glass);
  border-radius: 999rpx;

  @supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
    background: var(--color-glass-light);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

.profile-card__notify-badge {
  position: absolute;
  top: -8rpx;
  right: -6rpx;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30rpx;
  height: 30rpx;
  padding: 0 8rpx;
  font-size: 18rpx;
  color: var(--color-text-inverse);
  background: var(--color-danger);
  border: 2rpx solid var(--color-border-glass-strong);
  border-radius: 999rpx;
}



.profile-card__main {
  flex: 1;
  min-width: 0;
}

.profile-card__top {
  gap: 16rpx;
  align-items: center;
  margin-bottom: 18rpx;
}

.profile-card__name {
  flex: 1;
  min-width: 0;
  font-size: 38rpx;
  font-weight: 700;
  color: var(--color-text-inverse);
}

.profile-card__desc {
  display: -webkit-box;
  margin-top: 12rpx;
  overflow: hidden;
  font-size: 24rpx;
  line-height: 1.6;
  color: var(--color-text-inverse);
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.profile-card__hint {
  display: block;
  margin-top: 14rpx;
  font-size: 24rpx;
  color: var(--color-text-inverse);
}

.profile-card__tags {
  flex-wrap: wrap;
  gap: 12rpx;
}

.profile-card__action {
  flex-shrink: 0;
  align-self: center;
}

.profile-tag {
  gap: 8rpx;
  padding: 8rpx 14rpx;
  font-size: 22rpx;
  color: var(--color-text-inverse);
  background: var(--color-glass-light);
  border: 1rpx solid var(--color-border-glass);
  border-radius: 12rpx;
}

.quick-cards {
  position: relative;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-top: 24rpx;
  margin-bottom: 0;
}

.community-card {
  position: relative;
  display: flex;
  gap: 24rpx;
  align-items: center;
  padding: 36rpx;
  overflow: hidden;
  background: transparent;
  border-radius: 32rpx;
  box-shadow: var(--shadow-md);
}

.community-card__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-base);
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
}

.community-card__mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-sticky);
  background: linear-gradient(
    90deg,
    var(--color-glass) 0%,
    var(--color-glass-light) 55%,
    var(--color-glass) 100%
  );
}

.community-card__logo {
  position: relative;
  box-sizing: border-box;
  width: 84rpx;
  height: 84rpx;
  padding: 10rpx;
  background: var(--color-bg-alpha-95);
  border: 1rpx solid var(--color-border-glass);
  border-radius: 20rpx;
  box-shadow: var(--shadow-sm);
}

.community-card__body {
  position: relative;
  flex: 1;
  min-width: 0;
}

.community-card__arrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44rpx;
  height: 44rpx;
  background: var(--color-glass);
  border-radius: 999rpx;
}

.community-card__title-row {
  display: flex;
  gap: 16rpx;
  align-items: center;
}

.community-card__title {
  display: block;
  margin-top: 14rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.4rpx;
}

.community-card__tag {
  margin-top: 14rpx;
}

.community-card__desc {
  display: -webkit-box;
  margin-top: 10rpx;
  overflow: hidden;
  font-size: 24rpx;
  line-height: 1.55;
  color: var(--color-text-secondary);
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.section-card {
  padding: 28rpx;
  background: var(--color-bg);
  border-radius: 32rpx;
  box-shadow: var(--shadow-md);
}

.section-card + .section-card {
  margin-top: 24rpx;
}

.section-title {
  display: block;
  margin-bottom: 18rpx;
  font-size: 26rpx;
  font-weight: 600;
  color: var(--color-text);
}

.quick-card {
  display: flex;
  gap: 20rpx;
  align-items: center;
  padding: 28rpx 24rpx;
  background: var(--color-bg);
  border-radius: 24rpx;
  box-shadow: var(--shadow-sm);
}

.quick-card:active {
  box-shadow: var(--shadow-sm);
  transform: scale(0.96);
}

.quick-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84rpx;
  height: 84rpx;
  border-radius: 22rpx;

  &--info {
    background: var(--color-primary-light);
  }

  &--success {
    background: var(--color-success-light);
  }
}

.quick-card__body {
  flex: 1;
  min-width: 0;
}

.quick-card__title {
  display: block;
  overflow: hidden;
  font-size: 28rpx;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-card__desc {
  display: block;
  margin-top: 8rpx;
  overflow: hidden;
  font-size: 22rpx;
  line-height: 1.6;
  color: var(--color-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-row__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 72rpx;
  height: 72rpx;
  border-radius: 22rpx;

  &--primary {
    background: var(--color-primary-alpha-15);
  }

  &--warning {
    background: var(--color-primary-alpha-15);
  }

  &--danger {
    background: var(--color-danger-light);
  }

  &--success {
    background: var(--color-success-light);
  }

  &--info {
    background: var(--color-info-light);
  }
}

.mine-body {
  position: relative;
  z-index: var(--z-base);
  padding: 0 28rpx 40rpx;
  margin-top: 0;
  background: var(--color-bg-secondary);
  border-top-left-radius: 48rpx;
  border-top-right-radius: 48rpx;
}

.menu-list {
  padding: 0 28rpx;
  margin-top: 24rpx;
  overflow: hidden;
  background: var(--color-bg);
  border-radius: 32rpx;
  box-shadow: var(--shadow-lg);
}

.menu-list--flat {
  padding: 0;
  margin-top: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.menu-row {
  gap: 20rpx;
  align-items: center;
  padding: 24rpx 20rpx;
  background: transparent;
}

.menu-row + .menu-row {
  border-top: 1rpx solid var(--color-border-light);
}

.menu-row__main {
  flex: 1;
  min-width: 0;
}

.menu-row__title {
  display: block;
  font-size: 26rpx;
  font-weight: 500;
  color: var(--color-text);
}

.menu-row__desc {
  display: block;
  margin-top: 8rpx;
  font-size: 22rpx;
  color: var(--color-text-secondary);
}

.menu-row__value {
  margin-left: 12rpx;
  font-size: 22rpx;
  color: var(--color-text-placeholder);
}

.logout-section {
  display: flex;
  padding: 36rpx 28rpx 0;
}

.profile-card__button {
  flex-shrink: 0;
  min-width: 156rpx;
  height: 72rpx;
  padding: 0 24rpx;
  font-size: 24rpx;
  font-weight: 600;
  border: 0;
  border-radius: 999rpx;
}

.logout-btn {
  flex: 1;
  width: auto;
  height: 88rpx;
  font-size: 28rpx;
  color: var(--color-danger);
  background: var(--color-bg);
  border: 1rpx solid rgba(239, 68, 68, 0.18);
  border-radius: 24rpx;
  box-shadow: var(--shadow-md);
}

.loading-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.72);
  border-radius: 24rpx;
}
</style>
