import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@baguspay/ui/components/ui/accordion'
import { Badge } from '@baguspay/ui/components/ui/badge'
import { Button } from '@baguspay/ui/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@baguspay/ui/components/ui/dialog'
import { Building2, ChevronDown, CreditCard, Smartphone, Store, Wallet } from 'lucide-react'
import { useState } from 'react'
import type { DepositPaymentData, DepositPaymentMethod } from '~/pages/protected/user/deposit'
import Image from './image'

interface PaymentMethodModalProps {
  paymentData: DepositPaymentData[]
  selectedPaymentMethod: DepositPaymentMethod | null
  onSelectPaymentMethod: (method: DepositPaymentMethod) => void
  formatPrice: (amount: number) => string
}

const getPaymentMethodIcon = (type: string) => {
  switch (type) {
    case 'qr_code':
      return <Smartphone className="w-5 h-5" />
    case 'virtual_account':
      return <Building2 className="w-5 h-5" />
    case 'e_wallet':
      return <Wallet className="w-5 h-5" />
    case 'retail':
      return <Store className="w-5 h-5" />
    default:
      return <CreditCard className="w-5 h-5" />
  }
}

export default function PaymentMethodModal({
  paymentData,
  selectedPaymentMethod,
  onSelectPaymentMethod,
  formatPrice,
}: PaymentMethodModalProps) {
  const [isOpen, setIsOpen] = useState(false)

  const handleSelectMethod = (method: DepositPaymentMethod) => {
    onSelectPaymentMethod(method)
    setIsOpen(false)
  }

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        <Button
          variant="outline"
          className="w-full h-16 justify-between border border-dashed border-border/70 bg-card hover:border-primary/30 hover:bg-accent transition-[color,background-color,border-color]"
        >
          {selectedPaymentMethod ? (
            <div className="flex items-center gap-3">
              <div className="shrink-0">
                {selectedPaymentMethod.image_url ? (
                  <Image
                    src={selectedPaymentMethod.image_url}
                    alt={selectedPaymentMethod.name}
                    className="w-8 h-8 object-contain rounded-md"
                  />
                ) : (
                  <div className="w-8 h-8 bg-muted rounded-md flex items-center justify-center">
                    {getPaymentMethodIcon(selectedPaymentMethod.type)}
                  </div>
                )}
              </div>
              <div className="text-left">
                <p className="font-semibold text-foreground">{selectedPaymentMethod.name}</p>
                <p className="text-xs text-muted-foreground">
                  Fee: {formatPrice(selectedPaymentMethod.fee_static)}
                  {selectedPaymentMethod.fee_percentage > 0 &&
                    ` + ${selectedPaymentMethod.fee_percentage}%`}
                </p>
              </div>
            </div>
          ) : (
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 bg-muted rounded-md flex items-center justify-center">
                <CreditCard className="w-4 h-4 text-muted-foreground" />
              </div>
              <div className="text-left">
                <p className="font-medium text-muted-foreground">Select Payment Method</p>
                <p className="text-xs text-muted-foreground/80">Choose how you want to pay</p>
              </div>
            </div>
          )}
          <ChevronDown className="w-4 h-4 text-muted-foreground" />
        </Button>
      </DialogTrigger>

      <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden">
        <DialogHeader>
          <DialogTitle>Select Payment Method</DialogTitle>
          <DialogDescription>
            Choose your preferred payment method for the deposit
          </DialogDescription>
        </DialogHeader>

        <div className="overflow-y-auto max-h-[60vh] pr-2">
          <Accordion type="single" collapsible className="w-full space-y-2">
            {paymentData
              .filter((category) => category.payment_methods.length > 0)
              .map((category, index) => (
                <AccordionItem
                  key={category.id || index}
                  value={String(category.id || category.name || index)}
                  className="border border-border/70 rounded-lg"
                >
                  <AccordionTrigger className="px-4 py-3 hover:no-underline [&[data-state=open]>svg]:rotate-180">
                    <div className="flex items-center gap-3">
                      <div className="shrink-0">
                        {getPaymentMethodIcon(category.payment_methods[0]?.type || 'default')}
                      </div>
                      <div className="text-left">
                        <span className="font-semibold text-foreground">{category.name}</span>
                        <p className="text-xs text-muted-foreground mt-1">
                          {category.payment_methods.filter((m) => m.is_available).length} methods
                          available
                        </p>
                      </div>
                    </div>
                  </AccordionTrigger>
                  <AccordionContent className="px-4 pb-4">
                    <div className="grid gap-3 pt-2">
                      {category.payment_methods
                        .filter((method) => method.is_available)
                        .map((method) => (
                          <button
                            key={method.id}
                            className={`cursor-pointer transition-[color,background-color,border-color,box-shadow] duration-200 rounded-lg border p-4 hover:shadow-md text-left w-full ${
                              selectedPaymentMethod?.id === method.id
                                ? 'ring-1 ring-primary/15 border-primary/40 bg-primary/5'
                                : 'border-border/70 hover:border-primary/30 bg-card'
                            }`}
                            onClick={() => handleSelectMethod(method)}
                          >
                            <div className="flex items-center gap-3">
                              <div className="shrink-0">
                                {method.image_url ? (
                                  <Image
                                    src={method.image_url}
                                    alt={method.name}
                                    className="w-12 h-12 object-contain rounded-md"
                                  />
                                ) : (
                                  <div className="w-12 h-12 bg-muted rounded-md flex items-center justify-center">
                                    {getPaymentMethodIcon(method.type)}
                                  </div>
                                )}
                              </div>
                              <div className="flex-1 min-w-0">
                                <div className="flex items-center gap-2 mb-1">
                                  <p className="font-semibold text-gray-900 dark:text-white">
                                    {method.name}
                                  </p>
                                  {method.is_featured && (
                                    <Badge variant="secondary" className="text-xs">
                                      Featured
                                    </Badge>
                                  )}
                                </div>
                                <div className="text-sm text-gray-600 dark:text-gray-400">
                                  Fee: {formatPrice(method.fee_static)}
                                  {method.fee_percentage > 0 && ` + ${method.fee_percentage}%`}
                                </div>
                                <div className="text-xs text-gray-500 dark:text-gray-500">
                                  Min: {formatPrice(method.min_amount)} - Max:{' '}
                                  {formatPrice(method.max_amount)}
                                </div>
                              </div>
                              {selectedPaymentMethod?.id === method.id && (
                                <div className="text-primary">
                                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                    <path
                                      fillRule="evenodd"
                                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                      clipRule="evenodd"
                                    />
                                  </svg>
                                </div>
                              )}
                            </div>
                          </button>
                        ))}
                    </div>
                  </AccordionContent>
                </AccordionItem>
              ))}
          </Accordion>
        </div>
      </DialogContent>
    </Dialog>
  )
}