<?php
require_once __DIR__ . '/includes/bootstrap.php';

$userId = current_user_id();
$isVip = is_vip($userId);
$plans = vip_plan_list(true);
$payEnabled = (bool)payment_get()['enabled'];
$payConfig = payment_get();
$flashes = flash_pop();
?>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>开通 VIP - 观看全部视频</title>
<link rel="stylesheet" href="assets/style.css">
<style>
/* 流光动画 */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.wrap{
    max-width:480px;
    margin:0 auto;
    padding:0 0 40px;
    min-height:100vh;
    background:#ffffff; /* 黑色 → 白色 */
    color:#000; /* 白色文字 → 黑色 */
}
.head{
    padding:18px 16px;
    display:flex;
    align-items:center;
    gap:10px;
    border-bottom:1px solid #e5e5e5;
}
.head a.back{
    color:#000;
    font-size:22px;
    text-decoration:none;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f5f5f5;
}
.head h1{font-size:17px;margin:0;font-weight:600;color:#000;}

.banner{
    margin:18px 16px;
    padding:20px;
    border-radius:14px;
    background:linear-gradient(135deg,#409fff,#67c2ff);
    text-align:center;
    position:relative;
    overflow:hidden;
}
/* 炫彩流光效果 */
.banner::before {
    content:'';
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
    background-size:200% 100%;
    animation: shimmer 3s infinite linear;
}
.banner h2{margin:0 0 4px;font-size:22px;color:#fff;position:relative;z-index:1;}
.banner p{margin:0;opacity:.95;font-size:13px;color:#fff;position:relative;z-index:1;}

.notice{padding:10px 14px;border-radius:8px;margin:14px 16px;font-size:13px;}
.notice.ok{background:#e6f7ff;color:#0096ff;border:1px solid #91d1ff;}
.notice.err{background:#fff2f0;color:#ff4d4f;border:1px solid #ffccc7;}

.vip-status{
    margin:0 16px 18px;
    padding:14px 16px;
    background:#f7fbff;
    border:1px solid #409fff;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#000;
}
.vip-status b{color:#409fff;}

.section-title{padding:0 16px;margin:8px 0 12px;font-size:15px;color:#666;}

.plan-list{margin:0 16px 16px;display:grid;grid-template-columns:1fr;gap:10px;}
.plan-card{
    display:flex;justify-content:space-between;align-items:flex-start;
    padding:14px 16px;
    background:#fafafa;
    border:2px solid #e5e5e5;
    border-radius:12px;
    cursor:pointer;
    transition:all .2s ease;
    position:relative;overflow:hidden;
    color:#000;
}
.plan-card:hover{border-color:#409fff;background:#e6f7ff;}
.plan-card.active{
    border-color:#409fff;
    background:#e6f7ff;
    position:relative;
}
.plan-card.active::after{
    content:"✓";
    position:absolute;
    top:6px;right:8px;
    width:18px;height:18px;
    background:#409fff;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;font-weight:700;
}
.plan-card .left{flex:1;min-width:0;}
.plan-card .name{font-size:15px;font-weight:600;color:#000;margin-bottom:4px;}
.plan-card .days{color:#666;font-size:12px;margin-bottom:4px;}
.plan-card .desc{color:#666;font-size:12px;line-height:1.4;margin-top:4px;}
.plan-card .right{text-align:right;margin-left:12px;flex-shrink:0;}
.plan-card .price{color:#409fff;font-size:18px;font-weight:700;}
.plan-card .price del{color:#999;font-size:12px;margin-left:4px;font-weight:400;display:block;margin-top:2px;}
.plan-card input[type=radio]{margin-top:6px;accent-color:#409fff;width:16px;height:16px;}

.submit-row{padding:0 16px;}
.pay-hint{padding:0 16px;margin:8px 0 14px;color:#666;font-size:12px;text-align:center;}

/* 立即开通按钮 */
.btn-vip {
    background:#409fff !important;
    color:#fff !important;
    border:none !important;
    padding:14px !important;
    border-radius:12px !important;
    font-size:16px !important;
    font-weight:600 !important;
    position:relative !important;
    overflow:hidden !important;
}
/* 按钮流光 */
.btn-vip::before {
    content:'';
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
    background-size:200% 100%;
    animation: shimmer 3s infinite linear;
}
</style>
</head>
<body>
<div class="wrap">
    <div class="head">
        <a class="back" href="index.php">‹</a>
        <h1><?= $isVip ? '续费 VIP' : '开通 VIP' ?></h1>
    </div>

    <div class="banner">
        <h2><?= $isVip ? '续费 VIP · 时间叠加' : '开通 VIP 看全部视频' ?></h2>
        <p><?= $isVip ? '到期后会自动续上 · 不会浪费任何一天' : '一次开通，海量高清写真视频随心看' ?></p>
    </div>

    <?php foreach ($flashes as $f):
        $cls = $f['type']==='ok' ? 'ok' : 'err'; ?>
        <div class="notice <?= e($cls) ?>"><?= e($f['msg']) ?></div>
    <?php endforeach; ?>

    <?php
    $remainingDays = 0;
    $expireTs = 0;
    if ($isVip):
        $stmt = db()->prepare('SELECT MAX(end_at) AS e FROM member WHERE user_id = ? AND status = 1');
        $stmt->execute(array($userId));
        $r = $stmt->fetch();
        $expireTs = $r && $r['e'] ? (int)$r['e'] : 0;
        $remainingDays = $expireTs > time() ? ceil(($expireTs - time()) / 86400) : 0;
    ?>
    <div class="vip-status">
        <div>
            <div>当前状态：<b>VIP 已开通</b></div>
            <div style="color:#666;font-size:12px;margin-top:2px">
                <?php if ($remainingDays > 0): ?>
                    剩余 <b style="color:#fe2c55"><?= $remainingDays ?></b> 天 · 到期 <?= $expireTs ? date('m-d H:i', $expireTs) : '-' ?>
                <?php else: ?>
                    已到期：<?= $expireTs ? date('Y-m-d H:i', $expireTs) : '-' ?>
                <?php endif; ?>
            </div>
        </div>
        <div style="background:linear-gradient(135deg,#ff5b8a,#fe2c55);color:#fff;padding:6px 12px;border-radius:16px;font-size:12px;font-weight:600;">VIP</div>
    </div>
    <?php endif; ?>

    <div class="section-title">选择套餐</div>

    <?php if (!$plans): ?>
        <div class="notice err">站长暂未上架套餐</div>
    <?php elseif (!$payEnabled): ?>
        <div class="notice err">站长尚未配置易支付，请联系站长</div>
    <?php else: ?>
    <form method="post" action="pay/submit.php" id="payForm">
        <input type="hidden" name="csrf" value="<?= e(csrf_token()) ?>">
        <input type="hidden" name="pay_type" value="<?= e($payConfig['type'] ?: 'alipay') ?>">
        <?php $ref = isset($_GET['ref']) ? $_GET['ref'] : (isset($_COOKIE['agent_ref']) ? $_COOKIE['agent_ref'] : ''); ?>
        <input type="hidden" name="ref" value="<?= e($ref) ?>">

        <div class="plan-list">
            <?php foreach ($plans as $i => $p):
                $orig = (float)$p['original_price'] > 0 ? '<del>¥' . fmt_money((float)$p['original_price']) . '</del>' : '';
                $activeCls = $i === 0 ? 'active' : '';
            ?>
            <label class="plan-card <?= $activeCls ?>" data-plan="<?= (int)$p['id'] ?>">
                <div class="left">
                    <div class="name"><?= e($p['name']) ?></div>
                    <div class="days">有效期 <?= (int)$p['days'] ?> 天</div>
                    <?php if (!empty($p['description'])): ?>
                        <div class="desc"><?= e($p['description']) ?></div>
                    <?php endif; ?>
                </div>
                <div class="right">
                    <div class="price">¥<?= fmt_money((float)$p['price']) ?> <?= $orig ?></div>
                    <input type="radio" name="plan_id" value="<?= (int)$p['id'] ?>" <?= $i===0?'checked':'' ?>>
                </div>
            </label>
            <?php endforeach; ?>
        </div>

        <div class="pay-hint"><?= $isVip ? '续费时到期时间会自动顺延，不会浪费任何一天' : '点击套餐后选择「立即开通」将跳转至支付页面' ?></div>

        <div class="submit-row">
            <button type="submit" class="btn-vip" style="width:100%"><?= $isVip ? '立即续费' : '立即开通' ?></button>
        </div>
    </form>
    <script>
    (function(){
        var cards = document.querySelectorAll('.plan-card');
        cards.forEach(function(card){
            card.addEventListener('click', function(){
                cards.forEach(function(c){c.classList.remove('active')});
                card.classList.add('active');
                var r = card.querySelector('input[type=radio]');
                if (r) r.checked = true;
            });
        });
    })();
    </script>
    <?php endif; ?>
</div>
</body>
</html>