<?php
// view_image.php
// 必要：$pathInfo, lib.php 読み込み済み（index.phpから）

if (php_sapi_name() !== 'cli') ini_set('display_errors','0');

$relPath = $pathInfo['rel'];
$size    = @getimagesize($pathInfo['full']);
$dimText = $size ? ($size[0].' x '.$size[1]) : '-';
$mime    = @mime_content_type($pathInfo['full']) ?: 'image/*';
$bytes   = @filesize($pathInfo['full']) ?: 0;

// 同ディレクトリの兄弟ファイル（全量/自然順）と前後
[$siblings, $prevName, $nextName] = siblings($pathInfo['full']);
$totalAll = count($siblings);

// 1ページ件数（既定200）
$ppParam = isset($_GET['pp']) ? max(1, (int)$_GET['pp']) : 20;

// ディレクトリ表示用
$dirRel = ltrim(dirname($relPath), '/');

// ページ初期値：?p 明示があれば優先、なければ「この画像が属するページ」を算出
$curName = basename($relPath);
$curIdx  = array_search($curName, $siblings, true);
$initialPage = isset($_GET['p'])
    ? max(1, (int)$_GET['p'])
    : (($curIdx !== false) ? (int)floor($curIdx / $ppParam) + 1 : 1);

// URL 基本
$scheme = $_SERVER["HTTP_X_FORWARDED_PROTO"] ?? ($_SERVER["REQUEST_SCHEME"] ?? 'https');
$host   = $_SERVER['HTTP_HOST'] ?? '';
$originBase = $scheme.'://'.$host.(base_url()===''?'':base_url()).'/';
?>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?=h(basename($relPath))?> &#8211; Image Viewer</title>
<style>
:root{--bg:#0f1115;--fg:#e8eaf0;--muted:#98a2b3;--card:#171a20;--accent:#4b8cff;--line:#242a33}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
header{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:10}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--fg)}
.meta{margin-left:auto;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #2a3240;border-radius:10px;background:#12161d;color:var(--fg);text-decoration:none}
.btn:hover{border-color:#3a4558}
.wrap{max-width:1200px;margin:18px auto;padding:0 18px}
.viewer{background:#0b0e13;border:1px solid #1f2530;border-radius:14px;padding:14px;display:flex;justify-content:center;align-items:center;min-height:60vh}
.viewer img{max-width:100%;height:auto;display:block}
h2{font-size:14px;color:var(--muted);margin:16px 0 10px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.card{background:#0b0e13;border:1px solid #1f2530;border-radius:12px;overflow:hidden}
.card a{color:inherit;text-decoration:none;display:block}
.thumb{aspect-ratio:1/1;background:#0b0e13;display:flex;align-items:center;justify-content:center;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.meta2{padding:8px 10px;border-top:1px solid #1f2530;display:flex;justify-content:space-between;gap:8px}
.meta2 .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta2 .size{color:var(--muted);white-space:nowrap}
.pager{display:flex;gap:8px;justify-content:center;margin:14px 0}
.pager button,.pill{padding:6px 10px;border:1px solid #2a3240;border-radius:999px;color:var(--fg);background:#12161d}
.pager button:hover{border-color:#3a4558;cursor:pointer}
.pill{color:#9aa3b2}
.muted{color:#98a2b3}
.spacer{flex:1}
footer{color:#98a2b3;text-align:center;padding:16px 0 28px}
code{background:#12161d;border:1px solid #2a3240;padding:2px 6px;border-radius:6px}
#grid{scroll-margin-top:84px}
</style>
<script>
function copyLink(q=''){
  navigator.clipboard.writeText('<?=h($originBase)?>'+'<?=h($relPath)?>'+q).then(()=>alert('コピーしました'));
}
</script>
</head>
<body>
<header>
  <div class="crumbs">
    <a href="<?= h(base_url() ?: '/') ?>" title="トップ">/</a>
    <?php
    $parts = ($dirRel === '' ? [] : explode('/', $dirRel));
    $acc = '';
    foreach ($parts as $p){
        $acc .= ($acc===''?'': '/') . $p;
        echo ' / <a href="'.h(u($acc)).'">'.h($p).'</a>';
    }
    ?>
    / <strong><?=h(basename($relPath))?></strong>
  </div>
  <div class="spacer"></div>
  <div class="meta">
    <span class="muted"><?=h($mime)?></span> ・
    <span><?=h($dimText)?></span> ・
    <span><?=h(file_size_human($bytes))?></span>
  </div>
  <div class="nav" style="display:flex;gap:8px;margin-left:12px">
    <?php if($prevName):
      $prevRel  = ($dirRel===''?'':$dirRel.'/') . $prevName;
      $qsPrev   = ['sel'=>$prevName,'p'=>$initialPage,'pp'=>$ppParam];
    ?>
      <a class="btn" href="<?= h(u($prevRel, $qsPrev).'#grid') ?>">&#9664;&#65038; 前へ</a>
    <?php endif; ?>
    <?php if($nextName):
      $nextRel  = ($dirRel===''?'':$dirRel.'/') . $nextName;
      $qsNext   = ['sel'=>$nextName,'p'=>$initialPage,'pp'=>$ppParam];
    ?>
      <a class="btn" href="<?= h(u($nextRel, $qsNext).'#grid') ?>">次へ &#9654;&#65038;</a>
    <?php endif; ?>
  </div>
  <div class="nav" style="display:flex;gap:8px;margin-left:12px">
    <a class="btn" href="<?= h(u($relPath, ['raw'=>1])) ?>" target="_blank" rel="noopener">元画像を開く</a>
    <a class="btn" href="<?= h(u($relPath, ['download'=>1])) ?>">ダウンロード</a>
    <a class="btn" href="javascript:void(0)" onclick="copyLink()">URLをコピー</a>
    <a class="btn" href="javascript:void(0)" onclick="copyLink('?raw=1')">直リンクをコピー</a>
  </div>
</header>

<div class="wrap">
  <div class="viewer">
    <img src="<?= h(u($relPath, ['raw'=>1])) ?>" alt="<?=h(basename($relPath))?>">
  </div>

  <h2 id="grid">同じフォルダのファイル（<?= number_format($totalAll) ?>件）</h2>

  <!-- JSで中身を書き換える領域 -->
  <div class="pager" id="pager-top">
    <button type="button" id="btn-prev" disabled>&#8249; 前のページ</button>
    <span class="pill" id="pill-page">- / -</span>
    <button type="button" id="btn-next" disabled>次のページ &#8250;</button>
  </div>

  <div class="grid" id="grid-images" aria-live="polite"></div>

  <div class="pager" id="pager-bottom">
    <button type="button" id="btn-prev-b" disabled>&#8249; 前のページ</button>
    <span class="pill" id="pill-page-b">- / -</span>
    <button type="button" id="btn-next-b" disabled>次のページ &#8250;</button>
  </div>

  <footer>Powered by Router（下部サムネは fetch で動的切替 / 戻る進むでページ番号を保持）</footer>
</div>

<script>
(() => {
  const dirRel  = <?= json_encode($dirRel) ?>;      // この画像のあるフォルダ
  const perPage = <?= (int)$ppParam ?>;            // 1ページ件数
  let page      = <?= (int)$initialPage ?>;        // 現在ページ（初期）
  const gridEl  = document.getElementById('grid-images');

  const btnPrev = document.getElementById('btn-prev');
  const btnNext = document.getElementById('btn-next');
  const pill    = document.getElementById('pill-page');
  const btnPrevB= document.getElementById('btn-prev-b');
  const btnNextB= document.getElementById('btn-next-b');
  const pillB   = document.getElementById('pill-page-b');

  // API URL（index.php?api=siblings）
  function apiUrl(p){
    const u = new URL(location.href);
    u.search = ''; // pathだけにしてからクエリ付与
    u.hash = '';   // ハッシュは付けない
    u.searchParams.set('api','siblings');
    u.searchParams.set('dir', dirRel);
    u.searchParams.set('p', String(p));
    u.searchParams.set('pp', String(perPage));
    return u.toString();
  }

  // ページ番号をURLのクエリに反映（履歴は残す）
  function updateUrlQuery(p){
    const u = new URL(location.href);
    u.searchParams.set('p', String(p));
    u.searchParams.set('pp', String(perPage));
    // sel は表示維持のため消す
    u.searchParams.delete('sel');
    history.pushState({p}, '', u.pathname + u.search + '#grid');
  }

  // グリッド描画
  function renderGrid(data){
    // ページ表示
    pill.textContent  = `${data.page} / ${data.pages}`;
    pillB.textContent = `${data.page} / ${data.pages}`;

    // ボタン活性/非活性
    btnPrev.disabled  = data.page <= 1;
    btnNext.disabled  = data.page >= data.pages;
    btnPrevB.disabled = btnPrev.disabled;
    btnNextB.disabled = btnNext.disabled;

    // アイテム描画
    gridEl.innerHTML = '';
    const frag = document.createDocumentFragment();
    data.items.forEach(it => {
      const card = document.createElement('div');
      card.className = 'card';
      card.setAttribute('data-name', it.name);

      const a = document.createElement('a');
      a.href  = it.viewUrl; // 個別画像UIへ遷移（p/pp/sel保持 & #grid）
      a.title = it.name;

      const thumb = document.createElement('div');
      thumb.className = 'thumb';
      if (it.isImage) {
        const img = document.createElement('img');
        img.loading = 'lazy';
        img.alt = it.name;
        img.src = it.rawUrl; // 生配信
        thumb.appendChild(img);
      } else {
        const div = document.createElement('div');
        div.style.color = '#9aa3b2';
        div.textContent = '（非画像）';
        thumb.appendChild(div);
      }

      const meta = document.createElement('div');
      meta.className = 'meta2';
      const name = document.createElement('span');
      name.className = 'name';
      name.textContent = it.name;
      const size = document.createElement('span');
      size.className = 'size';
      size.textContent = it.sizeText;
      meta.appendChild(name);
      meta.appendChild(size);

      a.appendChild(thumb);
      a.appendChild(meta);
      card.appendChild(a);
      frag.appendChild(card);
    });
    gridEl.appendChild(frag);

    // #grid 付近にスクロール
    document.getElementById('grid').scrollIntoView({block:'start'});
  }

  // ロード処理
  async function loadPage(p, {pushState=true} = {}){
    const res = await fetch(apiUrl(p), {headers:{'Accept':'application/json'}});
    if (!res.ok) throw new Error('failed to fetch siblings');
    const data = await res.json();
    page = data.page;
    renderGrid(data);
    if (pushState) updateUrlQuery(page);
  }

  // ボタン動作
  function goPrev(){ if (!btnPrev.disabled) loadPage(page-1); }
  function goNext(){ if (!btnNext.disabled) loadPage(page+1); }
  btnPrev.addEventListener('click', goPrev);
  btnNext.addEventListener('click', goNext);
  btnPrevB.addEventListener('click', goPrev);
  btnNextB.addEventListener('click', goNext);

  // 初期ロード
  loadPage(page, {pushState:false}).catch(console.error);

  // 戻る/進む対応
  window.addEventListener('popstate', (ev)=>{
    const p = (ev.state && ev.state.p) ? ev.state.p : (new URL(location.href)).searchParams.get('p');
    const np = Math.max(1, parseInt(p || '1', 10));
    loadPage(np, {pushState:false}).catch(console.error);
  });
})();
</script>
</body>
</html>
