<?php

declare(strict_types=1);
// Variables: $baseUrl, $assetsUrl, $project, $user, $navItems, $tables, $fieldsConfig, $currentTableName, $pageTitle
?>
<!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') ?> - Fields</title>

    <?php include constant('BASE_PATH') . '/core/views/project-head.php'; ?>
    <link rel="stylesheet" href="<?= htmlspecialchars($assetsUrl) ?>/css/module-guide.css?v=<?= (int) @filemtime(constant('BASE_PATH') . '/public/assets/css/module-guide.css') ?>">

    <?= \PpPhp\Core\ModuleAssets::style('Fields', 'Views/styles.css') ?>
</head>

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

    <div id="mainArea" class="main-area">
        <!-- Left panel: tables -->
        <div class="left-panel fields-table-panel">
            <div class="panel-header fields-panel-header">
                <div>
                    <span class="fields-panel-kicker">Data source</span>
                    <strong>Tables</strong>
                </div>
                <span class="fields-table-count"><?= count($tables) ?></span>
            </div>
            <ul class="table-list" id="fieldsTableList">
                <?php foreach ($tables as $t): ?>
                    <li data-table="<?= htmlspecialchars($t['name']) ?>">
                        <i class="bi bi-<?= $t['type'] === 'VIEW' ? 'eye' : 'table' ?> me-1"></i>
                        <span><?= htmlspecialchars($t['name']) ?></span>
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>

        <!-- Right workspace: field grid -->
        <div class="right-workspace">
            <div class="toolbar" id="fieldsToolbar">
                <button class="btn btn-sm btn-outline-secondary d-md-none me-1" id="btnToggleFieldList" title="Show Tables">
                    <i class="bi bi-list"></i> Tables
                </button>
                <span class="fields-toolbar-icon"><i class="bi bi-layout-three-columns"></i></span>
                <span class="fields-toolbar-context">
                    <small>Field visibility</small>
                    <strong id="selectedTableLabel">Select a table</strong>
                </span>
                <button type="button" class="pp-guide-trigger ms-auto" data-bs-toggle="modal" data-bs-target="#fieldsGuideModal" title="Open the complete Fields module guide" aria-label="Open the Fields module guide">
                    <i class="bi bi-question-circle"></i><span>Guide</span>
                </button>
                <span class="fields-toolbar-hint d-none d-sm-inline"><i class="bi bi-cloud-check"></i> Changes save automatically</span>
            </div>
            <div class="workspace-content" id="fieldsWorkspace">
                <!-- Field grid will be rendered here by JS -->
                <div id="fieldGridContainer" class="text-center py-5 text-muted">
                    <i class="bi bi-hand-index display-1 d-block mb-3"></i>
                    <h5>Select a table from the left panel</h5>
                    <p>Choose which fields appear on each page type.</p>
                </div>
            </div>

            <?php include __DIR__ . '/partials/search_settings_modal.php'; ?>

        </div>
    </div>
    <?php include __DIR__ . '/partials/guide.php'; ?>

    <?php include constant('BASE_PATH') . '/core/views/project-scripts.php'; ?>
    <script src="<?= htmlspecialchars($assetsUrl) ?>/js/module-guide.js"></script>

    <script>
        const projectSlug = <?= json_encode($project['slug'] ?? '') ?>;
        const baseUrl = <?= json_encode($baseUrl) ?>;
        const dbTables = <?= json_encode($tables) ?>;
        const fieldsConfig = <?= json_encode($fieldsConfig ?: new stdClass()) ?>;
        let currentTableName = <?= json_encode($currentTableName) ?>;
        const pluginRegistry = <?= json_encode($pluginRegistry ?: new stdClass()) ?>;
    </script>


    <!-- Modular scripts (order matters) -->
    <?= \PpPhp\Core\ModuleAssets::script('Fields', 'Views/scripts/core.js') ?>
    <?= \PpPhp\Core\ModuleAssets::script('Fields', 'Views/scripts/ui.js') ?>
    <?= \PpPhp\Core\ModuleAssets::script('Fields', 'Views/scripts/save.js') ?>
    <?= \PpPhp\Core\ModuleAssets::script('Fields', 'Views/scripts/init.js') ?>
</body>

</html>
