// FAQs are auto-populated when a question gets a best answer marked.
// This page is purely a presentation of those promoted questions.

import Link from 'next/link';
import { faqService } from '@/lib/services/faq.service';
import { EmptyState } from '@/components/ui/EmptyState';

export const dynamic = 'force-dynamic';

export default async function FaqsPage() {
  const faqs = await faqService.list();

  return (
    <div className="mx-auto max-w-4xl space-y-6">
      <header>
        <h1 className="text-xl font-semibold text-gray-900">Frequently Asked Questions</h1>
        <p className="mt-1 text-sm text-gray-500">
          Solved questions promoted from the team knowledge base.
        </p>
      </header>

      {faqs.length === 0 ? (
        <EmptyState
          title="No FAQs yet"
          description="Once questions get marked with a best answer, they show up here automatically."
        />
      ) : (
        <div className="space-y-3">
          {faqs.map((faq) => (
            <Link
              key={faq.id}
              href={`/questions/${faq.question.id}`}
              className="card block p-5 transition hover:border-brand-300 hover:shadow"
            >
              <div className="flex items-start justify-between gap-3">
                <h2 className="text-sm font-semibold text-gray-900">
                  {faq.question.title}
                </h2>
                <span className="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-600">
                  {faq.category.name}
                </span>
              </div>
              {faq.question.bestAnswer ? (
                <p className="mt-2 line-clamp-2 text-sm text-gray-600">
                  {faq.question.bestAnswer.answer}
                </p>
              ) : null}
              <p className="mt-2 text-xs text-gray-500">
                Product: <span className="font-medium text-gray-700">{faq.question.productName}</span>
              </p>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}