{% extends "base.html" %}
{% block title %}订阅中心 — AlphaX{% endblock %}
{% block nav_links %}
<a class="sidebar-link" href="/app"><svg class="link-icon"><use href="#svg-dashboard"/></svg>看板</a>
<a class="sidebar-link" href="/watchlist"><svg class="link-icon"><use href="#svg-star"/></svg>关注</a>
<a class="sidebar-link" href="/strategy"><svg class="link-icon"><use href="#svg-target"/></svg>策略</a>
<a class="sidebar-link" href="/iteration"><svg class="link-icon"><use href="#svg-iterate"/></svg>迭代</a>
<a class="sidebar-link" href="/sentiment"><svg class="link-icon"><use href="#svg-sentiment"/></svg>舆情</a>
<a class="sidebar-link active" href="/subscription"><svg class="link-icon"><use href="#svg-subscribe"/></svg>订阅</a>
<a class="sidebar-link" href="/referral"><svg class="link-icon"><use href="#svg-referral"/></svg>推荐</a>
<a class="sidebar-link admin-link" href="/admin.html" style="display:none"><svg class="link-icon"><use href="#svg-admin"/></svg>管理</a>
{% endblock %}
{% block extra_head_css %}
<style>

.shell { position: relative; z-index: 1; width: min(100% - 64px, 900px); margin: 0 auto; padding: 48px 0 64px; }
.shell h1 { font-size: 32px; font-weight: 500; letter-spacing: -1px; margin-bottom: 8px; }
.shell .sub { color: var(--slate); font-size: 15px; margin-bottom: 32px; }

/* Status bar */
.status-bar {
  border: 1px solid var(--hairline-soft); background: var(--canvas);
  border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 32px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.status-bar .status-item { font-size: 13px; color: var(--slate); }
.status-bar .status-item strong { color: var(--ink); }
.guide-box {
  border: 1px solid rgba(66,98,255,.16);
  background: linear-gradient(135deg, rgba(66,98,255,.08), rgba(255,208,47,.16));
  border-radius: var(--radius-xl); padding: 18px 20px; margin-bottom: 22px;
  display: none;
}
.guide-box.show { display: block; }
.guide-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.guide-text { font-size: 14px; color: var(--slate); line-height: 1.7; }

/* Plans grid */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.plan {
  border-radius: var(--radius-xl); padding: 26px; border: 1px solid var(--hairline);
  background: var(--canvas); display: flex; flex-direction: column; gap: 16px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  min-height: 230px;
}
.plan:hover { transform: translateY(-2px); border-color: var(--hairline-strong); box-shadow: 0 8px 22px rgba(5,0,56,.05); }
.plan.featured { border: 2px solid var(--blue); }
.plan-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.plan h3 { font-size: 20px; font-weight: 600; letter-spacing: -.3px; }
.plan .price { font-size: 34px; font-weight: 700; line-height: 1.15; margin-top: 2px; }
.plan .price unit { font-size: 14px; font-weight: 500; color: var(--slate); }
.price-pending { display: inline-flex; align-items: center; min-height: 39px; color: var(--stone); font-size: 17px; font-weight: 600; letter-spacing: -.2px; }
.plan .desc { font-size: 13px; color: var(--slate); line-height: 1.5; min-height: 40px; }
.plan-spacer { flex: 1; }

/* Plan button */
.btn-plan {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 44px; border: 0; border-radius: var(--radius-full);
  font-weight: 500; font-size: 14px; cursor: pointer;
  transition: background .15s, transform .15s;
}
.btn-plan.green { background: var(--green); color: #fff; }
.btn-plan.green:hover { opacity: .9; }
.btn-plan.disabled { background: var(--hairline-soft); color: var(--muted); cursor: not-allowed; }

.badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-full); }
.badge.yellow { background: var(--yellow); color: var(--primary); }
.badge.gray { background: var(--surface); color: var(--stone); }
.badge.blue { background: rgba(66,98,255,.1); color: var(--blue); }

.msg { font-size: 13px; min-height: 20px; margin-top: 8px; }
.msg.ok { color: var(--green); } .msg.err { color: #e53e3e; }

@media (max-width: 700px) {
  .plans { grid-template-columns: 1fr; }
  .shell { width: min(100% - 32px, 900px); padding: 24px 0 48px; }
  .status-bar { flex-direction: column; gap: 8px; align-items: flex-start; }
  .shell h1 { font-size: 24px; }
}
</style>
{% endblock %}
{% block content %}
<div class="shell">
  <h1>订阅中心</h1>
  <p class="sub">新用户可免费体验 1 个月，后续按需选择方案。</p>

  <div id="guideBox" class="guide-box">
    <div class="guide-title" id="guideTitle">先开通套餐，开始使用 AlphaX</div>
    <div class="guide-text" id="guideText">新用户可领取 30 天免费体验。开通后即可进入看板、策略、迭代和舆情页面。</div>
  </div>

  <div class="status-bar" id="statusBar" style="display:none">
    <div class="status-item">当前方案: <strong id="mePlan">--</strong></div>
    <div class="status-item">到期时间: <strong id="meEnd">--</strong></div>
  </div>

  <div class="plans">
    <div class="plan featured">
      <div class="plan-top"><h3>免费体验</h3><span class="badge yellow">推荐</span></div>
      <div class="price"><unit>$</unit>0</div>
      <p class="desc">新用户可领取 30 天 Beta 体验。</p>
      <div id="trialMsg" class="msg"></div>
      <div class="plan-spacer"></div>
      <button class="btn-plan green" id="freeBtn" onclick="claimFreeTrial()">立即开通</button>
    </div>

    <div class="plan">
      <div class="plan-top"><h3>月付</h3><span class="badge gray">即将上线</span></div>
      <div class="price"><span class="price-pending">价格开放前公布</span></div>
      <p class="desc">适合短期体验和灵活使用。</p>
      <div class="plan-spacer"></div>
      <button class="btn-plan disabled">即将上线</button>
    </div>

    <div class="plan">
      <div class="plan-top"><h3>季付</h3><span class="badge gray">即将上线</span></div>
      <div class="price"><span class="price-pending">价格开放前公布</span></div>
      <p class="desc">适合持续跟踪市场机会。</p>
      <div class="plan-spacer"></div>
      <button class="btn-plan disabled">即将上线</button>
    </div>

    <div class="plan">
      <div class="plan-top"><h3>年付</h3><span class="badge gray">即将上线</span></div>
      <div class="price"><span class="price-pending">价格开放前公布</span></div>
      <p class="desc">适合长期使用和策略复盘。</p>
      <div class="plan-spacer"></div>
      <button class="btn-plan disabled">即将上线</button>
    </div>
  </div>
</div>
{% endblock %}
{% block extra_script %}
<script>
var $ = function(id){ return document.getElementById(id); };

// ====== USER ======
var currentUser = null;
function readablePlanName(code) {
  var names = {
    free_trial_1m: '免费体验',
    monthly_usdt: '月付',
    quarterly_usdt: '季付',
    yearly_usdt: '年付'
  };
  return names[code] || code || '未开通';
}

async function loadUser() {
  try {
    var resp = await fetch('/api/auth/me');
    if (!resp.ok) return;
    var data = await resp.json();
    currentUser = data.user;
    var email = currentUser.email || '--';
    $('userInitial').textContent = email.charAt(0).toUpperCase();
    $('userEmailShort').textContent = email.length > 14 ? email.slice(0,12) + '…' : email;
    $('ddEmail').textContent = email;
  } catch(e) {}
}

function toggleUserMenu() {
  $('userDropdown').classList.toggle('show');
}
document.addEventListener('click', function(e) {
  if (!e.target.closest('.sidebar-user') && !e.target.closest('.user-dropdown')) $('userDropdown').classList.remove('show');
});

function showChangePwd() {
  $('userDropdown').classList.remove('show');
  $('pwdModal').classList.add('show');
  $('oldPwd').value = ''; $('newPwd').value = ''; $('cfmPwd').value = ''; $('pwdMsg').textContent = '';
}
function closePwdModal() { $('pwdModal').classList.remove('show'); }

async function changePwd() {
  var old = $('oldPwd').value, nw = $('newPwd').value, cf = $('cfmPwd').value;
  if (!old || !nw) { $('pwdMsg').className = 'modal-msg err'; $('pwdMsg').textContent = '请填写所有字段'; return; }
  if (nw.length < 8) { $('pwdMsg').className = 'modal-msg err'; $('pwdMsg').textContent = '新密码至少 8 位'; return; }
  if (nw !== cf) { $('pwdMsg').className = 'modal-msg err'; $('pwdMsg').textContent = '两次密码不一致'; return; }
  try {
    var r = await fetch('/api/auth/change-password', {
      method: 'POST', headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({old_password: old, new_password: nw})
    });
    var d = await r.json();
    if (!r.ok) throw new Error(d.detail || '修改失败');
    $('pwdMsg').className = 'modal-msg ok'; $('pwdMsg').textContent = d.message || '修改成功';
    setTimeout(closePwdModal, 1200);
  } catch(e) { $('pwdMsg').className = 'modal-msg err'; $('pwdMsg').textContent = e.message; }
}

async function doLogout() {
  await fetch('/api/auth/logout', { method: 'POST' });
  window.location.href = '/auth';
}

// ====== SUBSCRIPTION ======
async function post(url, body) {
  var r = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body || {}) });
  var data = await r.json().catch(function(){ return { detail: '请求失败' }; });
  if (!r.ok) throw new Error(data.detail || '请求失败');
  return data;
}

async function loadMe() {
  try {
    var r = await fetch('/api/auth/me');
    if (!r.ok) { window.location.href = '/auth'; return; }
    var data = await r.json();
    var s = data.subscription;
    var params = new URLSearchParams(location.search);
    if (!s || params.get('welcome') === '1' || params.get('expired') === '1') {
      document.getElementById('guideBox').classList.add('show');
      if (params.get('expired') === '1') {
        document.getElementById('guideTitle').textContent = '订阅已到期，请先续订';
        document.getElementById('guideText').textContent = '当前账号没有有效订阅。续订或开通套餐后，才能继续访问看板、策略、迭代和舆情页面。';
      } else if (!s) {
        document.getElementById('guideTitle').textContent = '欢迎使用 AlphaX，请先开通套餐';
        document.getElementById('guideText').textContent = '新用户可领取 30 天免费体验。开通后即可进入完整功能页面。';
      }
    }
    document.getElementById('statusBar').style.display = 'flex';
    document.getElementById('mePlan').textContent = s ? readablePlanName(s.plan_code) : '未开通';
    document.getElementById('meEnd').textContent = s ? String(s.end_at).slice(0, 10) : '--';
    if (s) {
      document.getElementById('freeBtn').textContent = '已开通';
      document.getElementById('freeBtn').className = 'btn-plan disabled';
      document.getElementById('freeBtn').onclick = null;
    }
  } catch (e) {}
}

async function claimFreeTrial() {
  try {
    var data = await post('/api/subscriptions/free-trial');
    var el = document.getElementById('trialMsg');
    var sub = data.subscription;
    el.className = 'msg ok'; el.textContent = '开通成功！到期: ' + String(sub.end_at).slice(0, 10);
    document.getElementById('freeBtn').textContent = '已开通';
    document.getElementById('freeBtn').className = 'btn-plan disabled';
    document.getElementById('freeBtn').onclick = null;
    document.getElementById('mePlan').textContent = readablePlanName(sub.plan_code);
    document.getElementById('meEnd').textContent = String(sub.end_at).slice(0, 10);
    setTimeout(function(){ window.location.href = '/app'; }, 900);
  } catch (e) {
    var el = document.getElementById('trialMsg');
    el.className = 'msg err'; el.textContent = e.message;
  }
}

loadUser();
loadMe();
</script>
{% endblock %}