import { notFound } from "next/navigation";
import Link from "next/link";
import { loadThoughts } from "@/utils/mdxLoader";
import { formatReadingTime } from "@/utils/readingTime";

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

import fs from "fs";
import { Metadata } from "next";
import Markdown from "react-markdown";

export async function generateStaticParams() {
  const thoughtsDirectory = process.cwd() + "/src/content/thoughts";

  try {
    const filenames = fs.readdirSync(thoughtsDirectory);
    return filenames.map((filename: string) => ({
      slug: filename.replace(/\.mdx$/, ""),
    }));
  } catch {
    return [];
  }
}

export async function generateMetadata({
  params,
}: ThoughtPageProps): Promise<Metadata> {
  const { slug } = await params;
  const thought = await getThoughtBySlug(slug);

  if (!thought) {
    return {
      title: "Thought Not Found",
    };
  }

  return {
    title: `${thought.title} | Mainasara Tsowa`,
    description: thought.excerpt,
    openGraph: {
      title: `${thought.title} | Mainasara Tsowa`,
      description: thought.excerpt,
      url: `https://mainasara.dev/thoughts/${slug}`,
    },
    twitter: {
      title: `${thought.title} | Mainasara Tsowa`,
      description: thought.excerpt,
    },
  };
}

async function getThoughtBySlug(slug: string) {
  const thoughts = await loadThoughts();
  return thoughts.find(
    (thought) => thought.id === slug.replace(/[^a-zA-Z0-9]/g, "-"),
  );
}

export default async function ThoughtPage({ params }: ThoughtPageProps) {
  const { slug } = await params;
  const thought = await getThoughtBySlug(slug);

  if (!thought) {
    notFound();
  }

  return (
    <div className="min-h-screen bg-[#FAF8F5] font-mono">
      <div className="max-w-4xl mx-auto px-6 py-12">
        <header className="text-center mb-16">
          <div className="mb-8">
            <div className="w-32 h-32 mx-auto bg-[#3D3D3D] rounded-full flex items-center justify-center border-[3px] border-[#B8C5CE]">
              <div className="text-4xl font-bold text-[#B8C5CE]">🌸</div>
            </div>
          </div>
          <h1 className="text-4xl md:text-5xl font-bold text-[#3D3D3D] mb-4 uppercase tracking-wide">
            Thoughts
          </h1>
          <p className="text-lg text-[#5D5D5D] max-w-2xl mx-auto leading-relaxed font-semibold">
            Reflections on technology and life
          </p>
        </header>

        <nav className="mb-16">
          <div className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-6 shadow-brutal">
            <ul className="flex flex-wrap justify-center gap-4 md:gap-8">
              <li>
                <Link
                  href="/"
                  className="text-[#3D3D3D] font-bold hover:bg-[#CBD6C8] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
                >
                  Home
                </Link>
              </li>
              <li>
                <Link
                  href="/digital-art"
                  className="text-[#3D3D3D] font-bold hover:bg-[#E0C9CC] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
                >
                  Digital Art
                </Link>
              </li>
              <li>
                <Link
                  href="/stories"
                  className="text-[#3D3D3D] font-bold hover:bg-[#F0E8D8] px-4 py-2 transition-colors border-2 border-[#3D3D3D] hover:border-[#5D5D5D] rounded-sm"
                >
                  Stories
                </Link>
              </li>
              <li>
                <Link
                  href="/thoughts"
                  className="border-[#3D3D3D] bg-[#B8C5CE] px-4 py-2 border-2 text-[#3D3D3D] rounded-sm"
                >
                  All Thoughts
                </Link>
              </li>
            </ul>
          </div>
        </nav>

        <main>
          <article className="bg-[#FEFDFB] border-[3px] border-[#3D3D3D] rounded-md p-8 shadow-brutal">
            <div className="mb-8">
              <h1 className="text-3xl md:text-4xl font-bold text-[#3D3D3D] uppercase mb-4">
                {thought.title}
              </h1>

              <div className="flex gap-4 text-sm mb-6">
                <span className="bg-[#B8C5CE] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
                  {thought.category}
                </span>
                <span className="bg-[#B8C5CE] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
                  {formatReadingTime(thought.readTime)} read
                </span>
                <span className="bg-[#E8DCC8] text-[#3D3D3D] px-3 py-1 border-2 border-[#3D3D3D] font-bold rounded-sm">
                  {new Date(thought.createdAt).toLocaleDateString("en-US", {
                    year: "numeric",
                    month: "long",
                    day: "numeric",
                  })}
                </span>
              </div>
            </div>

            <div className="prose prose-lg max-w-none">
              <div className="text-[#5D5D5D] leading-relaxed whitespace-pre-line">
                <Markdown>{thought.content}</Markdown>
              </div>
            </div>
          </article>
        </main>

        <footer className="mt-20 text-center">
          <div className="bg-[#3D3D3D] text-white p-4 font-bold rounded-md">
            <p className="text-sm uppercase">Built with neo-brutalist muted colors</p>
          </div>
        </footer>
      </div>
    </div>
  );
}
