'use client';

import { Modal } from '@/components/ui/modal';
import Button from '@/components/ui/button/Button';
import { Typography } from '@/components/atoms/typogrpahy';

interface VirtualAccountModalProps {
  isOpen: boolean;
  onClose: () => void;
  vaNumber: string;
  bankName: string;
  amount: number;
}

const VirtualAccountModal: React.FC<VirtualAccountModalProps> = ({
  isOpen,
  onClose,
  vaNumber,
  bankName,
  amount,
}) => {
  const handleCopyVANumber = () => {
    if (vaNumber) {
      navigator.clipboard.writeText(vaNumber);
      alert('Virtual Account number copied to clipboard!');
    }
  };

  const handleClose = () => {
    onClose();
  };

  return (
    <Modal
      isOpen={isOpen}
      onClose={handleClose}
      className="max-w-md mx-auto p-6 rounded-xl shadow-lg dark:bg-gray-900"
    >
      <div className="text-center text-black dark:text-white">
        <h2 className="mb-4 text-2xl font-bold text-brand-500">Virtual Account Details</h2>
        <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
          Complete your payment using the details below.
        </p>

        <div className="space-y-4 mb-8 text-left">
          <div className="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
            <Typography variant="b2" className="text-gray-600 dark:text-gray-300">Bank Name:</Typography>
            <Typography variant="s1" className="font-semibold text-lg text-black dark:text-white">
              {bankName || 'N/A'}
            </Typography>
          </div>
          <div className="flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
            <Typography variant="b2" className="text-gray-600 dark:text-gray-300">Virtual Account Number:</Typography>
            <Typography variant="s1" className="font-bold text-lg text-brand-500">
              {vaNumber || 'Loading...'}
            </Typography>
          </div>
          <div className="flex justify-between items-center py-2">
            <Typography variant="b2" className="text-gray-600 dark:text-gray-300">Amount to Pay:</Typography>
            <Typography variant="s1" className="font-semibold text-lg text-black dark:text-white">
              Rp {amount?.toLocaleString('id-ID') || '0'}
            </Typography>
          </div>
        </div>

        <p className="pt-8 text-sm text-gray-700 dark:text-gray-300 mb-6">
          Please transfer the exact amount to the Virtual Account number above.
          Your wallet will be credited shortly after successful payment.
        </p>

        <div className="flex flex-col gap-3">
          <Button 
            variant="primary"
            className="w-full justify-center rounded-md px-6 py-3 bg-brand text-white hover:bg-brand/90 text-lg font-semibold"
            onClick={handleCopyVANumber}
          >
            Copy VA Number
          </Button>
          <Button 
            variant="outline" 
            onClick={handleClose}
            className="w-full justify-center rounded-md px-6 py-3 border border-slate-300 text-black dark:border-strokedark dark:text-white hover:bg-slate-100 dark:hover:bg-gray-800 text-lg font-semibold"
          >
            Done
          </Button>
        </div>
      </div>
    </Modal>
  );
};

export default VirtualAccountModal;