// Category detail page. Lists all questions in the category and shows
// a search box that filters within this category only.

import Link from 'next/link';
import { questionService } from '@/lib/services/question.service';
import { Button } from '@/components/ui/Button';
import { QuestionCard } from '@/components/features/QuestionCard';
import { EmptyState } from '@/components/ui/EmptyState';
import { CategorySearchBar } from './CategorySearchBar';

export const dynamic = 'force-dynamic';

export default async function CategoryDetailPage({
  params,
  searchParams,
}: {
  params: { slug: string };
  searchParams: { q?: string };
}) {
  const { category, questions } = await questionService.listByCategorySlug(params.slug);
  const term = searchParams.q?.trim();

  // If a search term is present, filter on the server side. We could
  // also call the search service with a categoryId filter, but for an
  // already-loaded list this is simpler and avoids an extra query.
  const filtered = term
    ? questions.filter((q) =>
        [q.title, q.productName].some((field) => field.toLowerCase().includes(term.toLowerCase()))
      )
    : questions;

  return (
    <div className="mx-auto max-w-5xl space-y-6">
      <header className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <Link href="/categories" className="text-xs text-gray-500 hover:text-brand-700">
            ← All categories
          </Link>
          <h1 className="mt-1 text-xl font-semibold text-gray-900">{category.name}</h1>
          <p className="mt-1 text-sm text-gray-500">
            {questions.length} {questions.length === 1 ? 'question' : 'questions'} in this category
          </p>
        </div>
        <Link href={`/ask-question?category=${category.id}`}>
          <Button>Ask a question</Button>
        </Link>
      </header>

      <CategorySearchBar slug={category.slug} initial={term ?? ''} />

      {filtered.length === 0 ? (
        <EmptyState
          title={term ? 'No matching questions in this category' : 'No questions yet'}
          description={term ? 'Try a different keyword.' : 'Be the first to ask one.'}
          action={
            !term ? (
              <Link href={`/ask-question?category=${category.id}`}>
                <Button>Ask a question</Button>
              </Link>
            ) : undefined
          }
        />
      ) : (
        <div className="space-y-3">
          {filtered.map((q) => <QuestionCard key={q.id} question={q as any} />)}
        </div>
      )}
    </div>
  );
}