'use client';

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

interface OTCModalProps {
  isOpen: boolean;
  onClose: () => void;
  otcCode: string;
  merchantId?: string;
  expiresAt?: string;
  channelName: string;
  amount: number;
}

const OTCModal: React.FC<OTCModalProps> = ({
  isOpen,
  onClose,
  otcCode,
  merchantId,
  expiresAt,
  channelName,
  amount,
}) => {
  const handleCopyOTCCode = () => {
    if (otcCode) {
      navigator.clipboard.writeText(otcCode);
      alert('OTC code 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">Over The Counter Payment</h2>
        <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
          Complete your payment at any {channelName} outlet using the code 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">Outlet:</Typography>
            <Typography variant="s1" className="font-semibold text-lg text-black dark:text-white">
              {channelName}
            </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">Payment Code:</Typography>
            <Typography variant="s1" className="font-bold text-lg text-brand-500 font-mono tracking-wider">
              {otcCode || 'Loading...'}
            </Typography>
          </div>
          {merchantId ? (
            <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">Merchant ID:</Typography>
              <Typography variant="s1" className="font-bold text-lg text-black dark:text-white font-mono">
                {merchantId}
              </Typography>
            </div>
          ) : null}
          {expiresAt ? (
            <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">Expires At:</Typography>
              <Typography variant="s1" className="font-semibold text-black dark:text-white text-right">
                {expiresAt}
              </Typography>
            </div>
          ) : null}
          <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>

        <div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg p-4 mb-6">
          <div className="flex items-start">
            <div className="flex-shrink-0">
              <svg className="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
              </svg>
            </div>
            <div className="ml-3">
              <Typography variant="b2" className="text-yellow-800 dark:text-yellow-200">
                <strong>Important:</strong> Present this payment code to the cashier at any {channelName} outlet. 
                Payment must be completed within 1 hour.
              </Typography>
            </div>
          </div>
        </div>

        <p className="text-sm text-gray-700 dark:text-gray-300 mb-6">
          Your wallet will be credited automatically after successful payment at the outlet.
        </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={handleCopyOTCCode}
          >
            Copy Payment Code
          </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 OTCModal;