chefhai/app/(tabs)/home.tsx

import { IconSymbol } from "@/components/ui/IconSymbol";
import { getFoods, insertGenAIResult } from "@/services/data/foods";
import { uploadImageToSupabase } from "@/services/data/imageUpload";
import { callGenAIonImage } from "@/services/gemini";
import { supabase } from "@/services/supabase";
import { Feather, FontAwesome, Ionicons } from "@expo/vector-icons";
import { useQuery } from "@tanstack/react-query";
import * as FileSystem from "expo-file-system";
import * as ImagePicker from "expo-image-picker";
import { router } from "expo-router";
import React, { useMemo, useState } from "react";
import {
  Alert,
  Image,
  SafeAreaView,
  ScrollView,
  StatusBar,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";

const useFoodsQuery = () => {
  return useQuery({
    queryKey: ["highlight-foods"],
    queryFn: async () => {
      const { data, error } = await getFoods(undefined, true, undefined, 4);
      if (error) throw error;
      return data || [];
    },
    staleTime: 1000 * 60 * 5,
  });
};

const runImagePipeline = async (
  imageBase64: string,
  imageType: string,
  userId: string
) => {
  const imageUri = await uploadImageToSupabase(imageBase64, imageType, userId);
  const genAIResult = await callGenAIonImage(imageUri);
  if (genAIResult.error) throw genAIResult.error;
  const { data: genAIResultData } = genAIResult;
  if (!genAIResultData) throw new Error("GenAI result is null");
  await insertGenAIResult(genAIResultData, userId, imageUri);
};

const processImage = async (
  asset: ImagePicker.ImagePickerAsset,
  userId: string
) => {
  const base64 = await FileSystem.readAsStringAsync(asset.uri, {
    encoding: "base64",
  });
  const imageType = asset.mimeType || "image/jpeg";
  await runImagePipeline(base64, imageType, userId);
};

const navigateToFoodDetail = (foodId: string) => {
  router.push({ pathname: "/recipe-detail", params: { id: foodId } });
};

const handleImageSelection = async (
  pickerFn:
    | typeof ImagePicker.launchCameraAsync
    | typeof ImagePicker.launchImageLibraryAsync
) => {
  const result = await pickerFn({
    mediaTypes: ["images"],
    allowsEditing: true,
    aspect: [1, 1],
    quality: 1,
  });

  if (!result.canceled) {
    try {
      const { data, error } = await supabase.auth.getUser();
      if (error || !data?.user?.id) throw new Error("Cannot get user id");
      const userId = data.user.id;
      await processImage(result.assets[0], userId);
    } catch (err) {
      Alert.alert(
        "Image Processing Failed",
        (err as Error).message || "Unknown error"
      );
    }
    router.push({
      pathname: "/recipe-detail",
      params: {
        title: "My New Recipe",
        image: result.assets[0].uri,
      },
    });
  }
};

export default function HomeScreen() {
  const [searchQuery, setSearchQuery] = useState("");
  const { data: foodsData = [], isLoading, error } = useFoodsQuery();

  const filteredFoods = useMemo(() => {
    return searchQuery
      ? foodsData.filter((food) =>
          food.name.toLowerCase().includes(searchQuery.toLowerCase())
        )
      : foodsData;
  }, [foodsData, searchQuery]);

  return (
    <SafeAreaView className="flex-1 bg-white">
      <StatusBar barStyle="dark-content" />

      <View className="flex-row justify-between items-center px-6 pt-4 pb-2">
        <Text className="text-3xl font-bold">Hi! Mr. Chef</Text>
        <View className="bg-[#ffd60a] p-3 rounded-lg">
          <Ionicons name="settings-outline" size={24} color="black" />
        </View>
      </View>

      <ScrollView
        className="flex-1"
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: 100 }}
      >
        <View className="px-6 mb-6">
          <View className="flex-row items-center mb-4">
            <Text className="text-2xl font-bold mr-2">Show your dishes</Text>
            <Feather name="wifi" size={20} color="black" />
          </View>

          <View className="bg-white border border-gray-300 rounded-full mb-6 flex-row items-center px-4 py-3">
            <TextInput
              className="flex-1"
              placeholder="Search..."
              value={searchQuery}
              onChangeText={setSearchQuery}
            />
            <View className="bg-[#ffd60a] p-2 rounded-full">
              <Feather name="send" size={20} color="black" />
            </View>
          </View>

          <View className="flex-row justify-between">
            <TouchableOpacity
              className="bg-[#ffd60a] p-4 rounded-xl w-[48%]"
              onPress={async () => {
                const { status } =
                  await ImagePicker.requestCameraPermissionsAsync();
                if (status !== "granted") {
                  Alert.alert(
                    "Permission needed",
                    "Please grant camera permissions."
                  );
                  return;
                }
                await handleImageSelection(ImagePicker.launchCameraAsync);
              }}
            >
              <View className="items-center">
                <FontAwesome name="camera" size={24} color="black" />
                <Text className="text-lg font-bold mt-2">From Camera</Text>
                <Text className="text-sm text-gray-700">
                  Straight from Camera
                </Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity
              className="bg-[#f9be25] p-4 rounded-xl w-[48%]"
              onPress={async () => {
                const { status } =
                  await ImagePicker.requestMediaLibraryPermissionsAsync();
                if (status !== "granted") {
                  Alert.alert(
                    "Permission needed",
                    "Please grant gallery permissions."
                  );
                  return;
                }
                await handleImageSelection(ImagePicker.launchImageLibraryAsync);
              }}
            >
              <View className="items-center">
                <Feather name="image" size={24} color="black" />
                <Text className="text-lg font-bold mt-2">From Gallery</Text>
                <Text className="text-sm text-gray-700">
                  Straight from Gallery
                </Text>
              </View>
            </TouchableOpacity>
          </View>

          <View className="px-6 mb-6">
            <View className="flex-row items-center mb-4">
              <Text className="text-2xl font-bold mr-2">Highlights</Text>
              <Ionicons name="star-outline" size={20} color="#bb0718" />
            </View>
            {isLoading ? (
              <Text className="text-center text-gray-500">
                Loading highlights...
              </Text>
            ) : error ? (
              <Text className="text-center text-red-600">
                Failed to load highlights
              </Text>
            ) : filteredFoods.length === 0 ? (
              <Text className="text-center text-gray-400">
                No highlights available
              </Text>
            ) : (
              <View className="flex-row justify-between">
                {filteredFoods.map((food, idx) => (
                  <TouchableOpacity
                    key={food.id}
                    className="bg-white rounded-xl shadow-md flex-1 mr-4"
                    style={{
                      marginRight: idx === filteredFoods.length - 1 ? 0 : 12,
                    }}
                    onPress={() => navigateToFoodDetail(food.id)}
                  >
                    {food.image_url ? (
                      <Image
                        source={{ uri: food.image_url }}
                        className="w-full h-32 rounded-t-xl"
                        resizeMode="cover"
                      />
                    ) : (
                      <View className="w-full h-32 rounded-t-xl bg-gray-200 items-center justify-center">
                        <Text className="text-gray-400">No Image</Text>
                      </View>
                    )}
                    <View className="flex-1 p-3 justify-between">
                      <Text
                        className="text-base font-bold text-[#333] mb-1"
                        numberOfLines={1}
                      >
                        {food.name}
                      </Text>
                      <Text
                        className="text-sm text-[#666] mb-2"
                        numberOfLines={1}
                      >
                        {food.description || "No description"}
                      </Text>
                      <View className="flex-row justify-between">
                        <View className="flex-row items-center">
                          <IconSymbol name="clock" size={12} color="#666" />
                          <Text className="text-xs text-[#666] ml-1">
                            {food.time_to_cook_minutes
                              ? `${food.time_to_cook_minutes} min`
                              : "-"}
                          </Text>
                        </View>
                      </View>
                    </View>
                  </TouchableOpacity>
                ))}
              </View>
            )}
          </View>
        </View>
        {/* Extra space at bottom */}
        <View className="h-20"></View>
      </ScrollView>
    </SafeAreaView>
  );
}