podzahr/components/PurchaseSuccessModal.tsx

'use client';

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

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 Sadatie (@parsadat)
Amount: ${formatPrice(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-paper-dark/90 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="paper-card max-w-lg w-full p-8 border-4 border-paper-dark shadow-paper-lg"
          >
            {/* Header */}
            <div className="flex items-start justify-between mb-6">
              <div className="flex items-center gap-3">
                <div className="p-3 bg-paper-brown border-2 border-paper-dark">
                  <FaClock className="text-3xl text-paper-light" />
                </div>
                <div>
                  <h2 className="text-2xl font-bold text-paper-dark border-b-4 border-paper-dark inline-block pb-1">
                    Purchase Pending Approval
                  </h2>
                  <p className="text-sm text-paper-gray mt-2">در انتظار تایید مدیر</p>
                </div>
              </div>
              <button
                onClick={onClose}
                className="p-2 hover:bg-paper-brown hover:text-paper-light border-2 border-paper-brown transition-colors"
                aria-label="Close"
              >
                <FaTimes className="text-xl text-paper-dark" />
              </button>
            </div>

            {/* Receipt Details */}
            <div className="space-y-4 mb-6">
              <div className="p-4 bg-paper-light border-2 border-paper-brown space-y-3">
                <div className="flex justify-between">
                  <span className="text-paper-gray">Album / آلبوم</span>
                  <span className="text-paper-dark font-semibold">{album.title}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-paper-gray">Artist / هنرمند</span>
                  <span className="text-paper-dark font-semibold">Parsa Sadatie</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-paper-gray">Tracks / تعداد آهنگ</span>
                  <span className="text-paper-dark font-semibold">{album.songs.length} songs</span>
                </div>
                <div className="border-t-2 border-paper-brown pt-3 flex justify-between">
                  <span className="text-paper-gray">Amount / مبلغ</span>
                  <span className="text-paper-brown font-bold text-xl">{formatPrice(album.price)}</span>
                </div>
              </div>

              <div className="p-4 bg-paper-sand border-2 border-paper-dark">
                <p className="text-xs text-paper-gray mb-1">Transaction ID / شناسه تراکنش</p>
                <p className="text-sm font-mono text-paper-dark font-semibold">{purchase.transactionId}</p>
                <p className="text-xs text-paper-brown 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-paper-light hover:bg-paper-sand border-2 border-paper-brown font-semibold text-paper-dark transition-all shadow-paper 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-paper-brown hover:bg-paper-dark border-2 border-paper-dark font-semibold text-paper-light transition-all shadow-paper-lg"
              >
                OK, Got It / متوجه شدم
              </motion.button>
            </div>

            {/* Info */}
            <p className="text-xs text-paper-gray text-center mt-6">
              Your purchase will be reviewed by an admin. You will receive access after approval.<br />
              سفارش شما توسط مدیر بررسی می‌شود. پس از تایید به آلبوم دسترسی خواهید داشت.
            </p>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}