import { notFound } from "next/navigation";
import { getAllGuides, getGuideBySlug } from "@/lib/content";
import { DifficultyBadge } from "@/components/ui/DifficultyBadge";
import type { Metadata } from "next";

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

export async function generateStaticParams() {
  const guides = getAllGuides();
  return guides.map((guide) => ({ slug: guide.slug }));
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const guide = await getGuideBySlug(slug);
  if (!guide) return { title: "Guide nicht gefunden" };

  return {
    title: guide.title,
    description: guide.excerpt || `${guide.title} — 3D-Druck Guide auf molzi3d.de`,
  };
}

export default async function GuidePage({ params }: Props) {
  const { slug } = await params;
  const guide = await getGuideBySlug(slug);

  if (!guide) notFound();

  // Verwandte Guides (gleiche Kategorie, ohne aktuellen)
  const allGuides = getAllGuides();
  const related = allGuides
    .filter((g) => g.category === guide.category && g.slug !== guide.slug)
    .slice(0, 3);

  return (
    <article className="p-6 lg:p-8 max-w-3xl">
      {/* Header */}
      <div className="mb-8">
        <div className="flex items-center gap-3 mb-3">
          <DifficultyBadge level={guide.difficulty} />
          <span className="text-sm text-muted-foreground">
            {guide.readingTime}
          </span>
          <span className="text-sm text-muted-foreground">
            {guide.category}
          </span>
        </div>
        <h1 className="text-3xl lg:text-4xl font-bold tracking-tight">
          {guide.title}
        </h1>
        {guide.excerpt && (
          <p className="mt-3 text-lg text-muted-foreground">{guide.excerpt}</p>
        )}
      </div>

      {/* Content */}
      <div
        className="prose"
        dangerouslySetInnerHTML={{ __html: guide.contentHtml }}
      />

      {/* Verwandte Guides */}
      {related.length > 0 && (
        <section className="mt-16 pt-8 border-t border-border">
          <h2 className="text-lg font-semibold mb-4">Verwandte Guides</h2>
          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {related.map((r) => (
              <a
                key={r.slug}
                href={`/guides/${r.slug}`}
                className="block rounded-lg border border-border p-4 hover:border-accent/50 transition-colors"
              >
                <DifficultyBadge level={r.difficulty} />
                <h3 className="font-medium mt-2 text-sm">{r.title}</h3>
              </a>
            ))}
          </div>
        </section>
      )}
    </article>
  );
}
