"use client";

import { useEffect, useRef, useState } from "react";
import { Timer, Send, AlertTriangle, CheckCircle2 } from "lucide-react";
import { submitExam } from "@/lib/actions";
import { faNum } from "@/lib/jalali";

type Q = { id: number; type: string; text: string; options: string[] | null };

export function ExamTaker({ examId, title, durationMin, questions }: {
  examId: number; title: string; durationMin: number; questions: Q[];
}) {
  const [answers, setAnswers] = useState<Record<string, string>>({});
  const [left, setLeft] = useState(durationMin * 60);
  const [done, setDone] = useState<{ score: number | null; correct: number; total: number } | null>(null);
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);
  const submitted = useRef(false);

  const submit = async () => {
    if (submitted.current) return;
    submitted.current = true;
    setBusy(true);
    const res = await submitExam(examId, answers);
    if ("error" in res && res.error) { setErr(res.error); submitted.current = false; }
    else setDone({ score: res.score ?? null, correct: res.correct ?? 0, total: res.total ?? questions.length });
    setBusy(false);
  };

  useEffect(() => {
    const t = setInterval(() => setLeft((v) => {
      if (v <= 1) { clearInterval(t); submit(); return 0; }
      return v - 1;
    }), 1000);
    return () => clearInterval(t);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const mm = Math.floor(left / 60), ss = left % 60;
  const set = (id: number, v: string) => setAnswers((a) => ({ ...a, [id]: v }));
  const answered = Object.keys(answers).length;

  if (done) {
    return (
      <div className="anim-pop mx-auto max-w-md rounded-3xl border border-emerald-900/10 bg-white p-8 text-center shadow-xl">
        <CheckCircle2 size={48} className="mx-auto text-emerald-600" />
        <h2 className="mt-4 text-xl font-black text-emerald-950">آزمون ثبت شد!</h2>
        <p className="mt-2 text-sm text-emerald-800/70">
          پاسخ صحیح: {faNum(done.correct)} از {faNum(done.total)} سؤال قابل تصحیح خودکار
        </p>
        <div className="mt-4 rounded-2xl bg-gradient-to-br from-emerald-700 to-emerald-900 p-5 text-white">
          <div className="text-xs font-bold text-emerald-100/80">نمرهٔ شما (از ۲۰)</div>
          <div className="mt-1 text-4xl font-black">{done.score !== null ? faNum(done.score) : "در انتظار تصحیح تشریحی"}</div>
        </div>
        <a href="/student" className="mt-5 inline-block rounded-xl bg-amber-500 px-6 py-3 text-sm font-black text-white shadow hover:brightness-105">بازگشت به پنل</a>
      </div>
    );
  }

  return (
    <div className="mx-auto max-w-3xl">
      {/* نوار زمان */}
      <div className="sticky top-[49px] z-30 mb-5 flex items-center justify-between rounded-2xl border border-emerald-900/10 bg-white/90 px-5 py-3 shadow-lg backdrop-blur" dir="ltr">
        <div className="flex items-center gap-2 text-lg font-black tabular-nums" dir="ltr">
          <Timer size={19} className={left < 120 ? "text-red-500" : "text-emerald-700"} />
          <span className={left < 120 ? "text-red-600" : "text-emerald-950"}>{faNum(`${String(mm).padStart(2, "0")}:${String(ss).padStart(2, "0")}`)}</span>
        </div>
        <div className="text-xs font-bold text-emerald-800/70" dir="rtl">
          {title} — پاسخ‌داده‌شده: {faNum(answered)} / {faNum(questions.length)}
        </div>
        <div className="h-2.5 w-28 overflow-hidden rounded-full bg-emerald-900/10">
          <div className="h-full rounded-full bg-gradient-to-l from-emerald-500 to-amber-500 transition-all" style={{ width: `${(answered / questions.length) * 100}%` }} />
        </div>
      </div>

      {err && (
        <div className="mb-4 flex items-center gap-2 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-xs font-bold text-red-700">
          <AlertTriangle size={15} /> {err}
        </div>
      )}

      <div className="space-y-4">
        {questions.map((q, i) => (
          <div key={q.id} className="rounded-2xl border border-emerald-900/10 bg-white p-5 shadow-sm">
            <div className="mb-3 flex items-start gap-2.5">
              <span className="grid size-7 shrink-0 place-items-center rounded-lg bg-emerald-700 text-xs font-black text-white">{faNum(i + 1)}</span>
              <p className="text-sm font-extrabold leading-7 text-emerald-950">{q.text}</p>
            </div>
            {q.type === "mcq" && q.options && (
              <div className="grid gap-2 sm:grid-cols-2">
                {q.options.map((op, j) => (
                  <label key={j} className={`flex cursor-pointer items-center gap-2.5 rounded-xl border px-3.5 py-2.5 text-xs font-bold transition ${answers[q.id] === op ? "border-emerald-600 bg-emerald-50 text-emerald-900 ring-2 ring-emerald-500/25" : "border-emerald-900/12 hover:border-emerald-400"}`}>
                    <input type="radio" name={`q-${q.id}`} value={op} checked={answers[q.id] === op} onChange={() => set(q.id, op)} className="size-4 accent-emerald-700" />
                    {op}
                  </label>
                ))}
              </div>
            )}
            {q.type === "tf" && (
              <div className="flex gap-3">
                {["صحیح", "غلط"].map((v) => (
                  <label key={v} className={`flex flex-1 cursor-pointer items-center justify-center gap-2 rounded-xl border px-4 py-3 text-sm font-black transition ${answers[q.id] === v ? "border-emerald-600 bg-emerald-50 ring-2 ring-emerald-500/25" : "border-emerald-900/12 hover:border-emerald-400"}`}>
                    <input type="radio" name={`q-${q.id}`} value={v} checked={answers[q.id] === v} onChange={() => set(q.id, v)} className="size-4 accent-emerald-700" />
                    {v}
                  </label>
                ))}
              </div>
            )}
            {(q.type === "short" || q.type === "desc") && (
              <textarea rows={q.type === "desc" ? 4 : 2} value={answers[q.id] ?? ""} onChange={(e) => set(q.id, e.target.value)}
                placeholder={q.type === "desc" ? "پاسخ تشریحی بنویسید... (توسط دبیر تصحیح می‌شود)" : "پاسخ کوتاه..."}
                className="w-full rounded-xl border border-emerald-900/15 px-4 py-3 text-sm outline-none focus:border-emerald-600 focus:ring-2 focus:ring-emerald-500/25" />
            )}
          </div>
        ))}
      </div>

      <button onClick={submit} disabled={busy}
        className="mt-6 flex w-full items-center justify-center gap-2 rounded-2xl bg-gradient-to-l from-emerald-700 to-emerald-900 px-6 py-4 text-base font-black text-white shadow-xl transition hover:brightness-110 disabled:opacity-60">
        <Send size={18} />
        {busy ? "در حال ثبت..." : "اتمام آزمون و ثبت پاسخ‌ها"}
      </button>
    </div>
  );
}