import React, { useEffect, useRef, useState } from "react";
import { View, ScrollView, Image, TouchableOpacity } from "react-native";
import { useLocalSearchParams, router } from "expo-router";
import ScreenWrapper from "~/components/ui/ScreenWrapper";
import BackButton from "~/components/ui/backButton";
import { Text } from "~/components/ui/text";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { useAuthWithProfile } from "~/lib/hooks/useAuthWithProfile";
import { TransactionService } from "~/lib/services/transactionService";
import { GoogleIcon } from "~/components/ui/icons";
import { Icons } from "~/assets/icons";
import { WalletService } from "~/lib/services/walletService";
import { ROUTES } from "~/lib/routes";
import {
  calculateTotalAmountForSending,
  calculateProcessingFee,
} from "~/lib/utils/feeUtils";
import ModalToast from "~/components/ui/toast";
import { useTranslation } from "react-i18next";

type PaymentOptionCardProps = {
  label: string;
  icon: React.ReactNode;
  selected?: boolean;
  onPress?: () => void;
};

const PaymentOptionCard = ({
  label,
  icon,
  selected,
  onPress,
}: PaymentOptionCardProps) => {
  return (
    <TouchableOpacity className="flex-1" activeOpacity={0.8} onPress={onPress}>
      <View
        className={`rounded-xl px-3 py-2 border ${
          selected ? "border-[#105D38]" : "border-gray-300"
        }`}
      >
        <View className="flex-row items-start justify-between mb-3">
          {icon}
          {selected && (
            <View className="w-5 h-5 rounded-full bg-[#105D38] items-center justify-center">
              <Text className="text-xs font-dmsans-bold text-white">✓</Text>
            </View>
          )}
        </View>
        <Text className="text-sm font-dmsans-semibold text-black">{label}</Text>
      </View>
    </TouchableOpacity>
  );
};

export default function CheckoutScreen() {
  const { t } = useTranslation();
  const params = useLocalSearchParams<{
    amount?: string;
    type?: string;
    recipientName?: string;
    recipientPhoneNumber?: string;
    recipientType?: string;
    recipientId?: string;
    note?: string;
    donationSkipped?: string;
    donationType?: string;
    donationAmount?: string;
    donateAnonymously?: string;
    donationCampaignId?: string;
    donationCampaignTitle?: string;
    ticketTierName?: string;
    ticketTierPrice?: string;
    eventName?: string;
    eventId?: string;
    ticketTierId?: string;
    ticketCount?: string;
  }>();

  const { user, profile, wallet, refreshWallet } = useAuthWithProfile();
  const [selectedPayment, setSelectedPayment] = useState<
    "card" | "apple" | "google"
  >("card");
  const [email, setEmail] = useState("");
  const [nameOnCard, setNameOnCard] = useState("");
  const [cardNumber, setCardNumber] = useState("");
  const [expiry, setExpiry] = useState("");
  const [cvv, setCvv] = useState("");
  const [showCvv, setShowCvv] = useState(false);
  const [address, setAddress] = useState("");
  const [isProcessing, setIsProcessing] = useState(false);

  const [toastVisible, setToastVisible] = useState(false);
  const [toastTitle, setToastTitle] = useState("");
  const [toastDescription, setToastDescription] = useState<string | undefined>(
    undefined
  );
  const [toastVariant, setToastVariant] = useState<
    "success" | "error" | "warning" | "info"
  >("info");
  const toastTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const isAddCashFlow = params.type === "add_cash";
  const isEventTicketFlow = params.type === "event_ticket";

  const headerTitle = isEventTicketFlow
    ? params.ticketTierName || "-"
    : isAddCashFlow
    ? profile?.fullName || user?.email || "-"
    : params.recipientName || "-";

  const headerSubtitle = isEventTicketFlow
    ? params.eventName || ""
    : isAddCashFlow
    ? profile?.phoneNumber || profile?.email || ""
    : params.recipientPhoneNumber || "";

  const amountInCents = parseInt(params.amount || "0");
  const amountInDollars = amountInCents / 100;

  const hasDonation =
    params.donationSkipped === "false" && !!params.donationAmount;

  const donationAmountNumber = params.donationAmount
    ? Number(params.donationAmount)
    : NaN;
  const donationAmountDollars =
    !isNaN(donationAmountNumber) && hasDonation ? donationAmountNumber : 0;

  const processingFeeInCents = Math.round(amountInCents * 0.0125);
  const processingFeeInDollars = processingFeeInCents / 100;

  const subtotalInDollars = amountInDollars + donationAmountDollars;
  const totalInDollars = subtotalInDollars + processingFeeInDollars;

  // Card input helpers (mirrored from AddCard screen)
  const formatCardNumber = (value: string) => {
    const v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "");
    const matches = v.match(/\d{4,16}/g);
    const match = (matches && matches[0]) || "";
    const parts: string[] = [];

    for (let i = 0, len = match.length; i < len; i += 4) {
      parts.push(match.substring(i, i + 4));
    }

    if (parts.length) {
      return parts.join(" ");
    } else {
      return v;
    }
  };

  const formatExpiry = (value: string) => {
    const v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "");
    if (v.length >= 2) {
      return `${v.substring(0, 2)}/${v.substring(2, 4)}`;
    }
    return v;
  };

  const handleCardNumberChange = (value: string) => {
    const formatted = formatCardNumber(value);
    if (formatted.length <= 19) {
      // 16 digits + 3 spaces
      setCardNumber(formatted);
    }
  };

  const handleExpiryChange = (value: string) => {
    const formatted = formatExpiry(value);
    if (formatted.length <= 5) {
      // MM/YY
      setExpiry(formatted);
    }
  };

  const handleCvvChange = (value: string) => {
    const v = value.replace(/[^0-9]/gi, "");
    if (v.length <= 4) {
      setCvv(v);
    }
  };

  const showToast = (
    title: string,
    description?: string,
    variant: "success" | "error" | "warning" | "info" = "info"
  ) => {
    if (toastTimeoutRef.current) {
      clearTimeout(toastTimeoutRef.current);
    }

    setToastTitle(title);
    setToastDescription(description);
    setToastVariant(variant);
    setToastVisible(true);

    toastTimeoutRef.current = setTimeout(() => {
      setToastVisible(false);
      toastTimeoutRef.current = null;
    }, 2500);
  };

  useEffect(() => {
    return () => {
      if (toastTimeoutRef.current) {
        clearTimeout(toastTimeoutRef.current);
      }
    };
  }, []);

  useEffect(() => {
    if (!profile) return;

    if (!email && profile.email) {
      setEmail(profile.email);
    }

    if (!nameOnCard && profile.fullName) {
      setNameOnCard(profile.fullName);
    }

    if (!address && profile.address) {
      setAddress(profile.address);
    }
  }, [profile, email, nameOnCard, address]);

  const handlePay = async () => {
    if (isAddCashFlow) {
      if (!params.amount || !user?.uid || !wallet) {
        showToast(
          t("selectacc.toastErrorTitle"),
          t("selectacc.toastMissingInfo"),
          "error"
        );
        return;
      }

      const amountInCents = parseInt(params.amount);
      if (isNaN(amountInCents) || amountInCents <= 0) {
        showToast(
          t("addcash.validationErrorTitle"),
          t("addcash.validationEnterAmount"),
          "error"
        );
        return;
      }

      setIsProcessing(true);
      try {
        const currentBalance = wallet.balance || 0;
        const newBalance = currentBalance + amountInCents;

        const result = await WalletService.updateWalletBalance(
          user.uid,
          newBalance
        );

        if (result.success) {
          await refreshWallet();

          router.replace({
            pathname: ROUTES.ADDCASH_COMPLETION,
            params: {
              amount: (amountInCents / 100).toFixed(2),
            },
          });
        } else {
          showToast(
            t("selectacc.toastErrorTitle"),
            result.error || t("selectacc.toastAddCashFailed"),
            "error"
          );
        }
      } catch (error) {
        console.error("Error adding cash from checkout:", error);
        showToast(
          t("selectacc.toastErrorTitle"),
          t("selectacc.toastAddCashFailedWithRetry"),
          "error"
        );
      } finally {
        setIsProcessing(false);
      }

      return;
    }

    if (params.type === "event_ticket") {
      if (!params.amount || !user?.uid) {
        showToast(
          t("transconfirm.toastErrorTitle"),
          t("transconfirm.toastMissingDetails"),
          "error"
        );
        return;
      }

      const amountInCents = parseInt(params.amount);
      if (isNaN(amountInCents) || amountInCents <= 0) {
        showToast(
          t("transconfirm.toastErrorTitle"),
          t("transconfirm.toastInvalidAmount"),
          "error"
        );
        return;
      }

      setIsProcessing(true);
      try {
        router.push({
          pathname: ROUTES.TRANSACTION_DETAIL,
          params: {
            amount: params.amount,
            type: "event_ticket",
            recipientName: params.eventName || "",
            date: new Date().toISOString(),
            status: "Completed",
            note: params.ticketTierName || "",
            flowType: "event_ticket",
            ticketTierId: params.ticketTierId || "",
            ticketCount: params.ticketCount || "1",
            eventId: params.eventId || "",
          },
        });
      } finally {
        setIsProcessing(false);
      }

      return;
    }

    if (!params.amount || !user?.uid) {
      showToast(
        t("transconfirm.toastErrorTitle"),
        t("transconfirm.toastMissingDetails"),
        "error"
      );
      return;
    }

    const amountInCents = parseInt(params.amount);
    if (isNaN(amountInCents) || amountInCents <= 0) {
      showToast(
        t("transconfirm.toastErrorTitle"),
        t("transconfirm.toastInvalidAmount"),
        "error"
      );
      return;
    }

    const totalRequired = calculateTotalAmountForSending(amountInCents);
    if (!wallet) {
      showToast(
        t("transconfirm.toastErrorTitle"),
        t("transconfirm.toastWalletNotFound"),
        "error"
      );
      return;
    }
    if (wallet.balance < totalRequired) {
      const processingFee = calculateProcessingFee(amountInCents);
      const required = (totalRequired / 100).toFixed(2);
      const fee = (processingFee / 100).toFixed(2);
      const available = (wallet.balance / 100).toFixed(2);
      showToast(
        t("transconfirm.toastInsufficientBalanceTitle"),
        t("transconfirm.toastInsufficientBalanceDescription", {
          required,
          fee,
          available,
        }),
        "error"
      );
      return;
    }

    if (
      !params.recipientName ||
      !params.recipientPhoneNumber ||
      !params.recipientType ||
      !params.recipientId
    ) {
      showToast(
        t("transconfirm.toastErrorTitle"),
        t("transconfirm.toastRecipientMissing"),
        "error"
      );
      return;
    }

    setIsProcessing(true);

    try {
      const result = await TransactionService.sendMoney(user.uid, {
        amount: amountInCents,
        recipientName: params.recipientName,
        recipientPhoneNumber: params.recipientPhoneNumber,
        recipientType: params.recipientType as "saved" | "contact",
        recipientId: params.recipientId,
        note: params.note?.trim() || "",
      });

      if (result.success) {
        await refreshWallet();

        router.replace({
          pathname: "/(screens)/taskcomp",
          params: {
            message: `Transaction completed on your end. $${(
              amountInCents / 100
            ).toFixed(2)} will be claimed by ${
              params.recipientName
            } within 7 days, or the money will revert to your wallet.`,
            amount: (amountInCents / 100).toFixed(2),
            recipientName: params.recipientName,
            recipientPhoneNumber: params.recipientPhoneNumber,
          },
        });
      } else {
        showToast(
          t("transconfirm.toastErrorTitle"),
          result.error || t("transconfirm.toastSendFailed"),
          "error"
        );
      }
    } catch (error) {
      console.error("Error sending money:", error);
      showToast(
        t("transconfirm.toastErrorTitle"),
        t("transconfirm.toastSendFailedWithRetry"),
        "error"
      );
    } finally {
      setIsProcessing(false);
    }
  };

  return (
    <ScreenWrapper edges={[]}>
      <View className="flex-1">
        <View className="pt-4">
          <BackButton />
        </View>

        <ScrollView
          className="flex-1 px-5"
          contentContainerStyle={{ paddingBottom: 32 }}
          showsVerticalScrollIndicator={false}
        >
          <Text className="text-2xl font-dmsans-bold text-black mb-3">
            {t("checkout.title")}
          </Text>

          <View className="bg-gray-100 rounded-2xl px-4 py-3 mb-4 flex-row justify-between items-center">
            <View style={{ flex: 1 }}>
              <Text className="text-xs font-dmsans text-gray-500 mb-1">
                {isEventTicketFlow ? "Ticket" : t("checkout.recipientLabel")}
              </Text>
              <Text
                className="text-base font-dmsans-medium text-gray-900"
                numberOfLines={1}
              >
                {headerTitle}
              </Text>
              <Text className="text-xs font-dmsans text-gray-500 mt-1">
                {headerSubtitle}
              </Text>
            </View>
            <View className="items-end ml-4">
              <Text className="text-xs font-dmsans text-gray-500 mb-1">
                {t("checkout.totalLabel")}
              </Text>
              <Text className="text-xl font-dmsans-bold text-gray-900">
                ${totalInDollars.toFixed(2)}
              </Text>
            </View>
          </View>
          <Text className="text-lg font-dmsans-medium  mb-6">
            {t("checkout.subtitle")}
          </Text>

          {/* Payment options */}
          <View className="mb-6">
            <Text className="text-base font-dmsans-medium mb-3">
              {t("checkout.paymentOptionsTitle")}
            </Text>
            <View className="flex-row gap-3">
              <PaymentOptionCard
                label="Card"
                icon={
                  <Image
                    source={Icons.cardCheck}
                    style={{ width: 20, height: 20, resizeMode: "contain" }}
                  />
                }
                selected={selectedPayment === "card"}
                onPress={() => setSelectedPayment("card")}
              />
              <PaymentOptionCard
                label="Apple Pay"
                icon={
                  <Image
                    source={Icons.applePay}
                    style={{ width: 20, height: 20, resizeMode: "contain" }}
                  />
                }
                selected={selectedPayment === "apple"}
                onPress={() => setSelectedPayment("apple")}
              />
              <PaymentOptionCard
                label="Google Pay"
                icon={<GoogleIcon width={20} height={20} />}
                selected={selectedPayment === "google"}
                onPress={() => setSelectedPayment("google")}
              />
            </View>
          </View>

          {selectedPayment === "card" ? (
            <View className="mb-6">
              <Text className="text-base font-dmsans-medium mb-2">
                {t("checkout.cardInfoTitle")}
              </Text>

              <View className="mb-3">
                <Input
                  value={cardNumber}
                  onChangeText={handleCardNumberChange}
                  placeholderText={t("checkout.cardNumberPlaceholder")}
                  placeholderColor="#7E7E7E"
                  containerClassName="w-full"
                  borderClassName="border-[#D9DBE9] bg-white"
                  textClassName="text-[#000] text-sm"
                  keyboardType="numeric"
                  maxLength={19}
                />
              </View>
              <View className="flex-row gap-3">
                <View className="flex-1">
                  <Input
                    value={expiry}
                    onChangeText={handleExpiryChange}
                    placeholderText={t("checkout.expiryPlaceholder")}
                    placeholderColor="#7E7E7E"
                    containerClassName="w-full"
                    borderClassName="border-[#D9DBE9] bg-white"
                    textClassName="text-[#000] text-sm"
                    keyboardType="numeric"
                    maxLength={5}
                  />
                </View>
                <View className="flex-1">
                  <Input
                    value={cvv}
                    onChangeText={handleCvvChange}
                    placeholderText={t("checkout.cvvPlaceholder")}
                    placeholderColor="#7E7E7E"
                    containerClassName="w-full"
                    borderClassName="border-[#D9DBE9] bg-white"
                    textClassName="text-[#000] text-sm"
                    keyboardType="numeric"
                    secureTextEntry={!showCvv}
                    maxLength={4}
                  />
                </View>
              </View>
            </View>
          ) : (
            <View className="mb-6">
              <Text className="text-base font-dmsans-medium mb-2">
                {selectedPayment === "apple"
                  ? t("checkout.appleIdTitle")
                  : t("checkout.paymentEmailTitle")}
              </Text>
              <Input
                value={email}
                onChangeText={setEmail}
                placeholderText={
                  selectedPayment === "apple"
                    ? t("checkout.appleIdPlaceholder")
                    : t("checkout.paymentEmailPlaceholder")
                }
                placeholderColor="#6B7280"
                containerClassName="w-full"
                borderClassName="border-[#D9DBE9] bg-white"
                textClassName="text-[#000] text-sm"
                keyboardType="email-address"
                autoCapitalize="none"
              />
            </View>
          )}

          <View className="h-px bg-gray-200 mb-4" />

          {/* Contact information */}
          <View className="mb-6">
            <Text className="text-sm font-dmsans-medium mb-2">
              {t("checkout.contactInfoTitle")}
            </Text>
            <Input
              value={email || profile?.phoneNumber || profile?.email || ""}
              onChangeText={setEmail}
              placeholderText="Email"
              placeholderColor="#6B7280"
              containerClassName="w-full"
              borderClassName="border-[#D9DBE9]"
              textClassName="text-base text-black"
              editable={false}
              multiline
            />
          </View>

          {/* Billing address */}
          <View className="mb-6">
            <Text className="text-sm font-dmsans-medium mb-2">
              {t("checkout.billingAddressTitle")}
            </Text>
            <Input
              value={address || profile?.address || ""}
              onChangeText={setAddress}
              placeholderText="Address"
              placeholderColor="#6B7280"
              containerClassName="w-full"
              borderClassName="border-[#D9DBE9]"
              textClassName="text-base text-black"
              editable={false}
              multiline
            />
          </View>
        </ScrollView>

        <View className="px-5 pb-6 pt-2 ">
          <Button
            className="bg-primary rounded-2xl h-12 items-center justify-center"
            onPress={handlePay}
            disabled={isProcessing}
          >
            <Text className="text-white font-dmsans-medium text-base">
              {isProcessing
                ? t("checkout.payButtonProcessing")
                : t("checkout.payButton")}
            </Text>
          </Button>
        </View>
      </View>

      <ModalToast
        visible={toastVisible}
        title={toastTitle}
        description={toastDescription}
        variant={toastVariant}
      />
    </ScreenWrapper>
  );
}