import ImageLoader from "@/components/ui/ImageLoader";
import { useColor } from "@/hooks/useColor";
import { useCurrency } from "@/hooks/useCurrency";
import { useTranslations } from "@/providers/TranslationProviders";
import { ProjectListingData } from "@/types/project";
import { router } from "expo-router";
import { useBuySharesModal } from "@/providers/BuyShareModalProvider";
import { ArrowRightIcon, ChartLineUpIcon, FileTextIcon, MapPinIcon, TagIcon, UserIcon } from "phosphor-react-native";
import React from "react";
import { Pressable, Text, View } from "react-native";
import Button from "../ui/Button";

interface MarketplaceCardProps {
  item: ProjectListingData;
}

export default function MarketplaceCard({ item }: MarketplaceCardProps) {
  const { tran, translateNumber } = useTranslations();
  const { currency } = useCurrency();
  const { primary, secondary } = useColor();

  const { project, seller, price, number_of_shares, project_id, seller_id } = item;
  const { openBuyModal } = useBuySharesModal();

  const handlePress = () => {
    router.push({
      pathname: "/marketplace-details",
      params: { 
        project: project.slug, 
        listingId: item.id,
        price: price,
        seller: seller?.username || "",
        number_of_shares: number_of_shares,
        project_id: project_id,
        seller_id: seller_id || ""
      },
    });
  };

  const handleBuy = () => {
    openBuyModal({
      project_id,
      seller_id,
      price: Number(price),
      number_of_shares,
    });
  };

  return (
    <View
      className="bg-white rounded-2xl border overflow-hidden mt-4"
      style={{
        borderColor: primary[20],
      }}
    >
      {/* Image & Badges Section */}
      <View className="relative">
        <Pressable onPress={handlePress}>
          <ImageLoader 
            src={project.thumbnail} 
            width={400} 
            height={220} 
            className="w-full h-[220px]" 
          />
        </Pressable>

        {/* Floating Badges */}
        <View className="absolute top-0 z-10 w-full p-4 flex-row items-center gap-2">
          <View 
            className="px-3 py-1.5 rounded-full flex-row items-center gap-1"
            style={{ backgroundColor: primary.base }}
          >
            <TagIcon size={14} color="white" weight="bold" />
            <Text className="text-white text-[11px] font-manrope-bold capitalize">{tran(project.share_type)}</Text>
          </View>
          {project.type?.name && (
            <View className="px-3 py-1.5 bg-white rounded-full">
              <Text className="text-slate-800 text-[11px] font-manrope-bold capitalize">{tran(project.type.name)}</Text>
            </View>
          )}
        </View>

        {/* Floating share badge */}
        <View className="absolute bottom-4 right-4 bg-white rounded-xl shadow-lg p-3 flex flex-row items-center gap-3 border border-slate-50">
          <View 
            className="w-10 h-10 rounded-full items-center justify-center" 
            style={{ backgroundColor: primary.base }}
          >
            <FileTextIcon size={20} color="white" weight="regular" />
          </View>
          <View>
            <Text className="text-lg font-manrope-bold text-slate-900 leading-tight">
              {translateNumber(number_of_shares)}
            </Text>
            <Text className="text-[10px] font-manrope-medium text-slate-500 uppercase tracking-wider">{tran("Shares")}</Text>
          </View>
        </View>
      </View>

      {/* Content Section */}
      <View className="p-4 pt-6">
        <Pressable onPress={handlePress}>
          <Text className="text-xl font-manrope-bold text-slate-900 mb-4" numberOfLines={2}>
            {tran(project.title)}
          </Text>
        </Pressable>

        {/* Stats Row */}
        <View className="flex-row items-center gap-6 text-sm mb-4">
          <View className="flex-row items-center gap-1.5">
            <MapPinIcon size={18} color="#64748b" weight="regular" />
            <Text className="text-slate-500 font-manrope">{tran(project.city?.name)}</Text>
          </View>
          <View className="flex-row items-center gap-1.5">
            <ChartLineUpIcon size={18} color="#64748b" weight="regular" />
            <Text className="text-slate-500 font-manrope">
              {translateNumber(project.roi)}% {tran("ROI/yr")}
            </Text>
          </View>
        </View>

        {/* Pricing Grid */}
        <View className="flex-row gap-2 mb-4">
          <View 
            className="p-3 rounded-xl border flex-1 text-center" 
            style={{ backgroundColor: secondary[10], borderColor: secondary[30] }}
          >
             <Text className="font-manrope-bold text-lg text-slate-800">
              {currency.symbol}
              {translateNumber(project.share_value)}
            </Text>
            <Text className="text-[10px] uppercase font-manrope tracking-wider text-slate-500 mt-1">{tran("Share Value")}</Text>
          </View>
          <View 
            className="p-3 rounded-xl border flex-1 text-center" 
            style={{ backgroundColor: primary[10], borderColor: primary[30] }}
          >
            <Text className="font-manrope-bold text-lg text-slate-800">
              {currency.symbol}
              {translateNumber(price)}
            </Text>
            <Text className="text-[10px] uppercase font-manrope tracking-wider text-slate-500 mt-1">{tran("Selling Price")}</Text>
          </View>
        </View>

        {/* Seller Info */}
        <View className="flex-row items-center gap-3 p-3 rounded-xl border border-slate-100 mb-5 bg-slate-50">
          {seller?.avatar ? (
            <View className="border border-slate-200 rounded-full overflow-hidden">
              <ImageLoader src={seller.avatar} width={36} height={36} className="w-9 h-9" />
            </View>
          ) : (
            <View className="w-9 h-9 rounded-full bg-slate-200 items-center justify-center">
              <UserIcon size={18} color="#64748b" weight="fill" />
            </View>
          )}
          <View>
            <Text className="text-[9px] font-manrope-bold text-slate-400 uppercase tracking-widest mb-0.5">{tran(seller ? "Seller" : "Listed By")}</Text>
            <Text className="text-sm font-manrope-bold text-slate-900">{seller?.full_name || tran("Admin")}</Text>
          </View>
        </View>

        {/* Actions */}
        <View className="flex-row gap-3">
          <View className="flex-1">
            <Button onPress={handleBuy} text={tran("Buy Share")} />
          </View>
          <Pressable 
            onPress={handlePress}
            className="w-12 h-12 rounded-full border items-center justify-center -rotate-45"
            style={{ 
              backgroundColor: primary[10], 
              borderColor: primary[20] 
            }}
          >
            <ArrowRightIcon size={20} color={primary.base} weight="bold" />
          </Pressable>
        </View>
      </View>
    </View>
  );
}
