<?php
$page_title = 'Change subscription';
require __DIR__ . '/_guard.php';
require_once __DIR__ . '/../includes/payfast.php';
require_once __DIR__ . '/../includes/mailchimp.php';

// Load member + current subscription
$subscription = db_row(
    "SELECT * FROM payment_tokens WHERE member_id=:m AND status='active' LIMIT 1",
    ['m' => $member['id']]
);
$plans = db_all("SELECT * FROM subscription_plans WHERE active=1 ORDER BY sort_order, price_cents");

// Current plan — match member tier (or price) to a plan row
$current_plan = null;
foreach ($plans as $p) {
    if (strcasecmp($p['name'], $member['tier']) === 0) { $current_plan = $p; break; }
}

$done = false;
$error = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    csrf_verify();
    $new_slug = trim($_POST['plan'] ?? '');

    // Find the chosen plan
    $new_plan = null;
    foreach ($plans as $p) {
        if ($p['slug'] === $new_slug) { $new_plan = $p; break; }
    }

    if (!$new_plan) {
        $error = 'Please pick a valid plan.';
    } elseif ($current_plan && $current_plan['slug'] === $new_plan['slug']) {
        $error = 'That\'s already your current plan — no change needed.';
    } elseif (!$subscription || empty($subscription['token'])) {
        $error = 'You don\'t have an active subscription to change. Please activate one first.';
    } else {
        // Call PayFast to update the recurring amount
        $result = pf_update_subscription($subscription['token'], [
            'amount' => (int)$new_plan['price_cents'],
        ]);

        mc_log(sprintf(
            'PayFast update for member %d token=%s from %s to %s (amt=%d) status=%d ok=%s msg=%s',
            $member['id'],
            substr($subscription['token'], 0, 8) . '…',
            $current_plan['slug'] ?? '?',
            $new_plan['slug'],
            $new_plan['price_cents'],
            $result['status'],
            $result['ok'] ? 'yes' : 'no',
            $result['message']
        ));

        if (!$result['ok']) {
            $error = 'We couldn\'t update your subscription at the payment gateway. ' .
                     'Please try again shortly or <a href="../contact.php">contact us</a>. ' .
                     '<br><small>Detail: ' . htmlspecialchars($result['message']) . '</small>';
        } else {
            // Update local DB — member tier + token amount
            db_update('members', (int)$member['id'], [
                'tier' => $new_plan['name'],
            ]);
            db_exec(
                "UPDATE payment_tokens SET amount_cents=:a, plan_slug=:s WHERE id=:id",
                ['a' => $new_plan['price_cents'], 's' => $new_plan['slug'], 'id' => $subscription['id']]
            );

            // Update the listing's tier so it shows correctly on the directory
            db_exec(
                "UPDATE listings SET tier=:t WHERE member_id=:m",
                ['t' => $new_plan['name'], 'm' => $member['id']]
            );

            // Refresh + send confirmation email
            $fresh = db_row('SELECT * FROM members WHERE id=:id', ['id' => $member['id']]);

            require_once __DIR__ . '/../includes/mailer.php';
            $next_charge_date = $subscription['next_charge_at']
                ? date('j F Y', strtotime($subscription['next_charge_at']))
                : date('j F Y', strtotime('+1 month'));
            email_enqueue('subscription_changed', $fresh['email'],
                trim($fresh['first_name'] . ' ' . $fresh['last_name']),
                [
                    'first_name'       => $fresh['first_name'],
                    'old_tier'         => $current_plan['name'] ?? $member['tier'],
                    'new_tier'         => $new_plan['name'],
                    'new_amount'       => $new_plan['price_display'],
                    'next_charge_date' => $next_charge_date,
                ]
            );

            app_log("Plan change: member {$member['id']} now on {$new_plan['name']}");

            $member        = $fresh;
            $current_plan  = $new_plan;
            $subscription  = db_row(
                "SELECT * FROM payment_tokens WHERE member_id=:m AND status='active' LIMIT 1",
                ['m' => $member['id']]
            );
            $done = true;
        }
    }
}
?>

<style>
.m-page{padding:2rem 0 3rem;}
.wrap{max-width:960px;margin:0 auto;}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:1rem;margin:1.5rem 0;}
.plan-card{
    background:#fff;
    border:2px solid var(--line);
    border-radius:var(--radius-lg);
    padding:1.25rem;
    cursor:pointer;
    transition:border-color .2s, transform .2s, box-shadow .2s;
    position:relative;
    text-align:center;
}
.plan-card:hover{border-color:var(--brand-primary);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08);}
.plan-card.selected{border-color:var(--brand-primary);background:rgba(122,157,71,.05);box-shadow:0 6px 18px rgba(122,157,71,.2);}
.plan-card.current{border-color:var(--ink-muted);}
.plan-card input[type="radio"]{position:absolute;opacity:0;pointer-events:none;}
.plan-card h3{margin:0 0 .25rem;font-family:var(--font-display);font-size:1.4rem;font-weight:500;}
.plan-card .price{font-size:1.1rem;color:var(--brand-primary-dk);font-weight:700;margin:.25rem 0;}
.plan-card .desc{font-size:.82rem;color:var(--ink-muted);margin:.5rem 0 0;min-height:2.5em;}
.plan-card .badge-tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--brand-accent);color:#fff;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.25em .7em;border-radius:999px;}
.plan-card .current-tag{position:absolute;top:-10px;right:10px;background:var(--ink);color:#fff;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.25em .7em;border-radius:999px;}
.summary-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem;margin:1rem 0 1.5rem;}
.summary-row{display:flex;justify-content:space-between;align-items:center;padding:.35rem 0;}
.summary-row .muted{color:var(--ink-muted);font-size:.9rem;}
.summary-row strong{font-size:1rem;}
.diff-up{color:#b45309;}
.diff-down{color:#16a34a;}
</style>

<div class="m-page">
<div class="container wrap">

<a href="welcome.php" style="font-size:.88rem;color:var(--ink-muted);">← Back to dashboard</a>
<h1 style="margin:.75rem 0 .25rem;">Change your subscription</h1>
<p class="muted" style="margin:0 0 1.5rem;">
    Pick a different membership package. Your next charge will be at the new amount.
</p>

<?php if ($done): ?>
    <div class="alert alert-success" data-autohide style="margin-bottom:1.5rem;">
        <strong>Changed.</strong> You're now on the <strong><?= htmlspecialchars($current_plan['name']) ?></strong> plan.
        Your recurring charge is updated on PayFast — your next charge will be
        <strong><?= htmlspecialchars($current_plan['price_display']) ?></strong>.
    </div>
<?php endif; ?>
<?php if ($error): ?>
    <div class="alert alert-error"><?= $error /* pre-escaped above */ ?></div>
<?php endif; ?>

<?php if (!$subscription): ?>
    <div class="alert alert-info">
        You don't have an active subscription yet.
        <a href="checkout-membership.php">Activate one →</a>
    </div>
<?php else: ?>

    <div class="summary-card">
        <div class="summary-row">
            <span class="muted">Currently on</span>
            <strong><?= htmlspecialchars($current_plan['name'] ?? $member['tier']) ?>
                <?php if ($current_plan): ?>
                    — <?= htmlspecialchars($current_plan['price_display']) ?>
                <?php endif; ?>
            </strong>
        </div>
        <?php if (!empty($subscription['next_charge_at'])): ?>
            <div class="summary-row">
                <span class="muted">Next charge date</span>
                <strong><?= htmlspecialchars(date('j M Y', strtotime($subscription['next_charge_at']))) ?></strong>
            </div>
        <?php endif; ?>
    </div>

    <form method="post" id="plan-form">
        <?= csrf_field() ?>

        <h2 style="font-size:1.05rem;margin:0 0 .5rem;">Choose a new plan</h2>
        <div class="plan-grid">
            <?php foreach ($plans as $p):
                $is_current  = $current_plan && $current_plan['slug'] === $p['slug'];
                $is_selected = ($_POST['plan'] ?? '') === $p['slug'];
            ?>
                <label class="plan-card <?= $is_current ? 'current' : '' ?> <?= $is_selected ? 'selected' : '' ?>"
                       data-slug="<?= htmlspecialchars($p['slug']) ?>"
                       data-price="<?= (int)$p['price_cents'] ?>"
                       data-name="<?= htmlspecialchars($p['name']) ?>"
                       data-display="<?= htmlspecialchars($p['price_display']) ?>">
                    <?php if ($is_current): ?>
                        <span class="current-tag">Current</span>
                    <?php elseif (!empty($p['badge'])): ?>
                        <span class="badge-tag"><?= htmlspecialchars($p['badge']) ?></span>
                    <?php endif; ?>
                    <input type="radio" name="plan" value="<?= htmlspecialchars($p['slug']) ?>"
                           <?= $is_selected ? 'checked' : '' ?>>
                    <h3><?= htmlspecialchars($p['name']) ?></h3>
                    <div class="price"><?= htmlspecialchars($p['price_display']) ?></div>
                    <p class="desc"><?= htmlspecialchars($p['description'] ?? '') ?></p>
                </label>
            <?php endforeach; ?>
        </div>

        <!-- Dynamic summary that updates as you click -->
        <div id="change-summary" style="display:none;" class="summary-card">
            <div class="summary-row">
                <span class="muted">Changing from</span>
                <strong id="sum-from"></strong>
            </div>
            <div class="summary-row">
                <span class="muted">Changing to</span>
                <strong id="sum-to"></strong>
            </div>
            <div class="summary-row">
                <span class="muted">Monthly difference</span>
                <strong id="sum-diff"></strong>
            </div>
        </div>

        <div style="display:flex;gap:.75rem;align-items:center;margin-top:1rem;">
            <button type="submit" class="btn" id="submit-btn" disabled>Confirm change</button>
            <a href="welcome.php" class="btn btn-outline">Cancel</a>
        </div>

        <p class="muted" style="font-size:.8rem;margin-top:1.25rem;">
            The change takes effect on your next scheduled charge date.
            You won't be double-charged, and no refunds or top-ups happen for the current billing cycle.
        </p>
    </form>

<?php endif; ?>

</div>
</div>

<script>
(function () {
    const cards = document.querySelectorAll('.plan-card');
    const summary = document.getElementById('change-summary');
    const submitBtn = document.getElementById('submit-btn');
    const sumFrom = document.getElementById('sum-from');
    const sumTo = document.getElementById('sum-to');
    const sumDiff = document.getElementById('sum-diff');

    const currentSlug = <?= json_encode($current_plan['slug'] ?? '') ?>;
    const currentName = <?= json_encode($current_plan['name'] ?? '') ?>;
    const currentDisplay = <?= json_encode($current_plan['price_display'] ?? '') ?>;
    const currentPrice = <?= (int)($current_plan['price_cents'] ?? 0) ?>;

    function updateUI() {
        const selectedRadio = document.querySelector('input[name="plan"]:checked');
        cards.forEach(c => c.classList.toggle('selected', c.querySelector('input').checked));

        if (!selectedRadio) { summary.style.display = 'none'; submitBtn.disabled = true; return; }
        const card = selectedRadio.closest('.plan-card');
        const newSlug = card.dataset.slug;
        const newName = card.dataset.name;
        const newDisplay = card.dataset.display;
        const newPrice = parseInt(card.dataset.price, 10);

        if (newSlug === currentSlug) {
            summary.style.display = 'none';
            submitBtn.disabled = true;
            return;
        }

        sumFrom.textContent = currentName + ' — ' + currentDisplay;
        sumTo.textContent = newName + ' — ' + newDisplay;
        const diffCents = newPrice - currentPrice;
        const diffSign = diffCents > 0 ? '+' : '−';
        const diffZAR = 'R ' + (Math.abs(diffCents) / 100).toFixed(2).replace(/\.00$/, '');
        sumDiff.textContent = diffSign + diffZAR + ' / month';
        sumDiff.className = diffCents > 0 ? 'diff-up' : 'diff-down';
        summary.style.display = 'block';
        submitBtn.disabled = false;
    }

    cards.forEach(card => {
        card.addEventListener('click', () => {
            const radio = card.querySelector('input');
            radio.checked = true;
            updateUI();
        });
    });

    updateUI();
})();
</script>

<?php require __DIR__ . '/_footer.php'; ?>