codetutor/frontend/src/app/questions/[slug]/page.tsx

import { getQuestion } from "@/lib/api";
import { Badge } from "@/components/ui/badge";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { CodeBlock } from "@/components/ui/code-block";
import { getDifficultyColor, capitalize } from "@/lib/utils";
import Link from "next/link";
import { notFound } from "next/navigation";

export default async function QuestionDetailPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;

  let question;
  try {
    question = await getQuestion(slug);
  } catch {
    notFound();
  }

  return (
    <div className="max-w-4xl mx-auto space-y-8">
      <div>
        <div className="flex items-start justify-between gap-4 mb-4">
          <h1 className="text-3xl font-bold">{question.title}</h1>
          <Badge className={getDifficultyColor(question.difficulty)}>
            {capitalize(question.difficulty)}
          </Badge>
        </div>

        <div className="flex flex-wrap gap-2 mb-4">
          {question.categories.map((cat) => (
            <Link key={cat.id} href={`/questions?category=${cat.slug}`}>
              <Badge variant="outline">{cat.name}</Badge>
            </Link>
          ))}
          {question.patterns.map((pat) => (
            <Link key={pat.id} href={`/patterns/${pat.slug}`}>
              <Badge>{pat.name}</Badge>
            </Link>
          ))}
        </div>

        {question.leetcode_url && (
          <a
            href={question.leetcode_url}
            target="_blank"
            rel="noopener noreferrer"
            className="text-[var(--primary)] hover:underline text-sm"
          >
            View on LeetCode
          </a>
        )}
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Problem</CardTitle>
        </CardHeader>
        <CardContent className="prose dark:prose-invert max-w-none">
          <div className="whitespace-pre-wrap">{question.description}</div>
        </CardContent>
      </Card>

      {question.constraints && (
        <Card>
          <CardHeader>
            <CardTitle>Constraints</CardTitle>
          </CardHeader>
          <CardContent>
            <pre className="text-sm whitespace-pre-wrap">
              {question.constraints}
            </pre>
          </CardContent>
        </Card>
      )}

      {question.examples && question.examples.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Examples</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {question.examples.map((example, i) => (
              <div
                key={i}
                className="p-4 rounded bg-[var(--secondary)] space-y-2"
              >
                <div>
                  <span className="font-medium">Input: </span>
                  <code>{example.input}</code>
                </div>
                <div>
                  <span className="font-medium">Output: </span>
                  <code>{example.output}</code>
                </div>
                {example.explanation && (
                  <div className="text-sm text-[var(--muted-foreground)]">
                    {example.explanation}
                  </div>
                )}
              </div>
            ))}
          </CardContent>
        </Card>
      )}

      {question.explanation && (
        <>
          <Card>
            <CardHeader>
              <CardTitle>Approach</CardTitle>
            </CardHeader>
            <CardContent className="whitespace-pre-wrap">
              {question.explanation.approach}
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Intuition</CardTitle>
            </CardHeader>
            <CardContent className="whitespace-pre-wrap">
              {question.explanation.intuition}
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Complexity Analysis</CardTitle>
            </CardHeader>
            <CardContent className="space-y-2">
              <div>
                <span className="font-medium">Time: </span>
                {question.explanation.time_complexity}
              </div>
              <div>
                <span className="font-medium">Space: </span>
                {question.explanation.space_complexity}
              </div>
              {question.explanation.complexity_explanation && (
                <div className="text-sm text-[var(--muted-foreground)] mt-2 whitespace-pre-wrap">
                  {question.explanation.complexity_explanation}
                </div>
              )}
            </CardContent>
          </Card>

          {question.explanation.common_pitfalls &&
            question.explanation.common_pitfalls.length > 0 && (
              <Card>
                <CardHeader>
                  <CardTitle>Common Pitfalls</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  {question.explanation.common_pitfalls.map((pitfall, i) => (
                    <div key={i} className="p-4 rounded bg-[var(--secondary)]">
                      <h4 className="font-medium mb-2">{pitfall.title}</h4>
                      <p className="text-sm whitespace-pre-wrap">
                        {pitfall.description}
                      </p>
                      {pitfall.wrong_approach && (
                        <div className="mt-2 text-sm">
                          <span className="text-red-500">Wrong: </span>
                          <code>{pitfall.wrong_approach}</code>
                        </div>
                      )}
                      {pitfall.correct_approach && (
                        <div className="mt-1 text-sm">
                          <span className="text-green-500">Correct: </span>
                          <code>{pitfall.correct_approach}</code>
                        </div>
                      )}
                    </div>
                  ))}
                </CardContent>
              </Card>
            )}

          {question.explanation.key_takeaways &&
            question.explanation.key_takeaways.length > 0 && (
              <Card>
                <CardHeader>
                  <CardTitle>Key Takeaways</CardTitle>
                </CardHeader>
                <CardContent>
                  <ul className="list-disc list-inside space-y-1">
                    {question.explanation.key_takeaways.map((takeaway, i) => (
                      <li key={i}>{takeaway}</li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            )}
        </>
      )}

      {question.solutions.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Solutions</CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            {question.solutions.map((solution) => (
              <div key={solution.id}>
                <div className="flex items-center gap-2 mb-2">
                  <h4 className="font-medium">{solution.approach_name}</h4>
                  {solution.is_optimal && (
                    <Badge className="bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
                      Optimal
                    </Badge>
                  )}
                </div>
                {solution.explanation && (
                  <p className="text-sm text-[var(--muted-foreground)] mb-3">
                    {solution.explanation}
                  </p>
                )}
                <CodeBlock code={solution.code} language={solution.language} />
              </div>
            ))}
          </CardContent>
        </Card>
      )}
    </div>
  );
}