<script setup>
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

const handleUpgrade = () => {
  if(confirm('确认支付 9.9元 开通 VIP？')) {
    userStore.upgradeVip()
    alert('支付成功！')
  }
}
</script>

<template>
  <div class="container layout-grid">
    <main>
      <div class="ad-banner">VIP 页顶部广告</div>
      
      <div class="tool-content tool-locked">
        <!-- 真实内容 (根据权限决定是否模糊) -->
        <div :class="{ 'content-blur': !userStore.isLoggedIn || !userStore.isVip }">
          <h1>PDF 转 Word</h1>
          <div class="upload-area">
            <i class="fa-solid fa-cloud-upload-alt upload-icon"></i>
            <p>点击上传 PDF 文件</p>
          </div>
          <button class="btn-full">开始转换</button>
        </div>

        <!-- 遮罩层 -->
        <div v-if="!userStore.isLoggedIn" class="modal-overlay lock-overlay">
          <div class="lock-content">
            <i class="fa-solid fa-lock lock-icon"></i>
            <h3>请登录后使用</h3>
            <button class="btn-login" @click="userStore.openModal()">立即登录</button>
          </div>
        </div>

        <div v-else-if="!userStore.isVip" class="modal-overlay lock-overlay">
          <div class="lock-content">
            <i class="fa-solid fa-crown vip-icon"></i>
            <h3>会员专享功能</h3>
            <button class="btn-full btn-upgrade" @click="handleUpgrade">升级 VIP (¥9.9)</button>
          </div>
        </div>
      </div>
    </main>

    <aside>
       <div class="vip-promo">
          <h3>升级 VIP</h3>
          <p>解锁所有高级功能，去除广告。</p>
       </div>
    </aside>
  </div>
</template>

<style scoped>
.tool-locked {
  position: relative;
  overflow: hidden;
}

.content-blur {
  filter: blur(5px);
  pointer-events: none;
}

.upload-area {
  border: 2px dashed var(--border-color);
  padding: 50px;
  text-align: center;
  margin-top: 30px;
  border-radius: 12px;
  background: var(--bg-body);
}

.upload-icon {
  font-size: 3rem;
  color: var(--text-placeholder);
}

.lock-overlay {
  position: absolute;
}

.lock-content {
  text-align: center;
}

.lock-icon {
  font-size: 3rem;
  color: var(--text-sub);
}

.vip-icon {
  font-size: 3rem;
  color: #f59e0b;
}

.btn-upgrade {
  background: #f59e0b;
}

.vip-promo {
  background: #fff7ed;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #fed7aa;
}

.vip-promo h3 {
  color: #d97706;
}

.vip-promo p {
  font-size: 0.9rem;
  color: #d97706;
  margin-top: 10px;
}

html.dark .vip-promo {
  background: rgba(217, 119, 6, 0.1);
  border-color: rgba(217, 119, 6, 0.3);
}

html.dark .vip-promo h3,
html.dark .vip-promo p {
  color: #fbbf24;
}
</style>