'use client';

import { motion, AnimatePresence } from 'framer-motion';
import { FaClock, FaTimes, FaDownload } from 'react-icons/fa';
import { Album, Purchase } from '@/lib/types';

interface PurchaseSuccessModalProps {
  show: boolean;
  album: Album | null;
  purchase: Purchase | null;
  onClose: () => void;
}

export default function PurchaseSuccessModal({ show, album, purchase, onClose }: PurchaseSuccessModalProps) {
  if (!album || !purchase) return null;

  const handleDownloadReceipt = () => {
    // Create a simple text receipt
    const receipt = `
PURCHASE RECEIPT
================

Status: PENDING APPROVAL
Album: ${album.title}
Artist: Parsa
Amount: $${album.price}
Transaction ID: ${purchase.transactionId}
Date: ${new Date(purchase.purchaseDate).toLocaleString()}

Tracks Included:
${album.songs.map((song, idx) => `${idx + 1}. ${song.title} (${song.duration})`).join('\n')}

Thank you for your purchase!
Your order is pending admin approval.
You will receive access to this album after confirmation.
`;

    const blob = new Blob([receipt], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `receipt-${purchase.transactionId}.txt`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  return (
    <AnimatePresence>
      {show && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4"
          onClick={onClose}
        >
          <motion.div
            initial={{ scale: 0.9, opacity: 0, y: 20 }}
            animate={{ scale: 1, opacity: 1, y: 0 }}
            exit={{ scale: 0.9, opacity: 0, y: 20 }}
            onClick={(e) => e.stopPropagation()}
            className="glass-effect rounded-2xl max-w-lg w-full p-8 border-2 border-accent-cyan/30"
          >
            {/* Header */}
            <div className="flex items-start justify-between mb-6">
              <div className="flex items-center gap-3">
                <div className="p-3 bg-accent-orange/20 rounded-full">
                  <FaClock className="text-3xl text-accent-orange" />
                </div>
                <div>
                  <h2 className="text-2xl font-bold text-white">
                    Purchase Pending Approval
                  </h2>
                  <p className="text-sm text-gray-400">Please wait for admin confirmation</p>
                </div>
              </div>
              <button
                onClick={onClose}
                className="p-2 hover:bg-white/10 rounded-full transition-colors"
                aria-label="Close"
              >
                <FaTimes className="text-xl text-gray-400" />
              </button>
            </div>

            {/* Receipt Details */}
            <div className="space-y-4 mb-6">
              <div className="p-4 bg-white/5 rounded-lg space-y-3">
                <div className="flex justify-between">
                  <span className="text-gray-400">Album</span>
                  <span className="text-white font-semibold">{album.title}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-400">Artist</span>
                  <span className="text-white font-semibold">Parsa</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-400">Tracks</span>
                  <span className="text-white font-semibold">{album.songs.length} songs</span>
                </div>
                <div className="border-t border-white/10 pt-3 flex justify-between">
                  <span className="text-gray-400">Amount</span>
                  <span className="text-accent-orange font-bold text-xl">${album.price}</span>
                </div>
              </div>

              <div className="p-4 bg-accent-cyan/10 border border-accent-cyan/30 rounded-lg">
                <p className="text-xs text-gray-400 mb-1">Transaction ID</p>
                <p className="text-sm font-mono text-accent-cyan">{purchase.transactionId}</p>
                <p className="text-xs text-gray-500 mt-2">
                  {new Date(purchase.purchaseDate).toLocaleString()}
                </p>
              </div>
            </div>

            {/* Actions */}
            <div className="space-y-3">
              <button
                onClick={handleDownloadReceipt}
                className="w-full py-3 bg-white/10 hover:bg-white/20 border border-white/20 rounded-lg font-semibold text-white transition-all flex items-center justify-center gap-2"
              >
                <FaDownload />
                Download Receipt
              </button>

              <motion.button
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
                onClick={onClose}
                className="w-full py-3 bg-gradient-to-r from-accent-cyan to-accent-cyan/80 hover:from-accent-cyan/90 hover:to-accent-cyan/70 rounded-lg font-semibold text-white transition-all glow-cyan"
              >
                OK, Got It
              </motion.button>
            </div>

            {/* Info */}
            <p className="text-xs text-gray-500 text-center mt-6">
              Your purchase will be reviewed by an admin. You will receive access after approval.
            </p>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}