"use client"

import { useState, useEffect, useRef } from "react"
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  ScrollView,
  ActivityIndicator,
  FlatList,
  Alert,
  TextInput,
  KeyboardAvoidingView,
  Platform,
  Keyboard,
} from "react-native"
import { Feather, MaterialCommunityIcons, Ionicons } from "@expo/vector-icons"
import { useLocalSearchParams, router } from "expo-router"
import { useAuth } from "../../context/auth-context"
import { supabase } from "../../services/supabase"
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import {
  getComments,
  createComment,
  getLikesCount,
  getSavesCount,
  getCommentsCount,
  checkUserLiked,
  checkUserSaved,
} from "../../services/data/forum"
import { getProfile } from "../../services/data/profile"
import { queryKeys, useLikeMutation, useSaveMutation } from "../../hooks/use-foods"
import { updateFoodSharing, deleteFood } from "../../services/data/foods"

function MenuButton({ food, currentUserId }: { food: any; currentUserId: string | null }) {
  const [menuVisible, setMenuVisible] = useState(false)
  const queryClient = useQueryClient()

  const isOwner = currentUserId && food.created_by === currentUserId

  const updateSharingMutation = useMutation({
    mutationFn: async ({ foodId, isShared }: { foodId: string; isShared: boolean }) => {
      const { error } = await updateFoodSharing(foodId, isShared)
      if (error) throw error
      return { success: true }
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["food", food.id] })
      Alert.alert("Success", `Food is now ${!food.is_shared ? "public" : "private"}`)
      setMenuVisible(false)
    },
    onError: (error) => {
      console.error("Error updating sharing status:", error)
      Alert.alert("Error", "Failed to update sharing status")
    },
  })

  const deleteFoodMutation = useMutation({
    mutationFn: async (foodId: string) => {
      const { error } = await deleteFood(foodId)
      if (error) throw error
      return { success: true }
    },
    onSuccess: () => {
      router.back()
      queryClient.invalidateQueries({ queryKey: ["my-recipes", currentUserId] })
      Alert.alert("Success", "Food deleted successfully")
    },
    onError: (error) => {
      console.error("Error deleting food:", error)
      Alert.alert("Error", "Failed to delete food")
    },
  })

  const handleToggleSharing = () => {
    if (!isOwner) {
      Alert.alert("Permission Denied", "You can only modify your own posts")
      return
    }

    updateSharingMutation.mutate({
      foodId: food.id,
      isShared: !food.is_shared,
    })
  }

  const handleDelete = () => {
    if (!isOwner) {
      Alert.alert("Permission Denied", "You can only delete your own posts")
      return
    }

    Alert.alert("Confirm Delete", "Are you sure you want to delete this post? This action cannot be undone.", [
      { text: "Cancel", style: "cancel" },
      {
        text: "Delete",
        style: "destructive",
        onPress: () => deleteFoodMutation.mutate(food.id),
      },
    ])
  }

  const handleNavigateToFood = () => {
    router.push(`/food/${food.id}`)
    setMenuVisible(false)
  }

  return (
    <View>
      <TouchableOpacity className="p-3 rounded-lg" onPress={() => setMenuVisible(!menuVisible)}>
        <Feather name="more-horizontal" size={24} color="#000" />
      </TouchableOpacity>

      {menuVisible && (
        <View className="absolute top-12 right-0 bg-white rounded-lg shadow-md z-10 w-48">
          <TouchableOpacity
            className="flex-row items-center px-4 py-3 border-b border-gray-100"
            onPress={handleToggleSharing}
          >
            <Feather name={food.is_shared ? "eye-off" : "eye"} size={18} color="#333" />
            <Text className="ml-2">{food.is_shared ? "Make Private" : "Make Public"}</Text>
          </TouchableOpacity>

          <TouchableOpacity
            className="flex-row items-center px-4 py-3 border-b border-gray-100"
            onPress={handleNavigateToFood}
          >
            <Feather name="external-link" size={18} color="#333" />
            <Text className="ml-2">View Recipe</Text>
          </TouchableOpacity>

          {isOwner && (
            <TouchableOpacity className="flex-row items-center px-4 py-3" onPress={handleDelete}>
              <Feather name="trash-2" size={18} color="#E91E63" />
              <Text className="ml-2 text-[#E91E63]">Delete</Text>
            </TouchableOpacity>
          )}
        </View>
      )}
    </View>
  )
}

export default function PostDetailScreen() {
  const params = useLocalSearchParams()
  const foodId = typeof params.id === "string" ? params.id : ""
  const queryClient = useQueryClient()
  const scrollViewRef = useRef<ScrollView>(null)

  console.log("Post detail screen - Food ID:", foodId)

  const { isAuthenticated } = useAuth()
  const [currentUserId, setCurrentUserId] = useState<string | null>(null)
  const [commentText, setCommentText] = useState("")
  const [submittingComment, setSubmittingComment] = useState(false)
  const [showReviews, setShowReviews] = useState(true)
  const [keyboardVisible, setKeyboardVisible] = useState(false)

  // Listen for keyboard events
  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener("keyboardDidShow", () => {
      setKeyboardVisible(true)
      // Scroll to bottom when keyboard appears
      setTimeout(() => {
        scrollViewRef.current?.scrollToEnd({ animated: true })
      }, 100)
    })

    const keyboardDidHideListener = Keyboard.addListener("keyboardDidHide", () => {
      setKeyboardVisible(false)
    })

    return () => {
      keyboardDidShowListener.remove()
      keyboardDidHideListener.remove()
    }
  }, [])

  // Recipe info cards data
  const recipeInfoCards = [
    {
      id: "cooking_time",
      title: "Cooking Time",
      icon: (
        <View style={{ backgroundColor: "#ffd60a", padding: 8, borderRadius: 16 }}>
          <Feather name="clock" size={18} color="#bb0718" />
        </View>
      ),
      value: (food: any) => food.time_to_cook_minutes,
      unit: (food: any) => (food.time_to_cook_minutes === 1 ? "minute" : "minutes"),
      gradient: ["#fff8e1", "#fffde7"],
      valueColor: "#bb0718",
    },
    {
      id: "skill_level",
      title: "Skill Level",
      icon: (
        <View style={{ backgroundColor: "#4CAF50", padding: 8, borderRadius: 16 }}>
          <MaterialCommunityIcons name="chef-hat" size={18} color="white" />
        </View>
      ),
      value: (food: any) => food.skill_level,
      unit: () => "",
      gradient: ["#e8f5e9", "#f1f8e9"],
      valueColor: "",
      customContent: (food: any) => (
        <View>
          <Text style={{ fontSize: 20, fontWeight: "bold", color: getSkillLevelColor(food.skill_level) }}>
            {food.skill_level}
          </Text>
          {renderSkillLevelDots(food.skill_level)}
        </View>
      ),
    },
    {
      id: "ingredients",
      title: "Ingredients",
      icon: (
        <View style={{ backgroundColor: "#2196F3", padding: 8, borderRadius: 16 }}>
          <Feather name="list" size={18} color="white" />
        </View>
      ),
      value: (food: any) => food.ingredient_count,
      unit: (food: any) => (food.ingredient_count === 1 ? "item" : "items"),
      gradient: ["#e3f2fd", "#e8f5e9"],
      valueColor: "#2196F3",
    },
    {
      id: "calories",
      title: "Calories",
      icon: (
        <View style={{ backgroundColor: "#F44336", padding: 8, borderRadius: 16 }}>
          <Ionicons name="flame" size={18} color="white" />
        </View>
      ),
      value: (food: any) => food.calories,
      unit: () => "kcal",
      gradient: ["#ffebee", "#fff8e1"],
      valueColor: "#F44336",
    },
  ]

  // Get current user ID from Supabase session
  useEffect(() => {
    async function getCurrentUser() {
      if (isAuthenticated) {
        const { data } = await supabase.auth.getSession()
        const userId = data.session?.user?.id
        console.log("Current user ID:", userId)
        setCurrentUserId(userId || null)
      } else {
        setCurrentUserId(null)
      }
    }

    getCurrentUser()
  }, [isAuthenticated])

  // Fetch food details
  const {
    data: food,
    isLoading: isLoadingFood,
    error: foodError,
  } = useQuery({
    queryKey: queryKeys.foodDetails(foodId),
    queryFn: async () => {
      const { data, error } = await supabase.from("foods").select("*").eq("id", foodId).single()

      if (error) throw error

      return {
        ...data,
        description: data.description || "",
        ingredient_count: data.ingredient_count ?? 0,
        calories: data.calories ?? 0,
        time_to_cook_minutes: data.time_to_cook_minutes ?? 0,
        skill_level: data.skill_level || "Easy",
        image_url: data.image_url || "",
      }
    },
    enabled: !!foodId,
  })

  // Fetch food creator
  const { data: foodCreator, isLoading: isLoadingCreator } = useQuery({
    queryKey: ["food-creator", food?.created_by],
    queryFn: async () => {
      if (!food?.created_by) return null

      const { data, error } = await getProfile(food.created_by)

      if (error) throw error

      return data
    },
    enabled: !!food?.created_by,
  })

  // Fetch food stats
  const {
    data: stats = { likes: 0, saves: 0, comments: 0 },
    isLoading: isLoadingStats,
    refetch: refetchStats,
  } = useQuery({
    queryKey: ["food-stats", foodId],
    queryFn: async () => {
      const [likesRes, savesRes, commentsRes] = await Promise.all([
        getLikesCount(foodId),
        getSavesCount(foodId),
        getCommentsCount(foodId),
      ])

      return {
        likes: likesRes.count || 0,
        saves: savesRes.count || 0,
        comments: commentsRes.count || 0,
      }
    },
    enabled: !!foodId,
  })

  // Fetch user interactions
  const {
    data: interactions = { liked: false, saved: false },
    isLoading: isLoadingInteractions,
    refetch: refetchInteractions,
  } = useQuery({
    queryKey: ["user-interactions", foodId, currentUserId],
    queryFn: async () => {
      if (!currentUserId) return { liked: false, saved: false }

      const [likedRes, savedRes] = await Promise.all([
        checkUserLiked(foodId, currentUserId),
        checkUserSaved(foodId, currentUserId),
      ])

      return {
        liked: !!likedRes.data,
        saved: !!savedRes.data,
      }
    },
    enabled: !!foodId && !!currentUserId,
  })

  // Fetch comments
  const {
    data: comments = [],
    isLoading: isLoadingComments,
    refetch: refetchComments,
  } = useQuery({
    queryKey: queryKeys.foodComments(foodId),
    queryFn: async () => {
      const { data, error } = await getComments(foodId)

      if (error) throw error

      return data || []
    },
    enabled: !!foodId,
  })

  // Set up mutations
  const likeMutation = useLikeMutation()
  const saveMutation = useSaveMutation()

  const commentMutation = useMutation({
    mutationFn: async ({ foodId, userId, content }: { foodId: string; userId: string; content: string }) => {
      return createComment(foodId, userId, content)
    },
    onSuccess: () => {
      // Invalidate the comments for this specific food
      queryClient.invalidateQueries({ queryKey: queryKeys.foodComments(foodId) })

      // Invalidate the food stats for this food
      queryClient.invalidateQueries({ queryKey: ["food-stats", foodId] })

      // Also invalidate the general food stats that might be used in the forum screen
      queryClient.invalidateQueries({
        queryKey: ["food-stats", foodId],
        exact: false,
      })

      setCommentText("")
      Keyboard.dismiss()
    },
  })

  // Set up real-time subscription for comments
  useEffect(() => {
    if (!foodId) return

    console.log(`Setting up real-time subscription for comments on food_id: ${foodId}`)

    const subscription = supabase
      .channel(`food_comments:${foodId}`)
      .on(
        "postgres_changes",
        {
          event: "*",
          schema: "public",
          table: "food_comments",
          filter: `food_id=eq.${foodId}`,
        },
        () => {
          console.log("Comment change detected, refreshing comments")
          refetchComments()
          refetchStats()
        },
      )
      .subscribe()

    return () => {
      supabase.removeChannel(subscription)
    }
  }, [foodId, refetchComments, refetchStats])

  // Set up real-time subscription for likes and saves
  useEffect(() => {
    if (!foodId) return

    const likesSubscription = supabase
      .channel(`food_likes:${foodId}`)
      .on(
        "postgres_changes",
        {
          event: "*",
          schema: "public",
          table: "food_likes",
          filter: `food_id=eq.${foodId}`,
        },
        () => {
          console.log("Like change detected, refreshing stats and interactions")
          refetchStats()
          refetchInteractions()
        },
      )
      .subscribe()

    const savesSubscription = supabase
      .channel(`food_saves:${foodId}`)
      .on(
        "postgres_changes",
        {
          event: "*",
          schema: "public",
          table: "food_saves",
          filter: `food_id=eq.${foodId}`,
        },
        () => {
          console.log("Save change detected, refreshing stats and interactions")
          refetchStats()
          refetchInteractions()
        },
      )
      .subscribe()

    return () => {
      supabase.removeChannel(likesSubscription)
      supabase.removeChannel(savesSubscription)
    }
  }, [foodId, refetchStats, refetchInteractions])

  const handleLike = async () => {
    if (!isAuthenticated || !currentUserId || !food) {
      Alert.alert("Authentication Required", "Please log in to like posts.")
      return
    }

    try {
      likeMutation.mutate({
        foodId,
        userId: currentUserId,
        isLiked: interactions.liked,
      })
    } catch (error) {
      console.error("Error toggling like:", error)
      Alert.alert("Error", "Failed to update like. Please try again.")
    }
  }

  const handleSave = async () => {
    if (!isAuthenticated || !currentUserId || !food) {
      Alert.alert("Authentication Required", "Please log in to save posts.")
      return
    }

    try {
      saveMutation.mutate({
        foodId,
        userId: currentUserId,
        isSaved: interactions.saved,
      })
    } catch (error) {
      console.error("Error toggling save:", error)
      Alert.alert("Error", "Failed to update save. Please try again.")
    }
  }

  const handleSubmitComment = async () => {
    if (!isAuthenticated || !currentUserId || !foodId || !commentText.trim()) {
      if (!isAuthenticated || !currentUserId) {
        Alert.alert("Authentication Required", "Please log in to comment.")
      }
      return
    }

    setSubmittingComment(true)
    try {
      await commentMutation.mutateAsync({
        foodId,
        userId: currentUserId,
        content: commentText.trim(),
      })
    } catch (error) {
      console.error("Error submitting comment:", error)
      Alert.alert("Error", "Failed to submit comment. Please try again.")
    } finally {
      setSubmittingComment(false)
    }
  }

  // Helper function to get skill level color
  const getSkillLevelColor = (level: string) => {
    switch (level) {
      case "Easy":
        return "#4CAF50" // Green
      case "Medium":
        return "#FFC107" // Amber
      case "Hard":
        return "#F44336" // Red
      default:
        return "#4CAF50" // Default to green
    }
  }

  // Helper function to get skill level dots
  const renderSkillLevelDots = (level: string) => {
    const totalDots = 3
    let activeDots = 1

    if (level === "Medium") activeDots = 2
    if (level === "Hard") activeDots = 3

    return (
      <View style={{ flexDirection: "row", marginTop: 4 }}>
        {[...Array(totalDots)].map((_, i) => (
          <View
            key={i}
            style={{
              height: 8,
              width: 8,
              borderRadius: 4,
              marginRight: 4,
              backgroundColor: getSkillLevelColor(level),
              opacity: i < activeDots ? 1 : 0.3,
            }}
          />
        ))}
      </View>
    )
  }

  // Render recipe info card
  const renderRecipeInfoCard = ({ item }: { item: any }) => {
    if (!food) return null

    return (
      <View
        style={{
          backgroundColor: "#f8f8f8",
          borderRadius: 16,
          padding: 16,
          marginRight: 16,
          width: 160,
        }}
      >
        <View style={{ flexDirection: "row", alignItems: "center", marginBottom: 8 }}>
          {item.icon}
          <Text style={{ marginLeft: 8, fontWeight: "bold", color: "#505050" }}>{item.title}</Text>
        </View>
        {item.customContent ? (
          item.customContent(food)
        ) : (
          <View style={{ flexDirection: "row", alignItems: "baseline" }}>
            <Text style={{ fontSize: 24, fontWeight: "bold", color: item.valueColor }}>{item.value(food)}</Text>
            <Text style={{ marginLeft: 4, fontSize: 14, fontWeight: "500", color: "#606060" }}>{item.unit(food)}</Text>
          </View>
        )}
      </View>
    )
  }

  const isLoading = isLoadingFood || isLoadingCreator || isLoadingStats || isLoadingInteractions || isLoadingComments

  if (isLoading) {
    return (
      <View style={{ flex: 1, backgroundColor: "white" }}>
        <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
          <ActivityIndicator size="large" color="#ffd60a" />
        </View>
      </View>
    )
  }

  if (foodError || !food) {
    return (
      <View style={{ flex: 1, backgroundColor: "white" }}>
        <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
          <Text style={{ fontSize: 18 }}>Post not found</Text>
          <TouchableOpacity
            style={{
              marginTop: 16,
              backgroundColor: "#ffd60a",
              paddingHorizontal: 24,
              paddingVertical: 12,
              borderRadius: 8,
            }}
            onPress={() => router.back()}
          >
            <Text style={{ fontWeight: "bold" }}>Go Back</Text>
          </TouchableOpacity>
        </View>
      </View>
    )
  }

  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.OS === "ios" ? "padding" : undefined}
      keyboardVerticalOffset={Platform.OS === "ios" ? 90 : 0}
    >
      <View style={{ flex: 1, backgroundColor: "white" }}>
        <ScrollView
          ref={scrollViewRef}
          style={{ flex: 1 }}
          contentContainerStyle={{ paddingBottom: keyboardVisible ? 120 : 20 }}
        >
          {/* Fixed Header */}
          <View className="flex-row items-center justify-between px-4 py-3 mt-11">
            <TouchableOpacity className="bg-[#ffd60a] p-3 rounded-lg" onPress={() => router.back()}>
              <Feather name="arrow-left" size={24} color="#bb0718" />
            </TouchableOpacity>

            <Text className="text-2xl font-bold">Post</Text>

            <MenuButton food={food} currentUserId={currentUserId} />
          </View>

          {/* User info */}
          <View style={{ flexDirection: "row", alignItems: "center", paddingHorizontal: 16, paddingVertical: 12 }}>
            <View style={{ width: 48, height: 48, backgroundColor: "#e0e0e0", borderRadius: 24, overflow: "hidden" }}>
              {foodCreator?.avatar_url ? (
                <Image source={{ uri: foodCreator.avatar_url }} style={{ width: "100%", height: "100%" }} />
              ) : (
                <View
                  style={{
                    width: "100%",
                    height: "100%",
                    backgroundColor: "#d0d0d0",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  <Text style={{ fontSize: 18, fontWeight: "bold", color: "#606060" }}>
                    {foodCreator?.username?.charAt(0).toUpperCase() || food.created_by?.charAt(0).toUpperCase() || "?"}
                  </Text>
                </View>
              )}
            </View>
            <Text style={{ marginLeft: 12, fontSize: 18, fontWeight: "bold" }}>
              {foodCreator?.username || foodCreator?.full_name || "Chef"}
            </Text>
          </View>

          {/* Food image */}
          <View style={{ paddingHorizontal: 16, marginBottom: 16 }}>
            <Image
              source={{ uri: food.image_url || "/vibrant-food-dish.png" }}
              style={{ width: "100%", height: 256, borderRadius: 16 }}
              resizeMode="cover"
            />
          </View>

          {/* Food title and description */}
          <View style={{ paddingHorizontal: 16, marginBottom: 8 }}>
            <Text style={{ fontSize: 30, fontWeight: "bold", marginBottom: 8 }}>{food.name}</Text>
            <Text style={{ color: "#505050", marginBottom: 8, fontSize: 16, lineHeight: 24 }}>{food.description}</Text>
            <Text style={{ color: "#808080", fontSize: 14 }}>
              {new Date(food.created_at).toLocaleDateString()} -{" "}
              {new Date(food.created_at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
            </Text>
          </View>

          {/* Recipe Info Cards - Horizontal Scrollable */}
          <View style={{ paddingVertical: 16 }}>
            <Text style={{ paddingHorizontal: 16, fontSize: 20, fontWeight: "bold", marginBottom: 12 }}>
              Recipe Details
            </Text>
            <FlatList
              horizontal
              showsHorizontalScrollIndicator={false}
              data={recipeInfoCards}
              renderItem={renderRecipeInfoCard}
              keyExtractor={(item) => item.id}
              contentContainerStyle={{ paddingLeft: 16, paddingRight: 8 }}
            />
          </View>

          {/* Interaction buttons */}
          <View
            style={{
              flexDirection: "row",
              paddingHorizontal: 16,
              paddingVertical: 16,
              borderBottomWidth: 1,
              borderBottomColor: "#e0e0e0",
            }}
          >
            <TouchableOpacity
              style={{
                flexDirection: "row",
                alignItems: "center",
                backgroundColor: "#f0f0f0",
                paddingHorizontal: 16,
                paddingVertical: 8,
                borderRadius: 24,
              }}
              onPress={handleLike}
            >
              <Feather
                name={interactions.liked ? "heart" : "heart"}
                size={22}
                color={interactions.liked ? "#E91E63" : "#333"}
              />
              <Text style={{ marginLeft: 8, fontSize: 18, fontWeight: "500" }}>{stats.likes}</Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={{
                flexDirection: "row",
                alignItems: "center",
                backgroundColor: "#f0f0f0",
                paddingHorizontal: 16,
                paddingVertical: 8,
                borderRadius: 24,
                marginLeft: 16,
              }}
              onPress={handleSave}
            >
              <Feather name="bookmark" size={22} color={interactions.saved ? "#ffd60a" : "#333"} />
              <Text style={{ marginLeft: 8, fontSize: 18, fontWeight: "500" }}>Save</Text>
            </TouchableOpacity>
          </View>

          {/* Reviews section */}
          <TouchableOpacity
            style={{
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "space-between",
              paddingHorizontal: 16,
              paddingVertical: 16,
              borderBottomWidth: 1,
              borderBottomColor: "#e0e0e0",
            }}
            onPress={() => setShowReviews(!showReviews)}
          >
            <View style={{ flexDirection: "row", alignItems: "center" }}>
              <Text style={{ fontSize: 20, fontWeight: "bold" }}>Reviews</Text>
              <View
                style={{
                  marginLeft: 8,
                  backgroundColor: "#ffd60a",
                  paddingHorizontal: 8,
                  paddingVertical: 4,
                  borderRadius: 12,
                }}
              >
                <Text style={{ fontSize: 12, fontWeight: "bold", color: "#bb0718" }}>{stats.comments}</Text>
              </View>
            </View>
            <Feather name={showReviews ? "chevron-up" : "chevron-down"} size={20} color="#333" />
          </TouchableOpacity>

          {showReviews && (
            <View style={{ paddingHorizontal: 16, paddingVertical: 8 }}>
              {comments.length > 0 ? (
                comments.map((comment) => (
                  <View key={comment.id} style={{ paddingVertical: 16 }}>
                    <View style={{ flexDirection: "row" }}>
                      {/* Profile picture */}
                      <View
                        style={{
                          width: 40,
                          height: 40,
                          backgroundColor: "#e0e0e0",
                          borderRadius: 20,
                          overflow: "hidden",
                        }}
                      >
                        {comment.user?.avatar_url ? (
                          <Image source={{ uri: comment.user.avatar_url }} style={{ width: "100%", height: "100%" }} />
                        ) : (
                          <View
                            style={{
                              width: "100%",
                              height: "100%",
                              backgroundColor: "#ffd60a",
                              alignItems: "center",
                              justifyContent: "center",
                            }}
                          >
                            <Text style={{ fontSize: 16, fontWeight: "bold", color: "white" }}>
                              {comment.user?.username?.charAt(0).toUpperCase() ||
                                comment.user_id?.charAt(0).toUpperCase() ||
                                "?"}
                            </Text>
                          </View>
                        )}
                      </View>

                      {/* Comment bubble with username inside */}
                      <View style={{ flex: 1, marginLeft: 12 }}>
                        <View style={{ backgroundColor: "#f0f0f0", padding: 12, borderRadius: 16 }}>
                          {/* Username inside bubble */}
                          <Text style={{ fontWeight: "bold", fontSize: 16, marginBottom: 4 }}>
                            {comment.user?.username || comment.user?.full_name || "User"}
                          </Text>

                          {/* Comment content */}
                          <Text style={{ color: "#303030", lineHeight: 20 }}>{comment.content}</Text>
                        </View>

                        {/* Date below bubble */}
                        <Text style={{ color: "#808080", fontSize: 12, marginTop: 4, marginLeft: 8 }}>
                          {new Date(comment.created_at).toLocaleDateString()}
                        </Text>
                      </View>
                    </View>

                    {/* Separator */}
                    <View style={{ height: 1, backgroundColor: "#e0e0e0", marginTop: 16 }} />
                  </View>
                ))
              ) : (
                <View style={{ paddingVertical: 32, alignItems: "center" }}>
                  <Feather name="message-circle" size={40} color="#e0e0e0" />
                  <Text style={{ marginTop: 8, color: "#808080", textAlign: "center" }}>No reviews yet.</Text>
                  <Text style={{ color: "#808080", textAlign: "center" }}>Be the first to comment!</Text>
                </View>
              )}
            </View>
          )}

          {/* Extra space at the bottom to ensure content is visible above keyboard */}
          <View style={{ height: 120 }} />
        </ScrollView>

        {/* Comment input */}
        <View
          style={{
            paddingHorizontal: 16,
            paddingVertical: 12,
            borderTopWidth: 1,
            borderTopColor: "#e0e0e0",
            backgroundColor: "white",
          }}
        >
          <View style={{ flexDirection: "row", alignItems: "center" }}>
            <TextInput
              style={{
                flex: 1,
                backgroundColor: "#f0f0f0",
                borderRadius: 24,
                paddingHorizontal: 16,
                paddingVertical: 12,
                marginRight: 8,
              }}
              placeholder="Add a comment..."
              value={commentText}
              onChangeText={setCommentText}
              onFocus={() => {
                // Scroll to bottom when input is focused
                setTimeout(() => {
                  scrollViewRef.current?.scrollToEnd({ animated: true })
                }, 100)
              }}
            />
            <TouchableOpacity
              style={{
                padding: 12,
                borderRadius: 24,
                backgroundColor: commentText.trim() && isAuthenticated ? "#ffd60a" : "#e0e0e0",
              }}
              onPress={handleSubmitComment}
              disabled={submittingComment || !commentText.trim() || !isAuthenticated}
            >
              <Feather name="send" size={20} color={commentText.trim() && isAuthenticated ? "#bb0718" : "#666"} />
            </TouchableOpacity>
          </View>
          {!isAuthenticated && (
            <Text style={{ textAlign: "center", fontSize: 14, color: "#E91E63", marginTop: 4 }}>
              Please log in to comment
            </Text>
          )}
        </View>
      </View>
    </KeyboardAvoidingView>
  )
}