<?php

declare(strict_types=1);

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

myronRequireDesignAccess();

$componentId = trim((string) ($_GET['id'] ?? ''));
$component = $componentId !== '' ? myronComponentRegistryRepository()->findComponentById($componentId) : null;
if (!is_array($component)) {
    $component = [
        'id' => $componentId !== '' ? $componentId : 'component.preview.missing',
        'classification' => 'component',
        'variants' => [],
        'slots' => [
            'title' => ['type' => 'string', 'required' => false],
            'body' => ['type' => 'rich-text', 'required' => false],
        ],
    ];
}

$title = (string) ($component['id'] ?? 'Component preview');
$envelope = myronComponentPreviewCatalog()->previewEnvelope($component);
$preview = myronComponentPreviewRenderer()->renderPreview($component);

header('Content-Type: text/html; charset=UTF-8');
?>
<!DOCTYPE html>
<html lang="<?= myronEscape(myronSiteLanguage()) ?>" data-myron-preview-document="component">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= myronEscape(myronComposeDocumentTitle('Component Preview')) ?></title>
  <?= myronRenderSiteFaviconLink() . "\n" ?>
  <?= myronRenderDefinitionFontHeadTags() . "\n" ?>
  <link rel="stylesheet" href="<?= myronEscape(myronBuildAssetUrl('runtime/css/tokens.css')) ?>">
  <link rel="stylesheet" href="<?= myronEscape(myronBuildAssetUrl('runtime/css/runtime-fonts.css')) ?>">
  <link rel="stylesheet" href="<?= myronEscape(myronBuildAssetUrl('runtime/css/runtime-token-overrides.css')) ?>">
  <link rel="stylesheet" href="<?= myronEscape(myronBuildAssetUrl('runtime/css/base.css')) ?>">
  <link rel="stylesheet" href="<?= myronEscape(myronBuildAssetUrl('runtime/css/components.css')) ?>">
  <link rel="stylesheet" href="<?= myronEscape(myronBuildAssetUrl('runtime/css/public-site.css')) ?>">
  <link rel="stylesheet" href="<?= myronEscape(myronBuildAssetUrl('runtime/css/style-guide.css')) ?>">
  <script src="<?= myronEscape(myronBuildAssetUrl('runtime/js/interactive-atoms.min.js')) ?>" defer></script>
</head>
<body class="myron-site-page mc-preview-document">
  <main class="mc-preview-document__canvas mc-preview-document__canvas--<?= myronEscape($envelope) ?>" data-myron-component-preview-document="<?= myronEscape($title) ?>">
    <header class="mc-preview-document__header">
      <span class="mc-preview-document__eyebrow">Component Preview</span>
      <h1><?= myronEscape($title) ?></h1>
    </header>
    <div class="mc-component-preview__frame mc-component-preview__frame--<?= myronEscape($envelope) ?>">
    <?= $preview ?>
    </div>
  </main>
</body>
</html>
