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

$frames = frame_all();

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    require_post_csrf();
    $action = (string)($_POST['action'] ?? '');

    if ($action === 'set_frame') {
        $key = (string)($_POST['frame'] ?? '');
        if (isset($frames[$key])) {
            setting_set('active_frame', $key);
            setting_set('menu_breakpoint', ''); // メニュー切替幅は新フレームの標準（frame.json）を採用。手動指定は切替で一旦リセット＝フレーム依存
            flash_set('フレームを「' . $frames[$key]['name'] . '」に切り替えました。サイトを表示して確認してください。');
        }
        redirect('/admin/design.php');
    }

    if ($action === 'save_colors') {
        // ★「変えた色だけ」を保存する（差分保存・2026-08-05）。
        // 管理画面は未設定の色にも“そのフレームの既定値”を入れて表示しているため、
        // 送信された5色をそのまま全部保存すると、1色変えただけで残り4色まで焼き付き、
        // 別フレームに切り替えたときに前フレームの背景色・文字色まで持ち込まれて
        // フレーム本来の雰囲気が消えていた（着せ替えCMSとして致命的だったので修正）。
        // 既定値と同じ色は保存しない＝ブランドカラーだけ引き継ぎ、他はフレームの色が生きる。
        $curFrameDefaults = frame_theme_defaults(active_frame_key());
        $colors = [];
        foreach (theme_color_fields() as $k => $f) {
            $v = strtolower(trim((string)($_POST['color'][$k] ?? '')));
            if ($v !== '' && $v[0] !== '#') $v = '#' . $v; // 「#」の付け忘れを救済（手入力対応）
            if (!preg_match('/^#[0-9a-fA-F]{6}$/', $v)) continue;
            $def = strtolower((string)($curFrameDefaults[$k] ?? ''));
            if ($def !== '' && $def === $v) continue;      // フレーム既定と同じ＝上書きしない
            $colors[$k] = $v;
        }
        // 対の色（その色に乗る文字の色）。'' ＝自動なので保存しない＝従来どおりの挙動。
        foreach (theme_color_fields() as $k => $f) {
            if (empty($f['inverse'])) continue;            // 背景色・文字色は互いが対なので対象外
            $iv = (string)($_POST['inverse'][$k] ?? '');
            if ($iv !== '' && isset(theme_inverse_choices()[$iv])) $colors[$k . '_inverse'] = $iv;
        }
        setting_set('theme_colors', json_encode($colors, JSON_UNESCAPED_SLASHES));
        flash_set('テーマカラーを保存しました。');
        redirect('/admin/design.php');
    }

    if ($action === 'save_theme_css') {
        // 上級者向け：そのフレームのCSSを直接編集。★フレーム別に保存する（キーに frameKey が入る）＝
        // 別フレームに切り替えても持ち込まれず、戻れば編集内容が復活する（frame_assets と同じ作法）。
        $fkey = active_frame_key();
        setting_set('theme_css:' . $fkey, theme_css_sanitize((string)($_POST['theme_css'] ?? '')));
        flash_set('このフレームのCSSを保存しました。サイトを表示して確認してください。');
        redirect('/admin/design.php');
    }

    if ($action === 'reset_theme_css') {
        setting_set('theme_css:' . active_frame_key(), '');
        flash_set('編集内容を削除し、フレーム本来のCSSに戻しました。');
        redirect('/admin/design.php');
    }

    if ($action === 'reset_colors') {
        // ★パレットの色と、このフレームのCSS編集を「両方」消す＝必ずフレーム本来の状態に戻る。
        // 片方（パレット）だけ消す作りにしていたら、CSSを編集した後は元に戻せなくなった
        // （パレットの表示は frame_theme_defaults→frame_theme_source 経由で編集CSSを読むため）。
        // 依頼者が実機で踏んだ不具合。「リセットを押したのに戻らない」は致命的なので、確実に戻す方を採る。
        setting_set('theme_colors', '');
        setting_set('theme_css:' . active_frame_key(), '');
        flash_set('フレーム本来の状態に戻しました。');
        redirect('/admin/design.php');
    }

    if ($action === 'save_menu') {
        $bp = (string)($_POST['menu_breakpoint'] ?? '');
        // 空＝フレーム標準。指定する場合は安全な範囲の決まった値のみ受け付ける。
        $allowed = ['700', '800', '900', '1000', '1100', '1200', '9999'];
        setting_set('menu_breakpoint', in_array($bp, $allowed, true) ? $bp : '');
        flash_set('メニューの切り替え幅を保存しました。サイトを表示して確認してください。');
        redirect('/admin/design.php');
    }

    if ($action === 'save_frame_assets') {
        $fkey = active_frame_key();
        $defs = frame_asset_defs($frames[$fkey] ?? []);
        $vals = frame_assets_values($fkey);
        $offs = frame_assets_off_values($fkey);
        foreach ($defs as $d) {
            $k = $d['key'];
            // 「この素材を使わない」は別キー（frame_assets_off:<frame>）に持つ。
            // $vals（アップ済みのファイル名）は消さない＝チェックを外せば元の画像が復活する。
            if (!empty($_POST['asset_off_' . $k])) $offs[$k] = 1; else unset($offs[$k]);
            if (!empty($_POST['asset_clear_' . $k])) {
                $vals[$k] = '';
            } else {
                $vals[$k] = resolve_image_value('asset_' . $k, (string)($vals[$k] ?? ''));
            }
        }
        frame_assets_save($fkey, $vals);
        frame_assets_off_save($fkey, $offs);
        flash_set('フレーム素材を保存しました。');
        redirect('/admin/design.php');
    }

}

$active = active_frame_key();
$themeColors   = setting_get_json('theme_colors');
$themeDefaults = frame_theme_defaults($active);
$assetDefs     = frame_asset_defs($frames[$active] ?? []);
$assetVals     = frame_assets_values($active);
$assetOffs     = frame_assets_off_values($active); // 「この素材を使わない」フラグ
$menuBp        = (string)(setting_get('menu_breakpoint', '') ?? ''); // 空＝フレーム標準
$frameBp       = (int)($frames[$active]['menu_breakpoint'] ?? 900);  // 現フレームの標準値
$bpLock        = !empty($frames[$active]['menu_breakpoint_lock']);   // frame.json で「メニュー切り替え幅」UIを非表示＝フレーム標準に固定（ハンバーガー専用フレーム等）

admin_header('デザイン（フレーム・色）', 'design');
?>
<h1 class="adm-h1">デザイン（フレーム・テーマカラー）</h1>
<?php flash_render(); ?>

<!-- フレーム選択 -->
<section class="adm-section">
  <h2 class="adm-h2">フレーム（サイトの枠）</h2>

  <?php // 使用中フレームは常時表示（この画面で一番よく見る情報を最上部に置く）
    $curMeta  = $frames[$active] ?? ['name' => $active, 'description' => ''];
    $curThumb = frame_thumb_url($active);
  ?>
  <div class="frame-current">
    <?php if ($curThumb !== ''): ?><img class="frame-current-thumb" src="<?= h($curThumb) ?>" alt="" loading="lazy"><?php endif; ?>
    <div class="frame-current-body">
      <span class="frame-current-badge">使用中</span>
      <span class="frame-current-name"><?= h((string)($curMeta['name'] ?? $active)) ?></span>
      <span class="frame-current-desc"><?= h((string)($curMeta['description'] ?? '')) ?></span>
      <a class="frame-preview-link" href="<?= h(url('/?preview_frame=' . rawurlencode($active))) ?>" target="_blank" rel="noopener">トップページビュー ↗</a>
    </div>
  </div>

  <p class="adm-note">枠を切り替えても、ページの中身（パーツ）とメイン画像はそのまま引き継がれます。各フレームの「トップページビュー ↗」で、公開サイトを変えずにトップページの見た目を確認できます（あなたにだけ見えます）。気に入ったら「このフレームに切り替える」または、ビュー画面下の「適用」で公開できます。</p>

  <?php /* フレームが少ない時（無料版など）は折りたたまず常時表示＝着せ替えに気づいてもらう。
           開閉ボタンも出さない（押すと閉じるだけで邪魔なため）。多い時だけ <details> で閉じて画面を短く保つ。 */ ?>
  <?php $frameFew = (count($frames) <= 6); ?>
  <?php if (!$frameFew): ?>
  <details class="frame-switch">
    <summary class="adm-btn soft frame-switch-toggle">他のフレームに切り替える（全<?= count($frames) ?>種）</summary>
  <?php endif; ?>
  <form method="post">
    <input type="hidden" name="_csrf" value="<?= h(csrf_token()) ?>">
    <input type="hidden" name="action" value="set_frame">
    <div class="frame-grid">
      <?php foreach ($frames as $key => $meta): ?>
        <label class="frame-card <?= $active === $key ? 'is-active' : '' ?>">
          <input type="radio" name="frame" value="<?= h($key) ?>" <?= $active === $key ? 'checked' : '' ?>>
          <?php $thumb = frame_thumb_url($key); ?>
          <?php if ($thumb !== ''): ?><img class="frame-thumb" src="<?= h($thumb) ?>" alt="" loading="lazy"><?php endif; ?>
          <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; ?>
          <a class="frame-preview-link" href="<?= h(url('/?preview_frame=' . rawurlencode($key))) ?>" target="_blank" rel="noopener" onclick="event.stopPropagation();">トップページビュー ↗</a>
        </label>
      <?php endforeach; ?>
    </div>
    <button class="adm-btn primary" type="submit">このフレームに切り替える</button>
  </form>
  <?php if (!$frameFew): ?>
  </details>
  <?php endif; ?>
</section>

<?php if ($assetDefs): ?>
<!-- フレーム固有の素材 -->
<section class="adm-section">
  <h2 class="adm-h2">このフレーム専用の素材</h2>
  <p class="adm-note">「<?= h($frames[$active]['name'] ?? $active) ?>」でだけ使う画像です。別のフレームに切り替えると使われません（消えるわけではなく、同じフレームに戻ればまた表示されます）。<br><span style="font-size:.84rem;"><?= h(cms_upload_formats_note()) ?></span></p>
  <form method="post" enctype="multipart/form-data" class="adm-form adm-narrow">
    <input type="hidden" name="_csrf" value="<?= h(csrf_token()) ?>">
    <input type="hidden" name="action" value="save_frame_assets">
    <?php foreach ($assetDefs as $d): $k = $d['key']; $cur = (string)($assetVals[$k] ?? ''); $off = !empty($assetOffs[$k]); ?>
      <div class="fld">
        <label class="fld-label"><?= h($d['label']) ?></label>
        <?php if ($d['hint'] !== ''): ?><p class="adm-note" style="margin:.2rem 0 .5rem;"><?= h($d['hint']) ?></p><?php endif; ?>
        <?php if ($off): ?>
          <p class="adm-note" style="margin:.2rem 0 .5rem;"><b>現在：この素材を使わない設定です</b>（下のチェックを外すと元に戻ります。アップした画像があれば、それも残っています）</p>
        <?php endif; ?>
        <?php if ($cur !== ''): ?>
          <img class="fld-thumb"<?= $off ? ' style="opacity:.35"' : '' ?> src="<?= h(upload_url($cur)) ?>" alt="">
          <label class="fld-check"><input type="checkbox" name="asset_clear_<?= h($k) ?>" value="1"> 差し替えた画像を削除（初期素材に戻す）</label>
        <?php elseif (($d['default'] ?? '') !== ''): ?>
          <img class="fld-thumb" style="opacity:<?= $off ? '.25' : '.7' ?>" src="<?= h(frame_asset_url($active, $d['default'])) ?>" alt="">
          <span class="fld-current">現在：フレーム同梱の初期素材（アップすると差し替わります）</span>
        <?php endif; ?>
        <input type="file" name="asset_<?= h($k) ?>" accept="image/*">
        <label class="fld-check"><input type="checkbox" name="asset_off_<?= h($k) ?>" value="1"<?= $off ? ' checked' : '' ?>> <b>この素材を使わない</b>（何も表示しない）</label>
      </div>
    <?php endforeach; ?>
    <button class="adm-btn primary" type="submit">フレーム素材を保存</button>
  </form>
</section>
<?php endif; ?>

<!-- テーマカラー -->
<section class="adm-section">
  <h2 class="adm-h2">テーマカラー</h2>
  <p class="adm-note">サイト全体の色を変更できます。<strong>変更した色だけが保存され、フレームを切り替えても引き継がれます。</strong></p>
  <form method="post" class="adm-form">
    <input type="hidden" name="_csrf" value="<?= h(csrf_token()) ?>">
    <input type="hidden" name="action" value="save_colors">
    <div class="color-grid">
      <?php foreach (theme_color_fields() as $key => $f):
          $cur = (string)($themeColors[$key] ?? ($themeDefaults[$key] ?? '#cccccc'));
          if (!preg_match('/^#[0-9a-fA-F]{6}$/', $cur)) $cur = '#cccccc';
      ?>
        <div class="color-item">
          <label class="color-name" for="color-hex-<?= h($key) ?>"><?= h($f['label']) ?></label>
          <div class="color-row">
            <?php // 見た目で選ぶピッカー。name は持たせない（送信するのは右のカラーコード欄）＝
                  // JSが動かない環境でも手入力の値がそのまま保存される ?>
            <input type="color" value="<?= h($cur) ?>" data-color-pick aria-label="<?= h($f['label']) ?>をパレットから選ぶ">
            <input type="text" class="color-hex" id="color-hex-<?= h($key) ?>" name="color[<?= h($key) ?>]" value="<?= h($cur) ?>"
                   maxlength="7" spellcheck="false" autocomplete="off" data-color-hex placeholder="#000000">
            <?php if (!empty($f['inverse'])):
                    // その色を背景にしたときの文字色。既定は「自動」＝明るさから判定（従来どおり）。
                    // 背景色・文字色は互いが対なので、この欄は出さない。
                    $invCur = (string)($themeColors[$key . '_inverse'] ?? '');
            ?>
            <span class="color-inv">
              <span class="color-inv-label">文字色</span>
              <select name="inverse[<?= h($key) ?>]">
                <?php foreach (theme_inverse_choices() as $v => $lbl): ?>
                  <option value="<?= h($v) ?>" <?= $invCur === $v ? 'selected' : '' ?>><?= h($lbl) ?></option>
                <?php endforeach; ?>
              </select>
            </span>
            <?php endif; ?>
          </div>
        </div>
      <?php endforeach; ?>
    </div>
  <div class="color-actions">
      <button class="adm-btn primary" type="submit">テーマカラーを保存</button>
    </div>
  </form>
  <form method="post" onsubmit="return confirm('パレットで変更した色と、このフレームのCSS編集を両方リセットして、フレーム本来の状態に戻します。よろしいですか？');">
    <input type="hidden" name="_csrf" value="<?= h(csrf_token()) ?>">
    <input type="hidden" name="action" value="reset_colors">
    <button class="adm-btn ghost sm" type="submit">フレーム本来の状態に戻す</button>
  </form>

  <?php
    // 上級者向け：そのフレームの theme.css を丸ごと編集する。
    // 未編集なら実ファイルの中身をそのまま出す＝何を書けばよいか一目で分かる（変数名もコメントも入っている）。
    // ★配置に注意：この中には保存用の <form> があるので、必ずパレットの <form> の“外”に置くこと。
    //   HTMLは form の入れ子が不正で、入れるとブラウザが内側の form を無視し、保存ボタンが効かなくなる。
    $themeCssSaved = (string)(setting_get('theme_css:' . $active, '') ?? '');
    $themeCssShow  = $themeCssSaved !== '' ? $themeCssSaved : frame_theme_source($active);
    $frameLabel    = (string)($frames[$active]['name'] ?? $active);
  ?>
  <?php // ★open は付けない。管理画面のトグルは「常に閉じたまま」が全体ルール（挙動を一定に保つため） ?>
  <details class="adm-meta theme-css-box">
    <summary class="adm-btn ghost sm adm-meta-toggle">このフレームのCSSを直接編集する（上級者向け）</summary>
    <div class="adm-meta-body">
      <p class="adm-note">いま使っているフレーム「<strong><?= h($frameLabel) ?></strong>」の <code>theme.css</code> です。<strong>書き換えると、このフレームを使っているときだけ反映されます</strong>（他のフレームには影響しません）。枠線の色・フォント・余白など、上のパレットに無い項目もここで変えられます。<br>上のパレットで設定した色は、ここに書いた内容より<strong>優先</strong>されます。<?= $themeCssSaved !== '' ? '「フレーム本来のCSSに戻す」で、いつでも元のファイルの内容に戻せます。' : '' ?></p>
      <p class="adm-note">※<strong>ここで保存すると、以後はこの内容が使われます。</strong>サーバー上の <code>theme.css</code> をFTP等で直接書き換えても反映されません（保存した内容が優先されるため）。ファイル側の変更を取り込みたいときは、いったん下の「このCSSの編集を取り消す」を押してから開き直してください。<br>※まだ一度も保存していない場合は、<strong>開くたびにファイルの最新の内容が読み込まれます</strong>。<br>※色もCSSもまとめて最初の状態に戻したいときは、上の「<strong>フレーム本来の状態に戻す</strong>」を押してください。</p>
      <form method="post" class="adm-form">
        <input type="hidden" name="_csrf" value="<?= h(csrf_token()) ?>">
        <input type="hidden" name="action" value="save_theme_css">
        <textarea name="theme_css" class="theme-css-area" rows="22" spellcheck="false"><?= h($themeCssShow) ?></textarea>
        <div class="color-actions">
          <button class="adm-btn primary" type="submit">このフレームのCSSを保存</button>
        </div>
      </form>
      <?php if ($themeCssSaved !== ''): ?>
      <form method="post" onsubmit="return confirm('このCSSの編集内容を削除して、フレーム本来のファイルの内容に戻します。（上のパレットで変更した色は残ります）よろしいですか？');">
        <input type="hidden" name="_csrf" value="<?= h(csrf_token()) ?>">
        <input type="hidden" name="action" value="reset_theme_css">
        <button class="adm-btn ghost sm" type="submit">このCSSの編集を取り消す</button>
      </form>
      <?php endif; ?>
    </div>
  </details>
</section>

<!-- メニューの切り替え幅（ブレイクポイント） -->
<?php if (!$bpLock): /* frame.json の menu_breakpoint_lock が true のフレームは、切り替え幅を変えられないよう丸ごと非表示 */ ?>
<section class="adm-section">
  <h2 class="adm-h2">メニューの切り替え幅</h2>
  <p class="adm-note">画面の横幅がこの数値より狭くなると、メニューが「ハンバーガー（≡）の開閉式」に切り替わります。タブレットでも横並びメニューを見せたい時は大きめ、早めに開閉式にしたい時は小さめにします。通常は「フレーム標準」のままでOKです。</p>
  <form method="post" class="adm-form adm-narrow">
    <input type="hidden" name="_csrf" value="<?= h(csrf_token()) ?>">
    <input type="hidden" name="action" value="save_menu">
    <div class="fld">
      <label class="fld-label">切り替わる横幅</label>
      <select name="menu_breakpoint">
        <option value="" <?= $menuBp === '' ? 'selected' : '' ?>>フレーム標準（<?= $frameBp ?>px）</option>
        <?php foreach (['700','800','900','1000','1100','1200','9999'] as $opt): ?>
          <option value="<?= $opt ?>" <?= $menuBp === $opt ? 'selected' : '' ?>><?= $opt === '9999' ? '9999px（常にハンバーガー）' : $opt . 'px' ?><?= ((int)$opt === $frameBp) ? '（このフレームの標準）' : '' ?></option>
        <?php endforeach; ?>
      </select>
    </div>
    <button class="adm-btn primary" type="submit">メニューの切り替え幅を保存</button>
  </form>
</section>
<?php endif; ?>

<?php admin_footer(); ?>
