<?php

declare(strict_types=1);

$seoResolved = is_array($seoPanelData['resolved'] ?? null) ? $seoPanelData['resolved'] : [];
$seoPreview = is_array($seoPanelData['preview'] ?? null) ? $seoPanelData['preview'] : [];
$seoValue = static fn (string $field): string => myronEditorFieldValue($selectedPage, 'draft_' . $field, 'published_' . $field);
$seoSource = static fn (string $field): string => (string) (($seoResolved[$field]['source'] ?? 'missing'));
?>
<fieldset class="sg-fieldset sg-field--full mc-seo-panel" data-myron-seo-panel>
  <legend>SEO Overrides</legend>
  <div class="sg-form-grid">
    <label class="sg-field">
      <span class="sg-field__label">Canonical Override <small>Source: <?= myronEscape($seoSource('canonical')) ?></small></span>
      <input class="sg-field__control" type="url" form="<?= myronEscape($pageEditorCommandFormId) ?>" name="canonical_override" value="<?= myronEscape($seoValue('canonical_override')) ?>">
    </label>
    <label class="sg-field">
      <span class="sg-field__label">Robots Override <small>Source: <?= myronEscape($seoSource('robots')) ?></small></span>
      <input class="sg-field__control" type="text" form="<?= myronEscape($pageEditorCommandFormId) ?>" name="robots_override" value="<?= myronEscape($seoValue('robots_override')) ?>" placeholder="index, follow">
    </label>
    <label class="sg-field">
      <span class="sg-field__label">OG Title <small>Source: <?= myronEscape($seoSource('og_title')) ?></small></span>
      <input class="sg-field__control" type="text" form="<?= myronEscape($pageEditorCommandFormId) ?>" name="og_title" value="<?= myronEscape($seoValue('og_title')) ?>" data-seo-og-title>
    </label>
    <label class="sg-field">
      <span class="sg-field__label">OG Description <small>Source: <?= myronEscape($seoSource('og_description')) ?></small></span>
      <textarea class="sg-field__control sg-field__control--textarea" form="<?= myronEscape($pageEditorCommandFormId) ?>" name="og_description" rows="3" data-seo-og-description><?= myronEscape($seoValue('og_description')) ?></textarea>
    </label>
    <label class="sg-field">
      <span class="sg-field__label">OG Image URL <small>Source: <?= myronEscape($seoSource('og_image')) ?></small></span>
      <input class="sg-field__control" type="url" form="<?= myronEscape($pageEditorCommandFormId) ?>" name="og_image" value="<?= myronEscape($seoValue('og_image')) ?>" data-seo-og-image>
    </label>
    <label class="sg-field">
      <span class="sg-field__label">Twitter Title <small>Source: <?= myronEscape($seoSource('twitter_title')) ?></small></span>
      <input class="sg-field__control" type="text" form="<?= myronEscape($pageEditorCommandFormId) ?>" name="twitter_title" value="<?= myronEscape($seoValue('twitter_title')) ?>" data-seo-twitter-title>
    </label>
    <label class="sg-field">
      <span class="sg-field__label">Twitter Description <small>Source: <?= myronEscape($seoSource('twitter_description')) ?></small></span>
      <textarea class="sg-field__control sg-field__control--textarea" form="<?= myronEscape($pageEditorCommandFormId) ?>" name="twitter_description" rows="3" data-seo-twitter-description><?= myronEscape($seoValue('twitter_description')) ?></textarea>
    </label>
    <label class="sg-field">
      <span class="sg-field__label">Twitter Image URL <small>Source: <?= myronEscape($seoSource('twitter_image')) ?></small></span>
      <input class="sg-field__control" type="url" form="<?= myronEscape($pageEditorCommandFormId) ?>" name="twitter_image" value="<?= myronEscape($seoValue('twitter_image')) ?>" data-seo-twitter-image>
    </label>
  </div>
  <div class="sg-form-grid">
    <label class="sg-field">
      <span class="sg-field__label">JSON-LD Mode</span>
      <select class="sg-field__control" form="<?= myronEscape($pageEditorCommandFormId) ?>" name="jsonld_mode" data-seo-jsonld-mode>
        <?php foreach (['auto' => 'Auto', 'custom' => 'Custom', 'none' => 'None'] as $value => $label): ?>
        <option value="<?= myronEscape($value) ?>"<?= $seoValue('jsonld_mode') === $value || ($seoValue('jsonld_mode') === '' && $value === 'auto') ? ' selected' : '' ?>><?= myronEscape($label) ?></option>
        <?php endforeach; ?>
      </select>
    </label>
    <label class="sg-field">
      <span class="sg-field__label">JSON-LD Type</span>
      <select class="sg-field__control" form="<?= myronEscape($pageEditorCommandFormId) ?>" name="jsonld_type">
        <?php foreach (['Article', 'BlogPosting', 'WebPage'] as $value): ?>
        <option value="<?= myronEscape($value) ?>"<?= ($seoValue('jsonld_type') ?: 'Article') === $value ? ' selected' : '' ?>><?= myronEscape($value) ?></option>
        <?php endforeach; ?>
      </select>
    </label>
    <label class="sg-field sg-field--full" data-seo-jsonld-custom-wrap>
      <span class="sg-field__label">Custom JSON-LD</span>
      <textarea class="sg-field__control sg-field__control--textarea" form="<?= myronEscape($pageEditorCommandFormId) ?>" name="jsonld_custom" rows="5"><?= myronEscape($seoValue('jsonld_custom')) ?></textarea>
    </label>
    <label class="sg-field sg-field--full">
      <span class="sg-field__label">Auto JSON-LD Preview</span>
      <textarea class="sg-field__control sg-field__control--textarea" rows="5" readonly><?= myronEscape((string) ($seoPanelData['jsonld_preview'] ?? '')) ?></textarea>
    </label>
  </div>
  <div class="mc-seo-previews">
    <article class="mc-seo-preview" data-seo-serp-preview>
      <span><?= myronEscape((string) ($seoPreview['host'] ?? '')) ?> › <?= myronEscape((string) ($seoPreview['path'] ?? '/')) ?></span>
      <strong data-seo-serp-title><?= myronEscape((string) ($seoPreview['serp_title'] ?? '')) ?></strong>
      <p data-seo-serp-description><?= myronEscape((string) ($seoPreview['serp_description'] ?? '')) ?></p>
      <small>Simulation based on technical limits (pixel width). Not guaranteed of ranking or exact display by Google.</small>
    </article>
    <article class="mc-seo-preview" data-seo-og-preview>
      <div class="mc-seo-preview__image" data-seo-og-image-preview><?= trim((string) ($seoPreview['og_image'] ?? '')) !== '' ? myronEscape((string) $seoPreview['og_image']) : 'No Image' ?></div>
      <span><?= myronEscape((string) ($seoPreview['host'] ?? '')) ?></span>
      <strong data-seo-og-title-preview><?= myronEscape((string) ($seoPreview['og_title'] ?? '')) ?></strong>
      <p data-seo-og-description-preview><?= myronEscape((string) ($seoPreview['og_description'] ?? '')) ?></p>
    </article>
    <article class="mc-seo-preview" data-seo-twitter-preview>
      <div class="mc-seo-preview__image" data-seo-twitter-image-preview><?= trim((string) ($seoPreview['twitter_image'] ?? '')) !== '' ? myronEscape((string) $seoPreview['twitter_image']) : 'No Image' ?></div>
      <strong data-seo-twitter-title-preview><?= myronEscape((string) ($seoPreview['twitter_title'] ?? '')) ?></strong>
      <p data-seo-twitter-description-preview><?= myronEscape((string) ($seoPreview['twitter_description'] ?? '')) ?></p>
      <span><?= myronEscape((string) ($seoPreview['host'] ?? '')) ?></span>
    </article>
  </div>
</fieldset>
