---
import { Image } from 'astro:assets';
import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import MomentComments from '../MomentComments.astro';
import ViewMeta from '../geek/ViewMeta.astro';
import { t } from '../../i18n/ui';
import { renderRich } from '../../lib/site-content';
import type { Locale } from '../../lib/locale';

// /en/ 侧由 T4 薄页传 locale='en'；zh 路由无人传参，默认 zh 零回归
interface Props {
  locale?: Locale;
}
const { locale = 'zh' } = Astro.props;

const moments = (await getCollection('moments')).sort(
  (a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime(),
);

// 富文本预渲染（Phase 5h T2）：text 走与页面文案同一条管线（markdown → 内容净化 →
// class 白名单 → 链接卡片），因此瞬间支持 **加粗**、<span class="c-blue font-kai">、列表与换行。
// 预渲染成 map 再进模板：renderRich 是 async，模板里不能 await。
// 纯文本老数据零回归：无 markdown 的文本会得到单个 <p>，与旧的 {text} 直出视觉等价。
const richText = new Map<string, string>();
for (const m of moments) {
  if (!m.data.text) continue;
  richText.set(m.id, await renderRich(m.data.text));
}
const iso = (d: Date) => d.toISOString();
---

<BaseLayout title={`${t('moments_title', locale)} · wait4x`}>
  <h1 class="page-title">{t('moments_title', locale)}</h1>
  <p class="page-note">{t('moments_note', locale)}</p>
  <!-- 整页计数（Phase 5h T4）：这是本页唯一的计数点（page 模式）；
       每条瞬间卡片底部的徽标是 readonly，读者开评论不会虚增浏览数 -->
  <ViewMeta class="mom-page-meta" pageKey={locale === 'en' ? '/en/moments/' : '/moments/'} {locale} variant="chip" />
  <ol class="tl">
    {moments.map((m) => (
      <li class="tl-item">
        <time class="tl-date" datetime={iso(m.data.pubDate)}>
          {iso(m.data.pubDate).slice(0, 10)}
        </time>
        <div class="mom-card">
          {m.data.image && (
            <figure
              class:list={[
                'mom-fig',
                (m.data.image.width ?? 0) < (m.data.image.height ?? 0) && 'vt',
              ]}
            >
              <Image
                src={m.data.image}
                alt={m.data.text ?? m.data.tags.join(' ')}
                widths={[480, 840]}
                sizes="(min-width: 760px) 420px, calc(100vw - 140px)"
              />
            </figure>
          )}
          {m.data.text && <div class="mom-text" set:html={richText.get(m.id) ?? ''} />}
          {m.data.tags.length > 0 && (
            <p class="mom-tags">
              {m.data.tags.map((tag) => <code class="tag">{`#${tag}`}</code>)}
            </p>
          )}
          <MomentComments slug={m.id} locale={locale} />
        </div>
      </li>
    ))}
  </ol>

  <!-- 安装引导（disclosure 小条）：仅浏览器明确可装且未安装时现形，克制不打扰 -->
  <div class="install-cta" id="install-cta" hidden>
    <span>{locale === 'en' ? 'Add to Home Screen — moments work offline' : '装到主屏，离线也能刷瞬间'}</span>
    <button type="button" id="install-btn" class="install-btn">
      {locale === 'en' ? 'Install' : '安装'}
    </button>
  </div>
</BaseLayout>

<script>
  // 时间线渐显：html[data-mom-anim] 由 JS 前置标记——无 JS / reduced-motion 时
  // 标记缺席，CSS 初始隐藏规则整体不生效（渐进降级，元素永远可见）
  let io: IntersectionObserver | null = null;
  const armAnim = () => {
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    if (!('IntersectionObserver' in window)) return;
    document.documentElement.dataset.momAnim = 'on';
    io?.disconnect();
    io = new IntersectionObserver(
      (entries) => {
        for (const e of entries) {
          if (e.isIntersecting) {
            e.target.classList.add('in-view');
            io?.unobserve(e.target);
          }
        }
      },
      { rootMargin: '0px 0px -8% 0px' },
    );
    document.querySelectorAll('.tl-item:not(.in-view)').forEach((el) => io?.observe(el));
  };

  document.addEventListener('astro:page-load', () => {
    armAnim();
    refreshInstallCta();
  });
  armAnim();

  // —— PWA 安装引导：beforeinstallprompt 早在页面加载初期触发，
  //     故模块级立即绑定存事件，page-load 只负责刷新 UI 显隐 ——
  let deferredPrompt: Event & { prompt?: () => Promise<void>; userChoice?: Promise<{ outcome: string }> } | null = null;
  document.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    deferredPrompt = e as typeof deferredPrompt;
    refreshInstallCta();
  });
  document.addEventListener('appinstalled', () => {
    deferredPrompt = null;
    refreshInstallCta();
  });
  const isInstalled = () =>
    matchMedia('(display-mode: standalone)').matches ||
    (navigator as Navigator & { standalone?: boolean }).standalone === true;
  function refreshInstallCta() {
    const cta = document.getElementById('install-cta');
    if (!cta) return;
    cta.hidden = !(deferredPrompt && !isInstalled());
  }
  document.addEventListener('click', (e) => {
    if ((e.target as HTMLElement)?.id !== 'install-btn') return;
    if (!deferredPrompt) return;
    void (async () => {
      try {
        await deferredPrompt?.prompt?.();
        const choice = await deferredPrompt?.userChoice;
        if (choice?.outcome === 'accepted') {
          deferredPrompt = null;
          refreshInstallCta();
        }
      } catch { /* 用户关闭安装框：保留事件，小条仍在 */ }
    })();
  });
  refreshInstallCta();
</script>

<style>
  .page-title {
    font-size: var(--text-h1);
    line-height: var(--leading-heading);
    color: var(--ink-1);
    margin-top: var(--space-5);
    text-wrap: balance;
  }
  .page-note {
    font-size: 13px;
    color: var(--ink-4);
    margin-block: var(--space-1) var(--space-4);
  }
  .tl {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
  }
  /* 时间线骨架：左 mono 日期 + 竖线 + --accent 节点 + 右侧内容卡 */
  .tl-item {
    /* 日期轨宽度集中一处：10 字符 mono 日期（2026-04-29）在 12.5px 下约 75px，
       原来复用 var(--space-5)=40px 导致在「-」处折成两行（视觉终审 P1） */
    --tl-rail: 5.4rem;
    position: relative;
    margin: 0 0 var(--space-4) calc(var(--tl-rail) + var(--space-4));
    padding-left: var(--space-4);
    border-left: 1px solid var(--line);
  }
  .tl-item:last-child { margin-bottom: 0; }
  .tl-item::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--bg);
  }
  .tl-date {
    position: absolute;
    left: calc(-1 * (var(--tl-rail) + var(--space-4)));
    top: 4px;
    width: var(--tl-rail);
    white-space: nowrap;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
  }
  .mom-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-soft);
  }
  .mom-card > p { font-size: 15px; color: var(--ink-2); }
  /* 富文本正文（T2）：首尾 margin 归零，避免卡片被 <p> 的默认外边距撑开；
     段间只留半档间距，列表缩进对齐正文基线。基调保持 15px / ink-2。 */
  .mom-text {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.7;
  }
  .mom-text :global(> :first-child) { margin-top: 0; }
  .mom-text :global(> :last-child) { margin-bottom: 0; }
  .mom-text :global(p) { margin: 0 0 var(--space-1); }
  .mom-text :global(ul),
  .mom-text :global(ol) {
    margin: 0 0 var(--space-1);
    padding-left: 1.35em;
  }
  .mom-text :global(li) { margin: 0; }
  .mom-text :global(li + li) { margin-top: 2px; }
  .mom-text :global(blockquote) {
    margin: var(--space-1) 0;
    padding-left: var(--space-2);
    border-left: 2px solid var(--line);
    color: var(--ink-3);
  }
  .mom-text :global(code) {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: var(--bg);
    border-radius: 4px;
    padding: 1px 5px;
  }
  .mom-text :global(a) {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }
  .mom-fig {
    border-radius: 8px;
    overflow: hidden;
    margin: 0 0 var(--space-2);
    max-width: 420px;
  }
  .mom-fig.vt { max-width: 260px; }
  .mom-fig :global(img) { width: 100%; height: auto; }
  .mom-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
  }
  .tag {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    background: var(--bg);
    border-radius: 5px;
    padding: 1px 7px;
    white-space: nowrap;
  }
  /* 窄屏：日期卡到卡片上方，竖线左移收窄 */
  @media (max-width: 760px) {
    .tl-item { margin-left: var(--space-3); }
    .tl-date {
      position: static;
      display: block;
      width: auto;
      text-align: left;
      margin-bottom: var(--space-1);
    }
  }
  @media (max-width: 560px) {
    .mom-card { padding: var(--space-2) var(--space-3); }
    .mom-fig { max-width: 100%; }
  }
  .install-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding: var(--space-3);
    border: 1px dashed var(--line);
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink-3);
  }
  .install-btn {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-2);
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease);
  }
  .install-btn:hover { border-color: var(--accent); }
  .mom-page-meta { margin: 0 0 var(--space-4); }
  /* 初始隐藏仅在 JS 标记存在时生效：宁轻勿闹——透明度+8px 上移，进入视口一次性点亮 */
  [data-mom-anim] .tl-item {
    opacity: 0;
    translate: 0 8px;
    transition: opacity 0.45s var(--ease), translate 0.45s var(--ease);
  }
  [data-mom-anim] .tl-item.in-view {
    opacity: 1;
    translate: 0 0;
  }
</style>