<?php
$page_title = 'Journey Templates';
require __DIR__ . '/_guard.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    csrf_verify();
    $do = $_POST['do'] ?? '';
    $id = (int)($_POST['step_id'] ?? 0);

    if ($do === 'delete' && $id) {
        db_exec('DELETE FROM journey_steps WHERE id=:id', ['id'=>$id]);
        header('Location: journey-templates.php?msg=deleted'); exit;
    }
    if ($do === 'reorder' && !empty($_POST['order'])) {
        $order = json_decode($_POST['order'], true);
        if (is_array($order)) {
            foreach ($order as $pos => $sid) {
                db_exec('UPDATE journey_steps SET sort_order=:o WHERE id=:id',
                        ['o'=>(int)$pos,'id'=>(int)$sid]);
            }
        }
        exit;
    }
    header('Location: journey-templates.php'); exit;
}

// Group steps by tier
$all = db_all('SELECT * FROM journey_steps WHERE active=1 ORDER BY tier, sort_order, id');
$by_tier = [
    'Bronze'=>[],'Silver'=>[],'Gold'=>[],'Platinum'=>[],'Diamond'=>[],
];
foreach ($all as $s) $by_tier[$s['tier']][] = $s;
?>

<style>
.tier-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.25rem 1.5rem;margin-bottom:1.25rem;}
.tier-card h2{margin:0 0 .75rem;font-size:1rem;display:flex;align-items:center;gap:.75rem;}
.tier-card .tb{font-size:.72rem;}
.step-list{list-style:none;padding:0;margin:0;}
.step-list li{display:grid;grid-template-columns:24px 1fr auto;gap:.75rem;align-items:center;padding:.65rem .75rem;border-bottom:1px solid var(--line);cursor:grab;}
.step-list li:last-child{border-bottom:none;}
.step-list li:hover{background:#fafafa;}
.step-list li.dragging{opacity:.5;}
.step-handle{color:var(--ink-light);font-size:1.1rem;user-select:none;}
.step-body strong{font-size:.92rem;}
.step-body p{margin:.1rem 0 0;font-size:.78rem;color:var(--ink-muted);}
.step-actions{display:flex;gap:.75rem;font-size:.82rem;white-space:nowrap;}
.inline-form{display:inline;}
.inline-form button{background:none;border:none;cursor:pointer;color:#b91c1c;font-size:.82rem;padding:0;font-family:inherit;}
.inline-form button:hover{text-decoration:underline;}
.empty-row{padding:1rem;font-size:.85rem;color:var(--ink-light);text-align:center;}
</style>

<section class="section">
<div class="container">

<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;">
    <div>
        <p class="muted" style="margin:0;"><a href="journeys.php">← Journeys</a></p>
        <h1 style="margin:.25rem 0 0;">Journey Templates</h1>
        <p class="muted" style="margin:.25rem 0 0;font-size:.9rem;">
            Define the onboarding steps for each membership tier. Drag to reorder.
        </p>
    </div>
    <a href="journey-template-edit.php?action=add" class="btn">+ Add step</a>
</div>

<form id="reorder-token-form" style="display:none;"><?= csrf_field() ?></form>

<?php if (isset($_GET['msg'])): ?>
    <div class="alert alert-success" data-autohide>Saved.</div>
<?php endif; ?>

<?php foreach ($by_tier as $tier => $steps):
    $tier_lc = strtolower($tier);
?>
    <div class="tier-card">
        <h2>
            <span class="tb tb-<?= $tier_lc ?>"><?= $tier ?></span>
            <span><?= count($steps) ?> step<?= count($steps)===1?'':'s' ?></span>
            <a href="journey-template-edit.php?action=add&tier=<?= $tier ?>"
               style="margin-left:auto;font-size:.85rem;">+ Add to <?= $tier ?></a>
        </h2>
        <?php if (empty($steps)): ?>
            <div class="empty-row">No steps configured for <?= $tier ?> yet.</div>
        <?php else: ?>
            <ul class="step-list" data-tier="<?= $tier ?>">
                <?php foreach ($steps as $i => $s): ?>
                    <li draggable="true" data-id="<?= $s['id'] ?>">
                        <span class="step-handle">⋮⋮</span>
                        <div class="step-body">
                            <strong><?= ($i+1) ?>. <?= htmlspecialchars($s['name']) ?></strong>
                            <?php if ($s['description']): ?>
                                <p><?= htmlspecialchars($s['description']) ?></p>
                            <?php endif; ?>
                        </div>
                        <div class="step-actions">
                            <a href="journey-template-edit.php?id=<?= $s['id'] ?>">Edit</a>
                            <form method="post" class="inline-form"
                                  onsubmit="return confirm('Delete this step? Members\' progress for this step will also be removed.');">
                                <?= csrf_field() ?>
                                <input type="hidden" name="do" value="delete">
                                <input type="hidden" name="step_id" value="<?= $s['id'] ?>">
                                <button type="submit">Delete</button>
                            </form>
                        </div>
                    </li>
                <?php endforeach; ?>
            </ul>
        <?php endif; ?>
    </div>
<?php endforeach; ?>

</div>
</section>

<script>
// Drag-to-reorder within each tier list
document.querySelectorAll('.step-list').forEach(list => {
    let dragEl = null;
    list.addEventListener('dragstart', e => {
        const li = e.target.closest('li');
        if (!li) return;
        dragEl = li;
        li.classList.add('dragging');
        e.dataTransfer.effectAllowed = 'move';
    });
    list.addEventListener('dragover', e => {
        e.preventDefault();
        const li = e.target.closest('li');
        if (!li || li === dragEl) return;
        const rect = li.getBoundingClientRect();
        const mid = rect.top + rect.height / 2;
        if (e.clientY < mid) list.insertBefore(dragEl, li);
        else                 list.insertBefore(dragEl, li.nextSibling);
    });
    list.addEventListener('dragend', () => {
        if (!dragEl) return;
        dragEl.classList.remove('dragging');
        dragEl = null;
        const order = Array.from(list.querySelectorAll('li')).map(t => t.dataset.id);
        const fd = new FormData();
        fd.append('do', 'reorder');
        fd.append('order', JSON.stringify(order));
        fd.append('_token', document.querySelector('#reorder-token-form input[name=_token]').value);
        fetch('journey-templates.php', { method: 'POST', body: fd });
    });
});
</script>

<?php require __DIR__ . '/_footer.php'; ?>