import { FC, useState, useEffect } from "react";
import { useRouter } from "next/router";
import { useSkillApi } from "../../utils/hooks/useSkillApi";
import { useAuth } from "../../contexts/auth";
import { useGetCandidateProfileDetails } from "../../utils/hooks/useGetCandidateProfileDetails";
import Swal from "sweetalert2";

interface PageProps {
  jobDetails: Job;
  onExamsAvailable?: (hasExams: boolean) => void;
  onAttachedExamTakenChange?: (isTaken: boolean) => void;
  isApplied?: boolean;
}

const JobDetailsDescriptions: FC<PageProps> = ({
  jobDetails,
  onExamsAvailable,
  onAttachedExamTakenChange,
  isApplied = false,
}) => {
  const router = useRouter();
  const skillApi = useSkillApi() as any;
  const { isAuthenticated, userRole } = useAuth() as any;
  const [startingExamId, setStartingExamId] = useState<number | null>(null);
  const [examError, setExamError] = useState<string | null>(null);
  const [jobExams, setJobExams] = useState<any[]>([]);
  const [loadingExams, setLoadingExams] = useState(false);
  const [completedExamIds, setCompletedExamIds] = useState<Set<number>>(
    new Set(),
  );
  const [candidateId, setCandidateId] = useState<number | null>(null);

  useEffect(() => {
    const fetchCandidateProfile = async () => {
      if (!isAuthenticated || userRole !== "Candidate") return;
      try {
        const { resp } = (await useGetCandidateProfileDetails()) as any;
        if (resp?.id) {
          setCandidateId(Number(resp.id));
        }
      } catch (error) {
        console.error("Error fetching candidate profile:", error);
      }
    };

    fetchCandidateProfile();
  }, [isAuthenticated, userRole]);

  // Fetch completed exams for the current candidate
  const fetchCompletedExams = async () => {
    if (!isAuthenticated || userRole !== "Candidate" || !candidateId) return;

    try {
      const results = await skillApi.getResults(candidateId);
      const completedIds = new Set<number>();

      results.forEach((result: any) => {
        const status = String(result.status || "").toUpperCase();
        const examId = Number(result.examId || result.exam_id);
        if (status === "COMPLETED" && Number.isFinite(examId) && examId > 0) {
          completedIds.add(examId);
        }
      });

      setCompletedExamIds(completedIds);
    } catch (error) {
      console.error("Error fetching completed exams:", error);
    }
  };

  // Fetch job exams if not already included in jobDetails
  useEffect(() => {
    const fetchJobExams = async () => {
      // If exams are already in jobDetails, use them
      if (jobDetails?.skillExams && jobDetails.skillExams.length > 0) {
        setJobExams(jobDetails.skillExams);
        return;
      }

      // Otherwise, fetch all exams and filter by jobPostId
      setLoadingExams(true);
      try {
        const allExams = await skillApi.getExams();
        const attachedExams = allExams.filter(
          (exam: any) =>
            exam.jobPostId === jobDetails.id ||
            exam.job_post_id === jobDetails.id,
        );
        setJobExams(attachedExams);
      } catch (error) {
        console.error("Error fetching job exams:", error);
      } finally {
        setLoadingExams(false);
      }
    };

    if (jobDetails?.id) {
      fetchJobExams();
      fetchCompletedExams();
    }

    // Notify parent about exam availability
    if (onExamsAvailable) {
      const hasExams =
        (jobDetails?.skillExams && jobDetails.skillExams.length > 0) || false;
      onExamsAvailable(hasExams);
    }
  }, [
    jobDetails?.id,
    jobDetails?.skillExams,
    skillApi,
    isAuthenticated,
    userRole,
    candidateId,
  ]);

  // Notify parent when exams become available
  useEffect(() => {
    if (onExamsAvailable) {
      const hasExams = jobExams.length > 0;
      onExamsAvailable(hasExams);
    }
  }, [jobExams.length, onExamsAvailable]);

  useEffect(() => {
    if (!onAttachedExamTakenChange) return;
    const hasTakenAnyAttachedExam = jobExams.some((exam) =>
      completedExamIds.has(Number(exam?.id)),
    );
    onAttachedExamTakenChange(hasTakenAnyAttachedExam);
  }, [jobExams, completedExamIds, onAttachedExamTakenChange]);

  const handleStartTest = async (exam: any) => {
    try {
      if (!isAuthenticated) {
        router.push("/login");
        return;
      }

      console.log("Starting exam:", exam);
      console.log("Job details:", jobDetails);

      setStartingExamId(exam.id);
      setExamError(null);

      // Start the exam with job post context
      const startPayload = {
        skillExamId: exam.id,
        jobPostId: jobDetails.id,
      };

      console.log("Start test payload:", startPayload);

      const result = await skillApi.startTest(startPayload);

      console.log("Start test result:", result);

      if (result && (result.performanceId || result.id)) {
        const performanceId = result.performanceId || result.id;

        // Store job and exam context in localStorage for the exam taker
        localStorage.setItem(
          "examContext",
          JSON.stringify({
            jobPostId: jobDetails.id,
            examId: exam.id,
            performanceId: performanceId,
            examData: result.exam, // Store exam data if available
          }),
        );

        // Navigate to exam taker page with performance ID
        router.push(
          `/dashboard/skill-test/take/${performanceId}?jobId=${jobDetails.id}&examId=${exam.id}`,
        );
      } else {
        throw new Error("No performance ID returned from start test API");
      }
    } catch (error: any) {
      console.error("Error starting exam:", error);
      const errorMsg =
        error?.response?.data?.message ||
        error?.response?.data?.error ||
        error?.message ||
        "Failed to start exam";
      setExamError(errorMsg);
    } finally {
      setStartingExamId(null);
    }
  };

  return (
    <div className="job-detail">
      {jobDetails?.description && (
        <div className="job-detail-sub-section">
          <h4>Job Description</h4>
          <div
            dangerouslySetInnerHTML={{ __html: jobDetails?.description }}
          ></div>
        </div>
      )}
      {jobDetails?.responsibilitiesAndDuties &&
        jobDetails?.responsibilitiesAndDuties !== "<p><br></p>" && (
          <div className="job-detail-sub-section">
            <h4>Key Responsibilities</h4>
            <div
              dangerouslySetInnerHTML={{
                __html: jobDetails?.responsibilitiesAndDuties!,
              }}
              className="list-style-three"
            ></div>
          </div>
        )}

      {jobDetails?.benefits && jobDetails?.benefits !== "<p><br></p>" && (
        <div className="job-detail-sub-section">
          <h4>Benefits </h4>
          <div
            dangerouslySetInnerHTML={{ __html: jobDetails?.benefits! }}
            className="list-style-three"
          ></div>
        </div>
      )}
      {jobDetails?.companyInformation &&
        jobDetails?.companyInformation !== "<p><br></p>" && (
          <div className="job-detail-sub-section">
            <h4>Company Information</h4>
            <div
              dangerouslySetInnerHTML={{
                __html: jobDetails?.companyInformation!,
              }}
              className="list-style-three"
            ></div>
          </div>
        )}
      {jobDetails?.contactInformation &&
        jobDetails?.contactInformation !== "<p><br></p>" && (
          <div className="job-detail-sub-section">
            <h4>Contact Information</h4>
            <div
              dangerouslySetInnerHTML={{
                __html: jobDetails?.contactInformation!,
              }}
              className="list-style-three"
            ></div>
          </div>
        )}
      {jobDetails?.companyBranding &&
        jobDetails?.companyBranding !== "<p><br></p>" && (
          <div className="job-detail-sub-section">
            <h4>Industry</h4>
            <p className="list-style-three">{jobDetails?.companyBranding}</p>
          </div>
        )}

      <div className="social-share">
        <h5>Employment Type</h5>
        {jobDetails?.employmentTypes?.map((employmentType: EmploymentTypes) => (
          <a
            key={employmentType.id}
            className="facebook"
            target="_blank"
            rel="noopener noreferrer"
          >
            {employmentType.name}
          </a>
        ))}
      </div>

      {jobDetails?.workMode?.length ? (
        <div className="social-share">
          <h5>Work Mode</h5>
          {jobDetails?.workMode?.map((workMode: WorkMode) => (
            <a
              key={workMode.id}
              className="facebook"
              target="_blank"
              rel="noopener noreferrer"
            >
              {workMode.name}
            </a>
          ))}
        </div>
      ) : (
        <></>
      )}

      {/* Skill Exams Attached Section */}
      {jobExams && jobExams.length > 0 && (
        <div
          id="attached-skill-exams"
          className="job-detail-sub-section"
          style={{ marginTop: "15px" }}
        >
          <h4>Attached Skill Exams</h4>
          {examError && (
            <div
              className="alert alert-danger mt-2"
              style={{
                padding: "12px",
                borderRadius: "4px",
                marginBottom: "16px",
              }}
            >
              {examError}
            </div>
          )}
          {loadingExams ? (
            <div className="text-center py-3">
              <div className="spinner mb-3"></div>
              <p>Loading exams...</p>
            </div>
          ) : (
            <div className="mt-3">
              {jobExams.map((exam: any, idx: number) => (
                <div
                  key={idx}
                  className="p-3 border rounded mb-3"
                  style={{
                    borderColor: "#e0e0e0",
                    backgroundColor: "#f9f9f9",
                  }}
                >
                  <h5
                    className="mb-2"
                    style={{
                      fontWeight: 600,
                      fontSize: "16px",
                    }}
                  >
                    {exam.title || exam.name}
                  </h5>
                  <p
                    className="mb-2"
                    style={{
                      fontSize: "14px",
                      color: "#555",
                    }}
                  >
                    <i className="icon flaticon-clock-3 me-1"></i>
                    <strong>Duration:</strong>{" "}
                    {exam.duration ? `${exam.duration} minutes` : "N/A"}
                  </p>
                  {exam.description && (
                    <p
                      style={{
                        fontSize: "14px",
                        color: "#666",
                        marginBottom: "12px",
                        lineHeight: "1.6",
                      }}
                    >
                      <strong>Description:</strong> {exam.description}
                    </p>
                  )}
                  {exam.role && (
                    <p
                      style={{
                        fontSize: "14px",
                        color: "#666",
                        marginTop: "8px",
                        marginBottom: "16px",
                      }}
                    >
                      <strong>Role:</strong> {exam.role}
                    </p>
                  )}
                  <div style={{ marginTop: "16px" }}>
                    {(() => {
                      const isJobExpired = jobDetails?.closingDate ? jobDetails.closingDate < new Date().toISOString().split("T")[0] : false;
                      return (
                        <button
                          className="theme-btn btn-style-one"
                          onClick={() => {
                            if (isJobExpired && !completedExamIds.has(exam.id)) {
                              Swal.fire({
                                title: "Expired",
                                text: "You cannot take the test because the job posting has expired.",
                                icon: "error"
                              });
                              return;
                            }
                            if (!isApplied) return; // Prevent action if not applied
                            handleStartTest(exam);
                          }}
                          disabled={
                            !isApplied ||
                            startingExamId !== null ||
                            completedExamIds.has(exam.id)
                          }
                          style={{
                            padding: "10px 20px",
                            fontSize: "14px",
                            borderRadius: "4px",
                            opacity:
                              !isApplied ||
                              startingExamId === exam.id ||
                              completedExamIds.has(exam.id) ||
                              isJobExpired
                                ? 0.6
                                : 1,
                            cursor:
                              !isApplied ||
                              startingExamId === exam.id ||
                              completedExamIds.has(exam.id) ||
                              isJobExpired
                                ? "not-allowed"
                                : "pointer",
                          }}
                        >
                          {isJobExpired && !completedExamIds.has(exam.id)
                            ? "Job Expired"
                            : !isApplied
                            ? "Apply to Take Test"
                            : completedExamIds.has(exam.id)
                              ? "Completed"
                              : startingExamId === exam.id
                                ? "Starting..."
                                : "Start Test"}
                        </button>
                      );
                    })()}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
};

export default JobDetailsDescriptions;