<?php

declare(strict_types=1);

require_once dirname(__DIR__) . '/includes/db.php';

function h(string $s): string
{
    return htmlspecialchars($s, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
}

$errors = [];
$flashOk = isset($_GET['ok']) && $_GET['ok'] === '1';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $nickname = trim((string) ($_POST['nickname'] ?? ''));
    $body = trim((string) ($_POST['body'] ?? ''));

    if ($nickname === '' || mb_strlen($nickname) > 64) {
        $errors[] = '昵称需为 1–64 个字符。';
    }
    if ($body === '' || mb_strlen($body) > 2000) {
        $errors[] = '留言内容需为 1–2000 个字符。';
    }

    if ($errors === []) {
        $stmt = db()->prepare(
            'INSERT INTO guestbook_messages (nickname, body) VALUES (:nickname, :body)'
        );
        $stmt->execute(['nickname' => $nickname, 'body' => $body]);
        header('Location: /guestbook/?ok=1', true, 303);
        exit;
    }
}

$page = max(1, (int) ($_GET['page'] ?? 1));
$perPage = 15;
$offset = ($page - 1) * $perPage;

$total = (int) db()->query('SELECT COUNT(*) AS c FROM guestbook_messages')->fetch()['c'];
$totalPages = max(1, (int) ceil($total / $perPage));
if ($page > $totalPages) {
    $page = $totalPages;
    $offset = ($page - 1) * $perPage;
}

$stmt = db()->prepare(
    'SELECT id, nickname, body, created_at FROM guestbook_messages ORDER BY id DESC LIMIT :lim OFFSET :off'
);
$stmt->bindValue(':lim', $perPage, PDO::PARAM_INT);
$stmt->bindValue(':off', $offset, PDO::PARAM_INT);
$stmt->execute();
$rows = $stmt->fetchAll();

?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>留言板 | KAN</title>
  <style>
    :root {
      --bg: #0a0a0a;
      --card: #1a1a1a;
      --text: #f4f4f4;
      --muted: #8a8a8a;
      --accent: #e63946;
      --border: #2a2a2a;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
    }
    .container { width: min(720px, 92vw); margin: 0 auto; }
    .site-header {
      position: sticky;
      top: 0;
      z-index: 40;
      backdrop-filter: blur(8px);
      background: rgba(10, 10, 10, 0.78);
      border-bottom: 1px solid var(--border);
    }
    .nav {
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .brand { font-weight: 700; letter-spacing: 0.06em; font-size: 1.1rem; }
    .brand span { color: var(--accent); }
    .nav a {
      color: var(--text);
      text-decoration: none;
      font-size: 0.95rem;
      opacity: 0.9;
    }
    .nav a:hover { opacity: 1; }
    main { padding: 2.5rem 0 4rem; }
    h1 { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 4vw, 2rem); }
    .lead { margin: 0 0 2rem; color: var(--muted); }
    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 1.1rem;
      margin-bottom: 1rem;
    }
    .msg-meta {
      display: flex;
      justify-content: space-between;
      gap: 0.75rem;
      flex-wrap: wrap;
      color: var(--muted);
      font-size: 0.88rem;
      margin-bottom: 0.5rem;
    }
    .msg-name { color: #ffd9dd; font-weight: 600; }
    .msg-body { white-space: pre-wrap; word-break: break-word; }
    form { display: grid; gap: 0.85rem; }
    label { display: grid; gap: 0.35rem; font-size: 0.9rem; color: #ebebeb; }
    input, textarea {
      border: 1px solid #3a3a3a;
      border-radius: 10px;
      padding: 0.7rem 0.8rem;
      color: var(--text);
      background: #111;
      font: inherit;
    }
    textarea { resize: vertical; min-height: 120px; }
    input:focus, textarea:focus {
      border-color: var(--accent);
      outline: none;
    }
    .btn {
      border: none;
      border-radius: 999px;
      padding: 0.72rem 1.25rem;
      font-weight: 600;
      color: var(--text);
      background: var(--accent);
      cursor: pointer;
      justify-self: start;
    }
    .btn:hover { filter: brightness(1.05); }
    .alert {
      padding: 0.75rem 1rem;
      border-radius: 12px;
      font-size: 0.92rem;
    }
    .alert-err {
      background: rgba(255, 138, 138, 0.12);
      border: 1px solid rgba(255, 138, 138, 0.35);
      color: #ff8a8a;
    }
    .alert-ok {
      background: rgba(125, 255, 179, 0.1);
      border: 1px solid rgba(125, 255, 179, 0.35);
      color: #7dffb3;
    }
    .pager {
      display: flex;
      gap: 0.75rem;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 1.5rem;
      color: var(--muted);
      font-size: 0.9rem;
    }
    .pager a {
      color: var(--text);
      text-decoration: none;
      border: 1px solid #3a3a3a;
      border-radius: 999px;
      padding: 0.35rem 0.85rem;
    }
    .pager a:hover { border-color: var(--accent); }
    .pager span.disabled { opacity: 0.45; pointer-events: none; }
    footer {
      padding: 1.5rem 0 2rem;
      color: var(--muted);
      font-size: 0.9rem;
      text-align: center;
    }
  </style>
</head>
<body>
  <header class="site-header">
    <div class="container nav">
      <a class="brand" href="/">KAN<span>.</span></a>
      <nav>
        <a href="/">返回首页</a>
      </nav>
    </div>
  </header>
  <main>
    <div class="container">
      <h1>留言板</h1>
      <p class="lead">欢迎留下合作意向、反馈或打招呼（简易版，请勿发布隐私信息）。</p>

      <?php if ($flashOk): ?>
        <p class="alert alert-ok" role="status">留言已发布，感谢你的留言。</p>
      <?php endif; ?>

      <?php if ($errors !== []): ?>
        <div class="alert alert-err" role="alert">
          <?php foreach ($errors as $e): ?>
            <div><?= h($e) ?></div>
          <?php endforeach; ?>
        </div>
      <?php endif; ?>

      <section class="card" style="margin-bottom:2rem;">
        <h2 style="margin:0 0 1rem;font-size:1.1rem;">写留言</h2>
        <form method="post" action="/guestbook/">
          <label>
            昵称
            <input type="text" name="nickname" maxlength="64" required
              value="<?= h((string) ($_POST['nickname'] ?? '')) ?>" placeholder="怎么称呼你" />
          </label>
          <label>
            内容
            <textarea name="body" maxlength="2000" required placeholder="想说的话…"><?= h((string) ($_POST['body'] ?? '')) ?></textarea>
          </label>
          <button class="btn" type="submit">发布留言</button>
        </form>
      </section>

      <h2 style="font-size:1.1rem;margin:0 0 1rem;">全部留言</h2>
      <?php if ($rows === []): ?>
        <p class="lead" style="margin:0;">还没有留言，来做第一个吧。</p>
      <?php else: ?>
        <?php foreach ($rows as $r): ?>
          <article class="card">
            <div class="msg-meta">
              <span class="msg-name"><?= h((string) $r['nickname']) ?></span>
              <time datetime="<?= h((string) $r['created_at']) ?>"><?= h((string) $r['created_at']) ?></time>
            </div>
            <div class="msg-body"><?= h((string) $r['body']) ?></div>
          </article>
        <?php endforeach; ?>
      <?php endif; ?>

      <?php if ($totalPages > 1): ?>
        <nav class="pager" aria-label="分页">
          <?php if ($page > 1): ?>
            <a href="?page=<?= $page - 1 ?>">上一页</a>
          <?php else: ?>
            <span class="disabled">上一页</span>
          <?php endif; ?>
          <span>第 <?= (int) $page ?> / <?= (int) $totalPages ?> 页（共 <?= (int) $total ?> 条）</span>
          <?php if ($page < $totalPages): ?>
            <a href="?page=<?= $page + 1 ?>">下一页</a>
          <?php else: ?>
            <span class="disabled">下一页</span>
          <?php endif; ?>
        </nav>
      <?php endif; ?>
    </div>
  </main>
  <footer>© 2026 KAN · 留言板</footer>
</body>
</html>
