import prisma from "@/lib/prisma";
import Link from "next/link";
import type { Metadata } from "next";

export const revalidate = 3600;

type Props = {
  params: Promise<{ category: string }>;
};

function categoryLabel(value: string) {
  return value.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { category } = await params;
  const label = categoryLabel(category);

  return {
    title: `${label} - Help Center | AdultWorld`,
    description: `Browse help articles in the ${label} category.`,
  };
}

export default async function HelpCategoryPage({ params }: Props) {
  const { category } = await params;
  const label = categoryLabel(category);

  const articles = await prisma.helpArticle.findMany({
    where: {
      published: true,
      category,
    },
    orderBy: [{ sort_order: "asc" }, { title: "asc" }],
    select: {
      id: true,
      title: true,
      slug: true,
      excerpt: true,
      views: true,
      updated_at: true,
    },
  });

  return (
    <div className="max-w-4xl mx-auto space-y-6">
      {/* Breadcrumbs */}
      <nav className="text-sm text-text-muted">
        <Link href="/help" className="hover:text-primary transition-colors">
          Help Center
        </Link>
        <span className="mx-2">/</span>
        <span className="text-text">{label}</span>
      </nav>

      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold">{label}</h1>
        <p className="text-text-muted mt-1">
          {articles.length} {articles.length === 1 ? "article" : "articles"}
        </p>
      </div>

      {/* Articles */}
      {articles.length === 0 ? (
        <div className="bg-surface rounded-lg p-12 text-center">
          <p className="text-text-muted">No articles in this category yet.</p>
          <Link
            href="/help"
            className="inline-block mt-4 text-primary hover:text-primary-dark text-sm transition-colors"
          >
            Back to Help Center
          </Link>
        </div>
      ) : (
        <div className="space-y-3">
          {articles.map((article) => (
            <Link
              key={article.id}
              href={`/help/${article.slug}`}
              className="block bg-surface rounded-lg p-5 hover:ring-1 hover:ring-primary transition-all group"
            >
              <div className="flex items-start justify-between gap-4">
                <div className="min-w-0 flex-1">
                  <h3 className="font-semibold group-hover:text-primary transition-colors">
                    {article.title}
                  </h3>
                  {article.excerpt && (
                    <p className="text-text-muted text-sm mt-1 line-clamp-2">
                      {article.excerpt}
                    </p>
                  )}
                </div>
                <svg
                  className="w-5 h-5 text-text-muted shrink-0 mt-0.5 group-hover:text-primary transition-colors"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </div>
            </Link>
          ))}
        </div>
      )}

      {/* Back link */}
      <Link
        href="/help"
        className="inline-flex items-center gap-2 text-sm text-text-muted hover:text-primary transition-colors"
      >
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
        </svg>
        Back to Help Center
      </Link>
    </div>
  );
}