<?php
declare(strict_types=1);
require_once __DIR__ . '/_bootstrap.php';
require_login();

const FOOTER_GROUP_SLOTS = 4; // 編集できるメニューグループ（列）の数

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    require_post_csrf();

    $design = (string)($_POST['footer_design'] ?? '');
    $all = footer_all();
    if (isset($all[$design])) setting_set('footer_design', $design);

    // フッターメニュー：グループ（見出し＋リンク）
    $groups = [];
    foreach (range(0, FOOTER_GROUP_SLOTS - 1) as $g) {
        $heading = trim((string)($_POST['groups'][$g]['heading'] ?? ''));
        $links = [];
        foreach ((array)($_POST['groups'][$g]['links'] ?? []) as $l) {
            if (!is_array($l)) continue;
            $label  = trim((string)($l['label'] ?? ''));
            $target = trim((string)($l['target'] ?? ''));
            if ($label === '') continue;
            $links[] = ['label' => $label, 'target' => $target];
        }
        if ($links === [] && $heading === '') continue;
        $groups[] = ['heading' => $heading, 'links' => $links];
    }
    setting_set('footer_menu', json_encode($groups, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES));

    flash_set('フッター設定を保存しました。');
    redirect('/admin/footer.php');
}

$footers = footer_all();
$active  = active_footer_key();
$groups  = setting_get_json('footer_menu');

// フッターメニューの「リンク先」を初心者でも選べるよう、ページ一覧をプルダウン化（本メニューと同じ表記）。
$pageOptions = '';
foreach (page_all() as $pp) {
    $pageOptions .= '<option value="' . h((string)($pp['slug'] ?? '')) . '">'
        . h((string)($pp['title'] ?? '')) . '（/' . h((string)($pp['slug'] ?? '')) . '）</option>';
}

admin_header('フッター設定', 'footer');
?>
<h1 class="adm-h1">フッター設定</h1>
<div class="adm-guide">
  フッターは<strong>デザインを選んで使う</strong>方式です。ロゴ・住所・電話・SNSは<a href="<?= h(url('/admin/settings.php')) ?>">サイト基本設定</a>の内容を、メニューは下の入力を流し込みます。
</div>
<?php flash_render(); ?>

<form method="post" class="adm-form">
  <input type="hidden" name="_csrf" value="<?= h(csrf_token()) ?>">

  <h2 class="adm-h2">フッターのデザイン</h2>
  <div class="frame-grid">
    <?php foreach ($footers as $key => $meta): ?>
      <label class="frame-card <?= $active === $key ? 'is-active' : '' ?>">
        <input type="radio" name="footer_design" value="<?= h($key) ?>" <?= $active === $key ? 'checked' : '' ?>>
        <span class="frame-name"><?= h($meta['name']) ?></span>
        <span class="frame-desc"><?= h($meta['description']) ?></span>
        <?php if ($active === $key): ?><span class="frame-badge">使用中</span><?php endif; ?>
      </label>
    <?php endforeach; ?>
  </div>

  <hr class="fld-sep">
  <h2 class="adm-h2">フッターメニュー</h2>
  <p class="adm-note">使う分だけ入力してください。複数列のデザインでは「グループ」が各列になります。1列のデザインでは全部まとめて表示されます。見出しは対応デザインのみ表示。<strong>リンク先は「▼ページから選んで自動入力」で選べます</strong>（外部サイトはURLを直接入力）。</p>

  <?php for ($g = 0; $g < FOOTER_GROUP_SLOTS; $g++):
      $grp = is_array($groups[$g] ?? null) ? $groups[$g] : [];
      $heading = (string)($grp['heading'] ?? '');
      $links = is_array($grp['links'] ?? null) ? $grp['links'] : [];
  ?>
    <div class="adm-block is-collapsed">
      <div class="adm-block-head">
        <button type="button" class="adm-block-label" data-block-toggle aria-expanded="false">
          <span class="block-chevron" aria-hidden="true">▶</span>グループ <?= $g + 1 ?><?= $heading !== '' ? '：' . h($heading) : '' ?>
        </button>
      </div>
      <div class="adm-block-body">
      <div class="fld"><label class="fld-label">グループの見出し（任意）</label>
        <input type="text" name="groups[<?= $g ?>][heading]" placeholder="例：サービス" value="<?= h($heading) ?>"></div>
      <div class="rep" data-rep>
        <label class="fld-label">リンク</label>
        <div class="rep-rows" data-rep-rows>
          <?php foreach ($links as $i => $l): ?>
            <div class="rep-row rep-simple" data-rep-row>
              <div class="fld"><label class="fld-label">表示文字</label>
                <input type="text" name="groups[<?= $g ?>][links][<?= $i ?>][label]" value="<?= h((string)($l['label'] ?? '')) ?>"></div>
              <div class="fld"><label class="fld-label">リンク先</label>
                <select data-page-picker style="margin-bottom:6px">
                  <option value="">▼ ページから選んで自動入力</option>
                  <?= $pageOptions ?>
                </select>
                <input type="text" name="groups[<?= $g ?>][links][<?= $i ?>][target]" data-target-input placeholder="ページを選ぶか、about / https://... / #id を入力" value="<?= h((string)($l['target'] ?? '')) ?>"></div>
              <button type="button" class="adm-btn ghost sm" data-rep-del>この行を削除</button>
            </div>
          <?php endforeach; ?>
        </div>
        <button type="button" class="adm-btn ghost" data-rep-add>＋ リンクを追加</button>
        <template data-rep-tpl>
          <div class="rep-row rep-simple" data-rep-row>
            <div class="fld"><label class="fld-label">表示文字</label>
              <input type="text" name="groups[<?= $g ?>][links][__IDX__][label]" value=""></div>
            <div class="fld"><label class="fld-label">リンク先</label>
              <select data-page-picker style="margin-bottom:6px">
                <option value="">▼ ページから選んで自動入力</option>
                <?= $pageOptions ?>
              </select>
              <input type="text" name="groups[<?= $g ?>][links][__IDX__][target]" data-target-input placeholder="ページを選ぶか、about / https://... / #id を入力" value=""></div>
            <button type="button" class="adm-btn ghost sm" data-rep-del>この行を削除</button>
          </div>
        </template>
      </div>
      </div><!--/.adm-block-body-->
    </div>
  <?php endfor; ?>

  <button class="adm-btn primary" type="submit">保存</button>
</form>

<script>
(function(){
  // フッターの「ページから選んで自動入力」プルダウン：選ぶとリンク先へslugを入れ、
  // 表示文字が空なら自動でページ名を入れる補助。外部URL/#アンカーは手入力のまま使える。
  document.addEventListener('change', function(e){
    var sel = e.target && e.target.closest ? e.target.closest('[data-page-picker]') : null;
    if(!sel || sel.value === '') return;
    var row = sel.closest('[data-rep-row]');
    if(!row) return;
    var target = row.querySelector('[data-target-input]');
    if(target){ target.value = sel.value; }
    var label = row.querySelector('input[name*="[label]"]');
    if(label && label.value.trim() === ''){
      var opt = sel.options[sel.selectedIndex];
      label.value = opt ? opt.textContent.replace(/（\/[^）]*）\s*$/, '').trim() : '';
    }
    sel.selectedIndex = 0; // 補助入力なので選んだら先頭に戻す
  });
})();
</script>
<?php admin_footer(); ?>
