export const dynamic = "force-dynamic";

import Link from "next/link";
import { notFound } from "next/navigation";
import { getLetter, getAdjacentLetters } from "@/lib/letters";
import { PageHeader } from "@/components/page-header";
import { Card, CardContent } from "@/components/ui/card";
import { buttonVariants } from "@/components/ui/button";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

export default async function LetterPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;

  const letter = await getLetter(slug);
  if (!letter) notFound();

  const { prev, next } = await getAdjacentLetters(slug, letter.year);

  const backHref = letter.year ? `/letters/year/${letter.year}` : "/letters";
  const backLabel = letter.year ? `Letters from ${letter.year}` : "Letters";

  return (
    <div className="min-h-screen bg-background">
      <PageHeader sticky>
        <Link
          href={backHref}
          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
        >
          &larr; {backLabel}
        </Link>
        <h1 className="mt-3 text-2xl font-bold text-foreground">
          Letter to {letter.recipientDisplay}
        </h1>
        <p className="mt-1 text-sm text-muted-foreground">
          {letter.date}
          {letter.location ? ` · ${letter.location}` : ""}
        </p>
      </PageHeader>

      <main className="max-w-3xl mx-auto px-6 py-8 space-y-8">
        {/* Top nav */}
        <LetterNav prev={prev} next={next} />

        {/* Letter content */}
        <Card>
          <CardContent className="py-8 px-6 sm:px-8">
            <div className="space-y-4">
              {letter.paragraphs.map((paragraph, i) => (
                <div
                  key={i}
                  className="text-base text-foreground leading-relaxed"
                  dangerouslySetInnerHTML={{ __html: paragraph }}
                />
              ))}
            </div>
          </CardContent>
        </Card>

        {/* Bottom nav */}
        <LetterNav prev={prev} next={next} />
      </main>
    </div>
  );
}

function LetterNav({
  prev,
  next,
}: {
  prev: { slug: string; recipientDisplay: string } | null;
  next: { slug: string; recipientDisplay: string } | null;
}) {
  return (
    <div className="flex items-center justify-between gap-3">
      {prev ? (
        <Link
          href={`/letters/${prev.slug}`}
          className={cn(
            buttonVariants({ variant: "outline", size: "sm" }),
            "gap-1.5",
          )}
        >
          <ChevronLeft className="size-4" />
          <span className="hidden sm:inline truncate max-w-[180px]">
            {prev.recipientDisplay}
          </span>
          <span className="sm:hidden">Previous</span>
        </Link>
      ) : (
        <div />
      )}

      {next ? (
        <Link
          href={`/letters/${next.slug}`}
          className={cn(
            buttonVariants({ variant: "outline", size: "sm" }),
            "gap-1.5",
          )}
        >
          <span className="hidden sm:inline truncate max-w-[180px]">
            {next.recipientDisplay}
          </span>
          <span className="sm:hidden">Next</span>
          <ChevronRight className="size-4" />
        </Link>
      ) : (
        <div />
      )}
    </div>
  );
}