"use client";

import { Pencil, Plus, Save, Shield, Star, X } from "lucide-react";
import { useState } from "react";

import {
  CreditCard,
  CreditCardBack,
  CreditCardChip,
  CreditCardCvv,
  CreditCardExpiry,
  CreditCardFlipper,
  CreditCardFront,
  CreditCardMagStripe,
  CreditCardName,
  CreditCardNumber,
} from "@/components/kibo-ui/credit-card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";

interface PaymentMethod {
  id: string;
  bank: "wells-fargo" | "chase";
  type: "visa" | "mastercard";
  last4: string;
  expiryMonth: number;
  expiryYear: number;
  cardholderName: string;
  cvv: string;
  isDefault: boolean;
}

const DEFAULT_METHODS: PaymentMethod[] = [
  {
    id: "1",
    bank: "wells-fargo",
    type: "mastercard",
    last4: "8888",
    expiryMonth: 12,
    expiryYear: 2026,
    cardholderName: "علی ر. رضایی",
    cvv: "123",
    isDefault: true,
  },
  {
    id: "2",
    bank: "chase",
    type: "visa",
    last4: "4242",
    expiryMonth: 8,
    expiryYear: 2025,
    cardholderName: "علی ر. رضایی",
    cvv: "456",
    isDefault: false,
  },
];

const BANK_LABELS: Record<PaymentMethod["bank"], string> = {
  "wells-fargo": "Wells Fargo",
  chase: "Chase",
};

const PAYMENT_TYPE_LABELS: Record<PaymentMethod["type"], string> = {
  visa: "Visa",
  mastercard: "Mastercard",
};

const formatCardLast4 = (last4?: string) => {
  if (!last4) return "";
  return Number(last4).toLocaleString("fa-IR", { useGrouping: false });
};

const formatExpiryShort = (month?: number, year?: number) => {
  if (!month || !year) return "";
  const paddedMonth = month.toLocaleString("fa-IR", {
    minimumIntegerDigits: 2,
    useGrouping: false,
  });
  const shortYear = (year % 100).toLocaleString("fa-IR", {
    minimumIntegerDigits: 2,
    useGrouping: false,
  });
  return `${paddedMonth}/${shortYear}`;
};

interface PaymentMethods3Props {
  methods?: PaymentMethod[];
  title?: string;
  className?: string;
}

const PaymentMethods3 = ({
  methods: initialMethods = DEFAULT_METHODS,
  title = "انتخاب روش پرداخت",
  className,
}: PaymentMethods3Props) => {
  const [methods, setMethods] = useState(initialMethods);
  const [selectedId, setSelectedId] = useState(
    methods.find((m) => m.isDefault)?.id || methods[0]?.id,
  );
  const [editingId, setEditingId] = useState<string | null>(null);
  const [editForm, setEditForm] = useState<Partial<PaymentMethod>>({});

  const startEditing = (method: PaymentMethod) => {
    setEditingId(method.id);
    setEditForm({ ...method });
  };

  const cancelEditing = () => {
    setEditingId(null);
    setEditForm({});
  };

  const saveEdit = () => {
    if (
      editingId &&
      editForm.cardholderName &&
      editForm.last4 &&
      editForm.expiryMonth &&
      editForm.expiryYear &&
      editForm.cvv
    ) {
      setMethods((prev) =>
        prev.map((method) =>
          method.id === editingId
            ? ({
                ...method,
                ...editForm,
              } as PaymentMethod)
            : method,
        ),
      );
      setEditingId(null);
      setEditForm({});
    }
  };

  const setAsDefault = (id: string) => {
    setMethods((prev) =>
      prev.map((method) => ({
        ...method,
        isDefault: method.id === id,
      })),
    );
  };

  const getCardBackground = (bank: string): string => {
    switch (bank) {
      case "chase":
        return "bg-[#063573]";
      case "wells-fargo":
        return "bg-gradient-to-br from-[#D71E2B] to-[#8B0000]";
      default:
        return "bg-[#063573]";
    }
  };

  const getBankLogo = (bank: string) => {
    switch (bank) {
      case "chase":
        return (
          <img
            src="/block-media/shadcnblocks/block/logos/payments/chase-white-wordmark.svg"
            alt={BANK_LABELS["chase"]}
            className="h-5"
          />
        );
      case "wells-fargo":
        return (
          <img
            src="/block-media/shadcnblocks/block/logos/payments/wells-fargo-white-wordmark.svg"
            alt={BANK_LABELS["wells-fargo"]}
            className="h-4"
          />
        );
      default:
        return null;
    }
  };

  const getPaymentProviderLogo = (type: string) => {
    switch (type) {
      case "visa":
        return (
          <img
            src="/block-media/shadcnblocks/block/logos/payments/visa-white.svg"
            alt={PAYMENT_TYPE_LABELS.visa}
            className="h-4"
          />
        );
      case "کارت اعتباری":
        return (
          <img
            src="/block-media/shadcnblocks/block/logos/payments/mastercard-white.svg"
            alt={PAYMENT_TYPE_LABELS.mastercard}
            className="h-6"
          />
        );
      default:
        return null;
    }
  };

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("py-16 md:py-24", className)}
    >
      <div className="container mx-auto px-4">
        <div className="mx-auto max-w-4xl">
          {/* Header */}
          <h2 className="mb-6 text-xl font-semibold">{title}</h2>

          {/* Cards */}
          <div className="space-y-6">
            {methods.map((method) => (
              <div
                key={method.id}
                className="group flex items-center gap-6 rounded-lg border p-4 transition-colors"
              >
                {/* Card Details on Left */}
                <div className="flex flex-1 flex-col justify-start">
                  {/* Edit Button - Top Aligned */}
                  {editingId !== method.id && (
                    <div className="">
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={(e) => {
                          e.stopPropagation();
                          startEditing(method);
                        }}
                      >
                        <Pencil className="ms-2 size-4" />
                        ویرایش
                      </Button>
                    </div>
                  )}

                  {/* Card Details Below */}
                  <div className="flex flex-1 flex-col gap-4 pt-4">
                    <div className="flex gap-3">
                      {/* Selection Indicator */}
                      <div className="flex items-center">
                        <div
                          className={cn(
                            "flex size-5 cursor-pointer items-center justify-center rounded-full border-2 transition-colors",
                            selectedId === method.id
                              ? "border-primary bg-primary"
                              : "border-muted-foreground/30",
                          )}
                          onClick={() => {
                            setSelectedId(method.id);
                            setAsDefault(method.id);
                          }}
                        >
                          {selectedId === method.id && (
                            <div className="size-1.5 rounded-full bg-primary-foreground" />
                          )}
                        </div>
                      </div>

                      <div className="flex-1">
                        <div>
                          <div className="flex items-center gap-2">
                            <h3 className="font-semibold">
                              {BANK_LABELS[method.bank]}{" "}
                              {PAYMENT_TYPE_LABELS[method.type]}
                            </h3>
                            {method.isDefault && (
                              <Badge variant="secondary" className="text-xs">
                                <Star className="ms-1 size-3 fill-current" />
                                پیش‌فرض
                              </Badge>
                            )}
                          </div>
                          <p className="text-sm text-muted-foreground">
                            •••• •••• •••• {formatCardLast4(method.last4)}
                          </p>
                        </div>
                      </div>
                    </div>

                    {editingId === method.id ? (
                      <div className="space-y-4 rounded-lg p-4">
                        <div className="flex items-center justify-between">
                          <h4 className="font-semibold">ویرایش جزئیات کارت</h4>
                          <div className="flex gap-2">
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={(e) => {
                                e.stopPropagation();
                                cancelEditing();
                              }}
                            >
                              <X className="size-4" />
                            </Button>
                            <Button
                              size="sm"
                              onClick={(e) => {
                                e.stopPropagation();
                                saveEdit();
                              }}
                            >
                              <Save className="ms-2 size-4" />
                              ذخیره
                            </Button>
                          </div>
                        </div>
                        <div className="grid grid-cols-2 gap-4">
                          <div className="space-y-2">
                            <Label htmlFor={`cardholder-${method.id}`}>
                              نام دارنده کارت
                            </Label>
                            <Input
                              id={`cardholder-${method.id}`}
                              value={editForm.cardholderName || ""}
                              onChange={(e) =>
                                setEditForm({
                                  ...editForm,
                                  cardholderName: e.target.value,
                                })
                              }
                              onClick={(e) => e.stopPropagation()}
                            />
                          </div>
                          <div className="space-y-2">
                            <Label htmlFor={`last4-${method.id}`}>
                              چهار رقم آخر
                            </Label>
                            <Input
                              id={`last4-${method.id}`}
                              maxLength={4}
                              value={editForm.last4 || ""}
                              onChange={(e) =>
                                setEditForm({
                                  ...editForm,
                                  last4: e.target.value
                                    .replace(/\D/g, "")
                                    .slice(0, 4),
                                })
                              }
                              onClick={(e) => e.stopPropagation()}
                            />
                          </div>
                          <div className="space-y-2">
                            <Label htmlFor={`expiryMonth-${method.id}`}>
                              ماه انقضا
                            </Label>
                            <Input
                              id={`expiryMonth-${method.id}`}
                              type="number"
                              min={1}
                              max={12}
                              value={editForm.expiryMonth || ""}
                              onChange={(e) =>
                                setEditForm({
                                  ...editForm,
                                  expiryMonth:
                                    parseInt(e.target.value) || undefined,
                                })
                              }
                              onClick={(e) => e.stopPropagation()}
                            />
                          </div>
                          <div className="space-y-2">
                            <Label htmlFor={`expiryYear-${method.id}`}>
                              سال انقضا
                            </Label>
                            <Input
                              id={`expiryYear-${method.id}`}
                              type="number"
                              min={new Date().getFullYear()}
                              value={editForm.expiryYear || ""}
                              onChange={(e) =>
                                setEditForm({
                                  ...editForm,
                                  expiryYear:
                                    parseInt(e.target.value) || undefined,
                                })
                              }
                              onClick={(e) => e.stopPropagation()}
                            />
                          </div>
                          <div className="space-y-2">
                            <Label htmlFor={`cvv-${method.id}`}>کد امنیتی</Label>
                            <Input
                              id={`cvv-${method.id}`}
                              maxLength={4}
                              value={editForm.cvv || ""}
                              onChange={(e) =>
                                setEditForm({
                                  ...editForm,
                                  cvv: e.target.value
                                    .replace(/\D/g, "")
                                    .slice(0, 4),
                                })
                              }
                              onClick={(e) => e.stopPropagation()}
                            />
                          </div>
                        </div>
                      </div>
                    ) : (
                      <div className="grid grid-cols-2 gap-4 text-sm">
                        <div>
                          <p className="text-muted-foreground">دارنده کارت</p>
                          <p className="font-medium">{method.cardholderName}</p>
                        </div>
                        <div>
                          <p className="text-muted-foreground">انقضا</p>
                          <p className="font-medium">
                            {formatExpiryShort(
                              method.expiryMonth,
                              method.expiryYear,
                            )}
                          </p>
                        </div>
                      </div>
                    )}
                  </div>
                </div>

                {/* Flipping Card on Right */}
                <div className="relative">
                  <CreditCard className="relative w-80 max-w-none">
                    <CreditCardFlipper>
                      <CreditCardFront
                        className={getCardBackground(method.bank)}
                      >
                        {/* Bank Logo */}
                        <div className="absolute top-0 left-0">
                          {getBankLogo(method.bank)}
                        </div>

                        <CreditCardChip />

                        {/* Payment Provider Logo */}
                        <div className="absolute right-0 bottom-0">
                          {getPaymentProviderLogo(method.type)}
                        </div>

                        {/* Cardholder Name */}
                        <CreditCardName className="absolute bottom-0 left-0">
                          {method.cardholderName}
                        </CreditCardName>
                      </CreditCardFront>

                      <CreditCardBack
                        className={getCardBackground(method.bank)}
                      >
                        <CreditCardMagStripe />

                        {/* Card Number on Back */}
                        <CreditCardNumber className="absolute bottom-0 left-0">
                          •••• •••• •••• {method.last4}
                        </CreditCardNumber>

                        {/* Expiry and CVV */}
                        <div className="absolute top-1/2 flex -translate-y-1/2 gap-4">
                          <CreditCardExpiry>
                            {method.expiryMonth.toString().padStart(2, "0")}/
                            {method.expiryYear.toString().slice(-2)}
                          </CreditCardExpiry>
                          <CreditCardCvv>{method.cvv}</CreditCardCvv>
                        </div>
                      </CreditCardBack>
                    </CreditCardFlipper>
                  </CreditCard>
                </div>
              </div>
            ))}
          </div>

          {/* Add new card button */}
          <Button variant="outline" className="mt-4 w-full" size="lg">
            <Plus className="ms-2 size-4" />
            افزودن کارت جدید
          </Button>

          {/* Security note */}
          <div className="mt-6 flex items-center justify-center gap-2 text-sm text-muted-foreground">
            <Shield className="size-4" />
            <span>اطلاعات پرداخت شما به‌صورت امن ذخیره می‌شود</span>
          </div>
        </div>
      </div>
    </section>
  );
};

export { PaymentMethods3 };