"use client"

import { useAuth } from "@/context/auth-context"
import { getFoods } from "@/services/data/foods"
import { getBookmarkedPosts } from "@/services/data/bookmarks"
import { getLikedPosts } from "@/services/data/likes"
import { getProfile, updateProfile } from "@/services/data/profile"
import { supabase } from "@/services/supabase"
import { useIsFocused, useNavigation } from "@react-navigation/native"
import { useQuery, useQueryClient } from "@tanstack/react-query"
import * as ImagePicker from "expo-image-picker"
import { useEffect, useState } from "react"
import {
  ActivityIndicator,
  Image,
  Modal,
  Pressable,
  ScrollView,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native"
import { SafeAreaView } from "react-native-safe-area-context"
import uuid from "react-native-uuid"

// Define the Food type based on your database structure
type Food = {
  id: number
  name: string
  description: string
  time_to_cook_minutes: number
  skill_level: string
  ingredient_count: number
  calories: number
  image_url: string
  is_shared: boolean
  created_by: string
  created_at: string
}

export default function ProfileScreen() {
  const [activeTab, setActiveTab] = useState("My Recipes")
  const { isAuthenticated } = useAuth()
  const isFocused = useIsFocused()
  const queryClient = useQueryClient()
  const navigation = useNavigation()

  const {
    data: userData,
    isLoading: isUserLoading,
    error: userError,
  } = useQuery({
    queryKey: ["auth-user"],
    queryFn: async () => {
      const { data, error } = await supabase.auth.getUser()
      if (error) throw error
      return data?.user
    },
    enabled: isAuthenticated,
    staleTime: 0,
  })
  const userId = userData?.id

  const {
    data: profileData,
    error,
    isLoading,
  } = useQuery({
    queryKey: ["profile", userId],
    queryFn: async () => {
      if (!userId) throw new Error("No user id")
      return getProfile(userId)
    },
    enabled: !!userId,
    staleTime: 0,
    subscribed: isFocused,
  })

  // My Recipes Query
  const {
    data: myRecipesData,
    isLoading: isMyRecipesLoading,
    error: myRecipesError,
    refetch: refetchMyRecipes,
  } = useQuery({
    queryKey: ["my-recipes", userId],
    queryFn: async () => {
      if (!userId) throw new Error("No user id")
      return getFoods(userId)
    },
    enabled: !!userId,
    staleTime: 1000 * 60, // 1 minute
  })

  // Likes Query
  const {
    data: likesData,
    isLoading: isLikesLoading,
    error: likesError,
    refetch: refetchLikes,
  } = useQuery({
    queryKey: ["liked-posts", userId],
    queryFn: async () => {
      if (!userId) throw new Error("No user id")
      return getLikedPosts(userId)
    },
    enabled: !!userId,
    staleTime: 1000 * 60, // 1 minute
  })

  // Bookmarks Query
  const {
    data: bookmarksData,
    isLoading: isBookmarksLoading,
    error: bookmarksError,
    refetch: refetchBookmarks,
  } = useQuery({
    queryKey: ["bookmarked-posts", userId],
    queryFn: async () => {
      if (!userId) throw new Error("No user id")
      return getBookmarkedPosts(userId)
    },
    enabled: !!userId,
    staleTime: 1000 * 60, // 1 minute
  })

  // Navigate to post detail
  const handleFoodPress = (foodId: number) => {
    // @ts-ignore - Navigation typing might be different in your app
    navigation.navigate("post-detail", { id: foodId })
  }

  // Refetch data when tab changes
  const handleTabChange = (tab: string) => {
    setActiveTab(tab)

    // Refetch data for the selected tab
    if (tab === "My Recipes") {
      refetchMyRecipes()
    } else if (tab === "Likes") {
      refetchLikes()
    } else if (tab === "Bookmarks") {
      refetchBookmarks()
    }
  }

  // Refetch all data when the screen comes into focus
  useEffect(() => {
    if (isFocused && userId) {
      refetchMyRecipes()
      refetchLikes()
      refetchBookmarks()
    }
  }, [isFocused, userId])

  const [modalVisible, setModalVisible] = useState(false)
  const [editUsername, setEditUsername] = useState("")
  const [editImage, setEditImage] = useState<string | null>(null)
  const [editLoading, setEditLoading] = useState(false)
  const [editError, setEditError] = useState<string | null>(null)

  const pickImage = async () => {
    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync()
    if (status !== "granted") {
      setEditError("Permission to access media library is required.")
      return
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ["images"],
      quality: 0.7,
      allowsEditing: true,
    })

    if (!result.canceled) {
      setEditImage(result.assets[0].uri)
    }
  }

  const uploadImageToSupabase = async (uri: string): Promise<string> => {
    const fileName = `${userId}/${uuid.v4()}.jpg`
    const response = await fetch(uri)
    const blob = await response.blob()

    const { error: uploadError } = await supabase.storage.from("avatars").upload(fileName, blob, {
      contentType: "image/jpeg",
      upsert: true,
    })

    if (uploadError) throw uploadError

    const { data } = supabase.storage.from("avatars").getPublicUrl(fileName)
    return data.publicUrl
  }

  const handleSaveProfile = async () => {
    setEditLoading(true)
    setEditError(null)

    try {
      if (!editUsername.trim()) throw new Error("Username cannot be empty")

      let avatarUrl = profileData?.data?.avatar_url ?? null

      if (editImage && editImage !== avatarUrl) {
        avatarUrl = await uploadImageToSupabase(editImage)
      }

      const { error: updateError } = await updateProfile(userId!, editUsername.trim(), avatarUrl)
      if (updateError) throw updateError

      setModalVisible(false)
      await queryClient.invalidateQueries({ queryKey: ["profile", userId] })
    } catch (err: any) {
      setEditError(err.message || "Failed to update profile")
    } finally {
      setEditLoading(false)
    }
  }

  // Get the active data based on the current tab
  const getActiveData = () => {
    switch (activeTab) {
      case "My Recipes":
        return { data: myRecipesData, isLoading: isMyRecipesLoading, error: myRecipesError }
      case "Likes":
        return { data: likesData, isLoading: isLikesLoading, error: likesError }
      case "Bookmarks":
        return { data: bookmarksData, isLoading: isBookmarksLoading, error: bookmarksError }
      default:
        return { data: myRecipesData, isLoading: isMyRecipesLoading, error: myRecipesError }
    }
  }

  const { data: activeData, isLoading: isActiveLoading, error: activeError } = getActiveData()

  if (isUserLoading) {
    return (
      <SafeAreaView className="flex-1 justify-center items-center bg-white">
        <ActivityIndicator size="large" color="#bb0718" />
      </SafeAreaView>
    )
  }

  if (userError) {
    return (
      <SafeAreaView className="flex-1 justify-center items-center bg-white px-4">
        <Text className="text-red-600 font-bold text-center">{userError.message || "Failed to load user data."}</Text>
      </SafeAreaView>
    )
  }

  return (
    <SafeAreaView className="flex-1 bg-white" edges={["top"]}>
      <ScrollView className="flex-1">
        <View className="items-center py-6">
          <View className="w-[100px] h-[100px] rounded-full border border-gray-300 justify-center items-center mb-3 overflow-hidden">
            <Image
              source={
                profileData?.data?.avatar_url
                  ? { uri: profileData.data.avatar_url }
                  : require("@/assets/images/placeholder-food.jpg")
              }
              className="w-[96px] h-[96px] rounded-full"
            />
          </View>
          {isLoading ? (
            <ActivityIndicator size="small" color="#bb0718" />
          ) : error ? (
            <Text className="text-red-600 font-bold mb-3">{error.message || error.toString()}</Text>
          ) : (
            <Text className="text-xl font-bold mb-3">{profileData?.data?.username ?? "-"}</Text>
          )}
          <TouchableOpacity
            className="bg-red-600 py-2 px-10 rounded-lg"
            onPress={() => {
              setEditUsername(profileData?.data?.username ?? "")
              setEditImage(profileData?.data?.avatar_url ?? null)
              setEditError(null)
              setModalVisible(true)
            }}
          >
            <Text className="text-white font-bold">Edit</Text>
          </TouchableOpacity>

          {/* Edit Modal */}
          <Modal visible={modalVisible} animationType="slide" transparent onRequestClose={() => setModalVisible(false)}>
            <View className="flex-1 justify-center items-center bg-black bg-opacity-40">
              <View className="bg-white rounded-xl p-6 w-11/12 max-w-md shadow-lg">
                <Text className="text-lg font-bold mb-4 text-center">Edit Profile</Text>

                <Pressable className="items-center mb-4" onPress={pickImage}>
                  <Image
                    source={editImage ? { uri: editImage } : require("@/assets/images/placeholder-food.jpg")}
                    className="w-24 h-24 rounded-full mb-2 bg-gray-200"
                  />
                  <Text className="text-blue-600 underline">Change Photo</Text>
                </Pressable>

                <Text className="mb-1 font-medium">Username</Text>
                <TextInput
                  className="border border-gray-300 rounded px-3 py-2 mb-4"
                  value={editUsername}
                  onChangeText={setEditUsername}
                  placeholder="Enter new username"
                />
                {editError && <Text className="text-red-600 mb-2 text-center">{editError}</Text>}

                <View className="flex-row justify-between mt-2">
                  <TouchableOpacity
                    className="bg-gray-300 py-2 px-6 rounded-lg"
                    onPress={() => setModalVisible(false)}
                    disabled={editLoading}
                  >
                    <Text className="text-gray-700 font-bold">Cancel</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    className="bg-red-600 py-2 px-6 rounded-lg"
                    onPress={handleSaveProfile}
                    disabled={editLoading}
                  >
                    {editLoading ? (
                      <ActivityIndicator size="small" color="#fff" />
                    ) : (
                      <Text className="text-white font-bold">Save</Text>
                    )}
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          </Modal>
        </View>

        {/* Tab Navigation */}
        <View className="flex-row justify-around py-3 border-b border-gray-200">
          {["My Recipes", "Likes", "Bookmarks"].map((tab) => (
            <TouchableOpacity
              key={tab}
              className={`py-2 px-4 ${activeTab === tab ? "border-b-2 border-[#333]" : ""}`}
              onPress={() => handleTabChange(tab)}
            >
              <Text className={`font-medium ${activeTab === tab ? "font-bold" : ""}`}>{tab}</Text>
            </TouchableOpacity>
          ))}
        </View>

        {/* Tab Content */}
        {isActiveLoading ? (
          <View className="flex-1 items-center justify-center py-8">
            <ActivityIndicator size="small" color="#bb0718" />
          </View>
        ) : activeError ? (
          <View className="flex-1 items-center justify-center py-8">
            <Text className="text-red-600 font-bold text-center">{activeError.message || "Failed to load data"}</Text>
          </View>
        ) : !activeData?.data?.length ? (
          <View className="flex-1 items-center justify-center py-8">
            <Text className="text-gray-400 font-medium text-center">No items found</Text>
          </View>
        ) : (
          <View className="flex-row flex-wrap p-2">
            {activeData.data.map((item: Food) => (
              <TouchableOpacity
                key={item.id}
                className="w-1/2 p-2 relative"
                onPress={() => handleFoodPress(item.id)}
                activeOpacity={0.7}
              >
                <Image
                  source={item.image_url ? { uri: item.image_url } : require("@/assets/images/placeholder-food.jpg")}
                  className="w-full h-[120px] rounded-lg"
                />
                <View className="absolute bottom-4 left-4 py-1 px-2 rounded bg-opacity-90 bg-white/80">
                  <Text className="text-[#333] font-bold text-xs">{item.name}</Text>
                </View>
              </TouchableOpacity>
            ))}
          </View>
        )}
      </ScrollView>
    </SafeAreaView>
  )
}