// Question detail page. Server-renders the question, all answers, and
// the answer composer. The interactive bits (mark best answer button,
// submit answer form) are client components below.

import Link from 'next/link';
import { notFound } from 'next/navigation';
import { questionService } from '@/lib/services/question.service';
import { getCurrentUser } from '@/lib/auth/session';
import { StatusBadge } from '@/components/ui/StatusBadge';
import { AnswerForm } from './AnswerForm';
import { MarkBestAnswerButton } from './MarkBestAnswerButton';

export const dynamic = 'force-dynamic';

export default async function QuestionDetailPage({ params }: { params: { id: string } }) {
  const id = Number(params.id);
  if (!Number.isInteger(id) || id <= 0) notFound();

  const user = await getCurrentUser();
  if (!user) notFound();

  const question = await questionService.getDetail(id);
  const canMarkBest = user.role === 'ADMIN' || user.userId === question.userId;

  return (
    <div className="mx-auto max-w-4xl space-y-6">
      <Link href={`/categories/${question.category.slug}`} className="text-xs text-gray-500 hover:text-brand-700">
        ← {question.category.name}
      </Link>

      <article className="card p-6">
        <div className="flex items-start justify-between gap-3">
          <h1 className="text-xl font-semibold text-gray-900">{question.title}</h1>
          <StatusBadge status={question.status} />
        </div>
        <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-gray-500">
          <span>Product: <span className="font-medium text-gray-700">{question.productName}</span></span>
          <span>By {question.user.name}</span>
          <span>{new Date(question.createdAt).toLocaleString()}</span>
          <span>{question.views} views</span>
        </div>

        <div className="prose prose-sm mt-4 max-w-none whitespace-pre-wrap text-gray-800">
          {question.description}
        </div>

        {question.imageUrl ? (
          <div className="mt-4 overflow-hidden rounded-lg border border-gray-200">
            {/* Using a plain img tag to keep things simple for local uploads */}
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src={question.imageUrl} alt="Attached" className="max-h-96 w-auto" />
          </div>
        ) : null}
      </article>

      <section>
        <h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500">
          {question.answers.length} {question.answers.length === 1 ? 'answer' : 'answers'}
        </h2>

        {question.answers.length === 0 ? (
          <div className="card p-6 text-center text-sm text-gray-500">
            No answers yet. Be the first to help.
          </div>
        ) : (
          <div className="space-y-3">
            {question.answers.map((a) => (
              <div
                key={a.id}
                className={`card p-4 ${a.isBest ? 'border-green-300 bg-green-50/30' : ''}`}
              >
                <div className="flex items-center justify-between">
                  <div className="text-xs text-gray-500">
                    <span className="font-medium text-gray-700">{a.user.name}</span>
                    <span> · {new Date(a.createdAt).toLocaleString()}</span>
                  </div>
                  {a.isBest ? (
                    <span className="rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700">
                      ✓ Best answer
                    </span>
                  ) : canMarkBest && question.status !== 'SOLVED' ? (
                    <MarkBestAnswerButton questionId={question.id} answerId={a.id} />
                  ) : null}
                </div>
                <div className="prose prose-sm mt-2 max-w-none whitespace-pre-wrap text-gray-800">
                  {a.answer}
                </div>
              </div>
            ))}
          </div>
        )}
      </section>

      <section>
        <h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500">
          Your answer
        </h2>
        <AnswerForm questionId={question.id} />
      </section>
    </div>
  );
}