<?php

declare(strict_types=1);
// Variables: $baseUrl, $assetsUrl, $project, $user, $navItems, $tables, $fieldsByTable, $availablePageTypes, $designerState, $pageTitle
//
// Designer SPA (v3 clean rebuild). One stylesheet + ordered IIFE modules on window.PPD.
//
// These files are SERVED, not inlined: each <script src>/<link href> carries a
// content version (?v=…) and is returned with a one-year immutable cache, so the
// browser downloads the ~840 KB of app code once instead of on every visit.
// Editing a file changes its version, so a plain reload still picks it up.
// See core/ModuleAssets.php.
use PpPhp\Core\ModuleAssets;

$ppdAsset = static function (string $relative) use ($baseUrl): string {
    return ModuleAssets::url('Designer', 'Views/' . $relative, (string) $baseUrl);
};

// Dependency order matters: store -> api -> model -> registry -> renderer -> inspector -> panels -> app
// Plain ordered <script> tags execute in this order, exactly as the inlined blocks did.
$scripts = ['store.js', 'api.js', 'model.js', 'registry.js', 'theme.js', 'renderer.js', 'inspector.js', 'starters.js', 'panels.js', 'app.js'];
?>
<!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') ?> — Designer</title>
    <?php include constant('BASE_PATH') . '/core/views/project-head.php'; ?>
    <?= $iconCssHtml ?? '' /* FontAwesome Pro + Bootstrap + Material icon-pack stylesheets */ ?>
    <link rel="stylesheet" href="<?= htmlspecialchars($assetsUrl ?? '') ?>/vendor/fonts/fonts.css"><!-- local web-font pack (Font dropdown) -->
    <link rel="stylesheet" href="<?= htmlspecialchars($assetsUrl ?? '') ?>/sweetalert2/sweetalert2.min.css">
    <script src="<?= htmlspecialchars($assetsUrl ?? '') ?>/sweetalert2/sweetalert2.min.js"></script>
    <!-- Nepali Date Picker library (for the NepaliDatePicker edit control preview on the canvas + config modal) -->
    <link rel="stylesheet" href="<?= htmlspecialchars($assetsUrl ?? '') ?>/vendor/nepali-datepicker/nepali.datepicker.min.css">
    <script src="<?= htmlspecialchars($assetsUrl ?? '') ?>/vendor/nepali-datepicker/nepali.datepicker.min.js"></script>
    <link rel="stylesheet" id="ppdStyles" href="<?= htmlspecialchars($ppdAsset('app/designer.css'), ENT_QUOTES) ?>">
    <?php // Canonical Card Gallery styles — the SAME file the generated app ships
          // (core/Build/BuildWriter::sharedCardCss). Applies to .pp-card inside the
          // canvas; theme tokens come from .ppd-canvas (theme.js). Single source → no drift.
    $ppCardsCss = constant('BASE_PATH') . '/public/assets/css/pp-cards.css';
    if (is_file($ppCardsCss)): ?><style id="ppdCardStyles"><?php readfile($ppCardsCss); ?></style><?php endif; ?>
</head>
<body class="ppd-body">
    <?php include constant('BASE_PATH') . '/core/views/project-navbar.php'; ?>

    <div class="ppd-workspace" role="application" data-runtime="designer-v3">
        <?php include __DIR__ . '/partials/v3-left-panel.php'; ?>
        <?php include __DIR__ . '/partials/v3-canvas.php'; ?>
        <?php include __DIR__ . '/partials/v3-inspector.php'; ?>
    </div>
    <?php include __DIR__ . '/partials/v3-statusbar.php'; ?>

    <script>
        // Globals required by the shared project shell (core/views + project-shell.js: Save/Build/navigation)
        var projectSlug = <?= json_encode($project['slug'] ?? '') ?>;
        var baseUrl = <?= json_encode($baseUrl) ?>;
        var assetsUrl = <?= json_encode($assetsUrl ?? '') ?>;
        window.PpDesignerBootstrap = {
            projectSlug: projectSlug,
            baseUrl: baseUrl,
            tables: <?= json_encode($tables ?? []) ?>,
            lookupTables: <?= json_encode($lookupTables ?? $tables ?? []) ?>,
            fieldsByTable: <?= json_encode($fieldsByTable ?? new stdClass()) ?>,
            availablePageTypes: <?= json_encode($availablePageTypes ?? new stdClass()) ?>,
            hasFactory: <?= json_encode($hasFactory ?? false) ?>,
            pagesConfig: <?= json_encode($pagesConfig ?? new stdClass()) ?>,
            components: <?= json_encode($componentCatalogue ?? []) ?>,
            plugins: <?= json_encode($pluginCatalogue ?? new stdClass()) ?>,
            menuDefault: <?= json_encode($menuPageDefault ?? []) ?>,
            themes: <?= json_encode($themeCatalogue ?? []) ?>,
            themeDefault: <?= json_encode($themeDefault ?? 'default') ?>,
            appBrand: <?= json_encode($appBrand ?? ['name' => '', 'image' => '']) ?>,
            languages: <?= json_encode($languages ?? [['code' => 'en', 'name' => 'English']]) ?>,
            defaultLang: <?= json_encode($defaultLang ?? 'en') ?>,
            miscLabels: <?= json_encode($miscLabels ?? new stdClass()) ?>,
            tableSettings: <?= json_encode($tableSettings ?? new stdClass()) ?>,
            whereTabs: <?= json_encode($whereTabsByTable ?? new stdClass()) ?>,
            relations: <?= json_encode($relations ?? []) ?>,
            // Import/export formats straight from the DataOps registry — the same
            // source the build and the generated app use, so the canvas can never
            // advertise a format the runtime does not actually produce.
            dataFormats: <?= json_encode(\PpPhp\Core\DataOps\FormatRegistry::exportChoices()) ?>,
            dataReaders: <?= json_encode(\PpPhp\Core\DataOps\FormatRegistry::readerChoices()) ?>,
            standalone: <?= json_encode((bool)($standalone ?? false)) ?>,
            brand: <?= json_encode($appBrand ?? ['name' => '', 'image' => '']) ?>,
            designer: <?= json_encode($designerState ?: new stdClass()) ?>
        };
    </script>
    <?php include constant('BASE_PATH') . '/core/views/project-scripts.php'; ?>
    <?php foreach ($scripts as $script): ?>
        <script data-ppd="<?= htmlspecialchars($script) ?>" src="<?= htmlspecialchars($ppdAsset('app/' . $script), ENT_QUOTES) ?>"></script>
    <?php endforeach; ?>
</body>
</html>
