import Button from "@/components/ui/Button";
import { useColor } from "@/hooks/useColor";
import { useCurrency } from "@/hooks/useCurrency";
import { useAuthStore } from "@/providers/AuthStoreProviders";
import { useBuySharesModal } from "@/providers/BuyShareModalProvider";
import { useTranslations } from "@/providers/TranslationProviders";
import { formatDate } from "@/utils/helper";
import { Text, View } from "react-native";
import { ProjectListingData } from "@/types/project";

export interface ShareInfo {
  title?: string;
  slug?: string;
  share_value?: number;
  roi?: number;
  project_id?: number;
  seller_id?: number | null;
  price?: number;
  number_of_shares?: number;
  shares_sold?: number;
  share_type?: string;
  effective_date?: string;
  maturity_date?: string | null;
  renewal_date?: string | null;
  listing?: ProjectListingData;
}

export default function MarketplaceInvestCard({
  title = "",
  slug = "",
  project_id = 0,
  seller_id = null,
  share_value = 0,
  price = 0,
  roi = 0,
  number_of_shares = 0,
  shares_sold = 0,
  share_type = "fixed",
  effective_date = "",
  maturity_date = null,
  renewal_date = null,
  listing,
}: ShareInfo) {
  const { primary } = useColor();
  const { isAuthenticated } = useAuthStore((state: any) => state);
  const { openBuyModal } = useBuySharesModal();
  const { tran, translateNumber } = useTranslations();
  const { currency } = useCurrency();

  // listing from the backend provides specific marketplace overrides
  const finalPrice = listing?.price || price || share_value;
  const availableShares = listing?.number_of_shares || number_of_shares || 0;
  const sellerId = listing?.seller_id ?? seller_id ?? null;

  const handleBuy = () => {
    if (!isAuthenticated) return;
    openBuyModal({
      project_id: project_id as number,
      seller_id: sellerId as number | null,
      price: Number(finalPrice),
      number_of_shares: availableShares,
    });
  };

  return (
    <View className="rounded-3xl bg-white p-6 border border-slate-100 shadow-sm mt-8 w-full">
      {/* Target & ROI Header */}
      <View className="flex-row justify-between items-start mb-6">
        <View>
          <Text className="text-[10px] font-manrope-bold text-slate-400 uppercase tracking-widest mb-1">{tran("Selling Price")}</Text>
          <View className="flex-row items-baseline gap-1">
            <Text className="text-3xl font-manrope-extrabold text-slate-900">
              {currency.symbol}
              {translateNumber(finalPrice)}
            </Text>
            <Text className="text-xs font-manrope-semibold text-slate-400">/ {tran("Share")}</Text>
          </View>
        </View>
        <View className="px-3 py-2 rounded-xl items-end" style={{ backgroundColor: primary[10] }}>
          <Text className="text-xs font-manrope-extrabold text-slate-900" style={{ color: primary.base }}>
            {translateNumber(roi)}% ROI
          </Text>
          <Text className="text-[10px] font-manrope-bold text-slate-500 uppercase mt-0.5">{tran("Per Annum")}</Text>
        </View>
      </View>

      <View className="h-px bg-slate-100 w-full mb-6" />

      {/* Timeline Section */}
      <View className="flex-row justify-between mb-8">
        <View>
          <View className="flex-row items-center gap-1.5 mb-1">
            <View className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
            <Text className="text-[10px] font-manrope-bold text-slate-400 uppercase tracking-widest">{tran("Effective")}</Text>
          </View>
          <Text className="text-sm font-manrope-bold text-slate-800">{effective_date ? formatDate(effective_date) : "N/A"}</Text>
        </View>

        {share_type !== "infinite" && (
          <View className="items-end">
            <View className="flex-row items-center gap-1.5 mb-1">
              <Text className="text-[10px] font-manrope-bold text-slate-400 uppercase tracking-widest">{share_type === "fixed" ? tran("Maturity") : tran("Renewal")}</Text>
              <View className="w-1.5 h-1.5 rounded-full bg-slate-400" />
            </View>
            <Text className="text-sm font-manrope-bold text-slate-800">
              {share_type === "fixed" ? (maturity_date ? formatDate(maturity_date) : "N/A") : renewal_date ? formatDate(renewal_date) : "N/A"}
            </Text>
          </View>
        )}
      </View>

      <View className="bg-slate-50 rounded-2xl p-4 mb-6">
        <View className="flex-row justify-between items-center">
          <Text className="text-xs font-manrope-bold text-slate-900">{tran("Available Shares")}</Text>
          <Text className="text-lg font-manrope-extrabold text-slate-900">{translateNumber(availableShares)}</Text>
        </View>
      </View>

      {/* Primary Action */}
      <Button onPress={handleBuy} className="h-14 rounded-2xl" text={tran("Buy Share")} />
    </View>
  );
}
