<?php
// list_dir.php
// 必要: $pathInfo, lib.php

$rel    = $pathInfo['rel'];
$abs    = $pathInfo['full'];
$items  = array_values(array_filter(@scandir($abs) ?: [], fn($f)=>$f!=='.' && $f!=='..'));

// 分類
$dirs   = [];
$imgFiles = [];
$otherFiles = [];
foreach ($items as $it) {
    $fp = $abs . '/' . $it;
    if (is_dir($fp)) {
        $dirs[] = $it;
    } elseif (is_file($fp)) {
        if (is_image_ext($fp)) $imgFiles[] = $it;
        else $otherFiles[] = $it;
    }
}
// 自然順
natsort($dirs);        $dirs        = array_values($dirs);
natsort($imgFiles);    $imgFiles    = array_values($imgFiles);
natsort($otherFiles);  $otherFiles  = array_values($otherFiles);

// ページネーション（画像が大量でも安全）
$perPage = 10;
$total   = count($imgFiles);
$page    = max(1, (int)($_GET['p'] ?? 1));
$pages   = max(1, (int)ceil($total / $perPage));
if ($page > $pages) $page = $pages;

$offset  = ($page - 1) * $perPage;
$imgSlice = array_slice($imgFiles, $offset, $perPage);

// パンくず
$base = base_url() ?: '/';
$dirDisp = ($rel === '') ? $base.'/' : $base.'/'.$rel.'/';

function pager_link(int $to): string {
    $qs = $_GET;
    $qs['p'] = $to;
    return u($GLOBALS['rel'], $qs); // rel はディレクトリなので u(rel) でOK
}

?>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Index of <?=h($dirDisp)?></title>
<style>
:root{--bg:#0f1115;--fg:#e8eaf0;--muted:#98a2b3;--card:#171a20;--line:#242a33;--accent:#4b8cff}
*{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:#151922;position:sticky;top:0;z-index:10}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--fg)}
.spacer{flex:1}
.wrap{max-width:1200px;margin:18px auto;padding:0 18px}
.section{margin:18px 0}
h2{font-size:14px;color:var(--muted);margin:0 0 10px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,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}
.meta{padding:8px 10px;border-top:1px solid #1f2530;display:flex;justify-content:space-between;gap:8px}
.meta .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta .size{color:var(--muted);white-space:nowrap}
.pager{display:flex;gap:8px;justify-content:center;margin:16px 0 8px}
.pager a,.pill{padding:6px 10px;border:1px solid #2a3240;border-radius:999px;color:var(--fg);text-decoration:none;background:#12161d}
.pager a:hover{border-color:#3a4558}
.pill{color:#9aa3b2}
.folder{display:flex;align-items:center;gap:10px;padding:10px}
.folder .icon{width:24px;height:18px;border:1px solid #2a3240;border-radius:4px;background:#12161d}
.file{display:flex;align-items:center;gap:10px;padding:10px}
.file .dot{width:8px;height:8px;border-radius:50%;background:#3a4558}
.bar{display:flex;gap:8px;align-items:center;color:var(--muted)}
.bar a{color:inherit}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}
</style>
</head>
<body>
<header>
  <div class="crumbs">
    <a href="<?= h($base ?: '/') ?>">/</a>
    <?php
    $parts = ($rel === '' ? [] : explode('/', $rel));
    $acc = '';
    foreach ($parts as $p){
        $acc .= ($acc===''?'': '/') . $p;
        echo ' / <a href="'.h(u($acc)).'">'.h($p).'</a>';
    }
    ?>
  </div>
  <div class="spacer"></div>
  <div class="bar">
    <span><?= count($dirs) ?> フォルダ</span>
    <span>・</span>
    <span><?= $total ?> 画像</span>
    <?php if(count($otherFiles)>0): ?>
      <span>・</span><span><?= count($otherFiles) ?> ファイル</span>
    <?php endif; ?>
  </div>
</header>

<div class="wrap">

  <?php if($rel!==''): ?>
    <div class="section">
      <a class="pill" href="<?= h(u(ltrim(dirname($rel),'/'))) ?>">../ 親へ</a>
    </div>
  <?php endif; ?>

  <?php if(!empty($dirs)): ?>
    <div class="section">
      <h2>フォルダ</h2>
      <div class="grid">
        <?php foreach($dirs as $d): $p = ($rel===''?'':$rel.'/').$d; ?>
          <div class="card">
            <a href="<?= h(u($p)) ?>" class="folder">
              <span class="icon"></span>
              <span class="name"><?= h($d) ?></span>
            </a>
          </div>
        <?php endforeach; ?>
      </div>
    </div>
  <?php endif; ?>

  <div class="section">
    <h2>画像 <?= $total ? '（'.number_format($total).'件）' : '' ?></h2>

    <?php if($total === 0): ?>
      <p style="color:#98a2b3">このフォルダには画像がありません。</p>
    <?php else: ?>

      <?php if($pages > 1): ?>
        <div class="pager">
          <?php if($page > 1): ?><a href="<?= h(pager_link($page-1)) ?>">&#8249; 前へ</a><?php endif; ?>
          <span class="pill"><?= $page ?> / <?= $pages ?></span>
          <?php if($page < $pages): ?><a href="<?= h(pager_link($page+1)) ?>">次へ &#8250;</a><?php endif; ?>
        </div>
      <?php endif; ?>

      <div class="grid" id="grid-images">
        <?php
        $dirRel = ltrim($rel, '/');
        foreach ($imgSlice as $f):
          $r = ($dirRel === '' ? '' : $dirRel.'/') . $f;   // rel パス
          $full = $abs . '/' . $f;
          $sz = @filesize($full);
          $szText = $sz!==false ? file_size_human($sz) : '-';
        ?>
          <div class="card">
            <a href="<?= h(u($r)) ?>" title="<?= h($f) ?>">
              <div class="thumb">
                <img src="<?= h(u_raw($r)) ?>" loading="lazy" alt="<?= h($f) ?>">
              </div>
              <div class="meta">
                <span class="name"><?= h($f) ?></span>
                <span class="size"><?= h($szText) ?></span>
              </div>
            </a>
          </div>
        <?php endforeach; ?>
      </div>

      <?php if($pages > 1): ?>
        <div class="pager">
          <?php if($page > 1): ?><a href="<?= h(pager_link($page-1)) ?>">&#8249; 前へ</a><?php endif; ?>
          <span class="pill"><?= $page ?> / <?= $pages ?></span>
          <?php if($page < $pages): ?><a href="<?= h(pager_link($page+1)) ?>">次へ &#8250;</a><?php endif; ?>
        </div>
      <?php endif; ?>

    <?php endif; ?>
  </div>

  <?php if(!empty($otherFiles)): ?>
    <hr>
    <div class="section">
      <h2>非画像ファイル</h2>
      <div class="grid">
        <?php
        $dirRel = ltrim($rel, '/');
        foreach($otherFiles as $f):
          $r = ($dirRel === '' ? '' : $dirRel.'/') . $f;
          $fp = $abs.'/'.$f;
          $sz = @filesize($fp);
          $szText = $sz!==false ? file_size_human($sz) : '-';
        ?>
          <div class="card">
            <a class="file" href="<?= h(u($r)) ?>">
              <span class="dot"></span>
              <span class="name" style="flex:1"><?= h($f) ?></span>
              <span class="size"><?= h($szText) ?></span>
            </a>
          </div>
        <?php endforeach; ?>
      </div>
    </div>
  <?php endif; ?>

</div>
</body>
</html>
