import Link from "next/link";
import { MDXRemote } from "next-mdx-remote/rsc";
import { GameMeta, Chapter } from "@/types";
import ReadingProgress from "./ReadingProgress";

interface Props {
  game: GameMeta;
  chapter: Chapter;
  totalChapters: number;
  prevChapter: string | null;
  nextChapter: string | null;
}

export default function ChapterReader({
  game,
  chapter,
  totalChapters,
  prevChapter,
  nextChapter,
}: Props) {
  return (
    <div className="min-h-screen bg-parchment text-stone-800">
      <ReadingProgress color={game.accentColor} />

      {/* Header */}
      <header className="max-w-4xl mx-auto px-6 lg:px-12 pt-8 pb-4">
        <Link
          href={`/${game.slug}`}
          className="inline-flex items-center text-stone-500 hover:text-stone-700 font-lora text-sm transition-colors"
        >
          <span className="mr-2">&larr;</span> {game.title}
        </Link>
      </header>

      {/* Chapter heading */}
      <div className="max-w-4xl mx-auto px-6 lg:px-12 pt-8 pb-12 text-center">
        <p
          className="font-playfair text-sm md:text-base font-semibold tracking-widest uppercase mb-3"
          style={{ color: game.color }}
        >
          Capitulo {chapter.number} de {totalChapters}
        </p>
        <h1 className="font-playfair text-3xl md:text-4xl lg:text-5xl font-bold text-stone-800 mb-4">
          {chapter.title}
        </h1>
        <div className="flex items-center justify-center gap-4">
          <div className="w-16 h-px bg-stone-300" />
          <div
            className="w-2 h-2 rotate-45"
            style={{ backgroundColor: game.accentColor }}
          />
          <div className="w-16 h-px bg-stone-300" />
        </div>
      </div>

      {/* Chapter content */}
      <article className="max-w-[700px] lg:max-w-[800px] mx-auto px-6 lg:px-12 pb-20 font-lora text-lg lg:text-xl leading-relaxed lg:leading-relaxed text-stone-700 prose prose-stone prose-lg lg:prose-xl prose-headings:font-playfair prose-headings:text-stone-800 prose-p:mb-6 prose-p:indent-8 first:prose-p:indent-0">
        <MDXRemote source={chapter.content} />
      </article>

      {/* Chapter navigation */}
      <nav className="max-w-[700px] lg:max-w-[800px] mx-auto px-6 lg:px-12 pb-16">
        <div className="border-t border-stone-300 pt-8 flex justify-between items-center">
          {prevChapter ? (
            <Link
              href={`/${game.slug}/${prevChapter}`}
              className="font-lora text-sm hover:text-stone-900 transition-colors"
              style={{ color: game.color }}
            >
              &larr; Capitulo anterior
            </Link>
          ) : (
            <span />
          )}
          <Link
            href={`/${game.slug}`}
            className="font-lora text-sm text-stone-400 hover:text-stone-600 transition-colors"
          >
            Indice
          </Link>
          {nextChapter ? (
            <Link
              href={`/${game.slug}/${nextChapter}`}
              className="font-lora text-sm hover:text-stone-900 transition-colors"
              style={{ color: game.color }}
            >
              Siguiente capitulo &rarr;
            </Link>
          ) : (
            <span />
          )}
        </div>
      </nav>
    </div>
  );
}
