"use client";

import { useState, useEffect, useCallback } from "react";
import {
  CheckCircle2,
  AwardIcon,
  XCircleIcon,
  RotateCcwIcon,
  ShieldCheckIcon,
  DownloadIcon,
  Share2Icon,
  Loader2Icon,
  BookOpenIcon,
  HomeIcon,
} from "lucide-react";
import { format } from "date-fns";

import { Button } from "@/components/ui/button";
import { EXAM_ATTEMPT_STATUS } from "@/components/exam/exam-constants";
import { NextLink } from "@/components/next-link";
import { type Exam, type ExamAttempt, getExamAttempt } from "@/lib/api/exams";
import { type User } from "@/lib/api/labs";
import { renderRemarkInline } from "@/lib/remark-inline";
import { useLocaleFunction } from "@/hooks/use-localed";

const MAX_POLLING_DURATION = 60 * 1000;
const POLL_INTERVAL = 2000;
const CERTIFICATE_BASE_URL = 'https://www.pingcap.com/education/certificates';
const LINKEDIN_ORGANIZATION_ID = '13205484';
const LINKEDIN_BASE_URL = 'https://www.linkedin.com/profile/add';

export default function ResultContent({
  examId,
  exam,
  user,
  examAttempt,
}: {
  examId: number;
  exam: Exam;
  user: User;
  examAttempt: ExamAttempt;
}) {
  const t = useLocaleFunction();
  const [attempt, setAttempt] = useState(examAttempt);
  const [isTimeout, setIsTimeout] = useState(false);
  const shouldPoll =
    attempt.status === EXAM_ATTEMPT_STATUS.IN_PROGRESS &&
    attempt.remaining_seconds === 0;

  const isPolling = shouldPoll && !isTimeout;

  const { is_passed, score, status, result_detail } = attempt;

  const startPolling = useCallback(() => {
    let cancelled = false;
    const startTime = Date.now();
    let pollTimer: ReturnType<typeof setTimeout> | null = null;

    const poll = async () => {
      if (cancelled) return;

      if (Date.now() - startTime > MAX_POLLING_DURATION) {
        setIsTimeout(true);
        return;
      }

      try {
        const res = await getExamAttempt(examAttempt.id);

        if (cancelled) return;

        if (res.status !== EXAM_ATTEMPT_STATUS.IN_PROGRESS) {
          setAttempt(res);
          return;
        }

        pollTimer = setTimeout(poll, POLL_INTERVAL);
      } catch (e) {
        console.error('Polling error:', e);
        pollTimer = setTimeout(poll, POLL_INTERVAL);
      }
    };

    poll();

    return () => {
      cancelled = true;
      if (pollTimer) clearTimeout(pollTimer);
    };
  }, [examAttempt.id]);


  useEffect(() => {
    if (!shouldPoll) return;

    return startPolling();
  }, [shouldPoll, startPolling]);

  useEffect(() => {
    if (attempt.status !== EXAM_ATTEMPT_STATUS.IN_PROGRESS) {
      localStorage.removeItem(`examAnswers_${attempt.id}`);
    }
  }, [attempt.id, attempt.status]);

  const scorePercentage = `${((score / exam.total_score) * 100).toFixed(0)}%`;

  const getLinkedInShareUrl = (
    certName: string,
    certNumber: string,
    issuedAtString: string
  ) => {
    const issuedAt = new Date(issuedAtString);
    const issueYear = issuedAt.getFullYear();
    const issueMonth = issuedAt.getMonth() + 1;
    const certUrl = `${CERTIFICATE_BASE_URL}/${certNumber}/`;

    return `${LINKEDIN_BASE_URL}?startTask=CERTIFICATION_NAME&name=${encodeURIComponent(certName)}&organizationId=${LINKEDIN_ORGANIZATION_ID}&issueYear=${issueYear}&issueMonth=${issueMonth}&expirationYear=&expirationMonth=&certUrl=${encodeURIComponent(certUrl)}&certId=${certNumber}`;
  };

  if (isPolling) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[60vh] gap-4">
        <div className="w-12 h-12 animate-spin">
          <Loader2Icon className="w-full h-full text-muted-foreground" />
        </div>
        <p className="text-muted-foreground">{t("exam.result.finalizing")}</p>
      </div>
    );
  }

  if (isTimeout) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[60vh] gap-6">
        <div className="w-16 h-16 rounded-full bg-destructive/10 flex items-center justify-center">
          <XCircleIcon className="w-8 h-8 text-destructive" />
        </div>
        <div className="text-center">
          <h2 className="text-xl font-semibold text-foreground mb-2">{t("exam.result.taking_too_long")}</h2>
          <p className="text-muted-foreground mb-4">{t("exam.result.taking_too_long_description")}</p>
          <Button
            onClick={() => window.location.reload()}
            size="lg"
            className="cursor-pointer"
          >
            {t("exam.result.refresh_page")}
          </Button>
        </div>
      </div>
    );
  }

  return (
    <>
      {is_passed ? (
        /* Pass State */
        <div className="text-center">
          <div className="w-20 h-20 rounded-full bg-success/10 mx-auto flex items-center justify-center mb-6">
            <CheckCircle2 className="h-10 w-10 text-green-600 dark:text-green-400" />
          </div>
          <h1 className="text-3xl font-bold text-foreground mb-2">
            {t("exam.result.congratulations")}
          </h1>
          <p className="text-lg text-muted-foreground">
            {t("exam.result.passed_score")}
          </p>
          {status === EXAM_ATTEMPT_STATUS.EXPIRED && (
            <p className="text-sm text-muted-foreground mt-2">
              {t("exam.result.exam_time_ended")}
            </p>
          )}

          {/* Certificate */}
          <div className="border rounded p-8 my-8 relative overflow-hidden">
            <div className="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-success/50 via-success to-success/50" />

            <div className="border-2 border-dashed border-border rounded p-8">
              <img src={exam.splash_image} alt={exam.title} className="w-full h-auto" />
              {/* <AwardIcon className="w-10 h-10 mx-auto mb-4" />
              <p className="text-sm text-muted-foreground uppercase tracking-wider mb-2">
                {t("exam.result.certificate_of_completion")}
              </p>
              <h2 className="text-xl font-semibold text-foreground mb-4">
                {exam.title}
              </h2>

              <p className="text-muted-foreground mb-1">
                {t("exam.result.certificate_of_completion_description_1")}
              </p>
              <p className="text-2xl font-bold text-foreground mb-4">
                {user.first_name} {user.last_name}
              </p>

              <p className="text-sm text-muted-foreground mb-1">
                {t("exam.result.certificate_of_completion_description_2")}
              </p>

              <div className="mt-6 pt-4 border-t border-border">
                <p className="text-xs text-muted-foreground">
                  {examAttempt.submitted_at
                    ? format(new Date(examAttempt.submitted_at), "MMMM d, yyyy")
                    : ""}
                </p>
              </div> */}
            </div>
          </div>

          {/* Actions */}
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            {result_detail?.certificate && (
              <>
                <Button
                  variant="outline"
                  size="lg"
                  className="cursor-pointer"
                  asChild
                >
                  <a
                    href={`${CERTIFICATE_BASE_URL}/${result_detail.certificate.cert_number}/`}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <DownloadIcon className="w-4 h-4 mr-2" />
                    {t("exam.result.download_certificate")}
                  </a>
                </Button>
                <Button
                  variant="outline"
                  size="lg"
                  className="cursor-pointer"
                  asChild
                >
                  <a
                    href={getLinkedInShareUrl(
                      result_detail.certificate.cert_name,
                      result_detail.certificate.cert_number,
                      result_detail.certificate.issued_at
                    )}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <Share2Icon className="w-4 h-4 mr-2" />
                    {t("exam.result.add_to_linkedin")}
                  </a>
                </Button>
              </>
            )}
            <Button size="lg" className="cursor-pointer" asChild>
              <a href="https://www.pingcap.com/education/verification/">
                <ShieldCheckIcon className="w-4 h-4 mr-2" />
                {t("exam.result.verify_credential")}
              </a>
            </Button>
          </div>
        </div>
      ) : (
        /* Fail State */
        <div className="text-center">
          <div className="w-20 h-20 rounded-full bg-destructive/10 mx-auto flex items-center justify-center mb-6">
            <XCircleIcon className="w-10 h-10 text-destructive" />
          </div>
          <h1 className="text-3xl font-bold text-foreground mb-2">
            {t("exam.result.not_passed")}
          </h1>
          <p className="text-lg text-muted-foreground">
            {renderRemarkInline(t("exam.result.failed_score", scorePercentage), true)}
          </p>
          <p className="text-lg text-muted-foreground">
            {renderRemarkInline(t("exam.result.need_pass_score", exam.pass_score_percentage), true)}
          </p>
          {status === EXAM_ATTEMPT_STATUS.EXPIRED && (
            <p className="text-sm text-muted-foreground mt-2">
              {t("exam.result.exam_time_ended")}
            </p>
          )}

          <div className="border p-6 my-8">
            {exam.requires_redemption ? (
              <p className="text-sm text-muted-foreground">
                {t('exam.result.retake_requires_redemption')}
              </p>
            ) : (
              <>
                <h2 className="font-medium text-foreground mb-2">
                  {t("exam.result.dont_give_up")}
                </h2>
                <p className="text-sm text-muted-foreground">
                  {t("exam.result.dont_give_up_desc")}
                </p>
              </>
            )}
          </div>

          {/* Actions */}
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <NextLink variant="outline" size="lg" href={`/exam/${examId}`}>
              <BookOpenIcon className="w-4 h-4 mr-2" />
              {t("exam.result.back_to_exam")}
            </NextLink>
            {exam.requires_redemption ? (
              <NextLink size="lg" href='/'>
                <HomeIcon className="w-4 h-4 mr-2" />
                {t("exam.result.back_to_home")}
              </NextLink>
            ) : (
              <NextLink size="lg" href={`/exam/${examId}/confirm-info`}>
                <RotateCcwIcon className="w-4 h-4 mr-2" />
                {t("exam.result.retake_exam")}
              </NextLink>
            )}
          </div>
        </div>
      )}
    </>
  );
}