import type { Metadata } from 'next';
import Link from 'next/link';
import { t } from '@/i18n';
import { routes } from '@/lib/site';
import { STORIES, storyChartCount, storyIndicators } from '@/lib/stories';
import { topicById } from '@/lib/topics';
import { PageHeader } from '@/components/explore/page-header';
import { JsonLd } from '@/components/platform/json-ld';
import { jsonLd } from '@/lib/seo';

export const revalidate = 3600;

export const metadata: Metadata = {
  title: t('stories.title'),
  description: t('stories.description'),
  alternates: { canonical: routes.stories() },
  openGraph: { title: `${t('stories.title')} — ${t('site.name')}`, description: t('stories.description'), url: routes.stories(), type: 'website' },
};

/** /stories — editorial index: one rule per story, standfirst, topics, chart count. */
export default function StoriesPage() {
  return (
    <>
      <JsonLd data={jsonLd.breadcrumbs([{ name: t('site.name'), path: '/' }, { name: t('stories.title'), path: routes.stories() }])} />
      <PageHeader title={t('stories.title')} lede={t('stories.sub')} />
      <ol className="divide-y divide-rule border-y border-rule">
        {STORIES.map((s, i) => {
          const topics = s.topics.map((tp) => topicById(tp)?.short ?? tp);
          return (
            <li key={s.slug}>
              <Link href={routes.story(s.slug)} className="group grid gap-x-8 gap-y-2 py-6 md:grid-cols-[4rem_minmax(0,1fr)_14rem] md:py-8">
                <span className="tnum display text-2xl text-ink-3 md:text-3xl">{String(i + 1).padStart(2, '0')}</span>
                <span className="min-w-0">
                  <span className="display block text-2xl leading-tight text-ink group-hover:text-accent md:text-3xl">{s.title}</span>
                  <span className="mt-2 block max-w-prose text-base text-ink-2">{s.standfirst}</span>
                </span>
                <span className="tnum flex flex-wrap items-start gap-x-3 gap-y-1 text-xs text-ink-3 md:flex-col md:items-end md:text-right">
                  <span>{topics.join(' · ')}</span>
                  <span>{t('stories.charts', { n: storyChartCount(s) })}</span>
                  <span>{t('stories.minutes', { n: Math.max(2, Math.round(storyChartCount(s) * 0.8)) })}</span>
                  <span className="hidden md:block">{storyIndicators(s).length === 1 ? t('stories.indicatorsOne') : t('stories.indicatorsN', { n: storyIndicators(s).length })}</span>
                </span>
              </Link>
            </li>
          );
        })}
      </ol>
      <p className="mt-6 max-w-prose text-sm leading-relaxed text-ink-3">{t('stories.methodText')}</p>
    </>
  );
}