boxy/app/boxes/success/page.tsx

'use client';

import { useState, useEffect } from 'react';
import { useSearchParams } from 'next/navigation';
import { useAuth } from '../../context/AuthContext';
import Header from '../../components/Header';

// Mock prize data - replace with actual data from your backend
const MOCK_PRIZES = [
  { name: 'Rare NFT', rarity: 'rare', value: 500 },
  { name: 'Epic Collectible', rarity: 'epic', value: 1000 },
  { name: 'Legendary Item', rarity: 'legendary', value: 5000 },
  { name: 'Common Token', rarity: 'common', value: 50 },
];

export default function SuccessPage() {
  const { user } = useAuth();
  const searchParams = useSearchParams();
  const [isOpening, setIsOpening] = useState(true);
  const [prize, setPrize] = useState<typeof MOCK_PRIZES[0] | null>(null);
  const [showPrize, setShowPrize] = useState(false);

  const boxId = searchParams.get('box_id');
  const sessionId = searchParams.get('session_id');

  useEffect(() => {
    // Simulate box opening animation
    const timer = setTimeout(() => {
      setIsOpening(false);
      // Randomly select a prize (replace with actual logic)
      const randomPrize = MOCK_PRIZES[Math.floor(Math.random() * MOCK_PRIZES.length)];
      setPrize(randomPrize);
      setShowPrize(true);
    }, 3000);

    return () => clearTimeout(timer);
  }, []);

  if (!user) {
    return (
      <>
        <Header />
        <div className="min-h-screen bg-gradient-to-b from-background to-background/95 pt-16">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 text-center">
            <h1 className="text-2xl font-bold mb-4">Access Denied</h1>
            <p className="text-foreground/60">Please sign in to view this page.</p>
          </div>
        </div>
      </>
    );
  }

  return (
    <>
      <Header />
      <div className="min-h-screen bg-gradient-to-b from-background to-background/95 pt-16">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          {/* Success Header */}
          <div className="text-center mb-8">
            <div className="text-6xl mb-4">🎉</div>
            <h1 className="text-3xl font-bold mb-2">Payment Successful!</h1>
            <p className="text-foreground/60">
              Your mystery box is being opened...
            </p>
          </div>

          {/* Box Opening Animation */}
          {isOpening && (
            <div className="text-center py-12">
              <div className="inline-block animate-bounce">
                <div className="text-8xl mb-4">🎁</div>
              </div>
              <p className="text-lg text-foreground/60">Opening your box...</p>
            </div>
          )}

          {/* Prize Reveal */}
          {showPrize && prize && (
            <div className="text-center">
              <div className="bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-2xl p-8 mb-8">
                <div className="text-6xl mb-4">✨</div>
                <h2 className="text-2xl font-bold mb-2">Congratulations!</h2>
                <p className="text-foreground/60 mb-6">
                  You found something amazing!
                </p>
                
                {/* Prize Card */}
                <div className="bg-background/50 rounded-xl p-6 max-w-sm mx-auto">
                  <div className="text-4xl mb-4">🎯</div>
                  <h3 className="text-xl font-semibold mb-2">{prize.name}</h3>
                  <div className="flex items-center justify-center gap-2 mb-4">
                    <span className={`px-3 py-1 rounded-full text-xs font-medium ${
                      prize.rarity === 'common' ? 'bg-gray-500/20 text-gray-300' :
                      prize.rarity === 'rare' ? 'bg-blue-500/20 text-blue-300' :
                      prize.rarity === 'epic' ? 'bg-purple-500/20 text-purple-300' :
                      'bg-yellow-500/20 text-yellow-300'
                    }`}>
                      {prize.rarity.toUpperCase()}
                    </span>
                  </div>
                  <p className="text-foreground/60 text-sm">
                    Estimated Value: ${prize.value}
                  </p>
                </div>
              </div>

              {/* Action Buttons */}
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <button
                  onClick={() => window.location.href = '/inventory'}
                  className="px-6 py-3 rounded-lg bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold hover:opacity-90 transition-opacity"
                >
                  View in Inventory
                </button>
                <button
                  onClick={() => window.location.href = '/boxes'}
                  className="px-6 py-3 rounded-lg border border-foreground/20 hover:bg-foreground/5 transition-colors"
                >
                  Open Another Box
                </button>
              </div>
            </div>
          )}

          {/* Transaction Details */}
          <div className="mt-12 bg-foreground/5 rounded-xl p-6">
            <h3 className="text-lg font-semibold mb-4">Transaction Details</h3>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-foreground/60">Session ID:</span>
                <span className="font-mono">{sessionId}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-foreground/60">Box ID:</span>
                <span className="font-mono">{boxId}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-foreground/60">User:</span>
                <span>{user.email}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}