---
// 4コマのページ（日本語・英語版で共通）。下に関連する記録（Studio と同じく HRI の新しい6件＋Load more）
import Base from '../layouts/Base.astro';
import RecordCard from './RecordCard.astro';
import LoadMore from './LoadMore.astro';
import MangaSwipe from './MangaSwipe.astro';
import { ymd } from '../lib/format';
import { media, mediaHtml } from '../lib/media';
import { seriesCards, allManga, allEnglish } from '../lib/records';
import { textOf, abs, AUTHOR, PUBLISHER, SITE, SITE_NAME } from '../lib/seo';
interface Props { m: any; path: string }
const { m, path } = Astro.props;
const related = await seriesCards('HRI');
// 英語版は本文が英語なので、説明文も英語の本文から作る（Studio から移した説明文は日本語のままのため）
const isEn = path.startsWith('/english-4-koma');
const description = (isEn ? textOf(m.body, 150) : m.description) || textOf(m.body, 120);
const pairList = isEn ? allManga : allEnglish;
const alternates = pairList.some((x) => x.slug === m.slug)
  ? [{ lang: isEn ? 'ja' : 'en', path: `${isEn ? '/manga' : '/english-4-koma'}/${m.slug}` }] : [];
// 前の話・次の話（話の番号の順。記事の「前の記事・次の記事」と同じカード。2026-10-31）
const epNo = (x: any) => Number((x.slug.match(/^ep(\d+)$/) || [])[1]);
const seq = (isEn ? allEnglish : allManga).filter((x: any) => !Number.isNaN(epNo(x))).sort((a: any, b: any) => epNo(a) - epNo(b));
const at = seq.findIndex((x: any) => x.slug === m.slug);
const prevEp = at > 0 ? seq[at - 1] : null;
const nextEp = at >= 0 && at < seq.length - 1 ? seq[at + 1] : null;
const base = isEn ? '/english-4-koma' : '/manga';
const epLabel = (x: any) => isEn ? `Episode ${epNo(x)}` : `第${epNo(x)}話`;
const title = isEn ? `${m.title} | 4-Koma Manga | ${SITE_NAME}` : `${m.title} | 4コママンガ | ${SITE_NAME}`;
const jsonLd = {
  '@context': 'https://schema.org', '@type': 'Article',
  headline: m.title, description, url: SITE + path, mainEntityOfPage: SITE + path,
  inLanguage: isEn ? 'en' : 'ja', datePublished: m.published, dateModified: m.published,
  image: (m.panels ? m.panels.map((p: string) => abs(media(p))) : [abs(media(m.comic)), abs(media(m.cover))]).filter(Boolean),
  genre: isEn ? '4-panel comic' : '4コママンガ', author: AUTHOR, publisher: PUBLISHER,
};
---
<Base title={title} description={description} ogImage={media(m.cover) || undefined} path={path}
  lang={isEn ? 'en' : 'ja'} ogType="article" published={m.published} alternates={alternates} jsonLd={jsonLd}>
  <article class="manga">
    <div class="mmeta"><span class="mlabel">{m.label}</span><span class="tag">{m.character}</span><span class="date">{ymd(m.published)}</span></div>
    {m.panels ? <MangaSwipe panels={m.panels} alts={m.panel_alts} title={m.title} /> : m.cover && <img class="mcover" src={media(m.cover)} alt={m.cover_alt || `${m.title}（${m.label} 表紙）`} width="1080" height="1350" />}
    {!m.panels && m.comic && <img class="mcomic" src={media(m.comic)} alt={m.comic_alt || `${m.title}（${m.label} 本編）`} width="1080" height="1350" loading="lazy" />}
    <h1 class="mtitle">{m.title}</h1>
    <div class="mbody" set:html={mediaHtml(m.body)} />
    {(prevEp || nextEp) && (
      <nav class="pager" aria-label={isEn ? 'Previous and next episodes' : '前後の話'}>
        {prevEp ? <a class="pg pg-prev" href={`${base}/${prevEp.slug}`}><span class="pg-k">{isEn ? '← Previous' : '← 前の話'}　{epLabel(prevEp)}</span><span class="pg-t">{prevEp.title}</span></a> : <span />}
        {nextEp ? <a class="pg pg-next" href={`${base}/${nextEp.slug}`}><span class="pg-k">{isEn ? 'Next' : '次の話'}　{epLabel(nextEp)} →</span><span class="pg-t">{nextEp.title}</span></a> : <span />}
      </nav>
    )}
  </article>
  <section class="related">
    <div class="panel">
      <h2 class="sec-h">マンガの背景にある記録 | Related Records</h2>
      <LoadMore limit={6} total={related.length}>{related.map((c) => <RecordCard item={c} />)}</LoadMore>
    </div>
  </section>
</Base>
<style>
  .manga { width: 620px; max-width: calc(100% - 48px); margin: 0 auto; padding: 104px 0 80px; }
  .mmeta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
  .mlabel { font: 400 28px/28px var(--sans); }
  .mcover, .mcomic { width: 100%; height: auto; }
  .mtitle { margin: 24px 0 12px; font: 600 20px/30px var(--sans); }
  .mbody :global(p) { font: 400 16px/2 'Noto Sans JP', sans-serif; margin: 0 0 16px; color: #333; }
  /* 前の話・次の話：記事ページ（record/[slug].astro）の .pager と同じ形 */
  .pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 64px 0 0; padding-top: 32px; border-top: 1px solid #ddd; }
  .pg { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 8px; background: #fff; box-shadow: 0 8px 16px rgba(0,0,0,.08); }
  .pg:hover .pg-t { text-decoration: underline; }
  .pg-next .pg-k { text-align: right; }
  .pg-k { font: 400 12px/18px var(--sans); color: var(--ink-3); }
  .pg-t { font: 600 14px/1.6 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
  @media (max-width: 599px) { .pager { grid-template-columns: 1fr; } .pg-next .pg-k { text-align: left; } }
</style>
