<?php
$pageTitle = 'Funnels';
$currentPage = 'funnels';
$headerActions = '<a href="'.url('/funnels/create').'" class="btn-primary"><i class="fas fa-plus"></i> New Funnel</a>';
require_once APP_PATH . '/views/layouts/header.php';
?>

<?php if (empty($funnels)): ?>
<div class="card" style="padding:4rem;text-align:center;max-width:480px;margin:0 auto">
    <div style="width:64px;height:64px;background:#fef3c7;border-radius:1rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem">
        <i class="fas fa-filter" style="font-size:1.75rem;color:#d97706"></i>
    </div>
    <h2 style="font-weight:800;font-size:1.25rem;color:#111827;margin:0 0 .5rem">No Funnels Yet</h2>
    <p style="color:#6b7280;font-size:.875rem;margin:0 0 1.5rem">Create multi-step funnels with landing pages and embedded forms.</p>
    <a href="<?= url('/funnels/create') ?>" class="btn-primary" style="justify-content:center"><i class="fas fa-plus"></i> Create First Funnel</a>
</div>
<?php else: ?>
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.25rem">
<?php foreach ($funnels as $funnel): ?>
<div class="card" style="padding:1.5rem;display:flex;flex-direction:column;gap:1rem" id="funnel-card-<?= $funnel['id'] ?>">
    <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem">
        <div style="flex:1;min-width:0">
            <div style="font-weight:700;font-size:1rem;color:#111827;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"><?= e($funnel['name']) ?></div>
            <?php if (!empty($funnel['description'])): ?>
            <div style="font-size:.8rem;color:#6b7280;margin-top:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"><?= e($funnel['description']) ?></div>
            <?php endif; ?>
        </div>
        <span class="badge badge-orange" style="flex-shrink:0"><?= $funnel['page_count'] ?> pages</span>
    </div>

    <!-- Funnel Step Visual -->
    <?php if ($funnel['page_count'] > 0): ?>
    <div style="display:flex;align-items:center;gap:.25rem;overflow:hidden">
        <?php for ($i = 0; $i < min((int)$funnel['page_count'], 5); $i++): ?>
        <div style="flex:1;height:6px;background:<?= $i === 0 ? '#4f46e5' : ($i < 3 ? '#818cf8' : '#e0e7ff') ?>;border-radius:99px"></div>
        <?php if ($i < min((int)$funnel['page_count'], 5) - 1): ?>
        <i class="fas fa-chevron-right" style="font-size:.55rem;color:#d1d5db;flex-shrink:0"></i>
        <?php endif; ?>
        <?php endfor; ?>
    </div>
    <?php endif; ?>

    <div style="background:#f9fafb;border-radius:.75rem;padding:.75rem;border:1px solid #f3f4f6">
        <div style="display:flex;align-items:center;gap:.5rem">
            <span style="font-family:'JetBrains Mono',monospace;font-size:.7rem;color:#6b7280;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"><?= url('/funnel/'.$funnel['slug']) ?></span>
            <button onclick="copyToClipboard('<?= url('/funnel/'.$funnel['slug']) ?>')" style="background:none;border:none;cursor:pointer;color:#4f46e5;font-size:.75rem;padding:.25rem" title="Copy"><i class="fas fa-copy"></i></button>
            <a href="<?= url('/funnel/'.$funnel['slug']) ?>" target="_blank" style="color:#059669;font-size:.75rem;text-decoration:none;padding:.25rem" title="Preview"><i class="fas fa-external-link-alt"></i></a>
        </div>
    </div>

    <div style="display:flex;gap:.5rem;padding-top:.5rem;border-top:1px solid #f3f4f6">
        <a href="<?= url('/funnels/'.$funnel['id'].'/edit') ?>" class="btn-secondary btn-sm" style="flex:1;justify-content:center"><i class="fas fa-edit"></i> Manage Pages</a>
        <button onclick="deleteFunnel(<?= $funnel['id'] ?>)" class="btn-danger btn-sm" title="Delete"><i class="fas fa-trash"></i></button>
    </div>
    <div style="font-size:.65rem;color:#d1d5db">Created <?= timeAgo($funnel['created_at']) ?></div>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>

<script>
async function deleteFunnel(id) {
    confirmDelete('Delete this funnel and all its pages?', async function() {
        var res = await apiPost('/funnels/' + id + '/delete', {});
        if (res.success) { document.getElementById('funnel-card-' + id).remove(); showToast(res.message, 'success'); }
        else showToast(res.message || 'Error', 'error');
    });
}
</script>
<?php require_once APP_PATH . '/views/layouts/footer.php'; ?>
