import Link from 'next/link';
import { notFound } from 'next/navigation';
import {
  getAllPoems,
  getPoemBySlug,
  getSectionById,
  getAdjacentPoems,
} from '@/data/poems';

interface PageProps {
  params: Promise<{ slug: string }>;
}

export async function generateStaticParams() {
  return getAllPoems().map((poem) => ({ slug: poem.slug }));
}

export async function generateMetadata({ params }: PageProps) {
  const { slug } = await params;
  const poem = getPoemBySlug(slug);

  if (!poem) {
    return { title: 'Poem Not Found' };
  }

  return {
    title: poem.title,
    description: `"${poem.title}" by Cynthia Trenshaw${poem.publication ? ` — ${poem.publication}` : ''}`,
  };
}

export default async function PoemPage({ params }: PageProps) {
  const { slug } = await params;
  const poem = getPoemBySlug(slug);

  if (!poem) {
    notFound();
  }

  const section = getSectionById(poem.sectionId);
  const { prev, next } = getAdjacentPoems(slug);

  return (
    <div className="min-h-screen bg-white">
      {/* Section breadcrumb */}
      <div className="mx-auto max-w-3xl px-6 pt-8">
        <Link
          href="/#contents"
          className="inline-flex items-center gap-2 text-xs uppercase tracking-[0.15em] text-stone-400 hover:text-stone-600 transition-colors"
        >
          {section && (
            <>
              Section {section.number} &middot; {section.title}
            </>
          )}
        </Link>
      </div>

      {/* Poem header */}
      <header className="mx-auto max-w-3xl px-6 pt-8 pb-8 text-center border-b border-stone-100">
        <h1 className="font-serif text-4xl md:text-5xl text-stone-800">
          {poem.title}
        </h1>
        {poem.dedication && (
          <p className="mt-4 text-stone-500 italic">{poem.dedication}</p>
        )}
        {poem.publication && (
          <p className="mt-2 text-sm text-stone-400">{poem.publication}</p>
        )}
        <p className="mt-4 text-stone-600">by Cynthia Trenshaw</p>
      </header>

      {/* Poem content */}
      <article className="mx-auto max-w-3xl px-6 py-16">
        <div className="poem-content font-serif text-lg md:text-xl text-stone-700 leading-relaxed whitespace-pre-line">
          {poem.content}
        </div>
      </article>

      {/* Sequential navigation */}
      <footer className="mx-auto max-w-3xl px-6 pb-16">
        <div className="poem-nav">
          {prev ? (
            <Link href={`/poems/${prev.slug}`}>
              <span className="nav-label">Previous poem</span>
              <span className="nav-title">{prev.title}</span>
            </Link>
          ) : (
            <div />
          )}
          {next ? (
            <Link href={`/poems/${next.slug}`} className="nav-next">
              <span className="nav-label">Next poem</span>
              <span className="nav-title">{next.title}</span>
            </Link>
          ) : (
            <Link href="/essays/when-a-friend-dies" className="nav-next">
              <span className="nav-label">Afterword</span>
              <span className="nav-title">When A Friend Dies</span>
            </Link>
          )}
        </div>
        <div className="mt-8 text-center">
          <Link
            href="/#contents"
            className="text-sm text-stone-500 hover:text-stone-800 transition-colors underline underline-offset-4 hover:no-underline"
          >
            Return to Contents
          </Link>
        </div>
      </footer>
    </div>
  );
}
