import Link from "next/link";
import { db } from "@/db";
import { exams, examQuestions, examAttempts, questions } from "@/db/schema";
import { eq, and, asc } from "drizzle-orm";
import { ArrowRight, Timer, FileQuestion } from "lucide-react";
import { requireRole } from "@/lib/auth";
import { ExamTaker } from "@/components/exam-taker";
import { fmtJFull, faNum } from "@/lib/jalali";

export const metadata = { title: "شرکت در آزمون" };
export const dynamicParams = true;

export default async function ExamPage({ params }: { params: Promise<{ id: string }> }) {
  const s = await requireRole("student");
  const { id } = await params;
  const examId = Number(id);
  const exam = (await db.select().from(exams).where(eq(exams.id, examId)).limit(1))[0];

  if (!exam || !exam.active) {
    return <Msg text="این آزمون فعال نیست یا وجود ندارد." />;
  }
  const dup = await db.select({ id: examAttempts.id }).from(examAttempts)
    .where(and(eq(examAttempts.examId, examId), eq(examAttempts.studentId, s.id))).limit(1);
  if (dup.length) return <Msg text="شما قبلاً در این آزمون شرکت کرده‌اید." />;

  const now = Date.now();
  const start = exam.startAt.getTime();
  if (now < start) return <Msg text={`زمان شروع آزمون: ${fmtJFull(exam.startAt)}`} />;
  if (now > start + (exam.durationMin + 8 * 60) * 60_000) return <Msg text="مهلت شرکت در این آزمون تمام شده است." />;

  const eqs = await db
    .select({ q: questions })
    .from(examQuestions)
    .innerJoin(questions, eq(examQuestions.questionId, questions.id))
    .where(eq(examQuestions.examId, examId))
    .orderBy(asc(examQuestions.sort));

  if (!eqs.length) return <Msg text="سؤالی برای این آزمون انتخاب نشده است." />;

  return (
    <div className="min-h-screen bg-transparent px-4 py-6">
      <div className="mx-auto mb-5 max-w-3xl">
        <Link href="/student" className="mb-4 inline-flex items-center gap-1.5 text-xs font-bold text-emerald-800/70 hover:text-emerald-900">
          <ArrowRight size={14} /> بازگشت به پنل
        </Link>
        <div className="rounded-2xl border border-emerald-900/10 bg-white p-5 shadow-sm">
          <div className="flex items-center gap-2.5">
            <span className="grid size-11 place-items-center rounded-xl bg-gradient-to-br from-emerald-700 to-emerald-900 text-amber-300"><FileQuestion size={20} /></span>
            <div>
              <h1 className="text-lg font-black text-emerald-950">{exam.title}</h1>
              <p className="flex items-center gap-1.5 text-xs text-emerald-800/65">
                <Timer size={13} /> {faNum(eqs.length)} سؤال — {faNum(exam.durationMin)} دقیقه فرصت — سؤال‌های تشریحی بعداً توسط دبیر تصحیح می‌شوند
              </p>
            </div>
          </div>
        </div>
      </div>
      <ExamTaker examId={exam.id} title={exam.title} durationMin={exam.durationMin}
        questions={eqs.map(({ q }) => ({ id: q.id, type: q.type, text: q.text, options: q.options }))} />
    </div>
  );
}

function Msg({ text }: { text: string }) {
  return (
    <div className="flex min-h-[70vh] items-center justify-center px-4">
      <div className="w-full max-w-md rounded-3xl border border-amber-200 bg-amber-50 p-8 text-center shadow-lg">
        <Timer size={40} className="mx-auto mb-4 text-amber-600" />
        <p className="text-sm font-black leading-7 text-amber-900">{text}</p>
        <Link href="/student" className="mt-5 inline-block rounded-xl bg-emerald-700 px-6 py-2.5 text-xs font-black text-white">بازگشت</Link>
      </div>
    </div>
  );
}