import { useAuthStore } from "@/providers/AuthStoreProviders";
import { useTranslations } from "@/providers/TranslationProviders";
import { router } from "expo-router";
import { useState } from "react";
import { Pressable, Text, View } from "react-native";
import ReviewCard from "./review-card";
import { ChatCircleDotsIcon } from "phosphor-react-native";
import ReviewModal from "./add-review-modal";
import { useColor } from "@/hooks/useColor";

interface Review {
  id: number;
  rating: number;
  comment: string;
  avatar?: string;
  user: {
    full_name: string;
  };
  user_id?: number;
}

interface ReviewsProps {
  reviews?: Review[];
  projectSlug?: string;
}

export default function Reviews({ reviews, projectSlug }: ReviewsProps) {
  const { primary } = useColor();
  const { tran } = useTranslations();
  const { user, isAuthenticated } = useAuthStore((state) => state);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const existingReview = reviews?.find((review) => review.user_id === user?.id);

  const handleReviewClick = () => {
    if (!isAuthenticated) {
      router.push("/sign-in");
      return;
    }
    setIsModalOpen(true);
  };

  return (
    <View>
      <View className="flex-row items-center justify-between mb-6">
        <View>
          <Text className="text-xl font-manrope-extrabold text-slate-900">
            {tran("Reviews")}
          </Text>
          {reviews && reviews.length > 0 && (
            <Text className="text-xs font-manrope-semibold text-slate-500 mt-0.5">
              {reviews.length} {tran("Investors shared their thoughts")}
            </Text>
          )}
        </View>
        <Pressable
          onPress={handleReviewClick}
          className="rounded-xl px-4 py-2.5 shadow-sm active:opacity-90"
          style={{ backgroundColor: primary.base }}
        >
          <Text className="text-xs font-manrope-bold text-white">
            {existingReview ? tran("Update Review") : tran("Write Review")}
          </Text>
        </Pressable>
      </View>

      <View className="gap-5">
        {reviews && reviews.length > 0 ? (
          reviews.map((review) => (
            <ReviewCard
              key={review.id}
              rating={review.rating}
              full_name={review.user.full_name}
              comment={review.comment}
              avatar={review.avatar}
            />
          ))
        ) : (
          <View className="bg-slate-50 rounded-3xl p-8 items-center border border-slate-100">
            <View className="w-14 h-14 rounded-full bg-white items-center justify-center mb-4 shadow-sm border border-slate-50">
               <ChatCircleDotsIcon size={28} color="#94a3b8" weight="light" />
            </View>
            <Text className="text-slate-900 font-manrope-bold text-base text-center">
                {tran("Be the first to review")}
            </Text>
            <Text className="text-slate-500 font-manrope-medium text-xs text-center mt-1 px-6">
                {tran("Share your investment experience with other potential investors.")}
            </Text>
            <Pressable 
              onPress={handleReviewClick}
              className="mt-5 border-b border-slate-900"
            >
              <Text className="text-sm font-manrope-bold text-slate-900 pb-0.5">
                {tran("Add your review now")}
              </Text>
            </Pressable>
          </View>
        )}
      </View>

      {isModalOpen && projectSlug && (
        <ReviewModal
          isOpen={isModalOpen}
          onClose={() => setIsModalOpen(false)}
          projectSlug={projectSlug}
          existingReview={existingReview}
        />
      )}
    </View>
  );
}
