import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { useNavigate, useLocation } from 'react-router-dom';
import { useStore } from '../src/context/StoreContext';

const MockPayment: React.FC = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const { placeOrder, clearCart } = useStore();
    const [isSimulating, setIsSimulating] = useState(false);

    const orderData = location.state?.orderData;

    const handleSimulatePayment = async () => {
        if (!orderData) return;

        setIsSimulating(true);
        // Simulate network delay
        await new Promise(resolve => setTimeout(resolve, 2000));

        try {
            await placeOrder(orderData);
            clearCart();
            navigate('/success');
        } catch (err) {
            alert('Payment simulation failed');
            setIsSimulating(false);
        }
    };

    if (!orderData) {
        return (
            <div className="min-h-screen pt-48 flex flex-col items-center justify-center">
                <p>No order data found. Please go back to checkout.</p>
                <button onClick={() => navigate('/checkout')} className="mt-4 underline">Back to Checkout</button>
            </div>
        );
    }

    return (
        <div className="min-h-screen bg-stone-50 dark:bg-stone-950 pt-48 px-6">
            <div className="max-w-md mx-auto bg-white dark:bg-stone-900 p-12 rounded-sm shadow-xl border border-stone-100 dark:border-stone-800 text-center">
                <span className="material-symbols-outlined text-6xl text-stone-300 mb-8">account_balance_wallet</span>
                <h1 className="font-display text-3xl text-text-main dark:text-white mb-4">Payment Simulation</h1>
                <p className="text-stone-500 text-sm mb-12 leading-relaxed">
                    This is a secure test environment. Click the button below to simulate a successful transaction of
                    <span className="font-bold text-text-main dark:text-white ml-1">${orderData.total_amount.toFixed(2)}</span>.
                </p>

                <button
                    onClick={handleSimulatePayment}
                    disabled={isSimulating}
                    className="w-full bg-black dark:bg-white text-white dark:text-black py-5 uppercase tracking-[0.3em] text-xs font-bold hover:opacity-90 transition-opacity flex items-center justify-center gap-4"
                >
                    {isSimulating ? (
                        <>
                            <span className="animate-spin w-4 h-4 border-2 border-current border-t-transparent rounded-full" />
                            Processing...
                        </>
                    ) : (
                        'Simulate Success'
                    )}
                </button>

                <button
                    onClick={() => navigate('/checkout')}
                    disabled={isSimulating}
                    className="mt-6 text-[10px] text-stone-400 uppercase tracking-widest hover:text-stone-600 transition-colors"
                >
                    Cancel and go back
                </button>
            </div>
        </div>
    );
};

export default MockPayment;