import { useColor } from "@/hooks/useColor";
import { useCurrency } from "@/hooks/useCurrency";
import { useTranslations } from "@/providers/TranslationProviders";
import { formatDate } from "@/utils/helper";
import { ScrollView, Text, View, Modal, Pressable, ActivityIndicator } from "react-native";
import { XIcon, TrendUpIcon, CalendarIcon } from "phosphor-react-native";
import { SafeAreaView } from "react-native-safe-area-context";

interface Payout {
  id: number;
  amount: number;
  due_at: string;
  paid_at: string | null;
  status: string;
}

interface Share {
  share_number: string;
  status: string;
}

interface PayoutsModalProps {
  isOpen: boolean;
  onClose: () => void;
  share: Share | null;
  payouts: Payout[];
  isLoading?: boolean;
}

export default function PayoutsModal({
  isOpen,
  onClose,
  share,
  payouts,
  isLoading,
}: PayoutsModalProps) {
  const { primary, success } = useColor();
  const { tran, translateNumber } = useTranslations();
  const { currency } = useCurrency();

  const getStatusColor = (status: string) => {
    switch (status.toLowerCase()) {
      case "paid":
      case "completed":
        return success.base;
      case "upcoming":
      case "pending":
        return primary.base;
      case "overdue":
        return "#ef4444";
      default:
        return "#64748b";
    }
  };

  const getStatusBg = (status: string) => {
    switch (status.toLowerCase()) {
      case "paid":
      case "completed":
        return success[10];
      case "upcoming":
      case "pending":
        return primary[10];
      case "overdue":
        return "#fee2e2";
      default:
        return "#f1f5f9";
    }
  };

  return (
    <Modal visible={isOpen} animationType="slide" transparent={true} onRequestClose={onClose}>
      <View className="flex-1 bg-black/60 justify-end">
        <View className="bg-white rounded-t-[40px] h-[80%]">
          <SafeAreaView edges={["bottom"]} className="flex-1">
            {/* Header */}
            <View className="px-6 py-5 border-b border-slate-100 flex-row justify-between items-center">
              <View>
                <Text className="text-xl font-manrope-extrabold text-slate-900">
                  {tran("Share")} {share?.share_number}
                </Text>
                <View className="flex-row items-center mt-1">
                  <View className="w-2 h-2 rounded-full mr-1.5" style={{ backgroundColor: getStatusColor(share?.status || "") }} />
                  <Text className="text-xs font-manrope-bold text-slate-500 uppercase tracking-wider">{tran(share?.status || "")}</Text>
                </View>
              </View>
              <Pressable onPress={onClose} className="w-10 h-10 bg-slate-50 rounded-full items-center justify-center active:bg-slate-100">
                <XIcon size={20} color="#64748b" weight="bold" />
              </Pressable>
            </View>

            {/* Content */}
            <View className="flex-1 p-6">
              <Text className="text-base font-manrope-bold text-slate-900 mb-4">{tran("ROI Payouts")}</Text>

              {isLoading ? (
                <View className="flex-1 justify-center items-center">
                  <ActivityIndicator size="large" color={primary.base} />
                </View>
              ) : payouts.length > 0 ? (
                <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 20 }}>
                  <View className="gap-3">
                    {payouts.map((payout) => (
                      <View key={payout.id} className="bg-slate-50 rounded-2xl p-4 border border-slate-100">
                        <View className="flex-row justify-between items-start mb-3">
                          <View className="flex-row items-center gap-3">
                            <View className="w-10 h-10 rounded-xl bg-white items-center justify-center shadow-sm">
                              <TrendUpIcon size={20} color={payout.paid_at ? success.base : primary.base} weight="bold" />
                            </View>
                            <View>
                              <Text className="text-sm font-manrope-bold text-slate-900">
                                {currency.symbol}
                                {translateNumber(payout.amount.toFixed(2))}
                              </Text>
                              <View className="px-2 py-0.5 rounded-full mt-1 border" style={{ backgroundColor: getStatusBg(payout.status), borderColor: "transparent" }}>
                                <Text className="text-[9px] font-manrope-extrabold uppercase tracking-widest text-center" style={{ color: getStatusColor(payout.status) }}>
                                  {tran(payout.status)}
                                </Text>
                              </View>
                            </View>
                          </View>
                        </View>

                        <View className="flex-row justify-between mt-1 pt-3 border-t border-slate-200/50">
                          <View>
                            <Text className="text-[10px] font-manrope-bold text-slate-400 uppercase tracking-widest mb-1">{tran("Due Date")}</Text>
                            <View className="flex-row items-center gap-1">
                              <CalendarIcon size={12} color="#94a3b8" />
                              <Text className="text-xs font-manrope-semibold text-slate-600">{formatDate(payout.due_at)}</Text>
                            </View>
                          </View>
                          <View className="items-end">
                            <Text className="text-[10px] font-manrope-bold text-slate-400 uppercase tracking-widest mb-1">{tran("Paid At")}</Text>
                            <Text className="text-xs font-manrope-semibold text-slate-600">{payout.paid_at ? formatDate(payout.paid_at) : "--"}</Text>
                          </View>
                        </View>
                      </View>
                    ))}
                  </View>
                </ScrollView>
              ) : (
                <View className="flex-1 justify-center items-center opacity-40">
                  <TrendUpIcon size={48} color="#94a3b8" weight="duotone" />
                  <Text className="text-slate-500 font-manrope-bold mt-4">{tran("No payouts available")}</Text>
                </View>
              )}
            </View>
          </SafeAreaView>
        </View>
      </View>
    </Modal>
  );
}
