<?php

declare(strict_types=1);

/** @var array<string,mixed> $moduleGuide */
$guideId = (string)($moduleGuide['id'] ?? 'moduleGuideModal');
$guideTopics = is_array($moduleGuide['topics'] ?? null) ? $moduleGuide['topics'] : [];
$guideDefault = (string)($moduleGuide['default'] ?? ($guideTopics[0]['id'] ?? ''));
?>
<div class="modal fade pp-module-guide" id="<?= htmlspecialchars($guideId) ?>" tabindex="-1"
     aria-labelledby="<?= htmlspecialchars($guideId) ?>Title" aria-hidden="true"
     data-module-guide data-guide-default="<?= htmlspecialchars($guideDefault) ?>">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <div class="pp-guide-heading">
                    <span class="pp-guide-heading-icon"><i class="bi bi-<?= htmlspecialchars((string)($moduleGuide['icon'] ?? 'book')) ?>"></i></span>
                    <div>
                        <span class="pp-guide-kicker"><?= htmlspecialchars((string)($moduleGuide['eyebrow'] ?? 'Module handbook')) ?></span>
                        <h2 class="modal-title" id="<?= htmlspecialchars($guideId) ?>Title"><?= htmlspecialchars((string)($moduleGuide['title'] ?? 'Guide')) ?></h2>
                        <p class="pp-guide-subtitle"><?= htmlspecialchars((string)($moduleGuide['subtitle'] ?? '')) ?></p>
                    </div>
                </div>
                <button type="button" class="pp-guide-close" data-bs-dismiss="modal" aria-label="Close guide" title="Close guide">
                    <i class="bi bi-x-lg" aria-hidden="true"></i>
                </button>
            </div>
            <div class="pp-guide-searchbar">
                <label class="pp-guide-searchbox">
                    <i class="bi bi-search" aria-hidden="true"></i>
                    <span class="visually-hidden">Search this guide</span>
                    <input type="search" data-guide-search placeholder="Search concepts, controls, workflows, or tips…" autocomplete="off">
                    <kbd class="pp-guide-shortcut">/</kbd>
                </label>
            </div>
            <div class="pp-guide-layout">
                <nav class="pp-guide-nav" aria-label="Guide topics">
                    <div class="pp-guide-nav-label">Topics</div>
                    <?php foreach ($guideTopics as $index => $topic): ?>
                        <button type="button"
                                class="pp-guide-topic<?= ((string)($topic['id'] ?? '') === $guideDefault || ($guideDefault === '' && $index === 0)) ? ' active' : '' ?>"
                                data-guide-topic="<?= htmlspecialchars((string)($topic['id'] ?? '')) ?>"
                                aria-selected="<?= ((string)($topic['id'] ?? '') === $guideDefault || ($guideDefault === '' && $index === 0)) ? 'true' : 'false' ?>">
                            <i class="bi bi-<?= htmlspecialchars((string)($topic['icon'] ?? 'circle')) ?>"></i>
                            <span><?= htmlspecialchars((string)($topic['label'] ?? 'Topic')) ?></span>
                        </button>
                    <?php endforeach; ?>
                </nav>
                <div class="pp-guide-content">
                    <div class="pp-guide-empty" data-guide-empty>
                        <i class="bi bi-search d-block fs-3 mb-2"></i>
                        No matching guide topic. Try a broader term.
                    </div>
                    <?php foreach ($guideTopics as $index => $topic): ?>
                        <section class="pp-guide-panel<?= ((string)($topic['id'] ?? '') === $guideDefault || ($guideDefault === '' && $index === 0)) ? ' active' : '' ?>"
                                 data-guide-panel="<?= htmlspecialchars((string)($topic['id'] ?? '')) ?>"
                                 data-guide-search="<?= htmlspecialchars((string)($topic['keywords'] ?? '')) ?>">
                            <?= (string)($topic['body'] ?? '') ?>
                        </section>
                    <?php endforeach; ?>
                </div>
            </div>
            <div class="pp-guide-footer">
                <span><i class="bi bi-shield-check me-1"></i> Guidance describes the current project module and generated-app impact.</span>
                <span>Search with <strong>/</strong> · Close with <strong>Esc</strong></span>
            </div>
        </div>
    </div>
</div>
<?php unset($moduleGuide, $guideId, $guideTopics, $guideDefault); ?>
