import { FLEX } from "@/theme/mixins";
import { title } from "@/theme/typography";
import { router } from "expo-router";
import { StatusBar } from "expo-status-bar";
import React, { useEffect, useState } from "react";
import {
  Image,
  ImageBackground,
  Modal,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { courses } from "../../../services/courses";
import { getActiveNotification } from "../../../services/notifications";
import { Toast, DrawerMenu, LokmaChatModal, MemberRequiredBanner } from "@/components/common";
import { COLOR_SCALES } from "@/theme/colors";
import useGuest from "@/hooks/useGuest";

export default function HomeScreen() {
  const { isGuest } = useGuest();
  const [courseList, setCourseList] = useState([]);
  const [drawerVisible, setDrawerVisible] = useState(false);
  const [chatModalVisible, setChatModalVisible] = useState(false);
  const [activeNotification, setActiveNotification] = useState(false);
  const [showToast, setShowToast] = useState(false);
  const [toastMessage, setToastMessage] = useState("");
  const [toastType, setToastType] = useState("info");
  const [memberRequiredModal, setMemberRequiredModal] = useState(null);
  const fetchCourses = async () => {
    const response = await courses();
    if (response.success) {
      setCourseList(response.data);
    }
  };

  useEffect(() => {
    fetchCourses();
    fetchActiveNotification();
  }, []);

  const fetchActiveNotification = async () => {
    try {
      const res = await getActiveNotification();
      if (res?.success) {
        const hasData = res?.data != null;
        setActiveNotification(!!hasData);
        if (hasData) {
          setChatModalVisible(true);
        }
      } else {
        setActiveNotification(false);
      }
    } catch (err) {
      setActiveNotification(false);
    }
  };

  const handleDrawerToggle = () => {
    setDrawerVisible(!drawerVisible);
  };

  const handleChatModalToggle = async () => {
    if (isGuest) {
      setMemberRequiredModal({
        title: "Lokma sohbeti için üye olmanız gerekiyor",
        description: "Misafir modunda paket avantajlarına erişemezsiniz. Üye olarak Lokma ile sohbet etmeye başlayabilirsiniz.",
      });
      return;
    }
    try {
      const res = await getActiveNotification();
      const hasData = !!res?.data;
      setActiveNotification(hasData);

      if (res?.success && hasData) {
        setChatModalVisible(true);
      } else {
        setToastMessage(res?.message ?? "Aktif bildiriminiz bulunmamaktadır");
        setToastType("info");
        setShowToast(true);
      }
    } catch (err) {
      setToastMessage(err?.message ?? "Aktif bildirim kontrol edilemedi");
      setToastType("warning");
      setShowToast(true);
    }
  };

  const handleExercisesPress = () => {
    if (isGuest) {
      setMemberRequiredModal({
        title: "Egzersizlere katılmak için üye olmanız gerekiyor",
        description: "Misafir modunda günlük egzersizlere erişemezsiniz. Üye olarak egzersizlere katılabilirsiniz.",
      });
      return;
    }
    router.push("/(tabs)/exercises/planning");
  };

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar style="dark" backgroundColor="#fff" />
      <ScrollView
        style={styles.scrollView}
        showsVerticalScrollIndicator={false}
      >
        {/* Background Image Container */}
        <ImageBackground
          source={require("@/assets/images/backgrounds/home-top-background.png")}
          style={styles.backgroundImage}
          resizeMode="cover"
        >
          {/* Header */}
          <View style={styles.header}>
            <TouchableOpacity
              style={styles.logoContainer}
              onPress={handleDrawerToggle}
            >
              <Image
                source={require("@/assets/images/icons/menu.png")}
                style={styles.menuButton}
              />
            </TouchableOpacity>
            <TouchableOpacity style={styles.logoContainer}>
              <Image
                source={require("@/assets/images/logo/logo-small.png")}
                style={styles.logoSmall}
              />
            </TouchableOpacity>
          </View>

          <View style={styles.greetingContainer}>
            <Text style={styles.greeting}>
              Merhaba, ben <Text style={styles.greetingName}>LOKMA'M!</Text>
            </Text>
          </View>
          {/* LOKMA Assistant Section */}
          <View style={styles.section}>
            <View style={styles.assistantTitleContainer}>
              <Text style={styles.assistantTitle}>
                Bugün sana nasıl yardımcı olabilirim
              </Text>
            </View>
            <View style={styles.assistantContainer}>
              <View style={styles.lokmaCharacter}>
                <Image
                  source={require("@/assets/images/lokma-right.png")}
                  style={styles.lokmaImage}
                  resizeMode="contain"
                />
              </View>
            </View>
          </View>
        </ImageBackground>
        {/* Action Buttons */}
        <View style={styles.actionButtonsContainer}>
          <TouchableOpacity
            style={[styles.actionButton, { width: 185, right: -60 }]}
            activeOpacity={0.8}
            onPress={handleChatModalToggle}
          >
            <View style={styles.buttonContent}>
              <View style={[styles.buttonIconContainer]}>
                <Image
                  source={require("@/assets/images/icons/message-question.png")}
                  style={styles.buttonIcon}
                  resizeMode="contain"
                />
              </View>
              <Text style={styles.buttonText}>Soru cevap</Text>
              <Image
                source={require("@/assets/images/icons/right-arrows-red.png")}
                style={styles.rightIcon}
                resizeMode="contain"
              />
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.actionButton}
            onPress={handleExercisesPress}
            activeOpacity={0.8}
          >
            <View style={styles.buttonContent}>
              <View style={styles.buttonIconContainer}>
                <Image
                  source={require("@/assets/images/icons/note-2.png")}
                  style={styles.buttonIcon}
                  resizeMode="contain"
                />
              </View>
              <Text style={styles.buttonText}>Günlük egzersizler</Text>
              <Image
                source={require("@/assets/images/icons/right-arrows-red.png")}
                style={styles.rightIcon}
                resizeMode="contain"
              />
            </View>
          </TouchableOpacity>
        </View>

        {isGuest && (
          <View style={styles.memberBannerWrapper}>
            <MemberRequiredBanner
              title="Lokma sohbeti ve egzersizler için üye olun"
              description="Misafir modunda paket avantajlarına erişemezsiniz. Üye olarak Lokma ile sohbet edebilir ve günlük egzersizlere katılabilirsiniz."
            />
          </View>
        )}

        {/* Eğitimlerim Section */}
        <View style={[styles.section, { marginTop: 100, marginBottom: 50 }]}>
          <Text style={styles.sectionTitle}>Eğitimlerim</Text>
          {isGuest ? (
            <MemberRequiredBanner
              title="Eğitimlere erişmek için üye olmanız gerekmektedir"
              description="Misafir modunda eğitimlere erişemezsiniz. Üye olarak eğitimlerinize devam edebilirsiniz."
            />
          ) : (
            courseList?.length > 0 &&
            courseList.map((course, index) => (
              <TouchableOpacity
                key={course?.id ?? index}
                style={styles.trainingCard}
                activeOpacity={0.8}
                onPress={() =>
                  router.push({
                    pathname: "/courses",
                    params: { courseId: course.id },
                  })
                }
              >
                <ImageBackground
                  source={require("@/assets/images/backgrounds/frame-background-play.png")}
                  style={styles.cardBackground}
                  resizeMode="cover"
                >
                  <View style={styles.cardContainer}>
                    {/* Main image */}
                    <View style={styles.cardImageContainer}>
                      <Image
                        source={require("@/assets/images/illustrations/frame-image.png")}
                        style={styles.frameImage}
                        resizeMode="contain"
                      />
                    </View>

                    <View style={styles.cardTitleContainer}>
                      <Text style={styles.cardTitle2}>
                        Bugün YAP Eğitimleri
                      </Text>
                      <Text style={styles.cardDescription}>
                        Gıda İsrafı Farkındalık Eğitimleri
                      </Text>
                    </View>

                    {/* Footer with stats */}
                    <View style={styles.cardFooter}>
                      <Text style={styles.statText}>
                        <Text style={styles.statLabel}>Ders Sayısı: </Text>
                        <Text style={styles.statValue}>
                          {course.lessonCount}
                        </Text>
                      </Text>
                      <Text style={styles.statTextRight}>
                        <Text style={styles.statLabel}>Ders Saati: </Text>
                        <Text style={styles.statValue}>
                          {course.totalDuration} Dk
                        </Text>
                      </Text>
                    </View>
                  </View>
                </ImageBackground>
              </TouchableOpacity>
            ))
          )}
        </View>
      </ScrollView>
      {/* Drawer Menu */}
      <DrawerMenu
        visible={drawerVisible}
        onClose={() => setDrawerVisible(false)}
        userData={null}
      />

      <LokmaChatModal
        visible={chatModalVisible}
        onClose={() => setChatModalVisible(false)}
        message="Bugün gıdanı israf ettinmi?"
        timestamp={new Date().toLocaleTimeString("tr-TR", {
          hour: "2-digit",
          minute: "2-digit",
        })}
      />

      <Modal
        visible={!!memberRequiredModal}
        transparent
        animationType="fade"
        onRequestClose={() => setMemberRequiredModal(null)}
      >
        <TouchableOpacity
          style={styles.modalOverlay}
          activeOpacity={1}
          onPress={() => setMemberRequiredModal(null)}
        >
          <View style={styles.modalContent}>
            <TouchableOpacity activeOpacity={1} onPress={(e) => e.stopPropagation()}>
              {memberRequiredModal && (
                <MemberRequiredBanner
                  title={memberRequiredModal.title}
                  description={memberRequiredModal.description}
                  style={styles.modalBanner}
                />
              )}
            </TouchableOpacity>
          </View>
        </TouchableOpacity>
      </Modal>

      <Toast
        visible={showToast}
        message={toastMessage}
        type={toastType}
        onHide={() => setShowToast(false)}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  cardTitleContainer: {
    flexDirection: "column",
    justifyContent: "flex-start",
    position: "absolute",
    top: 20,
    left: 20,
    right: 20,
  },
  cardTitle2: {
    ...title["L/Medium"],
    color: COLOR_SCALES.gray[40],
    fontSize: 22,
    fontWeight: "700",
    marginBottom: 20,
  },
  cardDescription: {
    ...title["S/Regular"],
    color: "#000",
    fontSize: 18,
    fontWeight: "700",
    lineHeight: 18,
    marginTop: -10,
  },
  container: {
    ...FLEX.fill,
    backgroundColor: "#FFFFFF",
  },
  scrollView: {
    flex: 1,
  },
  backgroundImage: {
    width: "100%",
    height: 350,
    paddingBottom: 20,
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-start",
    paddingHorizontal: 20,
    paddingTop: 20,
    paddingBottom: 10,
  },
  greeting: {
    ...title["XL/Bold"],
    color: "#FFF",
    fontSize: 28,
    fontWeight: "700",
    lineHeight: 34,
  },
  greetingName: {
    fontWeight: "700",
  },
  greetingContainer: {
    marginHorizontal: 20,
    marginTop: 20,
  },
  logoContainer: {
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
  },
  logoSmall: {
    width: 60,
    height: 60,
    borderWidth: 1,
    borderColor: "#fff",
    borderRadius: 30,
  },
  section: {
    paddingHorizontal: 20,
    marginTop: 30,
  },
  sectionTitle: {
    ...title["L/Bold"],
    color: "#000",
    fontSize: 24,
    fontWeight: "700",
    marginBottom: 20,
  },
  trainingCard: {
    borderRadius: 20,
    overflow: "hidden",
  },
  cardBackground: {
    width: "100%",
    objectFit: "cover",
    overflow: "hidden",
    height: 260,
  },
  cardContainer: {
    padding: 20,
    flex: 1,
    justifyContent: "space-between",
  },
  cardHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-start",
    marginBottom: 16,
  },
  cardTitle: {
    color: "#F1D9E2",
    fontFamily: "Rubik",
    fontSize: 14,
    fontWeight: "400",
    lineHeight: 22,
    flex: 1,
  },
  frameLogo: {
    width: 40,
    height: 40,
  },
  cardImageContainer: {
    alignItems: "flex-start",
    marginVertical: 16,
  },
  frameImage: {
    width: 140,
    height: 124,
    marginTop: 60,
  },
  cardFooter: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  statText: {
    flexDirection: "row",
  },
  statTextRight: {
    flexDirection: "row",
  },
  statLabel: {
    color: "#F1D9E2",
    fontFamily: "Rubik",
    fontSize: 12,
    fontWeight: "400",
    lineHeight: 18,
  },
  statValue: {
    color: "#FFFFFF",
    fontFamily: "Rubik",
    fontSize: 12,
    fontWeight: "700",
    lineHeight: 18,
  },
  assistantTitleContainer: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: -16,
  },
  assistantTitle: {
    fontFamily: "Rubik",
    fontSize: 18,
    fontWeight: "400",
    lineHeight: 22,
    color: "#FFF",
  },
  assistantContainer: {
    flexDirection: "row",
    alignItems: "center",
    borderRadius: 20,
    padding: 20,
  },
  lokmaCharacter: {
    position: "absolute",
    left: 0,
    top: 100,
  },
  lokmaImage: {
    width: 142,
    height: 164,
  },
  menuButton: {
    width: 50,
    height: 50,
    marginTop: 10,
  },
  actionButtonsContainer: {
    position: "absolute",
    top: 223,
    right: 20,
    zIndex: 10,
    width: "60%",
  },
  actionButton: {
    borderRadius: 64,
    borderWidth: 1,
    borderColor: "#000",
    backgroundColor: "#EEE",
    boxShadow: "0 1px 0 0 #FFF inset, 2px 2px 0 0 #DB0020",
    marginBottom: 24,
  },
  buttonContent: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 16,
    paddingVertical: 6,
  },
  buttonIconContainer: {
    width: 40,
    height: 40,
    borderRadius: 25,
    backgroundColor: "#B4001A",
    alignItems: "center",
    justifyContent: "center",
    marginRight: 10,
  },
  buttonIcon: {
    width: 24,
    height: 24,
  },
  buttonText: {
    flex: 1,
    color: "#420F1B",
    fontFamily: "Rubik",
    fontSize: 14,
    fontWeight: "600",
    lineHeight: 22,
  },
  rightIcon: {
    width: 20,
    height: 20,
  },
  memberBannerWrapper: {
    marginTop: 16,
    marginHorizontal: 0,
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.4)",
    justifyContent: "center",
    padding: 24,
  },
  modalContent: {
    alignItems: "stretch",
  },
  modalBanner: {
    marginHorizontal: 0,
  },
});