<?php

declare(strict_types=1);
/* Variables: $baseUrl, $assetsUrl, $project, $user, $navItems, $pageTitle, $stateJson, $outputJson */
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title><?= htmlspecialchars($project['name'] ?? 'Project') ?> - Finished</title>

    <?php include constant('BASE_PATH') . '/core/views/project-head.php'; ?>

    <?= \PpPhp\Core\ModuleAssets::style('Finished', 'Views/styles.css') ?>
    <?= \PpPhp\Core\ModuleAssets::style('Finished', 'Views/finished-app-theme.css', '', 'finishedAppThemeCss') ?>
</head>

<body class="finished-body">
    <?php include __DIR__ . '/partials/shell.php'; ?>

    <div id="mainArea" class="main-area">
        <div class="right-workspace w-100">
            <div class="toolbar finished-toolbar d-flex align-items-center gap-2 px-3 py-2">
                <i class="bi bi-check2-circle fs-5 text-success"></i>
                <h6 class="mb-0 fw-semibold">Build &amp; Deploy</h6>
                <span class="ms-auto text-muted small" id="actionIndicator"></span>
                <button type="button" class="fin-guide-btn pp-guide-trigger" data-fin-help-open title="Open the Build &amp; Deploy guide" aria-label="Open Build and Deploy guide">
                    <i class="bi bi-question-circle-fill" aria-hidden="true"></i><span>Guide</span>
                </button>
            </div>

            <div class="workspace-content finished-content p-3">

                <!-- ═══ Status Banner ═══ -->
                <div class="status-banner p-3 mb-3 d-flex align-items-center gap-3" id="statusBanner">
                    <i class="bi bi-info-circle-fill fs-4" id="statusIcon"></i>
                    <div class="flex-grow-1">
                        <strong id="statusTitle">Ready</strong>
                        <div class="small text-muted" id="statusDetail">Configure your project in the previous modules, then build and deploy from here.</div>
                    </div>
                    <button class="btn btn-sm btn-outline-secondary" id="btnRefreshStatus" title="Refresh status">
                        <i class="bi bi-arrow-clockwise"></i>
                    </button>
                </div>

                <!-- ═══ Build Stats ═══ -->
                <div class="row g-2 mb-3" id="statsRow">
                    <div class="col-6 col-md-3">
                        <div class="stat-card">
                            <div class="stat-value" id="statLastBuild">—</div>
                            <div class="stat-label">Last Build</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="stat-card">
                            <div class="stat-value" id="statFiles">—</div>
                            <div class="stat-label">Files</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="stat-card">
                            <div class="stat-value" id="statDuration">—</div>
                            <div class="stat-label">Duration</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="stat-card">
                            <div class="stat-value" id="statSize">—</div>
                            <div class="stat-label">Size</div>
                        </div>
                    </div>
                </div>

                <!-- ═══ Action Cards ═══ -->
                <div class="row g-3 mb-4">
                    <!-- Row 1: Build & Preview -->
                    <div class="col-md-4 col-6">
                        <div class="action-card p-2 d-flex align-items-center" data-action="build"
                            data-bs-toggle="tooltip" data-bs-placement="top"
                            data-bs-title="Turns everything you designed into a real, runnable application. Run this after any change — it's the step that makes your work live.">
                            <div class="card-icon text-primary"><i class="bi bi-hammer"></i></div>
                            <div class="card-body">
                                <div class="card-title">Build Now</div>
                                <div class="card-text">Generate application files</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-6">
                        <div class="action-card p-2 d-flex align-items-center" data-action="preview"
                            data-bs-toggle="tooltip" data-bs-placement="top"
                            data-bs-title="Opens your built app in a new tab so you can click through it. Uses your Preview URL if you set one in Output; otherwise starts a local test server.">
                            <div class="card-icon text-success"><i class="bi bi-eye"></i></div>
                            <div class="card-body">
                                <div class="card-title">Preview in Browser</div>
                                <div class="card-text">Open your app in a new tab</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-6">
                        <div class="action-card p-2 d-flex align-items-center" data-action="open-folder"
                            data-bs-toggle="tooltip" data-bs-placement="top"
                            data-bs-title="Opens the folder of generated files on your computer. Only available when <?= htmlspecialchars(\PpPhp\Core\Brand::name()) ?> runs locally — on a hosted server, use Package as ZIP instead.">
                            <div class="card-icon text-warning"><i class="bi bi-folder2-open"></i></div>
                            <div class="card-body">
                                <div class="card-title">Open Output Folder</div>
                                <div class="card-text">Browse generated files on disk</div>
                            </div>
                        </div>
                    </div>

                    <!-- Row 2: Deploy -->
                    <div class="col-md-4 col-6">
                        <a href="<?= $baseUrl ?>/project/<?= urlencode($project['slug']) ?>/deploy" class="action-card p-2 d-flex align-items-center text-decoration-none text-reset"
                            data-bs-toggle="tooltip" data-bs-placement="top"
                            data-bs-title="Opens the full FTP/SFTP client: save server connections, browse the remote site, and upload your app — including changed-files-only uploads.">
                            <div class="card-icon text-info"><i class="bi bi-cloud-arrow-up-fill"></i></div>
                            <div class="card-body">
                                <div class="card-title">Deploy via FTP <i class="bi bi-box-arrow-up-right small text-muted"></i></div>
                                <div class="card-text">Open the FTP/SFTP client</div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4 col-6">
                        <div class="action-card p-2 d-flex align-items-center" data-action="deploy-demo"
                            data-bs-toggle="tooltip" data-bs-placement="top"
                            data-bs-title="A one-off publish to a demo/staging host. You'll be asked for the server details each time — nothing is saved. For servers you use often, use Deploy via FTP.">
                            <div class="card-icon text-secondary"><i class="bi bi-globe"></i></div>
                            <div class="card-body">
                                <div class="card-title">Deploy to Demo</div>
                                <div class="card-text">Publish to a demo server</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-6">
                        <div class="action-card p-2 d-flex align-items-center" data-action="deploy-git"
                            data-bs-toggle="tooltip" data-bs-placement="top"
                            data-bs-title="Saves a snapshot of your generated files into a local Git history on the server, so you can track changes between builds. Nothing is pushed to GitHub or any remote.">
                            <div class="card-icon text-danger"><i class="bi bi-git"></i></div>
                            <div class="card-body">
                                <div class="card-title">Git Commit</div>
                                <div class="card-text">Snapshot output to local git</div>
                            </div>
                        </div>
                    </div>

                    <!-- Row 3: Package & Tools -->
                    <div class="col-md-4 col-6">
                        <div class="action-card p-2 d-flex align-items-center" data-action="deploy-package"
                            data-bs-toggle="tooltip" data-bs-placement="top"
                            data-bs-title="The reliable way to go live. Builds a self-installing bundle — your app + install.php + schema.sql (tables & views) + seed.sql (data) — with NO database password baked in. Upload it, open the URL, and a wizard sets up the database and your admin account. Guaranteed to recreate everything (including report views) on any server.">
                            <div class="card-icon text-success"><i class="bi bi-box-seam"></i></div>
                            <div class="card-body">
                                <div class="card-title">Deployment Package <span class="badge bg-success-subtle text-success" style="font-size:.6rem;vertical-align:middle">recommended</span></div>
                                <div class="card-text">Self-installing bundle (DB + admin wizard)</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-6">
                        <div class="action-card p-2 d-flex align-items-center" data-action="package-zip"
                            data-bs-toggle="tooltip" data-bs-placement="top"
                            data-bs-title="Zips your latest build and downloads it to your computer — handy for backups or uploading by hand. The archive is removed from the server right after the download starts.">
                            <div class="card-icon text-primary"><i class="bi bi-file-zip"></i></div>
                            <div class="card-body">
                                <div class="card-title">Package as ZIP</div>
                                <div class="card-text">Download your app as an archive</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-6">
                        <div class="action-card p-2 d-flex align-items-center" data-action="generate-sql"
                            data-bs-toggle="tooltip" data-bs-placement="top"
                            data-bs-title="Downloads a .sql file with your database structure — import it on another server to recreate your tables. The file is removed from the server right after the download starts.">
                            <div class="card-icon text-success"><i class="bi bi-database-gear"></i></div>
                            <div class="card-body">
                                <div class="card-title">Generate SQL Script</div>
                                <div class="card-text">Download your database structure</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-6">
                        <div class="action-card p-2 d-flex align-items-center" data-action="health-check"
                            data-bs-toggle="tooltip" data-bs-placement="top"
                            data-bs-title="Checks this server has everything your app needs (PHP version, database driver, ZIP, writable output folder). Run it if a build or upload misbehaves.">
                            <div class="card-icon text-warning"><i class="bi bi-heart-pulse"></i></div>
                            <div class="card-body">
                                <div class="card-title">Health Check</div>
                                <div class="card-text">Verify server requirements</div>
                            </div>
                        </div>
                    </div>
                    <?php if (is_file(\PpPhp\Core\ProjectLocator::dir((string) ($project['slug'] ?? '')) . '/factory/config/designer.json')): ?>
                    <div class="col-md-4 col-6">
                        <div class="action-card p-2 d-flex align-items-center" data-action="reset-dashboard"
                            data-bs-toggle="tooltip" data-bs-placement="top"
                            data-bs-title="Restores this project's shipped dashboard design from its factory snapshot (your current design is backed up first), then rebuilds. Use it to undo dashboard changes and return to the original.">
                            <div class="card-icon text-danger"><i class="bi bi-arrow-counterclockwise"></i></div>
                            <div class="card-body">
                                <div class="card-title">Reset Dashboard to Factory Default</div>
                                <div class="card-text">Restore the original dashboard &amp; rebuild</div>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>
                </div>

                <!-- ═══ Bottom: History + Health ═══ -->
                <div class="row g-3">
                    <!-- Build History -->
                    <div class="col-md-7">
                        <div class="card shadow-sm h-100">
                            <div class="card-header py-2 d-flex justify-content-between align-items-center">
                                <button type="button" class="finished-section-toggle" data-bs-toggle="collapse"
                                    data-bs-target="#buildHistoryPanel" aria-expanded="true" aria-controls="buildHistoryPanel">
                                    <span><i class="bi bi-clock-history me-1"></i> Build History</span>
                                    <i class="bi bi-chevron-down finished-section-chevron" aria-hidden="true"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-secondary finished-clear-btn" id="btnClearHistory" title="Clear history" aria-label="Clear build history">
                                    <i class="bi bi-trash3"></i>
                                </button>
                            </div>
                            <div class="collapse show" id="buildHistoryPanel">
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-sm table-hover mb-0" id="historyTable">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>Action</th>
                                                    <th>Status</th>
                                                    <th>Time</th>
                                                    <th>Duration</th>
                                                    <th style="width:50px"></th>
                                                </tr>
                                            </thead>
                                            <tbody id="historyBody"></tbody>
                                        </table>
                                    </div>
                                    <div class="text-center text-muted small py-3" id="historyEmpty">
                                        <i class="bi bi-inbox me-1"></i> No builds yet. Click <strong>Build Now</strong> above to start.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Health Check Results -->
                    <div class="col-md-5">
                        <div class="card shadow-sm h-100">
                            <div class="card-header py-2">
                                <button type="button" class="finished-section-toggle" data-bs-toggle="collapse"
                                    data-bs-target="#systemHealthPanel" aria-expanded="true" aria-controls="systemHealthPanel">
                                    <span><i class="bi bi-heart-pulse me-1"></i> System Health</span>
                                    <i class="bi bi-chevron-down finished-section-chevron" aria-hidden="true"></i>
                                </button>
                            </div>
                            <div class="collapse show" id="systemHealthPanel">
                                <div class="card-body" id="healthBody">
                                    <div class="text-center text-muted small py-4">
                                        <i class="bi bi-arrow-clockwise me-1"></i> Run <strong>Health Check</strong> from the action cards above.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- ═══ Feedback toast container ═══ -->
    <div id="actionFeedback"></div>

    <!-- in-app Guide (self-contained partial) -->
    <?php include __DIR__ . '/partials/help.php'; ?>

    <?php include constant('BASE_PATH') . '/core/views/project-scripts.php'; ?>

    <script>
        const projectSlug = <?= json_encode($project['slug'] ?? '') ?>;
        const baseUrl     = <?= json_encode($baseUrl) ?>;
        const finishedState = <?= $stateJson ?>;
        const outputState   = <?= $outputJson ?>;
    </script>

    <?= \PpPhp\Core\ModuleAssets::script('Finished', 'Views/scripts/core.js') ?>
    <?= \PpPhp\Core\ModuleAssets::script('Finished', 'Views/scripts/save.js') ?>
    <?= \PpPhp\Core\ModuleAssets::script('Finished', 'Views/scripts/init.js') ?>
</body>

</html>
