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

export default function ProfileScreen() {
  
  const [userData, setUserData] = useState(null);
  const [cities, setCities] = useState([]);

  const getUsers = async () => {
    try {
      const response = await getProfile();
      if (response.success) {
        setUserData(response?.data?.user);
      } else {
        console.log(response.message);
      }
    } catch (error) {
      console.error("Kullanıcılar yüklenirken hata:", error);
    }
  };

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

  const handleSignOut = async () => {
    try {
      try {
        const RevenueCatServiceModule = require("@/services/revenueCat");
        const RC =
          RevenueCatServiceModule?.logOutUser
            ? RevenueCatServiceModule
            : RevenueCatServiceModule?.default;
        await RC?.logOutUser?.();
      } catch (_) {}

      // Tüm SecureStore verilerini sil
      await SecureStore.deleteItemAsync("accessToken");
      await SecureStore.deleteItemAsync("token");
      await SecureStore.deleteItemAsync("user");
      await SecureStore.deleteItemAsync("refreshToken");
      await SecureStore.deleteItemAsync("userData");
      await SecureStore.deleteItemAsync("email");
      await SecureStore.deleteItemAsync("userId");

      // Login sayfasına yönlendir
      router.push("/login");
    } catch (error) {
      console.error("Çıkış yapılırken hata oluştu:", error);
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <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,
  },
});