---
export const prerender = false;

import BaseLayout from '../layouts/BaseLayout.astro';
import { getApprovedEntries } from '../lib/guestbook';

const pageParam = parseInt(Astro.url.searchParams.get('page') ?? '1', 10);
const page = isNaN(pageParam) || pageParam < 1 ? 1 : pageParam;

const { entries, total, hasMore } = getApprovedEntries(page);

const submitted = Astro.url.searchParams.get('submitted') === 'true';
const errorParam = Astro.url.searchParams.get('error');

const errorMessages: Record<string, string> = {
  rate_limit: 'You\'ve submitted too many messages recently. Please wait a while before trying again.',
  invalid: 'Your submission could not be processed. Please check all fields and try again.',
};
const errorMsg = errorParam ? (errorMessages[errorParam] ?? decodeURIComponent(errorParam)) : null;
---

<BaseLayout
  title="Guestbook — Hidden Den Cafe"
  description="Leave a message in the guestbook for Hidden Den Cafe."
>
  <div class="container fade-in">
    <header class="page-header">
      <h1>~/guestbook</h1>
      <p class="subtitle">
        Leave a note. Say hello. This is a quiet corner of the internet — be kind.
      </p>
    </header>

    <!-- Submission form -->
    <section class="card form-section" aria-label="Leave a message">
      <details class="compose" open={submitted || Boolean(errorMsg)}>
        <summary class="compose-toggle">
          <span class="compose-toggle-text">Leave a message</span>
        </summary>

        <div class="compose-body">
          <p class="form-note">
            Messages are reviewed before being published. Please don't include personal or
            sensitive information — this is a public guestbook.
          </p>

          {submitted && (
            <div class="alert alert-success" role="alert">
              Thank you for your message! It will appear here once reviewed.
            </div>
          )}

          {errorMsg && (
            <div class="alert alert-error" role="alert">
              {errorMsg}
            </div>
          )}

          <form
            method="post"
            action="/api/guestbook/submit"
            class="guestbook-form"
            novalidate
          >
            <!-- Honeypot field: hidden from real users, filled by bots -->
            <div class="hp-field" aria-hidden="true">
              <label for="address">Address</label>
              <input
                type="text"
                id="address"
                name="address"
                tabindex="-1"
                autocomplete="off"
              />
            </div>

            <div class="field">
              <label for="display_name">
                Name or nickname <span class="required" aria-label="required">*</span>
              </label>
              <input
                type="text"
                id="display_name"
                name="display_name"
                maxlength="60"
                required
                autocomplete="nickname"
                placeholder="your name or alias"
              />
            </div>

            <div class="field">
              <label for="message">
                Message <span class="required" aria-label="required">*</span>
              </label>
              <textarea
                id="message"
                name="message"
                maxlength="1000"
                required
                rows="4"
                placeholder="say hello, share a thought, leave a trail..."
              ></textarea>
              <span class="field-hint">Plain text only. Max 1000 characters.</span>
            </div>

            <div class="field">
              <label for="website">
                Website <span class="optional">(optional)</span>
              </label>
              <input
                type="url"
                id="website"
                name="website"
                maxlength="200"
                autocomplete="url"
                placeholder="https://your-site.example"
              />
              <span class="field-hint">Only https:// links. Leave blank if you don't have one.</span>
            </div>

            <div class="field consent-field">
              <label class="consent-label">
                <input
                  type="checkbox"
                  name="consent"
                  value="yes"
                  required
                />
                <span>
                  I understand this message may be published publicly on this guestbook.
                  <span class="required" aria-label="required">*</span>
                </span>
              </label>
            </div>

            <div class="form-actions">
              <button type="submit" class="btn-submit">send message</button>
            </div>
          </form>
        </div>
      </details>
    </section>

    <!-- Approved entries -->
    <section class="entries-section" aria-labelledby="entries-heading">
      <h2 id="entries-heading">
        Messages
        {total > 0 && <span class="entry-count">({total})</span>}
      </h2>

      {entries.length === 0 ? (
        <div class="empty-state card">
          <p>No messages yet. Be the first to leave a note!</p>
        </div>
      ) : (
        <div class="entries-list">
          {entries.map((entry) => (
            <article class="entry card">
              <header class="entry-header">
                <span class="entry-name">
                  {entry.website ? (
                    <a
                      href={entry.website}
                      rel="noopener noreferrer nofollow"
                      target="_blank"
                    >
                      {entry.display_name}
                    </a>
                  ) : (
                    entry.display_name
                  )}
                </span>
                <time
                  class="entry-date"
                  datetime={entry.created_at}
                  title={entry.created_at}
                >
                  {new Date(entry.created_at).toLocaleDateString('en-US', {
                    year: 'numeric',
                    month: 'short',
                    day: 'numeric',
                  })}
                </time>
              </header>
              <p class="entry-message">{entry.message}</p>
            </article>
          ))}
        </div>
      )}

      <!-- Pagination -->
      {(page > 1 || hasMore) && (
        <nav class="pagination" aria-label="Guestbook pagination">
          {page > 1 && (
            <a href={`/guestbook?page=${page - 1}`} class="page-link">
              ← newer
            </a>
          )}
          <span class="page-info">page {page}</span>
          {hasMore && (
            <a href={`/guestbook?page=${page + 1}`} class="page-link">
              older →
            </a>
          )}
        </nav>
      )}
    </section>
  </div>
</BaseLayout>

<style>
  .container {
    max-width: 700px;
    margin: 0 auto;
    padding: calc(4rem + var(--space-lg)) var(--space-md) var(--space-xl);
  }

  .page-header {
    margin-bottom: var(--space-lg);
  }

  h1 {
    font-size: 1.6rem;
    color: var(--color-accent-bright);
    margin-bottom: var(--space-xs);
  }

  h2 {
    font-size: 1.1rem;
    color: var(--color-accent-bright);
    margin-bottom: var(--space-sm);
  }

  .subtitle {
    color: var(--color-text-dim);
    font-size: 0.9rem;
  }

  /* Form */
  .form-section {
    background: var(--color-bg-light);
    border: 1px solid var(--color-surface);
    border-radius: 8px;
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
  }

  .form-note {
    color: var(--color-text-dim);
    font-size: 0.85rem;
    margin-bottom: var(--space-md);
  }

  .compose {
    width: 100%;
  }

  .compose-toggle {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-accent-bright);
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: var(--space-sm);
    user-select: none;
  }

  .compose-toggle::-webkit-details-marker {
    display: none;
  }

  .compose-toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
  }

  .compose-toggle::before {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid var(--color-accent);
    border-radius: 4px;
    color: var(--color-accent);
    font-weight: normal;
    line-height: 1;
  }

  .compose[open] .compose-toggle::before {
    content: '−';
  }

  .compose-body {
    margin-top: var(--space-sm);
  }

  .guestbook-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  /* Honeypot: visually hidden but accessible-compatible */
  .hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  label {
    font-size: 0.88rem;
    color: var(--color-text-dim);
  }

  .required {
    color: var(--color-warm);
    margin-left: 2px;
  }

  .optional {
    color: var(--color-surface);
    font-size: 0.82rem;
  }

  input[type="text"],
  input[type="url"],
  textarea {
    background: var(--color-bg);
    border: 1px solid var(--color-surface);
    border-radius: 4px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 8px 10px;
    width: 100%;
    transition: border-color 0.15s;
  }

  input:focus,
  textarea:focus {
    outline: none;
    border-color: var(--color-accent);
  }

  textarea {
    resize: vertical;
    min-height: 100px;
  }

  .field-hint {
    font-size: 0.78rem;
    color: var(--color-text-dim);
  }

  .consent-field {
    margin-top: var(--space-xs);
  }

  .consent-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--color-text-dim);
  }

  .consent-label input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--color-accent);
    width: auto;
  }

  .form-actions {
    margin-top: var(--space-xs);
  }

  .btn-submit {
    background: var(--color-accent);
    color: var(--color-bg);
    border: none;
    border-radius: 4px;
    padding: 8px 20px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    cursor: pointer;
    transition: opacity 0.15s;
  }

  .btn-submit:hover {
    opacity: 0.85;
  }

  .btn-submit:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  /* Alerts */
  .alert {
    padding: var(--space-sm);
    border-radius: 4px;
    margin-bottom: var(--space-sm);
    border: 1px solid;
    font-size: 0.88rem;
  }

  .alert-success {
    border-color: var(--color-green);
    color: var(--color-green);
    background: color-mix(in srgb, var(--color-green) 10%, transparent);
  }

  .alert-error {
    border-color: var(--color-warm);
    color: var(--color-warm);
    background: color-mix(in srgb, var(--color-warm) 10%, transparent);
  }

  /* Entries */
  .entries-section {
    margin-top: var(--space-lg);
  }

  .entry-count {
    color: var(--color-text-dim);
    font-size: 0.9rem;
    font-weight: normal;
  }

  .entries-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .entry {
    background: var(--color-bg-light);
    border: 1px solid var(--color-surface);
    border-radius: 6px;
    padding: var(--space-sm) var(--space-md);
  }

  .entry-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: 6px;
    flex-wrap: wrap;
  }

  .entry-name {
    color: var(--color-accent-bright);
    font-weight: bold;
    font-size: 0.92rem;
  }

  .entry-name a {
    color: var(--color-accent-bright);
  }

  .entry-date {
    color: var(--color-text-dim);
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .entry-message {
    color: var(--color-text);
    font-size: 0.9rem;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
  }

  .empty-state {
    background: var(--color-bg-light);
    border: 1px solid var(--color-surface);
    border-radius: 6px;
    padding: var(--space-md);
    color: var(--color-text-dim);
    font-size: 0.9rem;
    text-align: center;
  }

  /* Pagination */
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    font-size: 0.88rem;
  }

  .page-link {
    color: var(--color-accent);
  }

  .page-info {
    color: var(--color-text-dim);
  }

  @media (max-width: 600px) {
    .container {
      padding-top: calc(3.5rem + var(--space-lg));
    }
  }
</style>
