import { useColor } from "@/hooks/useColor";
import { useCurrency } from "@/hooks/useCurrency";
import { useAuthStore } from "@/providers/AuthStoreProviders";
import { useListSharesModal } from "@/providers/ListShareModalProvider";
import { useTranslations } from "@/providers/TranslationProviders";
import { ProjectDetails } from "@/types/project";
import { ArrowRightIcon, ChartLineUpIcon, MapPinIcon } from "phosphor-react-native";
import { Pressable, Text, View } from "react-native";
import { router } from "expo-router";
import Button from "../ui/Button";
import ImageLoader from "../ui/ImageLoader";

export default function InvestedShareCard({ project }: { project: ProjectDetails }) {
  const { primary, secondary } = useColor();
  const { tran, translateNumber } = useTranslations();
  const { currency } = useCurrency();
  const { openListModal } = useListSharesModal();
  const { isAuthenticated } = useAuthStore((state) => state);

  const handleListing = () => {
    if (!isAuthenticated) {
      // router.push(`/sign-in?redirect=${pathname}`);
      // toast.warning(tran("Please login to list this share."));
      return;
    }
    openListModal({
      project_id: project.id,
      active_shares: project.active_shares,
    });
  };

  return (
    <View
      className="bg-white rounded-2xl border overflow-hidden"
      style={{
        borderColor: primary[20],
      }}
    >
      <View className="relative">
        <Pressable
          onPress={() => router.push(`/(screens)/my-shares-details?slug=${project.slug}`)}
        >
          {/* <View className="absolute top-0 z-10 w-full p-4 flex items-center justify-between gap-3 text-sm">
            <View className="flex items-center gap-2">
              <Text className="px-2 py-1.5 bg-secondary rounded-full text-white capitalize flex items-center gap-1">
   
                <TagIcon />
                {tran(project.share_type)}
              </Text>
              <Text className="px-2 py-1.5 bg-white rounded-full -stock">
                {tran(project.type.name)}
              </Text>
            </View>
          </View> */}
          <View className="rounded-t-2xl overflow-hidden">
            <ImageLoader src={project.thumbnail} alt={project.title} width={402} height={241} className="w-full object-cover h-[220px]" />
          </View>
        </Pressable>
      </View>

      <View className="p-4 md:p-6">
        <Pressable
          onPress={() => router.push(`/(screens)/my-shares-details?slug=${project.slug}`)}
        >
          <Text className="text-xl font-manrope-bold">{tran(project.title)}</Text>
        </Pressable>

        <View className=" space-y-6 pt-4">
          <View className="flex-row items-center gap-6 text-sm ">
            <View className="flex-row items-center gap-1.5">
              <MapPinIcon size={18} />
              <Text className="text-slate-500">{tran(project.city.name)}</Text>
            </View>
            <View className="flex-row items-center gap-1.5">
              {/* <i className="ph ph-chart-line-up text-lg"></i> */}
              <ChartLineUpIcon size={18} />
              <Text className="text-slate-500">
                {translateNumber(project.roi)}% {tran("ROI/yr")}
              </Text>
            </View>
          </View>

          <View className="">
            <View className=" gap-2 flex-row py-4">
              <View
                className="p-3 rounded-lg border text-center  flex-1"
                style={{
                  borderColor: primary[30],
                  backgroundColor: primary[5],
                }}
              >
                <View className="flex items-center justify-center gap-1 text-lg">
                  <Text className="font-bold">{translateNumber(project.listed_shares)}</Text>
                </View>
                <Text className="text-[10px] block mt-1 text-center">{tran("Listed Shares")}</Text>
              </View>
              <View
                className="p-3 rounded-lg border  text-center  flex-1"
                style={{
                  borderColor: secondary[30],
                  backgroundColor: secondary[10],
                }}
              >
                <View className="flex items-center justify-center gap-1 text-lg">
                  <Text className="font-bold">{translateNumber(project.active_shares)}</Text>
                </View>
                <Text className="text-[10px] block mt-1 text-center">{tran("Active Shares")}</Text>
              </View>
              <View className="p-3 rounded-lg border text-center  flex-1 border-red-200 bg-red-50">
                <View className="flex items-center justify-center gap-1 text-lg">
                  <Text className="font-bold">
                    {currency.symbol}
                    {translateNumber(project.share_value)}
                  </Text>
                </View>
                <Text className="text-[10px] block mt-1 text-center">{tran("Per Share Price")}</Text>
              </View>
            </View>
          </View>
          <View className="flex gap-3">
            <Button onPress={handleListing} className="" text="List Now" />
            <Button onPress={() => router.push(`/(screens)/my-shares-details?slug=${project.slug}`)} className=" justify-center items-center" text="Details" type="secondary" rightIcon={<ArrowRightIcon />} />
          </View>
        </View>
      </View>
    </View>
  );
}
