"use client";

import { useEffect, useState } from "react";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import {
  Building2,
  CreditCard,
  Landmark,
  Loader2,
  Plus,
  Smartphone,
  Trash2,
  Wallet,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useToastEnhanced } from "@/hooks/use-toast-enhanced";
import {
  PAYMENT_METHODS,
  paymentMethodOptionLabel,
} from "@/lib/strings/payment-methods";
import { cn } from "@/lib/utils";
import {
  createMyPaymentMethodAction,
  deleteMyPaymentMethodAction,
  getMyPaymentMethodsAction,
} from "@/features/payment/actions/payment-methods-actions";
import type {
  CreatePaymentMethodInput,
  PaymentMethodDetails,
  PaymentMethodItem,
  PaymentMethodType,
} from "@/core/api/services/payment-methods";

type PaymentMethodForm = {
  type: PaymentMethodType;
  upi_id: string;
  account_name: string;
  card_number: string;
  card_holder_name: string;
  expiry_month: string;
  expiry_year: string;
  cvv: string;
  bank_name: string;
  account_number: string;
  ifsc_code: string;
  account_holder_name: string;
  wallet_type: string;
  mobile_number: string;
};

const INITIAL_FORM: PaymentMethodForm = {
  type: "UPI",
  upi_id: "",
  account_name: "",
  card_number: "",
  card_holder_name: "",
  expiry_month: "",
  expiry_year: "",
  cvv: "",
  bank_name: "",
  account_number: "",
  ifsc_code: "",
  account_holder_name: "",
  wallet_type: "",
  mobile_number: "",
};

type PaymentMethodErrors = Partial<Record<keyof PaymentMethodForm, string>>;

const inflightPaymentMethodsRequest = new Map<
  string,
  ReturnType<typeof getMyPaymentMethodsAction>
>();

const PAYMENT_METHOD_OPTIONS: Array<{
  type: PaymentMethodType;
  label: string;
  icon: typeof Wallet;
}> = [
  { type: "UPI", label: paymentMethodOptionLabel("UPI"), icon: Wallet },
  { type: "CARD", label: paymentMethodOptionLabel("CARD"), icon: CreditCard },
  {
    type: "NET_BANKING",
    label: paymentMethodOptionLabel("NET_BANKING"),
    icon: Landmark,
  },
  {
    type: "WALLET",
    label: paymentMethodOptionLabel("WALLET"),
    icon: Smartphone,
  },
];

const getMethodVisuals = (type: PaymentMethodType) => {
  switch (type) {
    case "UPI":
      return { icon: Wallet, className: "bg-orange-50 text-orange-600" };
    case "CARD":
      return { icon: CreditCard, className: "bg-violet-50 text-violet-600" };
    case "NET_BANKING":
      return { icon: Building2, className: "bg-blue-50 text-blue-600" };
    case "WALLET":
      return { icon: Smartphone, className: "bg-emerald-50 text-emerald-600" };
  }
};

const validatePaymentDetails = (
  methodType: PaymentMethodType,
  details: PaymentMethodForm
): PaymentMethodErrors => {
  const errors: PaymentMethodErrors = {};

  switch (methodType) {
    case "UPI":
      if (!details.upi_id) errors.upi_id = PAYMENT_METHODS.UPI_REQUIRED;
      if (!details.account_name)
        errors.account_name = PAYMENT_METHODS.ACCOUNT_NAME_REQUIRED;
      break;
    case "CARD":
      if (!details.card_number)
        errors.card_number = PAYMENT_METHODS.CARD_NUMBER_REQUIRED;
      if (!details.card_holder_name)
        errors.card_holder_name = PAYMENT_METHODS.CARD_HOLDER_REQUIRED;
      if (!details.expiry_month)
        errors.expiry_month = PAYMENT_METHODS.EXPIRY_MONTH_REQUIRED;
      if (!details.expiry_year)
        errors.expiry_year = PAYMENT_METHODS.EXPIRY_YEAR_REQUIRED;
      if (!details.cvv) errors.cvv = PAYMENT_METHODS.CVV_REQUIRED;
      break;
    case "NET_BANKING":
      if (!details.bank_name)
        errors.bank_name = PAYMENT_METHODS.BANK_NAME_REQUIRED;
      if (!details.account_number)
        errors.account_number = PAYMENT_METHODS.ACCOUNT_NUMBER_REQUIRED;
      if (!details.ifsc_code) errors.ifsc_code = PAYMENT_METHODS.IFSC_REQUIRED;
      if (!details.account_holder_name)
        errors.account_holder_name = PAYMENT_METHODS.ACCOUNT_HOLDER_REQUIRED;
      break;
    case "WALLET":
      if (!details.wallet_type)
        errors.wallet_type = PAYMENT_METHODS.WALLET_TYPE_REQUIRED;
      if (!details.mobile_number)
        errors.mobile_number = PAYMENT_METHODS.MOBILE_NUMBER_REQUIRED;
      if (!details.account_name)
        errors.account_name = PAYMENT_METHODS.ACCOUNT_NAME_REQUIRED;
      break;
  }

  return errors;
};

function dedupedGetMyPaymentMethodsAction() {
  const key = "my-payment-methods";
  const existing = inflightPaymentMethodsRequest.get(key);
  if (existing) return existing;

  const pending = getMyPaymentMethodsAction().finally(() => {
    inflightPaymentMethodsRequest.delete(key);
  });

  inflightPaymentMethodsRequest.set(key, pending);
  return pending;
}

function sortPaymentMethods(methods: PaymentMethodItem[]): PaymentMethodItem[] {
  return [...methods].sort((a, b) => {
    const aIsActive = String(a.status).toLowerCase() === "active";
    const bIsActive = String(b.status).toLowerCase() === "active";

    if (aIsActive === bIsActive) return 0;
    return aIsActive ? -1 : 1;
  });
}

export default function PaymentMethodsContent() {
  const toast = useToastEnhanced();
  const [paymentMethods, setPaymentMethods] = useState<PaymentMethodItem[]>([]);
  const [isLoadingMethods, setIsLoadingMethods] = useState(true);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [deletingMethodId, setDeletingMethodId] = useState<
    string | number | null
  >(null);
  const [isAddMethodOpen, setIsAddMethodOpen] = useState(false);
  const [methodForm, setMethodForm] = useState<PaymentMethodForm>(INITIAL_FORM);
  const [formErrors, setFormErrors] = useState<PaymentMethodErrors>({});

  useEffect(() => {
    let active = true;

    const loadPaymentMethods = async () => {
      try {
        setIsLoadingMethods(true);
        const result = await dedupedGetMyPaymentMethodsAction();
        if (!active) return;

        if (result.success) {
          setPaymentMethods(sortPaymentMethods(result.data ?? []));
        } else {
          toast.error({
            title: PAYMENT_METHODS.LOAD_FAILED_TITLE,
            description: result.error || PAYMENT_METHODS.SOMETHING_WENT_WRONG,
          });
        }
      } finally {
        if (active) setIsLoadingMethods(false);
      }
    };

    void loadPaymentMethods();

    return () => {
      active = false;
    };
  }, [toast]);

  const updateMethodForm = <K extends keyof PaymentMethodForm>(
    key: K,
    value: PaymentMethodForm[K]
  ) => {
    setFormErrors((prev) => ({ ...prev, [key]: undefined }));
    setMethodForm((prev) => ({ ...prev, [key]: value }));
  };

  const resetMethodForm = () => {
    setMethodForm(INITIAL_FORM);
    setFormErrors({});
  };

  const buildCreatePayload = (): CreatePaymentMethodInput => {
    const details: PaymentMethodDetails = (() => {
      switch (methodForm.type) {
        case "UPI":
          return {
            upi_id: methodForm.upi_id,
            account_name: methodForm.account_name,
          };
        case "CARD":
          return {
            card_number: methodForm.card_number,
            card_holder_name: methodForm.card_holder_name,
            expiry_month: methodForm.expiry_month,
            expiry_year: methodForm.expiry_year,
            cvv: methodForm.cvv,
          };
        case "NET_BANKING":
          return {
            bank_name: methodForm.bank_name,
            account_number: methodForm.account_number,
            ifsc_code: methodForm.ifsc_code,
            account_holder_name: methodForm.account_holder_name,
          };
        case "WALLET":
          return {
            wallet_type: methodForm.wallet_type,
            mobile_number: methodForm.mobile_number,
            account_name: methodForm.account_name,
          };
      }
    })();

    return {
      provider_name:
        methodForm.type === "UPI"
          ? methodForm.account_name
          : methodForm.type === "CARD"
            ? methodForm.card_holder_name
            : methodForm.type === "NET_BANKING"
              ? methodForm.bank_name
              : methodForm.wallet_type,
      method_type: methodForm.type,
      details,
      status: "inactive",
    };
  };

  const handleAddMethod = async () => {
    const errors = validatePaymentDetails(methodForm.type, methodForm);
    if (Object.keys(errors).length > 0) {
      setFormErrors(errors);
      toast.error({
        title: PAYMENT_METHODS.MISSING_FIELDS_TITLE,
        description: PAYMENT_METHODS.MISSING_FIELDS_DESCRIPTION,
      });
      return;
    }

    try {
      setIsSubmitting(true);
      const result = await createMyPaymentMethodAction(buildCreatePayload());

      if (!result.success) {
        toast.error({
          title: PAYMENT_METHODS.SAVE_FAILED_TITLE,
          description: result.error || PAYMENT_METHODS.SOMETHING_WENT_WRONG,
        });
        return;
      }

      if (result.data) {
        setPaymentMethods((prev) =>
          sortPaymentMethods([result.data!, ...prev])
        );
      } else {
        const refreshed = await getMyPaymentMethodsAction();
        if (refreshed.success) {
          setPaymentMethods(sortPaymentMethods(refreshed.data ?? []));
        }
      }

      setIsAddMethodOpen(false);
      resetMethodForm();
      toast.success({
        title: PAYMENT_METHODS.ADDED_TITLE,
        description: PAYMENT_METHODS.ADDED_DESCRIPTION,
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleDeleteMethod = async (method: PaymentMethodItem) => {
    try {
      setDeletingMethodId(method.id);
      const result = await deleteMyPaymentMethodAction(method.id);

      if (!result.success) {
        toast.error({
          title: PAYMENT_METHODS.DELETE_FAILED_TITLE,
          description: result.error || PAYMENT_METHODS.SOMETHING_WENT_WRONG,
        });
        return;
      }

      setPaymentMethods((prev) => prev.filter((item) => item.id !== method.id));
      toast.success({
        title: PAYMENT_METHODS.DELETED_TITLE,
        description: `${getPaymentMethodTitle(method)}${PAYMENT_METHODS.DELETED_DESCRIPTION_SUFFIX}`,
      });
    } finally {
      setDeletingMethodId(null);
    }
  };

  const getPaymentMethodTitle = (method: PaymentMethodItem) => {
    switch (method.method_type) {
      case "UPI":
        return PAYMENT_METHODS.UPI_TITLE;
      case "CARD":
        return method.provider_name || PAYMENT_METHODS.CARD_FALLBACK;
      case "NET_BANKING":
        return method.provider_name || PAYMENT_METHODS.NET_BANKING_FALLBACK;
      case "WALLET":
        return method.provider_name || PAYMENT_METHODS.WALLET_FALLBACK;
    }
  };

  const getPaymentMethodSubtitle = (method: PaymentMethodItem) => {
    switch (method.method_type) {
      case "UPI":
        return (
          method.details.account_name ||
          method.provider_name ||
          PAYMENT_METHODS.UPI_FALLBACK
        );
      case "CARD":
        return (
          method.details.card_holder_name ||
          method.provider_name ||
          PAYMENT_METHODS.CARD_FALLBACK
        );
      case "NET_BANKING":
        return (
          method.details.account_holder_name ||
          method.provider_name ||
          PAYMENT_METHODS.ACCOUNT_HOLDER_FALLBACK
        );
      case "WALLET":
        return (
          method.details.account_name ||
          method.provider_name ||
          PAYMENT_METHODS.WALLET_FALLBACK
        );
    }
  };

  const getPaymentMethodDetail = (method: PaymentMethodItem) => {
    switch (method.method_type) {
      case "UPI":
        return method.details.upi_id || PAYMENT_METHODS.UPI_DETAILS_FALLBACK;
      case "CARD":
        return `${PAYMENT_METHODS.CARD_ENDING_PREFIX}${String(method.details.card_number ?? "").slice(-4) || PAYMENT_METHODS.PLACEHOLDER_MASK}${PAYMENT_METHODS.EXPIRES_PREFIX}${method.details.expiry_month || PAYMENT_METHODS.PLACEHOLDER_MM}/${method.details.expiry_year || PAYMENT_METHODS.PLACEHOLDER_YYYY}`;
      case "NET_BANKING":
        return `${PAYMENT_METHODS.ACCOUNT_ENDING_PREFIX}${String(method.details.account_number ?? "").slice(-4) || PAYMENT_METHODS.PLACEHOLDER_MASK}${PAYMENT_METHODS.IFSC_PREFIX}${method.details.ifsc_code || PAYMENT_METHODS.NOT_AVAILABLE}`;
      case "WALLET":
        return `${PAYMENT_METHODS.MOBILE_ENDING_PREFIX}${String(method.details.mobile_number ?? "").slice(-4) || PAYMENT_METHODS.PLACEHOLDER_MASK}`;
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
        <div className="space-y-2">
          <h1 className="text-2xl font-bold text-gray-900 md:text-3xl">
            {PAYMENT_METHODS.PAGE_TITLE}
          </h1>
          <p className="text-sm text-muted-foreground md:text-base">
            {PAYMENT_METHODS.PAGE_SUBTITLE}
          </p>
        </div>

        <Button
          onClick={() => setIsAddMethodOpen(true)}
          className="w-full md:w-auto"
        >
          <Plus className="mr-2 h-4 w-4" />
          {PAYMENT_METHODS.ADD_NEW_PAYMENT_METHOD}
        </Button>
      </div>

      <div className="grid gap-6">
        <Card className="border-border/60 shadow-sm">
          <CardHeader className="pb-3">
            <CardTitle className="flex items-center gap-2 text-lg">
              <CreditCard className="h-5 w-5 text-teal-600" />
              {PAYMENT_METHODS.SAVED_PAYMENT_METHODS}
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {isLoadingMethods ? (
              <div
                className="flex items-center justify-center py-10"
                aria-label={PAYMENT_METHODS.LOADING_ARIA}
              >
                <Loader2 className="h-6 w-6 animate-spin text-teal-600" />
              </div>
            ) : paymentMethods.length === 0 ? (
              <div className="rounded-2xl border border-dashed p-8 text-center">
                <p className="font-medium text-foreground">
                  {PAYMENT_METHODS.EMPTY_TITLE}
                </p>
                <p className="mt-1 text-sm text-muted-foreground">
                  {PAYMENT_METHODS.EMPTY_DESCRIPTION}
                </p>
              </div>
            ) : (
              paymentMethods.map((method) => (
                <div
                  key={method.id}
                  className={cn(
                    "flex items-start gap-4 rounded-2xl border p-4 transition-all",
                    String(method.status).toLowerCase() === "active"
                      ? "border-teal-300 bg-teal-50/70 shadow-sm"
                      : "border-border/70 bg-white hover:border-teal-200 hover:bg-muted/30"
                  )}
                >
                  <div
                    className={cn(
                      "flex h-11 w-11 shrink-0 items-center justify-center rounded-xl",
                      getMethodVisuals(method.method_type).className
                    )}
                  >
                    {(() => {
                      const Icon = getMethodVisuals(method.method_type).icon;
                      return <Icon className="h-5 w-5" />;
                    })()}
                  </div>
                  <div className="min-w-0 flex-1 space-y-1">
                    <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                      <div>
                        <p className="font-semibold text-foreground">
                          {getPaymentMethodTitle(method)}
                        </p>
                        <p className="text-sm text-muted-foreground">
                          {getPaymentMethodSubtitle(method)}
                        </p>
                      </div>
                      <div className="flex flex-wrap items-center gap-2">
                        <Badge
                          variant="secondary"
                          className="w-fit bg-slate-100 text-slate-700"
                        >
                          {method.method_type}
                        </Badge>
                        <Badge
                          variant="secondary"
                          className={cn(
                            "w-fit capitalize",
                            String(method.status).toLowerCase() === "active"
                              ? "bg-teal-100 text-teal-700"
                              : "hidden"
                          )}
                        >
                          {PAYMENT_METHODS.DEFAULT_PILL}
                        </Badge>
                        <AlertDialog>
                          <AlertDialogTrigger asChild>
                            <Button
                              type="button"
                              variant="ghost"
                              size="icon"
                              className="h-8 w-8 text-red-600 hover:bg-red-50 hover:text-red-700"
                              aria-label={`${PAYMENT_METHODS.DELETE_ARIA_PREFIX}${getPaymentMethodTitle(method)}`}
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </AlertDialogTrigger>
                          <AlertDialogContent>
                            <AlertDialogHeader>
                              <AlertDialogTitle>
                                {PAYMENT_METHODS.DELETE_DIALOG_TITLE}
                              </AlertDialogTitle>
                              <AlertDialogDescription>
                                {
                                  PAYMENT_METHODS.DELETE_DIALOG_DESCRIPTION_PREFIX
                                }
                                <span className="font-medium text-foreground">
                                  {getPaymentMethodTitle(method)}
                                </span>{" "}
                                {
                                  PAYMENT_METHODS.DELETE_DIALOG_DESCRIPTION_SUFFIX
                                }
                              </AlertDialogDescription>
                            </AlertDialogHeader>
                            <AlertDialogFooter>
                              <AlertDialogCancel
                                disabled={deletingMethodId === method.id}
                              >
                                {PAYMENT_METHODS.KEEP_METHOD}
                              </AlertDialogCancel>
                              <AlertDialogAction
                                onClick={(event) => {
                                  event.preventDefault();
                                  void handleDeleteMethod(method);
                                }}
                                disabled={deletingMethodId === method.id}
                                className="bg-red-600 hover:bg-red-700"
                              >
                                {deletingMethodId === method.id ? (
                                  <>
                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                    {PAYMENT_METHODS.DELETING}
                                  </>
                                ) : (
                                  PAYMENT_METHODS.DELETE_METHOD
                                )}
                              </AlertDialogAction>
                            </AlertDialogFooter>
                          </AlertDialogContent>
                        </AlertDialog>
                      </div>
                    </div>
                    <p className="text-sm text-muted-foreground">
                      {getPaymentMethodDetail(method)}
                    </p>
                  </div>
                </div>
              ))
            )}
          </CardContent>
        </Card>
      </div>

      <Dialog
        open={isAddMethodOpen}
        onOpenChange={(open) => {
          setIsAddMethodOpen(open);
          if (!open) resetMethodForm();
        }}
      >
        <DialogContent className="sm:max-w-lg">
          <DialogHeader>
            <DialogTitle>{PAYMENT_METHODS.DIALOG_TITLE}</DialogTitle>
          </DialogHeader>

          <div className="space-y-5 py-2">
            <div className="space-y-2">
              <Label>{PAYMENT_METHODS.PAYMENT_METHOD_TYPE}</Label>
              <div className="grid grid-cols-2 gap-3">
                {PAYMENT_METHOD_OPTIONS.map((option) => {
                  const Icon = option.icon;

                  return (
                    <Button
                      key={option.type}
                      type="button"
                      variant={
                        methodForm.type === option.type ? "default" : "outline"
                      }
                      className="justify-start"
                      onClick={() => {
                        updateMethodForm("type", option.type);
                        setFormErrors({});
                      }}
                    >
                      <Icon className="mr-2 h-4 w-4" />
                      {option.label}
                    </Button>
                  );
                })}
              </div>
            </div>

            {methodForm.type === "UPI" ? (
              <div className="grid gap-4">
                <div className="space-y-2">
                  <Label htmlFor="upi_id">{PAYMENT_METHODS.UPI_ID_LABEL}</Label>
                  <Input
                    id="upi_id"
                    placeholder={PAYMENT_METHODS.UPI_ID_PLACEHOLDER}
                    value={methodForm.upi_id}
                    onChange={(event) =>
                      updateMethodForm("upi_id", event.target.value)
                    }
                    className={formErrors.upi_id ? "border-red-500" : undefined}
                  />
                  {formErrors.upi_id ? (
                    <p className="text-sm text-red-600">{formErrors.upi_id}</p>
                  ) : null}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="account_name">
                    {PAYMENT_METHODS.ACCOUNT_NAME_LABEL}
                  </Label>
                  <Input
                    id="account_name"
                    placeholder={PAYMENT_METHODS.ACCOUNT_NAME_PLACEHOLDER}
                    value={methodForm.account_name}
                    onChange={(event) =>
                      updateMethodForm("account_name", event.target.value)
                    }
                    className={
                      formErrors.account_name ? "border-red-500" : undefined
                    }
                  />
                  {formErrors.account_name ? (
                    <p className="text-sm text-red-600">
                      {formErrors.account_name}
                    </p>
                  ) : null}
                </div>
              </div>
            ) : null}

            {methodForm.type === "CARD" ? (
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2 sm:col-span-2">
                  <Label htmlFor="card_number">
                    {PAYMENT_METHODS.CARD_NUMBER_LABEL}
                  </Label>
                  <Input
                    id="card_number"
                    placeholder={PAYMENT_METHODS.CARD_NUMBER_PLACEHOLDER}
                    value={methodForm.card_number}
                    onChange={(event) =>
                      updateMethodForm("card_number", event.target.value)
                    }
                    className={
                      formErrors.card_number ? "border-red-500" : undefined
                    }
                  />
                  {formErrors.card_number ? (
                    <p className="text-sm text-red-600">
                      {formErrors.card_number}
                    </p>
                  ) : null}
                </div>
                <div className="space-y-2 sm:col-span-2">
                  <Label htmlFor="card_holder_name">
                    {PAYMENT_METHODS.CARD_HOLDER_NAME_LABEL}
                  </Label>
                  <Input
                    id="card_holder_name"
                    placeholder={PAYMENT_METHODS.CARD_HOLDER_NAME_PLACEHOLDER}
                    value={methodForm.card_holder_name}
                    onChange={(event) =>
                      updateMethodForm("card_holder_name", event.target.value)
                    }
                    className={
                      formErrors.card_holder_name ? "border-red-500" : undefined
                    }
                  />
                  {formErrors.card_holder_name ? (
                    <p className="text-sm text-red-600">
                      {formErrors.card_holder_name}
                    </p>
                  ) : null}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="expiry_month">
                    {PAYMENT_METHODS.EXPIRY_MONTH_LABEL}
                  </Label>
                  <Input
                    id="expiry_month"
                    placeholder={PAYMENT_METHODS.EXPIRY_MONTH_PLACEHOLDER}
                    value={methodForm.expiry_month}
                    onChange={(event) =>
                      updateMethodForm("expiry_month", event.target.value)
                    }
                    className={
                      formErrors.expiry_month ? "border-red-500" : undefined
                    }
                  />
                  {formErrors.expiry_month ? (
                    <p className="text-sm text-red-600">
                      {formErrors.expiry_month}
                    </p>
                  ) : null}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="expiry_year">
                    {PAYMENT_METHODS.EXPIRY_YEAR_LABEL}
                  </Label>
                  <Input
                    id="expiry_year"
                    placeholder={PAYMENT_METHODS.EXPIRY_YEAR_PLACEHOLDER}
                    value={methodForm.expiry_year}
                    onChange={(event) =>
                      updateMethodForm("expiry_year", event.target.value)
                    }
                    className={
                      formErrors.expiry_year ? "border-red-500" : undefined
                    }
                  />
                  {formErrors.expiry_year ? (
                    <p className="text-sm text-red-600">
                      {formErrors.expiry_year}
                    </p>
                  ) : null}
                </div>
                <div className="space-y-2 sm:col-span-2">
                  <Label htmlFor="cvv">{PAYMENT_METHODS.CVV_LABEL}</Label>
                  <Input
                    id="cvv"
                    placeholder={PAYMENT_METHODS.CVV_PLACEHOLDER}
                    value={methodForm.cvv}
                    onChange={(event) =>
                      updateMethodForm("cvv", event.target.value)
                    }
                    className={formErrors.cvv ? "border-red-500" : undefined}
                  />
                  {formErrors.cvv ? (
                    <p className="text-sm text-red-600">{formErrors.cvv}</p>
                  ) : null}
                </div>
              </div>
            ) : null}

            {methodForm.type === "NET_BANKING" ? (
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2 sm:col-span-2">
                  <Label htmlFor="account_holder_name">
                    {PAYMENT_METHODS.ACCOUNT_HOLDER_NAME_LABEL}
                  </Label>
                  <Input
                    id="account_holder_name"
                    placeholder={
                      PAYMENT_METHODS.ACCOUNT_HOLDER_NAME_PLACEHOLDER
                    }
                    value={methodForm.account_holder_name}
                    onChange={(event) =>
                      updateMethodForm(
                        "account_holder_name",
                        event.target.value
                      )
                    }
                    className={
                      formErrors.account_holder_name
                        ? "border-red-500"
                        : undefined
                    }
                  />
                  {formErrors.account_holder_name ? (
                    <p className="text-sm text-red-600">
                      {formErrors.account_holder_name}
                    </p>
                  ) : null}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="bank_name">
                    {PAYMENT_METHODS.BANK_NAME_LABEL}
                  </Label>
                  <Input
                    id="bank_name"
                    placeholder={PAYMENT_METHODS.BANK_NAME_PLACEHOLDER}
                    value={methodForm.bank_name}
                    onChange={(event) =>
                      updateMethodForm("bank_name", event.target.value)
                    }
                    className={
                      formErrors.bank_name ? "border-red-500" : undefined
                    }
                  />
                  {formErrors.bank_name ? (
                    <p className="text-sm text-red-600">
                      {formErrors.bank_name}
                    </p>
                  ) : null}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="ifsc_code">
                    {PAYMENT_METHODS.IFSC_CODE_LABEL}
                  </Label>
                  <Input
                    id="ifsc_code"
                    placeholder={PAYMENT_METHODS.IFSC_CODE_PLACEHOLDER}
                    value={methodForm.ifsc_code}
                    onChange={(event) =>
                      updateMethodForm("ifsc_code", event.target.value)
                    }
                    className={
                      formErrors.ifsc_code ? "border-red-500" : undefined
                    }
                  />
                  {formErrors.ifsc_code ? (
                    <p className="text-sm text-red-600">
                      {formErrors.ifsc_code}
                    </p>
                  ) : null}
                </div>
                <div className="space-y-2 sm:col-span-2">
                  <Label htmlFor="account_number">
                    {PAYMENT_METHODS.ACCOUNT_NUMBER_LABEL}
                  </Label>
                  <Input
                    id="account_number"
                    placeholder={PAYMENT_METHODS.ACCOUNT_NUMBER_PLACEHOLDER}
                    value={methodForm.account_number}
                    onChange={(event) =>
                      updateMethodForm("account_number", event.target.value)
                    }
                    className={
                      formErrors.account_number ? "border-red-500" : undefined
                    }
                  />
                  {formErrors.account_number ? (
                    <p className="text-sm text-red-600">
                      {formErrors.account_number}
                    </p>
                  ) : null}
                </div>
              </div>
            ) : null}

            {methodForm.type === "WALLET" ? (
              <div className="grid gap-4">
                <div className="space-y-2">
                  <Label htmlFor="wallet_type">
                    {PAYMENT_METHODS.WALLET_TYPE_LABEL}
                  </Label>
                  <Input
                    id="wallet_type"
                    placeholder={PAYMENT_METHODS.WALLET_TYPE_PLACEHOLDER}
                    value={methodForm.wallet_type}
                    onChange={(event) =>
                      updateMethodForm("wallet_type", event.target.value)
                    }
                    className={
                      formErrors.wallet_type ? "border-red-500" : undefined
                    }
                  />
                  {formErrors.wallet_type ? (
                    <p className="text-sm text-red-600">
                      {formErrors.wallet_type}
                    </p>
                  ) : null}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="mobile_number">
                    {PAYMENT_METHODS.MOBILE_NUMBER_LABEL}
                  </Label>
                  <Input
                    id="mobile_number"
                    placeholder={PAYMENT_METHODS.MOBILE_NUMBER_PLACEHOLDER}
                    value={methodForm.mobile_number}
                    onChange={(event) =>
                      updateMethodForm("mobile_number", event.target.value)
                    }
                    className={
                      formErrors.mobile_number ? "border-red-500" : undefined
                    }
                  />
                  {formErrors.mobile_number ? (
                    <p className="text-sm text-red-600">
                      {formErrors.mobile_number}
                    </p>
                  ) : null}
                </div>
                <div className="space-y-2">
                  <Label htmlFor="wallet_account_name">
                    {PAYMENT_METHODS.WALLET_ACCOUNT_NAME_LABEL}
                  </Label>
                  <Input
                    id="wallet_account_name"
                    placeholder={PAYMENT_METHODS.ACCOUNT_NAME_PLACEHOLDER}
                    value={methodForm.account_name}
                    onChange={(event) =>
                      updateMethodForm("account_name", event.target.value)
                    }
                    className={
                      formErrors.account_name ? "border-red-500" : undefined
                    }
                  />
                  {formErrors.account_name ? (
                    <p className="text-sm text-red-600">
                      {formErrors.account_name}
                    </p>
                  ) : null}
                </div>
              </div>
            ) : null}
          </div>

          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => {
                setIsAddMethodOpen(false);
                resetMethodForm();
              }}
              disabled={isSubmitting}
            >
              {PAYMENT_METHODS.CANCEL}
            </Button>
            <Button onClick={handleAddMethod} disabled={isSubmitting}>
              {isSubmitting ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  {PAYMENT_METHODS.ADDING}
                </>
              ) : (
                PAYMENT_METHODS.ADD_PAYMENT_METHOD
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}