<?php
$displayName = trim((string)($user['fullname'] ?? $user['username'] ?? 'Developer'));
$projectName = (string)($project['name'] ?? 'Your project');
$projectDescription = trim((string)($project['description'] ?? ''));
$projectDescription = $projectDescription !== ''
    ? $projectDescription
    : 'Turn your data model into a secure, responsive web application—without rebuilding the same foundation every time.';
$projectBase = $baseUrl . '/project/' . rawurlencode((string)$project['slug']);
$sa = !empty($standalone);
?>
<div class="workspace-welcome">
    <?php if (!empty($projectFlash)): ?>
        <div class="workspace-flash" role="status">
            <i class="bi bi-info-circle-fill"></i>
            <span><?= htmlspecialchars((string)$projectFlash) ?></span>
            <button type="button" class="workspace-flash-x" aria-label="Dismiss" data-flash-dismiss>&times;</button>
        </div>
    <?php endif; ?>
    <section class="workspace-hero">
        <div class="hero-glow hero-glow-one"></div>
        <div class="hero-glow hero-glow-two"></div>
        <div class="hero-content">
            <div class="welcome-kicker"><i class="bi bi-stars"></i> Welcome back, <?= htmlspecialchars($displayName) ?><?php if ($sa): ?> <span class="welcome-sa-tag"><i class="bi bi-window-stack"></i> Standalone app</span><?php endif; ?></div>
            <h1>Build <span><?= htmlspecialchars($projectName) ?></span> with clarity.</h1>
            <p><?= $sa ? 'A database-free app — design its pages in the Designer, style it, and build. Tables, Query, Pages, Fields and Security are off for this project.' : htmlspecialchars($projectDescription) ?></p>
            <div class="hero-actions">
                <?php if ($sa): ?>
                    <a class="btn btn-light btn-sm px-3" href="<?= $projectBase ?>/designer"><i class="bi bi-palette me-1"></i> Open Designer</a>
                    <a class="btn btn-outline-light btn-sm px-3" href="<?= $projectBase ?>/finished"><i class="bi bi-rocket-takeoff me-1"></i> Build app</a>
                <?php else: ?>
                    <a class="btn btn-light btn-sm px-3" href="<?= $projectBase ?>/tables"><i class="bi bi-table me-1"></i> Start with data</a>
                    <a class="btn btn-outline-light btn-sm px-3" href="<?= $projectBase ?>/designer"><i class="bi bi-palette me-1"></i> Open Designer</a>
                <?php endif; ?>
            </div>
        </div>
        <?php if ($sa): ?>
        <div class="hero-status hero-status-static">
            <span class="progress-ring" style="--progress-angle:<?= ((int)$workspaceStats['progress'] * 3.6) ?>deg">
                <span class="progress-ring-content"><strong><?= (int)$workspaceStats['progress'] ?>%</strong><small>ready</small></span>
            </span>
            <span class="database-pill">
                <span class="database-dot"></span>
                <span class="database-pill-copy"><small>App type</small><strong>Standalone</strong></span>
            </span>
            <span class="database-target"><i class="bi bi-window-stack"></i> No database</span>
        </div>
        <?php else: ?>
        <button type="button" class="hero-status" data-edit-database
            data-project-slug="<?= htmlspecialchars((string)$project['slug']) ?>"
            data-project-name="<?= htmlspecialchars($projectName) ?>"
            data-bs-toggle="tooltip"
            data-bs-placement="top"
            data-bs-custom-class="workspace-tooltip"
            title="Edit, test, or switch this project's database connection"
            aria-label="Manage the <?= htmlspecialchars($workspaceStats['databaseLabel']) ?> database connection for <?= htmlspecialchars($projectName) ?>">
            <span class="progress-ring" style="--progress-angle:<?= ((int)$workspaceStats['progress'] * 3.6) ?>deg">
                <span class="progress-ring-content"><strong><?= (int)$workspaceStats['progress'] ?>%</strong><small>setup</small></span>
            </span>
            <span class="database-pill">
                <span class="database-dot"></span>
                <span class="database-pill-copy"><small>Connected with</small><strong data-project-db-label><?= htmlspecialchars($workspaceStats['databaseLabel']) ?></strong></span>
            </span>
            <?php if ($workspaceStats['databaseTarget'] !== ''): ?>
                <span class="database-target"><i class="bi bi-database-check"></i> <span data-project-db-target><?= htmlspecialchars($workspaceStats['databaseTarget']) ?></span></span>
            <?php endif; ?>
            <span class="database-manage-hint"><i class="bi bi-gear"></i> Manage connection</span>
        </button>
        <?php endif; ?>
    </section>

    <section class="workspace-stats" aria-label="Project status">
        <?php if ($sa): ?>
        <div class="stat-item violet"><span class="stat-icon violet"><i class="bi bi-window-stack"></i></span><div><strong>Pages</strong><small>designed in the app</small></div></div>
        <div class="stat-item blue"><span class="stat-icon blue"><i class="bi bi-database-slash"></i></span><div><strong>None</strong><small>database required</small></div></div>
        <div class="stat-item pink"><span class="stat-icon pink"><i class="bi bi-globe2"></i></span><div><strong>Public</strong><small>no login needed</small></div></div>
        <div class="stat-item green"><span class="stat-icon green"><i class="bi bi-lightning-charge"></i></span><div><strong>1-click</strong><small>application build</small></div></div>
        <?php else: ?>
        <div class="stat-item blue"><span class="stat-icon blue"><i class="bi bi-table"></i></span><div><strong><?= (int)$workspaceStats['tables'] ?></strong><small>project tables</small></div></div>
        <div class="stat-item violet"><span class="stat-icon violet"><i class="bi bi-file-earmark"></i></span><div><strong><?= (int)$workspaceStats['pageTables'] ?></strong><small>page sets</small></div></div>
        <div class="stat-item pink"><span class="stat-icon pink"><i class="bi bi-palette2"></i></span><div><strong><?= (int)$workspaceStats['designs'] ?></strong><small>designed tables</small></div></div>
        <div class="stat-item green"><span class="stat-icon green"><i class="bi bi-lightning-charge"></i></span><div><strong>1-click</strong><small>application build</small></div></div>
        <?php endif; ?>
    </section>

    <?php if ($sa): ?>
    <section class="workspace-section">
        <div class="section-heading">
            <div><span>Standalone toolkit</span><h2>Design pages, style them, and ship — no database needed</h2></div>
            <a href="<?= $projectBase ?>/designer">Open Designer <i class="bi bi-arrow-right"></i></a>
        </div>
        <div class="capability-grid">
            <a class="capability-card pages" href="<?= $projectBase ?>/designer">
                <span class="capability-icon"><i class="bi bi-palette"></i></span>
                <div><h3>Design your pages</h3><p>Build standalone &amp; common pages from components — hero sections, cards, charts, media and more.</p></div>
                <i class="bi bi-arrow-up-right"></i>
            </a>
            <a class="capability-card data" href="<?= $projectBase ?>/style">
                <span class="capability-icon"><i class="bi bi-brush"></i></span>
                <div><h3>Style &amp; theme</h3><p>Pick a theme, tune colours and typography, and set the navigation and menu.</p></div>
                <i class="bi bi-arrow-up-right"></i>
            </a>
            <a class="capability-card logic" href="<?= $projectBase ?>/custom-files">
                <span class="capability-icon"><i class="bi bi-folder2-open"></i></span>
                <div><h3>Add your own files</h3><p>Drop in custom assets, scripts or pages that ship alongside the generated app.</p></div>
                <i class="bi bi-arrow-up-right"></i>
            </a>
            <a class="capability-card ship" href="<?= $projectBase ?>/finished">
                <span class="capability-icon"><i class="bi bi-rocket-takeoff"></i></span>
                <div><h3>Build and ship</h3><p>Generate a complete, database-free PHP app and deploy it anywhere.</p></div>
                <i class="bi bi-arrow-up-right"></i>
            </a>
        </div>
    </section>

    <section class="build-path">
        <div class="path-title"><i class="bi bi-signpost-split"></i><div><strong>A simple path to a live page</strong><small>No database — everything is designed and built from here.</small></div></div>
        <div class="path-steps">
            <a href="<?= $projectBase ?>/designer"><b>1</b><span>Design pages</span></a>
            <i class="bi bi-chevron-right"></i>
            <a href="<?= $projectBase ?>/style"><b>2</b><span>Style app</span></a>
            <i class="bi bi-chevron-right"></i>
            <a href="<?= $projectBase ?>/finished"><b>3</b><span>Build app</span></a>
        </div>
    </section>
    <?php else: ?>
    <section class="workspace-section">
        <div class="section-heading">
            <div><span>Your RAD toolkit</span><h2>Everything needed to go from database to application</h2></div>
            <a href="<?= $projectBase ?>/tables">Continue building <i class="bi bi-arrow-right"></i></a>
        </div>
        <div class="capability-grid">
            <a class="capability-card data" href="<?= $projectBase ?>/tables">
                <span class="capability-icon"><i class="bi bi-diagram-3"></i></span>
                <div><h3>Model your data</h3><p>Create tables and views, connect relationships, and keep the schema visual.</p></div>
                <i class="bi bi-arrow-up-right"></i>
            </a>
            <a class="capability-card pages" href="<?= $projectBase ?>/pages">
                <span class="capability-icon"><i class="bi bi-window-stack"></i></span>
                <div><h3>Shape the experience</h3><p>Choose pages and fields, then compose responsive layouts in Designer.</p></div>
                <i class="bi bi-arrow-up-right"></i>
            </a>
            <a class="capability-card logic" href="<?= $projectBase ?>/events">
                <span class="capability-icon"><i class="bi bi-braces-asterisk"></i></span>
                <div><h3>Add logic safely</h3><p>Use events, queries, permissions, and security rules without losing control.</p></div>
                <i class="bi bi-arrow-up-right"></i>
            </a>
            <a class="capability-card ship" href="<?= $projectBase ?>/finished">
                <span class="capability-icon"><i class="bi bi-rocket-takeoff"></i></span>
                <div><h3>Build and ship</h3><p>Generate a complete PHP application, review readiness, and deploy.</p></div>
                <i class="bi bi-arrow-up-right"></i>
            </a>
        </div>
    </section>

    <section class="build-path">
        <div class="path-title"><i class="bi bi-signpost-split"></i><div><strong>A simple path to production</strong><small>Move left to right; return to any step whenever the project evolves.</small></div></div>
        <div class="path-steps">
            <a href="<?= $projectBase ?>/tables"><b>1</b><span>Connect data</span></a>
            <i class="bi bi-chevron-right"></i>
            <a href="<?= $projectBase ?>/pages"><b>2</b><span>Choose pages</span></a>
            <i class="bi bi-chevron-right"></i>
            <a href="<?= $projectBase ?>/designer"><b>3</b><span>Design UI</span></a>
            <i class="bi bi-chevron-right"></i>
            <a href="<?= $projectBase ?>/finished"><b>4</b><span>Build app</span></a>
        </div>
    </section>
    <?php endif; ?>
</div>

<!-- ── Welcome tour — a 4-tip onboarding gift, shown once per project ────────── -->
<div class="pp-tour" id="ppTour" hidden aria-modal="true" role="dialog" aria-labelledby="ppTourTitle">
    <div class="pp-tour-card" role="document">
        <div class="pp-tour-head">
            <span class="pp-tour-eyebrow"><i class="bi bi-gift"></i> Welcome gift</span>
            <button type="button" class="pp-tour-x" id="ppTourSkip" aria-label="Skip">&times;</button>
            <div class="pp-tour-dots" id="ppTourDots" aria-hidden="true"></div>
        </div>
        <div class="pp-tour-body">
            <div class="pp-tour-ic" id="ppTourIcon"><i class="bi bi-stars"></i></div>
            <div class="pp-tour-step" id="ppTourStep">Tip 1 of 4</div>
            <h3 id="ppTourTitle">Welcome</h3>
            <p id="ppTourText"></p>
            <div class="pp-tour-tip" id="ppTourHint" hidden></div>
        </div>
        <div class="pp-tour-foot">
            <button type="button" class="pp-tour-ghost" id="ppTourSkip2">Skip tour</button>
            <div class="pp-tour-nav">
                <button type="button" class="pp-tour-ghost" id="ppTourBack" hidden><i class="bi bi-arrow-left"></i> Back</button>
                <button type="button" class="pp-tour-next" id="ppTourNext">Next <i class="bi bi-arrow-right"></i></button>
            </div>
        </div>
    </div>
</div>
<style>
    .pp-tour { position: fixed; inset: 0; z-index: 20000; display: flex; align-items: center; justify-content: center; padding: 1.2rem;
        background: color-mix(in srgb, #0b1020 62%, transparent); backdrop-filter: blur(5px); }
    .pp-tour[hidden] { display: none; }
    .pp-tour-card { width: 100%; max-width: 460px; background: var(--pp-surface, #fff); color: var(--pp-text, #172033);
        border: 1px solid var(--pp-border, #e6e9f0); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(2,6,23,.5);
        animation: ppTourIn .34s cubic-bezier(.2,.8,.2,1); }
    @keyframes ppTourIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) { .pp-tour-card { animation: none; } }
    .pp-tour-head { position: relative; padding: 1rem 1.3rem .8rem;
        background: linear-gradient(135deg, var(--pp-accent, #4f46e5), color-mix(in srgb, var(--pp-accent, #4f46e5) 55%, #0ea5e9)); color: #fff; }
    .pp-tour-eyebrow { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .35rem; opacity: .95; }
    .pp-tour-x { position: absolute; top: .55rem; right: .7rem; background: rgba(255,255,255,.16); border: 0; color: #fff; width: 30px; height: 30px; border-radius: 8px; font-size: 20px; line-height: 1; cursor: pointer; }
    .pp-tour-x:hover { background: rgba(255,255,255,.28); }
    .pp-tour-dots { display: flex; gap: .35rem; margin-top: .7rem; }
    .pp-tour-dots span { width: 22px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.35); transition: background .2s; }
    .pp-tour-dots span.on { background: #fff; }
    .pp-tour-body { padding: 1.4rem 1.5rem .4rem; text-align: center; }
    .pp-tour-ic { width: 62px; height: 62px; margin: -2.4rem auto .8rem; border-radius: 16px; display: flex; align-items: center; justify-content: center;
        font-size: 28px; color: var(--pp-accent, #4f46e5); background: var(--pp-surface, #fff); border: 1px solid var(--pp-border, #e6e9f0); box-shadow: 0 8px 22px rgba(2,6,23,.14); }
    .pp-tour-step { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pp-text-muted, #94a3b8); }
    .pp-tour-body h3 { font-size: 1.32rem; font-weight: 800; margin: .3rem 0 .4rem; letter-spacing: -.01em; }
    .pp-tour-body p { color: var(--pp-text-muted, #475569); font-size: .94rem; line-height: 1.55; margin: 0; }
    .pp-tour-tip { margin: .9rem 0 .2rem; padding: .6rem .8rem; border-radius: 10px; font-size: .82rem; text-align: left; display: flex; gap: .5rem; align-items: flex-start;
        background: color-mix(in srgb, var(--pp-accent, #4f46e5) 9%, var(--pp-surface, #fff)); border: 1px solid color-mix(in srgb, var(--pp-accent, #4f46e5) 32%, var(--pp-border, #e6e9f0)); color: var(--pp-text, #172033); }
    .pp-tour-tip[hidden] { display: none; }
    .pp-tour-tip::before { content: '\F32B'; font-family: 'bootstrap-icons'; color: var(--pp-accent, #4f46e5); }
    .pp-tour-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem 1.5rem 1.3rem; }
    .pp-tour-nav { display: flex; gap: .5rem; }
    .pp-tour-ghost { background: transparent; border: 1px solid var(--pp-border, #e6e9f0); color: var(--pp-text-muted, #64748b); border-radius: 10px; padding: .45rem .8rem; font-size: .85rem; font-weight: 600; cursor: pointer; }
    .pp-tour-ghost:hover { color: var(--pp-text, #172033); border-color: var(--pp-text-muted, #94a3b8); }
    .pp-tour-ghost[hidden] { display: none; }
    .pp-tour-next { background: var(--pp-accent, #4f46e5); border: 1px solid var(--pp-accent, #4f46e5); color: var(--pp-accent-contrast, #fff); border-radius: 10px; padding: .45rem 1rem; font-size: .88rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
    .pp-tour-next:hover { filter: brightness(1.07); }
</style>
<script>
(function () {
    var slug = <?= json_encode((string) ($project['slug'] ?? '')) ?>;
    var base = <?= json_encode((string) $projectBase) ?>;
    var isStandalone = <?= !empty($sa) ? 'true' : 'false' ?>;
    if (!slug) return;
    var key = 'pp-tour-' + slug;
    try { if (localStorage.getItem(key) === 'done') return; } catch (e) {}

    var TIPS = isStandalone ? [
        { ic: 'stars',            step: 'You’re all set',      title: 'Welcome to ' + <?= json_encode((string) ($project['name'] ?? 'your project')) ?>, text: 'This is a database-free app. You’ll build every screen visually — no tables, no queries, no code.', hint: 'Everything auto-saves as you work. Come back to this Home any time.' },
        { ic: 'palette',          step: 'Design your pages',   title: 'Open the Designer', text: 'Compose responsive pages from components on a visual canvas — hero sections, navbars, cards, forms and more.', hint: '' },
        { ic: 'brush',            step: 'Make it yours',       title: 'Style & theme', text: 'Pick a theme, tune colours and typography, and preview light & dark instantly.', hint: '' },
        { ic: 'rocket-takeoff',   step: 'Build & ship',        title: 'Generate your app', text: 'One click builds a complete, standalone PHP app you fully own — then review readiness and deploy.', hint: '', cta: 'Open the Designer', href: base + '/designer' }
    ] : [
        { ic: 'database-check',   step: 'You’re all set',      title: 'Welcome to ' + <?= json_encode((string) ($project['name'] ?? 'your project')) ?>, text: 'Your Virtual Database is connected — shared with Data Studio, so everything saves instantly. No server, no setup.', hint: 'Tables you build here appear in Data Studio, and vice-versa.' },
        { ic: 'table',            step: 'Model your data',     title: 'Create your first table', text: 'Open Tables and click “Create Table” to design your data — add fields, keys and relationships, all visually.', hint: 'No tables yet is normal — this is where you start.' },
        { ic: 'palette',          step: 'Design the experience', title: 'Turn data into screens', text: 'In the Designer, turn tables into pages, forms and dashboards — responsive lists, reports and charts, without code.', hint: '' },
        { ic: 'rocket-takeoff',   step: 'Build & ship',        title: 'Generate your app', text: 'One click builds a complete, standalone PHP application you fully own — review readiness and deploy in minutes.', hint: '', cta: 'Create your first table', href: base + '/tables' }
    ];

    var i = 0;
    var el = document.getElementById('ppTour');
    var dots = document.getElementById('ppTourDots');
    dots.innerHTML = TIPS.map(function (_, n) { return '<span' + (n === 0 ? ' class="on"' : '') + '></span>'; }).join('');

    function render() {
        var t = TIPS[i];
        document.getElementById('ppTourIcon').innerHTML = '<i class="bi bi-' + t.ic + '"></i>';
        document.getElementById('ppTourStep').textContent = 'Tip ' + (i + 1) + ' of ' + TIPS.length;
        document.getElementById('ppTourTitle').textContent = t.title;
        document.getElementById('ppTourText').textContent = t.text;
        var hint = document.getElementById('ppTourHint');
        if (t.hint) { hint.textContent = t.hint; hint.hidden = false; } else { hint.hidden = true; }
        document.getElementById('ppTourBack').hidden = (i === 0);
        var next = document.getElementById('ppTourNext');
        next.innerHTML = (i === TIPS.length - 1)
            ? '<i class="bi bi-check2-circle"></i> ' + (t.cta || 'Get started')
            : 'Next <i class="bi bi-arrow-right"></i>';
        [].forEach.call(dots.children, function (d, n) { d.classList.toggle('on', n <= i); });
    }
    function done() { try { localStorage.setItem(key, 'done'); } catch (e) {} el.hidden = true; }
    function skip() { done(); }

    document.getElementById('ppTourNext').addEventListener('click', function () {
        if (i < TIPS.length - 1) { i++; render(); }
        else { var href = TIPS[i].href; done(); if (href) window.location.href = href; }
    });
    document.getElementById('ppTourBack').addEventListener('click', function () { if (i > 0) { i--; render(); } });
    document.getElementById('ppTourSkip').addEventListener('click', skip);
    document.getElementById('ppTourSkip2').addEventListener('click', skip);
    el.addEventListener('click', function (e) { if (e.target === el) skip(); });
    document.addEventListener('keydown', function (e) { if (!el.hidden && e.key === 'Escape') skip(); });

    render();
    el.hidden = false;
})();
</script>
