import { useCurrency } from "@/hooks/useCurrency";
import { useAuthStore } from "@/providers/AuthStoreProviders";
import { useTranslations } from "@/providers/TranslationProviders";
import ImageLoader from "../ui/ImageLoader";
import { Pressable, Text, View } from "react-native";
import { router } from "expo-router";
import {
  CaretRightIcon,
  ChartLineUpIcon,
  FilesIcon,
  MapPinIcon,
  TagIcon,
} from "phosphor-react-native";
import Button from "../ui/Button";
import { useColor } from "@/hooks/useColor";

export interface ListingData {
  project_id: number;
  price: number;
  number_of_shares: number;
  project: {
    id: number;
    title: string;
    slug: string;
    thumbnail?: string;
    share_value: number;
    roi: number;
    city?: { name: string };
    type?: { name: string };
    share_type?: string;
  };
}

interface ListingCardProps {
  listing: ListingData;
  onCancelListing: (listing: ListingData) => void;
}

export default function ListingCard({
  listing,
  onCancelListing,
}: ListingCardProps) {
  const { primary, secondary } = useColor();
  const { tran, translateNumber } = useTranslations();
  const { currency } = useCurrency();
  const user = useAuthStore((state) => state.user);

  const { price, number_of_shares, project } = listing;
  const { title, slug, thumbnail, share_value, roi, city, type, share_type } =
    project;

  const handleNavigate = () => {
    router.push({
      pathname: "/(screens)/marketplace-details",
      params: { project: slug, price, seller: user?.username },
    });
  };

  return (
    <View
      className="bg-white rounded-2xl border overflow-hidden mt-4 shadow-sm shadow-slate-100"
      style={{
        borderColor: primary[20],
      }}
    >
      {/* Image Section */}
      <View className="relative">
        <Pressable onPress={handleNavigate}>
          <View className="absolute top-0 z-10 w-full p-4 flex-row items-center justify-between gap-3 text-sm">
            <View className="flex-row items-center gap-2">
              {share_type && (
                <View
                  className="px-2.5 py-1.5 rounded-full flex-row items-center gap-1"
                  style={{
                    backgroundColor: primary.base,
                  }}
                >
                  <TagIcon color="white" size={14} weight="bold" />
                  <Text className="text-white text-[11px] font-manrope-bold capitalize">
                    {tran(share_type)}
                  </Text>
                </View>
              )}
              {type?.name && (
                <View className="px-2.5 py-1.5 bg-white rounded-full">
                  <Text className="text-slate-800 text-[11px] font-manrope-bold">
                    {tran(type.name)}
                  </Text>
                </View>
              )}
            </View>
          </View>
          <View className="rounded-t-2xl overflow-hidden">
            <ImageLoader
              src={thumbnail}
              alt={title}
              width={402}
              height={241}
              className="w-full object-cover h-[220px]"
            />
          </View>
        </Pressable>

        {/* Shares Badge */}
        <View 
          className="absolute bottom-4 left-4 flex-row items-center gap-1.5 px-3 py-1.5 rounded-full"
          style={{ backgroundColor: primary.base }}
        >
          <FilesIcon size={16} color="white" weight="bold" />
          <Text className="text-white text-xs font-manrope-semibold">
            {translateNumber(number_of_shares)} {tran("Shares")}
          </Text>
        </View>
      </View>

      {/* Main Content */}
      <View className="p-4 md:p-6 flex flex-col flex-1">
        {/* Title */}
        <Pressable onPress={handleNavigate}>
          <Text className="text-xl font-manrope-bold text-slate-900 mb-4">{tran(title)}</Text>
        </Pressable>

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

          {/* Stats Grid */}
          <View className="flex-row gap-2">
            <View
              className="p-3 rounded-xl border flex-1 text-center"
              style={{
                borderColor: secondary[30],
                backgroundColor: secondary[10],
              }}
            >
              <View className="items-center justify-center">
                <Text className="font-manrope-bold text-lg text-slate-800">
                  {currency.symbol}
                  {translateNumber(share_value)}
                </Text>
              </View>
              <Text className="text-[10px] uppercase font-manrope tracking-wider text-slate-500 mt-1 flex-row text-center">
                {tran("Share Value")}
              </Text>
            </View>
            <View
              className="p-3 rounded-xl border flex-1 text-center"
              style={{
                borderColor: primary[30],
                backgroundColor: primary[10],
              }}
            >
              <View className="items-center justify-center">
                <Text className="font-manrope-bold text-lg text-slate-800">
                  {currency.symbol}
                  {translateNumber(price)}
                </Text>
              </View>
              <Text className="text-[10px] uppercase font-manrope tracking-wider text-slate-500 mt-1 flex-row text-center">
                {tran("Listing Price")}
              </Text>
            </View>
          </View>
          
          <View className="px-3 py-2.5 rounded-xl border text-center border-[#cfecfe] bg-[#f0f9ff] mt-3">
            <View className="items-center justify-center flex-row">
              <Text className="font-manrope-bold text-slate-900 mr-2 text-sm">{tran("Total Listing Value")}:</Text>
              <Text className="font-manrope-extrabold text-[#0284c7] text-[15px]">
                {currency.symbol}
                {translateNumber(number_of_shares * price)}
              </Text>
            </View>
          </View>

          {/* Buttons */}
          <View className="flex-row gap-3 pt-3">
            <View className="flex-1">
              <Button
                onPress={() => onCancelListing(listing)}
                text="Cancel Listing"
                type="danger"
              />
            </View>
            <View className="flex-1">
              <Button
                onPress={handleNavigate}
                text="View"
                type="secondary"
                rightIcon={
                  <CaretRightIcon color={primary.base} size={18} weight="bold" />
                }
              />
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}
