import { FLEX } from "@/theme/mixins";
import { router, useLocalSearchParams } from "expo-router";
import { StatusBar } from "expo-status-bar";
import React, { useEffect, useState } from "react";
import {
  ScrollView,
  StyleSheet,
  Text,
  Linking,
  TouchableOpacity,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { getExamQuestions, answerQuestion, addUserCertificate } from "../../services/user";
import Loading from "@/components/common/Loading";
import Empty from "@/components/common/Empty";

// Quiz Components
import QuizHeader from "@/components/quiz/QuizHeader";
import QuizProgress from "@/components/quiz/QuizProgress";
import QuizQuestion from "@/components/quiz/QuizQuestion";
import QuizOptions from "@/components/quiz/QuizOptions";
import QuizContinueButton from "@/components/quiz/QuizContinueButton";
import QuizHintModal from "@/components/quiz/QuizHintModal";
import QuizCorrectModal from "@/components/quiz/QuizCorrectModal";
import QuizResultModal from "@/components/quiz/QuizResultModal";

export default function QuizScreen() {
  const { id, lessonId, courseId } = useLocalSearchParams();
  const [currentQuestion, setCurrentQuestion] = useState(1);
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [answerStatus, setAnswerStatus] = useState(null);
  const [showHintModal, setShowHintModal] = useState(false);
  const [showCorrectModal, setShowCorrectModal] = useState(false);
  const [showResultModal, setShowResultModal] = useState(false);
  const [quizResult, setQuizResult] = useState(null);
  const [correctAnswers, setCorrectAnswers] = useState(0);
  const [examQuestions, setExamQuestions] = useState([]);
  const [examInfo, setExamInfo] = useState(null);
  const [loading, setLoading] = useState(true);
  const [submitting, setSubmitting] = useState(false);
  const [hintContent, setHintContent] = useState("");
  const [errorMessage, setErrorMessage] = useState("");
  const [certificateFileName, setCertificateFileName] = useState("");
  
  // totalQuestions'ı state'lerden sonra hesapla
  const totalQuestions = examQuestions?.length ?? 0;

  useEffect(() => {
    questions();
  }, []);

  const questions = async () => {
    try {
      setLoading(true);
      const res = await getExamQuestions(id);
      if (res.success) {
        setExamInfo({
          examId: res?.data?.examId ?? id,
          title: res.data.title,
          description: res.data.description,
          duration: res.data.duration,
          attemptNumber: res.data.attemptNumber,
          courseId: res?.data?.courseId,
          lessonId: res?.data?.lessonId,
        });
        setExamQuestions(res.data.questions);
      }
    } catch (error) {
      console.log(error);
      setErrorMessage(error?.message ?? "");
    } finally {
      setLoading(false);
    }
  };

  const handleBackPress = () => {
    router.back();
  };

  const handleAnswerSelect = (optionIndex) => {
    setSelectedAnswer(optionIndex);
  };

  const handleContinue = async () => {
    try {
      if (selectedAnswer === null) return;
      const currentQuestionData = examQuestions?.[currentQuestion - 1];
      const selectedOption = currentQuestionData?.options?.[selectedAnswer];
      const payload = {
        examId: examInfo?.examId ?? id,
        questionId: currentQuestionData?.id,
        optionId: selectedOption?.id,
      };
      setSubmitting(true);
      const res = await answerQuestion(payload);
      console.log(res);
      const isCorrect = res?.data?.isCorrect === true;
      setAnswerStatus(isCorrect ? "correct" : "incorrect");
      if (!isCorrect) {
        setHintContent(selectedOption?.content ?? "");
      }
      setTimeout(() => {
        if (!isCorrect) {
          setShowHintModal(true);
        } else {
          setShowCorrectModal(true);
        }
      }, 300);
    } catch (error) {
      console.log(error);
    } finally {
      setSubmitting(false);
    }
  };

  const handleCloseHint = async () => {
    setShowHintModal(false);

    console.log("=== HINT MODAL CLOSED ===");
    console.log("Current Question:", currentQuestion);
    console.log("Total Questions:", totalQuestions);
    console.log("Correct Answers:", correctAnswers);

    // Continue to next question after hint (wrong answer)
    if (currentQuestion < totalQuestions) {
      // Henüz test bitmedi, bir sonraki soruya geç
      console.log("Moving to next question...");
      setCurrentQuestion(currentQuestion + 1);
      setSelectedAnswer(null);
      setAnswerStatus(null);
    } else {
      // SON SORU BİTTİ - Şimdi sonuç modalını göster
      console.log("LAST QUESTION - Showing result modal");
      const finalScore = Number(correctAnswers) || 0;
      const safeTotal = totalQuestions > 0 ? totalQuestions : 1;
      const successRate = (finalScore / safeTotal) * 100;
      console.log("Success Rate:", successRate);

      if (successRate >= 70) {
        console.log("successRate >= 70, getting certificate...");
        try {
          const payloadCourseId = (courseId ?? examInfo?.courseId)?.toString();
          if (!payloadCourseId) {
            setErrorMessage("Kurs bilgisi bulunamadı");
            return;
          }
          const res = await addUserCertificate({
            courseId: payloadCourseId,
            examId: examInfo?.examId,
          });
          if (res?.success) {
            const fileName = res?.data?.fileName ?? res?.data?.document ?? "";
            setCertificateFileName(fileName);
            setQuizResult("success");
            setShowResultModal(true);
          } else {
            setErrorMessage(res?.message ?? "Sertifika oluşturulamadı");
          }
        } catch (err) {
          setErrorMessage(err?.message ?? "Sertifika oluşturulamadı");
        }
      } else {
        // Başarı oranı %70'in altında
        console.log("successRate < 70, showing failure modal");
        setQuizResult("failure");
        setShowResultModal(true);
      }
    }
  };

  const handleCloseCorrect = async () => {
    setShowCorrectModal(false);

    // Continue to next question after correct answer
    if (currentQuestion < totalQuestions) {
      setCorrectAnswers(correctAnswers + 1);
      setCurrentQuestion(currentQuestion + 1);
      setSelectedAnswer(null);
      setAnswerStatus(null);
    } else {
      // Quiz completed with correct answer
      const finalScore = (Number(correctAnswers) || 0) + 1;
      const safeTotal = totalQuestions > 0 ? totalQuestions : 1;
      const successRate = (finalScore / safeTotal) * 100;
      setCorrectAnswers(finalScore);

      if (successRate >= 70) {
        try {
          const payloadCourseId = (courseId ?? examInfo?.courseId)?.toString();
          if ( !payloadCourseId) {
            console.log("payloadCourseId", payloadCourseId);
            setErrorMessage("Ders veya kurs bilgisi bulunamadı");
            return;
          }
          console.log("examInfo?.examId", examInfo?.examId);
          const res = await addUserCertificate({
            courseId: payloadCourseId,
            examId: examInfo?.examId,
          });
          if (res?.success) {
            const fileName = res?.data?.fileName ?? res?.data?.document ?? "";
            setCertificateFileName(fileName);
            setQuizResult("success");
            setShowResultModal(true);
          } else {
            setErrorMessage(res?.message ?? "Sertifika oluşturulamadı");
          }
        } catch (err) {
          setErrorMessage(err?.message ?? "Sertifika oluşturulamadı");
        }
      } else {
        setQuizResult("failure");
        setShowResultModal(true);
      }
    }
  };

  const handleDownloadCertificate = async () => {
    try {
      const fileName = certificateFileName;
      if (fileName) {
        const url = `https://api.bugunyap.com/src/uploads/certificates/${fileName}`;
        await Linking.openURL(url);
      }
    } catch (error) {
      console.log("Certificate download error", error);
    }
  };

  const handleRetryQuiz = () => {
    console.log("=== RETRY QUIZ ===");
    setShowResultModal(false);
    setCurrentQuestion(1);
    setSelectedAnswer(null);
    setAnswerStatus(null);
    setCorrectAnswers(0);
    setQuizResult(null);
    // Yeni deneme için soruları yeniden yükle
    questions();
  };

  if (loading) {
    return (
      <SafeAreaView style={styles.container}>
        <Loading fullscreen={true} message="Sorular yükleniyor..." />
      </SafeAreaView>
    );
  }

  if (errorMessage) {
    return (
      <SafeAreaView style={styles.container}>
        <QuizHeader
          title="Sınav"
          currentQuestion={0}
          totalQuestions={0}
          onBackPress={handleBackPress}
        />
        <Empty 
          title={errorMessage}
          action={
            <TouchableOpacity
              style={styles.backToHomeButton}
              onPress={handleBackPress}
              activeOpacity={0.8}
            >
              <Text style={styles.backToHomeButtonText}>Geri Dön</Text>
            </TouchableOpacity>
          }
        />
      </SafeAreaView>
    );
  }

  if (!(examQuestions?.length > 0)) {
    return (
      <SafeAreaView style={styles.container}>
        <QuizHeader
          title="Sınav"
          currentQuestion={0}
          totalQuestions={0}
          onBackPress={handleBackPress}
        />
        <Empty 
          title="Soru Bulunamadı" 
          description="Bu sınav için soru bulunamadı."
          action={
            <TouchableOpacity
              style={styles.backToHomeButton}
              onPress={handleBackPress}
              activeOpacity={0.8}
            >
              <Text style={styles.backToHomeButtonText}>Geri Dön</Text>
            </TouchableOpacity>
          }
        />
      </SafeAreaView>
    );
  }

  const currentQuestionData = examQuestions[currentQuestion - 1];



  return (
    <SafeAreaView style={styles.container}>
      <StatusBar style="dark" backgroundColor="#F5F5F5" />

      {/* Header */}
      <QuizHeader
        title={examInfo?.title}
        currentQuestion={currentQuestion}
        totalQuestions={examQuestions.length}
        onBackPress={handleBackPress}
      />

      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
      >
        {/* Progress Indicator */}
        <QuizProgress
          currentQuestion={currentQuestion}
          totalQuestions={examQuestions.length}
        />

        {/* Question */}
        <QuizQuestion question={currentQuestionData?.question} />

        {/* Answer Options */}
        <QuizOptions
          options={currentQuestionData?.options}
          selectedAnswer={selectedAnswer}
          answerStatus={answerStatus}
          onAnswerSelect={handleAnswerSelect}
        />
      </ScrollView>

      {/* Fixed Continue Button */}
      <QuizContinueButton
        selectedAnswer={selectedAnswer}
        currentQuestion={currentQuestion}
        totalQuestions={examQuestions.length}
        onContinue={handleContinue}
      />

      {/* Modals */}
      <QuizHintModal
        visible={showHintModal}
        onClose={handleCloseHint}
        hintContent={hintContent}
      />
      
      <QuizCorrectModal
        visible={showCorrectModal}
        onClose={handleCloseCorrect}
        correctMessage={currentQuestionData?.correctMessage}
      />
      
      <QuizResultModal
        visible={showResultModal}
        quizResult={quizResult}
        correctAnswers={correctAnswers}
        totalQuestions={totalQuestions}
        onDownloadCertificate={handleDownloadCertificate}
        onRetryQuiz={handleRetryQuiz}
        onClose={() => setShowResultModal(false)}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    ...FLEX.fill,
    backgroundColor: "#F5F5F5",
  },
  scrollView: {
    flex: 1,
  },
  scrollContent: {
    paddingBottom: 120,
  },
  backToHomeButton: {
    backgroundColor: "#FF0025",
    borderRadius: 24,
    borderWidth: 2,
    borderColor: "#52000C",
    paddingVertical: 16,
    paddingHorizontal: 40,
    alignItems: "center",
    justifyContent: "center",
    shadowColor: "#DB0020",
    shadowOffset: {
      width: 2,
      height: 2,
    },
    shadowOpacity: 1,
    shadowRadius: 0,
    elevation: 0,
    minWidth: 200,
  },
  backToHomeButtonText: {
    color: "#FFF",
    fontFamily: "Rubik",
    fontSize: 16,
    fontWeight: "700",
    lineHeight: 24,
  },
});