"use client";
import Button from "@/components/ui/Button";
import ProgressBar from "@/components/ui/progress-bar";
import { useColor } from "@/hooks/useColor";
import { useCurrency } from "@/hooks/useCurrency";
import { useAuthStore } from "@/providers/AuthStoreProviders";
import { useInvestModal } from "@/providers/InvestModalProvider";
import { useTranslations } from "@/providers/TranslationProviders";
import { formatDate } from "@/utils/helper";
import { useState } from "react";
import { Text, View } from "react-native";

export interface ShareInfo {
  title?: string;
  slug?: string;
  share_value?: number;
  roi?: number;
  project_id?: number;
  code?: string;
  thumbnail?: string;
  seller_id?: number;
  price?: number;
  number_of_shares?: number;
  shares_sold?: number;
  share_type?: string;
  effective_date?: string;
  maturity_date?: string | null;
  renewal_date?: string | null;
  total_investors?: number;
  roi_distribution?: string;
  marketplace_resale?: boolean;
  handleClose?: () => void;
  isMobileDrawer?: boolean;
}

export default function InvestCard({
  title = "",
  slug = "",
  project_id = 0,
  code = "",
  thumbnail = "",
  share_value = 0,
  roi = 0,
  number_of_shares = 0,
  shares_sold = 0,
  share_type = "fixed",
  effective_date = "",
  maturity_date = null,
  renewal_date = null,
  handleClose,
  isMobileDrawer = false,
}: ShareInfo) {
  const { primary } = useColor();
  const { isAuthenticated } = useAuthStore((state: any) => state);
  const { openModal: investModal } = useInvestModal();
  const { tran, translateNumber } = useTranslations();
  const { currency } = useCurrency();
  const [quantity, setQuantity] = useState(1);
  const fundingProgress = number_of_shares > 0 ? Math.min(100, Math.floor((shares_sold / number_of_shares) * 100)) : 0;

  const handleInvest = () => {
    if (!isAuthenticated) {
      return;
    }
    investModal({
      title: title,
      slug: slug,
      share_count: quantity,
      share_value: share_value,
      max: number_of_shares - shares_sold,
      onQuantityChange: setQuantity,
    });
  };

  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("Offering Price")}</Text>
          <View className="flex-row items-baseline gap-1">
            <Text className="text-3xl font-manrope-extrabold text-slate-900">
              {currency.symbol}
              {translateNumber(share_value)}
            </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">{formatDate(effective_date)}</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>

      {/* Funding Progress Section */}
      <View className="bg-slate-50 rounded-2xl p-4 mb-6">
        <View className="flex-row justify-between items-center mb-3">
          <View>
            <Text className="text-xs font-manrope-bold text-slate-900 mb-0.5">{tran("Funding Progress")}</Text>
            <Text className="text-[10px] font-manrope-semibold text-slate-500">
              {translateNumber(shares_sold)} {tran("of")} {translateNumber(number_of_shares)} {tran("Shares Sold")}
            </Text>
          </View>
          <Text className="text-lg font-manrope-extrabold text-slate-900">{translateNumber(fundingProgress)}%</Text>
        </View>

        <ProgressBar value={fundingProgress} />

        <View className="flex-row justify-between items-center mt-3">
          <View>
            <Text className="text-[8px] font-manrope-bold text-slate-400 uppercase tracking-tight">{tran("Raised")}</Text>
            <Text className="text-xs font-manrope-bold text-slate-900">
              {currency.symbol}
              {translateNumber(share_value * shares_sold)}
            </Text>
          </View>
          <View className="items-end">
            <Text className="text-[8px] font-manrope-bold text-slate-400 uppercase tracking-tight">{tran("Target")}</Text>
            <Text className="text-xs font-manrope-bold text-slate-700">
              {currency.symbol}
              {translateNumber(number_of_shares * share_value)}
            </Text>
          </View>
        </View>
      </View>

      {/* Primary Action */}
      <Button onPress={handleInvest} className="h-14 rounded-2xl" text={tran("Invest Now")} />

      <Text className="text-center text-[10px] font-manrope-semibold text-slate-400 mt-4 px-4 leading-4">
        {tran("By clicking Invest Now, you agree to our Terms of Investment and Risk Disclosure.")}
      </Text>
    </View>
  );
}
