falah-mobile/src/app/learn/[courseSlug]/[moduleId]/page.tsx

import { prisma } from "@/lib/prisma";
import Link from "next/link";
import { notFound } from "next/navigation";

interface Props {
  params: Promise<{ courseSlug: string; moduleId: string }>;
}

export default async function ModulePage({ params }: Props) {
  const { courseSlug, moduleId } = await params;

  const moduleData = await prisma.module.findFirst({
    where: {
      id: moduleId,
      course: { slug: courseSlug },
    },
    include: {
      course: true,
    },
  });

  if (!moduleData) return notFound();

  const quiz = moduleData.quizData ? JSON.parse(moduleData.quizData) : null;

  return (
    <main className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <div className="max-w-3xl mx-auto px-4 py-8">
        {/* Breadcrumb */}
        <div className="flex items-center gap-2 text-sm text-gray-500 mb-6">
          <Link href="/learn" className="hover:text-emerald-600">
            Learn
          </Link>
          <span>/</span>
          <span>{moduleData.course.title}</span>
          <span>/</span>
          <span className="text-gray-900 dark:text-white font-medium">
            {moduleData.title}
          </span>
        </div>

        {/* Header */}
        <div className="mb-8">
          <span className="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-1 rounded">
            Module {moduleData.order}
          </span>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mt-2">
            {moduleData.title}
          </h1>
          <p className="text-gray-600 dark:text-gray-400 mt-1">
            {moduleData.description}
          </p>
        </div>

        {/* Content */}
        <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
          <div
            className="prose dark:prose-invert max-w-none"
            dangerouslySetInnerHTML={{ __html: renderMarkdown(moduleData.content) }}
          />
        </div>

        {/* Quiz */}
        {quiz && quiz.length > 0 && (
          <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
            <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
              Quick Check
            </h2>
            <div className="space-y-4">
              {quiz.map((q: any, i: number) => (
                <div key={i} className="border-b border-gray-100 dark:border-gray-700 last:border-0 pb-4 last:pb-0">
                  <p className="font-medium text-gray-900 dark:text-white mb-2">
                    {i + 1}. {q.question}
                  </p>
                  <div className="space-y-1">
                    {q.options.map((opt: string, j: number) => (
                      <label
                        key={j}
                        className="flex items-center gap-2 p-2 rounded hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
                      >
                        <input
                          type="radio"
                          name={`q-${i}`}
                          className="text-emerald-600"
                        />
                        <span className="text-sm text-gray-700 dark:text-gray-300">
                          {opt}
                        </span>
                      </label>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Navigation */}
        <div className="flex items-center justify-between mt-8">
          <Link
            href="/learn"
            className="text-sm text-emerald-600 hover:text-emerald-700 font-medium"
          >
            ← All Courses
          </Link>
        </div>
      </div>
    </main>
  );
}

// Simple markdown renderer (production should use a proper library)
function renderMarkdown(md: string): string {
  return md
    .replace(/## 🎯 Key Concept/g, '<h2 class="text-xl font-bold text-gray-900 dark:text-white mt-6 mb-3">🎯 Key Concept</h2>')
    .replace(/## 📖 Details/g, '<h2 class="text-xl font-bold text-gray-900 dark:text-white mt-6 mb-3">📖 Details</h2>')
    .replace(/## 🤔 Reflection/g, '<h2 class="text-xl font-bold text-gray-900 dark:text-white mt-6 mb-3">🤔 Reflection</h2>')
    .replace(/## ⚡ Action Step/g, '<h2 class="text-xl font-bold text-gray-900 dark:text-white mt-6 mb-3">⚡ Action Step</h2>')
    .replace(/## /g, '<h2 class="text-xl font-bold text-gray-900 dark:text-white mt-6 mb-3">')
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\n\n/g, '</p><p class="mb-4 text-gray-700 dark:text-gray-300">')
    .replace(/\n/g, '<br>')
    .replace(/^/, '<p class="mb-4 text-gray-700 dark:text-gray-300">')
    .replace(/$/, '</p>');
}