"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { ArrowLeftIcon, Loader2Icon } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { NextLink } from "@/components/next-link";
import { EXAM_CODE_TO_IMAGE_URL, EXAM_ATTEMPT_STATUS } from "@/components/exam/exam-constants";
import Markdown from "@/components/markdown/markdown";
import { RedeemDialog } from "@/components/exam/redeem-dialog"
import { useLocale, useLocaleFunction } from "@/hooks/use-localed";
import { renderRemarkInline } from "@/lib/remark-inline";
import { type Exam } from "@/lib/api/exams";
import { type User } from "@/lib/api/labs";
import { cachedGetExam } from "@/lib/api/exams";

export default function ExamOverview({
  examId,
  exam,
  user,
}: {
  examId: number;
  exam: Exam;
  user: User;
}) {
  const router = useRouter();
  const t = useLocaleFunction();
  const locale = useLocale();
  const [examData, setExamData] = useState<Exam>(exam);
  const [starting, setStarting] = useState(false);
  const [showRedeemDialog, setShowRedeemDialog] = useState(false)

  useEffect(() => {
    // locale only
    (async () => {
      const next = await cachedGetExam(examId, locale);
      if (next) setExamData(next);
    })();
  }, [locale]);

  const handleStartExam = () => {
    if (starting) return;
    setStarting(true);

    const attempt = examData.latest_attempt;
    if (attempt?.status === EXAM_ATTEMPT_STATUS.IN_PROGRESS) {
      router.push(`/exam/${examId}/question/1`);
      return;
    }

    if (examData.requires_redemption) {
      setShowRedeemDialog(true);
      setStarting(false);
      return;
    }
    router.push(`/exam/${examId}/confirm-info`);
  };

  const handleRedeemSuccess = () => {
    setExamData(prev => ({
      ...prev,
      requires_redemption: false
    }));
  };

  return (
    <>
      <div className="mb-8">
        <NextLink
          href="/exams"
          noStyle
          className="inline-flex items-center gap-2 font-semibold text-primary hover:underline"
        >
          <ArrowLeftIcon className="w-4 h-4" />
          {t("exam.back_to_list")}
        </NextLink>
      </div>

      <div className="mb-8">
        <div className="flex flex-col md:flex-row items-center justify-between gap-8 py-8 mb-6">
          <div className="flex-1">
            <h1 className="text-4xl md:text-5xl font-bold text-foreground leading-tight">
              {examData.title}
            </h1>
            <p className="text-lg text-muted-foreground max-w-4xl mt-4">
              {examData.description}
            </p>
          </div>
          <div className="flex-shrink-0">
            {(() => {
              const imageUrl = EXAM_CODE_TO_IMAGE_URL[exam.code];
              return imageUrl ? (
                <Image
                  src={imageUrl}
                  alt={exam.code}
                  width={172}
                  height={199}
                  unoptimized
                />
              ) : null;
            })()}
          </div>
        </div>

        {/* Exam details */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2 text-[#1f2328] [&_strong]:font-semibold">
            {examData.certificate_purpose && (
              <div className="mb-6 [&_h2]:!text-xl [&_h2]:!border-0 [&_h2]:!p-0">
                <Markdown enableAIExplain={false}>
                  {renderRemarkInline(examData.certificate_purpose, true)}
                </Markdown>
              </div>
            )}

            {examData.preparation_guide && (
              <div className="mb-6 [&_h2]:!text-xl [&_h2]:!border-0 [&_h2]:!p-0">
                <Markdown enableAIExplain={false}>
                  {renderRemarkInline(examData.preparation_guide, true)}
                </Markdown>

              </div>
            )}

            <div className="mt-8">
              <h2 className="tracking-tight text-xl font-semibold">
                {t("exam.readiness_checklist")}
              </h2>
              <div className="mt-4">
                <p>{t("exam.readiness_checklist_detail")}</p>
                <ul className="flex flex-col gap-2 list-disc pl-4 mt-4">
                  <li>{renderRemarkInline(t("exam.readiness_checklist_detail.1"), true)}</li>
                  <li>{renderRemarkInline(t("exam.readiness_checklist_detail.2"), true)}</li>
                  <li>{renderRemarkInline(t("exam.readiness_checklist_detail.3"), true)}</li>
                  <li>{renderRemarkInline(t("exam.readiness_checklist_detail.4"), true)}</li>
                </ul>
              </div>
            </div>

            <div className="mt-8">
              <h2 className="tracking-tight text-xl font-semibold">
                {t("exam.technical_instructions")}
              </h2>
              <div className="mt-4">
                <ul className="flex flex-col gap-2 list-disc pl-4 mt-4">
                  <li>{renderRemarkInline(t("exam.technical_instructions_detail.1"), true)}</li>
                  <li>{renderRemarkInline(t("exam.technical_instructions_detail.2"), true)}</li>
                  <li>{renderRemarkInline(t("exam.technical_instructions_detail.3"), true)}</li>
                  <li>{renderRemarkInline(t("exam.technical_instructions_detail.4"), true)}</li>
                </ul>
              </div>
            </div>
          </div>

          {/* right sidebar */}
          <div className="lg:col-span-1">
            <Card className="sticky top-[80px]">
              <CardHeader>
                <CardTitle className="text-lg">
                  {t("exam.ready_to_start")}
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="bg-muted p-4">
                  <div className="flex items-center justify-between py-2">
                    <span className="text-sm">{t("exam.time_allotted")}</span>
                    <span className="font-semibold">{exam.duration} min</span>
                  </div>
                  <div className="flex items-center justify-between py-2">
                    <span className="text-sm">{t("exam.question_count")}</span>
                    <span className="font-semibold">{exam.question_count}</span>
                  </div>
                  <div className="flex items-center justify-between py-2">
                    <span className="text-sm">{t("exams.pass_score")}</span>
                    <span className="font-semibold">
                      {exam.pass_score_percentage} ({t("exam.pass_score_tip", `${exam.pass_score}/${exam.question_count}`)})
                    </span>
                  </div>
                  {!user.is_staff && (
                    <div className="flex items-center justify-between py-2">
                      <span className="text-sm">{t("exam.cost")}</span>
                      <span className="font-semibold">
                        {exam.credits === 0 ? t("exam.cost_free") : t("exam.cost_credits", exam.credits)}
                      </span>
                    </div>
                  )}

                  {!user.is_staff && exam.credits === 0 && (
                    <div className="flex items-center justify-between py-2">
                      <span className="text-sm">{t("exam.retakes")}</span>
                      <span className="font-semibold">
                        {t("exam.retakes_unlimited")}
                      </span>
                    </div>
                  )}
                </div>

                <Button
                  className="w-full cursor-pointer"
                  size="lg"
                  onClick={handleStartExam}
                >
                  {examData.latest_attempt?.status ==
                    EXAM_ATTEMPT_STATUS.IN_PROGRESS
                    ? t("exam.continue_exam")
                    : examData.requires_redemption
                      ? t("exam.redeem")
                      : t("exam.start_exam")}
                  {starting && <Loader2Icon className="w-4 h-4 ml-2 animate-spin" />}
                </Button>

                {(examData.latest_attempt?.status === EXAM_ATTEMPT_STATUS.COMPLETED || 
                  examData.latest_attempt?.status === EXAM_ATTEMPT_STATUS.EXPIRED) && (
                    <NextLink
                      className="w-full"
                      size="lg"
                      variant="outline"
                      href={`/exam/${examId}/result`}
                    >
                      {t("exam.view_exam_result")}
                    </NextLink>
                  )
                }

              </CardContent>
            </Card>
          </div>
        </div>
      </div>

      <RedeemDialog
        open={showRedeemDialog}
        onOpenChange={setShowRedeemDialog}
        examId={exam.id}
        examTitle={exam.title}
        credits={exam.credits}
        user={user}
        onRedeemSuccess={handleRedeemSuccess}
      />
    </>
  );
}