import React, { useState, useEffect, useRef } from "react";
import {
  View,
  StyleSheet,
  TouchableOpacity,
  Image,
  SafeAreaView,
  ScrollView,
  AppState,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { router, useLocalSearchParams } from "expo-router";
import { title, paragraph } from "@/theme/typography";
import Text from "@/components/common/Text";
import Toast from "@/components/common/Toast";
import BottomNavigation from "@/components/common/BottomNavigation";
import { COLOR_SCALES } from "@/theme/colors";
import { io } from "socket.io-client";
import { getExerciseQuestiom } from "@/services/user";
import * as SecureStore from "expo-secure-store";
  
const QuizScreen = () => {
  const insets = useSafeAreaInsets();
  const { notificationId: notificationIdParam } = useLocalSearchParams();
  const notificationId = notificationIdParam ?? null;

  const [balance, setBalance] = useState(0);
  const [timeLeft, setTimeLeft] = useState(15);
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [showToast, setShowToast] = useState(false);
  const [toastConfig, setToastConfig] = useState({
    type: "info",
    title: "",
    message: "",
  });
  const [socket, setSocket] = useState(null);
  const [userId, setUserId] = useState(null);

  const [questions, setQuestions] = useState([]);
  const [loading, setLoading] = useState(true);
  const [currentIdx, setCurrentIdx] = useState(0);
  const [resumeCount, setResumeCount] = useState(0);
  const appStateRef = useRef(AppState.currentState);
  const hasNavigatedRef = useRef(false);

  const currentQuestion = questions?.[currentIdx] ?? null;
  const totalQuestions = questions?.length ?? 0;
  const currentQuestionNumber = currentIdx + 1;
  const progress = ((15 - timeLeft) / 15) * 360;

  useEffect(() => {
    const fetchQuestions = async () => {
      try {
        setLoading(true);
        const res = await getExerciseQuestiom(notificationId);
        const dataArr = res?.data ?? [];
        const mapped = (dataArr ?? []).map((q) => ({
          id: q?.id,
          text: q?.question,
          options: (q?.options ?? []).map((o) => ({ id: o?.id, text: o?.option, isTrue: o?.isTrue })),
        }));
        setQuestions(mapped);
        setCurrentIdx(0);
        setSelectedAnswer(null);
        setTimeLeft(15);
      } catch (e) {
        setQuestions([]);
      } finally {
        setLoading(false);
      }
    };
    fetchQuestions();
  }, [notificationId]);

  useEffect(() => {
    let isMounted = true;
    const loadUserId = async () => {
      try {
        const idStr = await SecureStore.getItemAsync("userId");
        if (isMounted) setUserId(idStr ? Number(idStr) : null);
      } catch {
        if (isMounted) setUserId(null);
      }
    };
    loadUserId();
    return () => {
      isMounted = false;
    };
  }, []);

  useEffect(() => {
    const API_BASE = "https://api.bugunyap.com:1910";
    if (!userId) return;
    const s = io(`${API_BASE}/exercise`, {
      transports: ["websocket"],
      auth: { userId: String(userId), notificationId: notificationId ?? undefined },
    });
    s.on("connect", () => {
      s.emit("exercise:join", { userId: Number(userId), room: "daily-exercise", notificationId, totalQuestions, currentQuestionNumber });
    });
    s.on("connected", () => {});
    s.on("wallet:update", (payload) => {
      try {
        setBalance(Number(payload?.wallet ?? 0));
      } catch {}
    });
    setSocket(s);
    return () => {
      try { s.off("wallet:update"); } catch {}
      try { s.emit("exercise:leave", { userId: Number(userId), room: "daily-exercise", notificationId }); } catch {}
      s.disconnect();
    };
  }, [notificationId, totalQuestions, currentQuestionNumber, userId]);

  useEffect(() => {
    if (!currentQuestion) return;
    const timer = setInterval(() => {
      setTimeLeft((prev) => {
        if (prev <= 1) {
          clearInterval(timer);
          handleTimeUp();
          return 0;
        }
        return prev - 1;
      });
    }, 1000);
    return () => clearInterval(timer);
  }, [currentIdx, currentQuestion?.id]);

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

  const showToastMessage = (type, title, message) => {
    setToastConfig({ type, title, message });
    setShowToast(true);
  };

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

  const handleTimeUp = () => {
    const finished = goNextOrFinish();
    if (finished) {
      showToastMessage("warning", "Süre Doldu", "Süre doldu. Test tamamlandı.");
      setTimeout(() => {
        router.replace("/(tabs)/exercises");
      }, 800);
    } else {
      showToastMessage("warning", "Süre Doldu", "Cevap verme süreniz doldu!");
    }
  };

  const goNextOrFinish = () => {
    if (currentIdx + 1 < totalQuestions) {
      setCurrentIdx(currentIdx + 1);
      setSelectedAnswer(null);
      setTimeLeft(15);
      return false;
    }
    return true;
  };

  const handleSubmit = () => {
    if (selectedAnswer == null) {
      showToastMessage("error", "Hata", "Lütfen bir cevap seçin");
      return;
    }

    try {
      socket?.emit?.("exercise:answer", {
        questionId: currentQuestion?.id,
        answerId: selectedAnswer,
        notificationId,
        totalQuestions,
        currentQuestionNumber,
      });
    } catch {}

    const finished = goNextOrFinish();
    if (finished) {
      showToastMessage("success", "Tamamlandı", "Tüm sorular yanıtlandı");
      setTimeout(() => {
        router.replace("/(tabs)/exercises");
      }, 800);
    }
  };

  useEffect(() => {
    const subscription = AppState.addEventListener("change", (nextState) => {
      const wasBackground = /inactive|background/.test(appStateRef.current ?? "");
      if (wasBackground && nextState === "active") {
        setResumeCount((prev) => {
          const next = prev + 1;
          if (next >= 2 && !hasNavigatedRef.current) {
            hasNavigatedRef.current = true;
            setToastConfig({ type: "warning", title: "Uyarı", message: "Uygulamaya tekrar döndünüz. Ana sayfaya yönlendiriliyorsunuz." });
            setShowToast(true);
            setTimeout(() => {
              try {
                router.replace("/(tabs)/home");
              } catch {}
            }, 700);
          }
          return next;
        });
      }
      appStateRef.current = nextState;
    });
    return () => {
      try { subscription.remove(); } catch {}
    };
  }, []);

  if (loading) {
    return (
      <SafeAreaView style={styles.container}>
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
          <Text>Yükleniyor...</Text>
        </View>
      </SafeAreaView>
    );
  }

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <View style={styles.headerContent}>
          <TouchableOpacity style={styles.backButton} onPress={handleBack}>
            <Image
              source={require("@/assets/images/icons/back-button.png")}
              style={styles.backButtonIcon}
              resizeMode="contain"
            />
          </TouchableOpacity>
          <Text style={styles.title}>Günlük Egzersizler</Text>
          <TouchableOpacity style={styles.bugunYapButton}>
            <Image
              source={require("@/assets/images/logo/logo-small.png")}
              style={styles.logo}
            />
          </TouchableOpacity>
        </View>
      </View>
      <ScrollView
        style={styles.content}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: 120 + (insets?.bottom ?? 0) }}
      >
        <View style={styles.balanceContainer}>
          <View style={styles.coinStack}>
            <Image
              source={require("@/assets/images/icons/coins.png")}
              style={styles.coinIcon}
              resizeMode="contain"
            />
          </View>
          <Text style={styles.balanceText}>Bakiye: <Text style={styles.balanceTextBold}>{balance} Lokma'm para</Text></Text>
        </View>

        <View style={styles.questionHeader}>
          <View style={styles.questionInfo}>
            <Text style={styles.questionNumber}>{(currentIdx + 1)}.Soru</Text>
            <Text style={styles.questionCount}>
              {(currentIdx + 1)}/{totalQuestions} toplam soru sayısı
            </Text>
          </View>
          <View style={styles.timerContainer}>
            <View style={styles.timerCircle}>
              <View style={[styles.timerProgress, { transform: [{ rotate: `${progress}deg` }] }]} />
              <View style={styles.timerTeeth} />
              <Text style={styles.timerText}>{timeLeft}</Text>
            </View>
          </View>
        </View>

        <View style={styles.questionContainer}>
          <Text style={styles.questionText}>{currentQuestion?.text}</Text>
        </View>

        <View style={styles.optionsContainer}>
          {(currentQuestion?.options ?? []).map((option, idx) => (
            <TouchableOpacity
              key={option.id}
              style={[
                styles.optionButton,
                selectedAnswer === option.id && styles.selectedOption,
              ]}
              onPress={() => handleAnswerSelect(option.id)}
            >
              {selectedAnswer === option.id && (
                <View style={styles.optionBadge}>
                  <Text style={styles.optionBadgeText}>{String.fromCharCode(97 + idx)}</Text>
                </View>
              )}
              <Text
                style={[
                  styles.optionText,
                  selectedAnswer === option.id && styles.selectedOptionText,
                ]}
              >
                {option.text}
              </Text>
            </TouchableOpacity>
          ))}
        </View>

        <TouchableOpacity style={styles.submitButton} onPress={handleSubmit}>
          <Text style={styles.submitButtonText}>Cevapla</Text>
        </TouchableOpacity>
      </ScrollView>

      <View style={{ marginBottom: 20 }}>
        <BottomNavigation activeTab="exercises" />
      </View>

      <Toast
        visible={showToast}
        type={toastConfig.type}
        title={toastConfig.title}
        message={toastConfig.message}
        onHide={() => setShowToast(false)}
        duration={3000}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  header: {
    backgroundColor: "#fff",
    paddingTop: 10,
    paddingBottom: 20,
  },
  headerContent: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 20,
    marginBottom: 15,
    paddingTop: 40,
  },
  backButton: {
    width: 40,
    height: 40,
    alignItems: "center",
    justifyContent: "center",
  },
  backButtonIcon: {
    width: 40,
    height: 40,
  },

  headerTitle: {
    ...title["L/Bold"],
    color: "#151515",
  },

  checkmarkIcon: {
    fontSize: 12,
    color: "#fff",
    marginTop: 2,
  },
  content: {
    flex: 1,
    paddingHorizontal: 20,
  },
  balanceContainer: {
    flexDirection: "row",
    alignItems: "center",
    padding: 16,
    marginTop: 20,
    borderRadius: 47,
    borderWidth: 1,
    borderColor: "#FFC622",
    backgroundColor: "rgba(217, 217, 217, 0.20)",
  },
  coinStack: {
    position: "relative",
    marginRight: 12,
  },
  coinIcon: {
    width: 24,
    height: 24,
  },
  coinOverlap1: {
    position: "absolute",
    left: 8,
    top: 0,
  },
  coinOverlap2: {
    position: "absolute",
    left: 16,
    top: 0,
  },
  balanceText: {
    ...title["M/Regular"],
    color: "#333",
  },
  balanceTextBold: {
    ...title["M/Bold"],
    color: "#FFC622",
  },
  questionHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginTop: 30,
  },
  questionInfo: {
    flex: 1,
  },
  questionNumber: {
    ...title["M/Bold"],
    color: "#151515",
    marginBottom: 4,
  },
  questionCount: {
    ...paragraph["S/Regular"],
    color: "#6D6D6D",
  },
  timerContainer: {
    alignItems: "center",
  },
  timerCircle: {
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: "#000",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    borderWidth: 4,
    borderColor: "#fff",
  },
  timerProgress: {
    position: "absolute",
    top: -4,
    left: -4,
    right: -4,
    bottom: -4,
    borderRadius: 34,
    borderWidth: 4,
    borderColor: "#B4001A",
    borderTopColor: "#B4001A",
    borderRightColor: "#B4001A",
    borderBottomColor: "#fff",
    borderLeftColor: "#fff",
  },
  timerTeeth: {
    position: "absolute",
    top: -2,
    left: -2,
    right: -2,
    bottom: -2,
    borderRadius: 32,
    borderWidth: 1,
    borderColor: "#fff",
    borderStyle: "dashed",
    borderDasharray: [2, 3],
  },
  timerText: {
    ...title["S/Bold"],
    color: "#fff",
    fontSize: 16,
  },
  questionContainer: {
    marginTop: 30,
  },
  questionText: {
    ...title["S/Bold"],
    color: "#888",
    lineHeight: 28,
  },
  optionsContainer: {
    marginTop: 30,
    gap: 16,
  },
  optionButton: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 20,
    paddingVertical: 16,
    borderRadius: 32,
    borderWidth: 1,
    borderColor: COLOR_SCALES.gray[20],
    backgroundColor: "#fff",
  },
  selectedOption: {
    borderRadius: 32,
    borderWidth: 1,
    borderColor: "#B4001A",
    backgroundColor: "#FFDCE1",
  },
  optionBadge: {
    width: 24,
    height: 24,
    borderRadius: 12,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    marginRight: 12,
  },
  optionBadgeText: {
    ...paragraph["S/Bold"],
    color: "#B4001A",
  },
  optionText: {
    ...paragraph["M/Regular"],
    color: "#151515",
    flex: 1,
  },
  selectedOptionText: {
    color: COLOR_SCALES.primary[60],
  },
  submitButton: {
    backgroundColor: "#FF0025",
    paddingVertical: 16,
    paddingHorizontal: 20,
    borderRadius: 32,
    borderWidth: 2,
    borderColor: "#420F1B",
    alignItems: "center",
    shadowColor: "#DB0020",
    shadowOffset: {
      width: 2,
      height: 2,
    },
    shadowOpacity: 1,
    shadowRadius: 0,
    elevation: 4,
    marginTop: 20,
    marginBottom: 40,
  },
  submitButtonText: {
    ...title["M/Bold"],
    color: "#fff",
  },
  bugunYapButton: {
    flexDirection: "row",
    alignItems: "center",
  },
  logo: {
    width: 60,
    height: 60,
    borderRadius: 30,
    borderWidth: 1,
    borderColor: "#fff",
  },
});

export default QuizScreen;