import BottomNavigation from "@/components/common/BottomNavigation";
import ProfileHeader from "@/components/common/ProfileHeader";
import Text from "@/components/common/Text";
import Toast from "@/components/common/Toast";
import { FLEX } from "@/theme/mixins";
import { Ionicons } from "@expo/vector-icons";
import { router, useFocusEffect } from "expo-router";
import * as SecureStore from "expo-secure-store";
import React, { useCallback, useEffect, useState } from "react";
import { ScrollView, StyleSheet, TouchableOpacity, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { getProfileCached as getProfile, getAllCities } from "../../services/user";
import { COLOR_SCALES } from "@/theme/colors";
import useToast from "@/hooks/useToast";
import useAuth from "@/hooks/useAuth";

export default function ProfileScreen() {
  const { logout } = useAuth();
  const { toast, showToast, hideToast } = useToast();
  const [userData, setUserData] = useState(null);
  const [cities, setCities] = useState([]);
  const [isGuest, setIsGuest] = useState(false);

  const getUsers = async () => {
    try {
      const response = await getProfile();
      if (response?.success) {
        const user = response?.data?.user;
        // profile_image'ı avatar olarak da set et ki ProfileHeader görseli güncel alsın
        if (user?.profile_image && !user?.avatar) {
          user.avatar = user.profile_image;
        }
        setUserData(user);
      }
    } catch (error) {
      const is429 = error?.response?.status === 429 || (error?.message && String(error.message).includes("429"));
      if (is429) {
        showToast({
          type: "warning",
          title: "Çok fazla istek",
          message: "Lütfen biraz sonra tekrar deneyin.",
        });
        return;
      }
      if (__DEV__) console.warn("Kullanıcılar yüklenirken hata:", error?.message);
    }
  };

  useEffect(() => {
    const checkGuestMode = async () => {
      try {
        const guestStatus = await SecureStore.getItemAsync("isGuest");
        if (guestStatus === "true") {
          setIsGuest(true);
          showToast({
            type: 'warning',
            title: 'Üye Ol Gerekli',
            message: 'Bu özelliği kullanmak için üye olmanız gerekmektedir.',
          });
          setTimeout(() => {
            router.replace("/(tabs)/home");
          }, 1500);
          return;
        }
      } catch (error) {
        // Hata durumunda devam et
      }
    };

    checkGuestMode();
  }, [showToast]);

  useEffect(() => {
    if (!isGuest) {
      getUsers();
      (async () => {
        try {
          const res = await getAllCities();
          if (res?.success) setCities(res?.data ?? []);
        } catch (e) {
          // noop
        }
      })();
    }
  }, [isGuest]);

  // Misafir sekme odaklandığında login'e yönlendir; veri sadece ilk yüklemede çekilsin (429 önlemi)
  useFocusEffect(
    useCallback(() => {
      const checkGuestOnFocus = async () => {
        try {
          const guestStatus = await SecureStore.getItemAsync("isGuest");
          if (guestStatus === "true") {
            setIsGuest(true);
            showToast({
              type: 'warning',
              title: 'Üye Ol Gerekli',
              message: 'Bu özelliği kullanmak için üye olmanız gerekmektedir.',
            });
            router.replace("/(tabs)/home");
          } else {
            // Misafir değilse profil verisini yenile (edit'ten dönüşte güncel resmi görmek için)
            getUsers();
          }
        } catch (error) {
          // Hata durumunda devam et
        }
      };

      checkGuestOnFocus();
    }, [showToast])
  );

  const handleSignOut = async () => {
    try {
      await logout();
    } catch (error) {
      console.error("Çıkış yapılırken hata oluştu:", error);
    }
  };

  // Misafir modunda sayfayı gösterme
  if (isGuest) {
    return (
      <SafeAreaView style={styles.container}>
        <Toast
          visible={toast?.visible}
          title={toast?.title}
          message={toast?.message}
          type={toast?.type}
          duration={toast?.duration}
          onHide={hideToast}
        />
      </SafeAreaView>
    );
  }

  return (
    <SafeAreaView style={styles.container}>
      <Toast
        visible={toast?.visible}
        title={toast?.title}
        message={toast?.message}
        type={toast?.type}
        duration={toast?.duration}
        onHide={hideToast}
      />
      <ProfileHeader
        pageTitle="Profil"
        showBackButton={false}
        showNotification={true}
        showUserInfo={true}
        userData={userData}
        onEditPress={() => router.push("/profile/edit")}
      />

      <ScrollView
        style={styles.scrollView}
        showsVerticalScrollIndicator={false}
      >
        <View style={styles.sectionContent}>
          {/* General Information */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>Genel Bilgiler</Text>

            <View style={styles.infoContainer}>
              <View style={styles.infoItem}>
                <View style={styles.iconContainer}>
                  <Ionicons name="mail-outline" size={20} color="#E50012" />
                </View>
                <Text style={styles.infoText}>{userData?.email}</Text>
              </View>

              <View style={styles.infoItem}>
                <View style={styles.iconContainer}>
                  <Ionicons name="call-outline" size={20} color="#E50012" />
                </View>
                <Text style={styles.infoText}>{userData?.phone}</Text>
              </View>

              <View style={styles.infoItem}>
                <View style={styles.iconContainer}>
                  <Ionicons name="calendar-outline" size={20} color="#E50012" />
                </View>
                <Text style={styles.infoText}>{userData?.age}</Text>
              </View>

              <View style={styles.infoItem}>
                <View style={styles.iconContainer}>
                  <Ionicons name="woman-outline" size={20} color="#E50012" />
                </View>
                <Text style={styles.infoText}>
                  {userData?.gender === 'male' ? 'Erkek' : userData?.gender === 'female' ? 'Kadın' : (userData?.gender ? 'Diğer' : '')}
                </Text>
              </View>

              <View style={styles.infoItem}>
                <View style={styles.iconContainer}>
                  <Ionicons name="school-outline" size={20} color="#E50012" />
                </View>
                <Text style={styles.infoText}>
                  {(() => {
                    const edu = userData?.education_level;
                    const map = {
                      primary: 'İlkokul',
                      secondary: 'Ortaokul',
                      high_school: 'Lise',
                      university: 'Üniversite',
                      master: 'Yüksek Lisans',
                      phd: 'Doktora',
                    };
                    return map[edu] ?? '';
                  })()}
                </Text>
              </View>

              <View style={[styles.infoItem, { borderBottomWidth: 0 }]}>
                <View style={styles.iconContainer}>
                  <Ionicons name="location-outline" size={20} color="#E50012" />
                </View>
                <Text style={styles.infoText}>
                  {(() => {
                    const raw = userData?.city;
                    const id = typeof raw === 'string' ? parseInt(raw, 10) : raw;
                    const found = Array.isArray(cities) ? cities.find((c) => c?.id === id) : null;
                    return found?.name ?? '';
                  })()}
                </Text>
              </View>
            </View>
          </View>

          {/* App Settings */}
          <View style={styles.section}>
            <Text style={styles.sectionTitle}>Uygulama ayarları</Text>

            <View style={styles.settingsContainer}>
              <TouchableOpacity
                style={styles.settingItem}
                onPress={() => router.push("/profile/password")}
              >
                <View style={styles.iconContainer}>
                  <Ionicons
                    name="lock-closed-outline"
                    size={20}
                    color="#E50012"
                  />
                </View>
                <Text style={styles.settingText}>Şifre Değiştir</Text>
                <Ionicons name="chevron-forward" size={22} color="#777" />
              </TouchableOpacity>

              <TouchableOpacity
                style={styles.settingItem}
                onPress={() => router.push("/profile/settings")}
              >
                <View style={styles.iconContainer}>
                  <Ionicons name="settings-outline" size={20} color="#E50012" />
                </View>
                <Text style={styles.settingText}>Genel ayarlar</Text>
                <Ionicons name="chevron-forward" size={22} color="#777" />
              </TouchableOpacity>

              <TouchableOpacity
                style={styles.settingItem}
                onPress={() => router.push("/profile/privacy")}
              >
                <View style={styles.iconContainer}>
                  <Ionicons
                    name="shield-checkmark-outline"
                    size={20}
                    color="#E50012"
                  />
                </View>
                <Text style={styles.settingText}>Gizlilik ve Güvenlik</Text>
                <Ionicons name="chevron-forward" size={22} color="#777" />
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.settingItem}
                onPress={handleSignOut}
              >
                <View style={styles.iconContainer}>
                  <Ionicons name="log-out-outline" size={20} color="#E50012" />
                </View>
                <Text style={styles.settingText}>Çıkış Yap</Text>
              </TouchableOpacity>

              <TouchableOpacity
                style={[styles.settingItem, styles.lastSettingItem]}
                onPress={() => router.push("/profile/delete")}
              >
                <View style={styles.iconContainer}>
                  <Ionicons name="trash-outline" size={20} color="#E50012" />
                </View>
                <Text style={styles.settingText}>Hesabınızı Silin</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </ScrollView>

      <BottomNavigation activeTab="profile" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    ...FLEX.fill,
    backgroundColor: "#F5F5F5",
  },
  scrollView: {
    flex: 1,
    backgroundColor: "#F5F5F5",
  },
  sectionContent: {
    paddingBottom: 60,
    marginTop: 20,
  },
  section: {
    marginBottom: 30,
    paddingHorizontal: 20,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: "700",
    color: "#000",
    marginBottom: 15,
  },
  infoContainer: {
    backgroundColor: "#FFFFFF",
    borderRadius: 12,
    paddingVertical: 8,
  },
  infoItem: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 16,
    paddingHorizontal: 16,
    borderBottomWidth: 1,
    borderBottomColor: "#F0F0F0",
  },
  iconContainer: {
    width: 40,
    height: 40,
    borderRadius: 8,
    backgroundColor:COLOR_SCALES.primary[10],
    alignItems: "center",
    justifyContent: "center",
    marginRight: 12,
  },
  infoText: {
    fontSize: 16,
    color: "#333",
    flex: 1,
  },
  settingsContainer: {
    backgroundColor: "#FFFFFF",
    borderRadius: 12,
    paddingVertical: 8,
  },
  settingItem: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 16,
    paddingHorizontal: 16,
    borderBottomWidth: 1,
    borderBottomColor: "#F0F0F0",
  },
  lastSettingItem: {
    borderBottomWidth: 0,
  },
  settingText: {
    fontSize: 16,
    color: "#333",
    flex: 1,
    marginLeft: 12,
  },
});