<?php

declare(strict_types=1);

require_once dirname(__DIR__, 3) . '/system/bootstrap.php';

$currentUser = myronRequireDesignAccess();
$repository = myronComponentRegistryRepository();
$previewRenderer = myronComponentPreviewRenderer();
$previewCatalog = myronComponentPreviewCatalog();
$query = strtolower(trim((string) ($_GET['q'] ?? '')));
$components = $repository->listComponents();

if ($query !== '') {
    $components = array_values(array_filter(
        $components,
        fn (array $component): bool => $previewCatalog->matchesSearch($component, $query)
    ));
}

$componentGroups = $previewCatalog->groupComponents($components);

myronRenderAdminShellStart($currentUser, [
    'title' => 'Components',
    'titleContext' => 'Components',
    'activeItem' => 'components',
]);
?>
<div class="mc-workspace__header">
  <?php myronRenderAdminBreadcrumbs([
      ['label' => 'Design', 'href' => myronBuildAdminUrl('design.primitives')],
      ['label' => 'Component Studio', 'href' => myronBuildAdminUrl('content.sections')],
      ['label' => 'Components'],
  ]); ?>
  <div class="mc-workspace__title-row">
    <h1 class="mc-workspace__title">Components</h1>
  </div>
  <p class="mc-workspace__subtitle">A taxonomy-driven visual reference for promoted components, rendered through the same token and runtime CSS path as the primitive specimens.</p>
</div>

<div class="mc-page-canvas mc-page-canvas--site">
  <div class="sg-main">
    <section class="sg-section mc-component-filter">
      <form class="sg-form-grid" method="get" action="<?= myronEscape(myronBuildAdminUrl('design.components')) ?>">
        <label class="sg-field">
          <span class="sg-field__label">Search</span>
          <input class="sg-field__control" type="search" name="q" value="<?= myronEscape((string) ($_GET['q'] ?? '')) ?>" placeholder="component name or family">
        </label>
        <div class="sg-card__actions">
          <button class="sg-button sg-button--primary" type="submit">Search</button>
          <a class="sg-button sg-button--secondary" href="<?= myronEscape(myronBuildAdminUrl('design.components')) ?>">Reset</a>
        </div>
      </form>
    </section>

    <section class="sg-section mc-component-taxonomy-shell">
      <?php if ($componentGroups === []): ?>
      <div class="sg-status" role="status">No components match the current search.</div>
      <?php else: ?>
      <div class="mc-component-taxonomy" data-myron-component-taxonomy>
        <ul class="sg-nav mc-component-taxonomy__nav" aria-label="Component reference sections">
          <?php foreach ($componentGroups as $group): ?>
          <li class="sg-nav__item"><a class="sg-nav__link" href="#components-<?= myronEscape((string) $group['key']) ?>"><?= myronEscape((string) $group['title']) ?></a></li>
          <?php endforeach; ?>
        </ul>

        <?php foreach ($componentGroups as $group): ?>
        <section class="sg-section mc-component-section" id="components-<?= myronEscape((string) $group['key']) ?>" data-myron-component-taxonomy-section="<?= myronEscape((string) $group['key']) ?>">
          <h2 class="sg-section__title"><?= myronEscape((string) $group['title']) ?></h2>
          <p class="sg-section__subtitle"><?= myronEscape((string) $group['description']) ?></p>

          <div class="mc-component-specimen-list">
            <?php foreach ($group['components'] as $component): ?>
            <?php
              $componentId = (string) ($component['id'] ?? 'component');
              $envelope = $previewCatalog->previewEnvelope($component);
            ?>
            <article class="sg-subsection mc-component-specimen" data-myron-component-card="<?= myronEscape($componentId) ?>" data-myron-preview-envelope="<?= myronEscape($envelope) ?>">
              <header class="mc-component-specimen__header">
                <h3 class="sg-subsection__title"><?= myronEscape($componentId) ?></h3>
                <a class="sg-button sg-button--secondary" href="<?= myronEscape(myronBuildAdminUrl('design.componentPreview', ['id' => $componentId])) ?>" target="_blank" rel="noreferrer">Open Preview</a>
              </header>
              <div class="mc-component-preview" aria-label="<?= myronEscape((string) ($component['id'] ?? 'component')) ?> rendered preview">
                <div class="sg-specimen">
                  <span class="sg-specimen__label"><?= myronEscape($previewCatalog->specimenLabel($component)) ?></span>
                  <div class="sg-specimen__canvas sg-specimen__canvas--flush mc-component-preview__frame mc-component-preview__frame--<?= myronEscape($envelope) ?>">
                  <?= $previewRenderer->renderPreview($component) ?>
                  </div>
                </div>
              </div>
            </article>
            <?php endforeach; ?>
          </div>
        </section>
        <?php endforeach; ?>
      </div>
      <?php endif; ?>
    </section>
  </div>
</div>
<?php myronRenderAdminShellEnd(); ?>
