324 lines
12 KiB
TypeScript
324 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useParams, useRouter } from 'next/navigation';
|
|
import { motion } from 'framer-motion';
|
|
import { FaPlay, FaShoppingCart, FaArrowLeft, FaClock, FaMusic } from 'react-icons/fa';
|
|
import { Album, Purchase } from '@/lib/types';
|
|
import { useCart } from '@/lib/CartContext';
|
|
import { useAlbums } from '@/lib/AlbumsContext';
|
|
import { formatPrice } from '@/lib/utils';
|
|
import Header from '@/components/Header';
|
|
import CartSidebar from '@/components/CartSidebar';
|
|
import MusicPlayer from '@/components/MusicPlayer';
|
|
import PaymentModal from '@/components/PaymentModal';
|
|
import PurchaseSuccessModal from '@/components/PurchaseSuccessModal';
|
|
|
|
export default function AlbumDetailPage() {
|
|
const params = useParams();
|
|
const router = useRouter();
|
|
const { addToCart, isInCart } = useCart();
|
|
const { albums } = useAlbums();
|
|
const [album, setAlbum] = useState<Album | null>(null);
|
|
const [purchasedAlbums, setPurchasedAlbums] = useState<string[]>([]);
|
|
const [purchases, setPurchases] = useState<Purchase[]>([]);
|
|
const [cartOpen, setCartOpen] = useState(false);
|
|
const [currentAlbum, setCurrentAlbum] = useState<Album | null>(null);
|
|
const [albumToPurchase, setAlbumToPurchase] = useState<Album | null>(null);
|
|
const [showSuccessModal, setShowSuccessModal] = useState(false);
|
|
const [latestPurchase, setLatestPurchase] = useState<Purchase | null>(null);
|
|
|
|
useEffect(() => {
|
|
const foundAlbum = albums.find((a) => a.id === params.id);
|
|
setAlbum(foundAlbum || null);
|
|
|
|
// Load purchases from localStorage (legacy)
|
|
const savedPurchases = localStorage.getItem('purchases');
|
|
if (savedPurchases) {
|
|
const parsedPurchases = JSON.parse(savedPurchases);
|
|
setPurchases(parsedPurchases);
|
|
}
|
|
|
|
// Fetch approved purchases from API
|
|
const fetchPurchases = async () => {
|
|
try {
|
|
const response = await fetch('/api/purchases');
|
|
if (response.ok) {
|
|
const apiPurchases = await response.json();
|
|
// Only include approved purchases for determining access
|
|
const approvedPurchases = apiPurchases.filter((p: Purchase) => p.approvalStatus === 'approved');
|
|
setPurchasedAlbums(approvedPurchases.map((p: Purchase) => p.albumId));
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching purchases:', error);
|
|
}
|
|
};
|
|
|
|
fetchPurchases();
|
|
}, [params.id, albums]);
|
|
|
|
const handlePurchaseSuccess = (albumId: string, transactionId: string) => {
|
|
const purchase: Purchase = {
|
|
albumId,
|
|
transactionId,
|
|
purchaseDate: new Date(),
|
|
approvalStatus: 'pending',
|
|
};
|
|
|
|
const updatedPurchases = [...purchases, purchase];
|
|
setPurchases(updatedPurchases);
|
|
// Don't add to purchasedAlbums yet - wait for approval
|
|
setLatestPurchase(purchase);
|
|
|
|
localStorage.setItem('purchases', JSON.stringify(updatedPurchases));
|
|
|
|
setAlbumToPurchase(null);
|
|
setShowSuccessModal(true);
|
|
};
|
|
|
|
const handleCloseSuccessModal = () => {
|
|
setShowSuccessModal(false);
|
|
if (albumToPurchase) {
|
|
setCurrentAlbum(albumToPurchase);
|
|
}
|
|
};
|
|
|
|
const handleAddToCart = () => {
|
|
if (album && !isInCart(album.id)) {
|
|
addToCart(album);
|
|
}
|
|
};
|
|
|
|
const isPurchased = album ? purchasedAlbums.includes(album.id) : false;
|
|
const inCart = album ? isInCart(album.id) : false;
|
|
|
|
if (!album) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center">
|
|
<div className="text-center">
|
|
<h1 className="text-3xl font-bold text-paper-dark mb-4">Album not found</h1>
|
|
<button
|
|
onClick={() => router.push('/')}
|
|
className="px-6 py-3 bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark text-paper-light transition-all shadow-paper"
|
|
>
|
|
Go Back Home
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const totalDuration = album.songs.reduce((total, song) => {
|
|
const [minutes, seconds] = song.duration.split(':').map(Number);
|
|
return total + minutes * 60 + seconds;
|
|
}, 0);
|
|
|
|
const formatTotalDuration = (seconds: number) => {
|
|
const hours = Math.floor(seconds / 3600);
|
|
const mins = Math.floor((seconds % 3600) / 60);
|
|
if (hours > 0) {
|
|
return `${hours}h ${mins}m`;
|
|
}
|
|
return `${mins} min`;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Header onCartClick={() => setCartOpen(true)} />
|
|
<div className="min-h-screen pt-20">
|
|
{/* Back Button */}
|
|
<div className="max-w-7xl mx-auto px-4 md:px-8 py-6">
|
|
<button
|
|
onClick={() => router.push('/')}
|
|
className="flex items-center gap-2 text-paper-dark hover:text-paper-brown transition-colors font-medium border-b-2 border-transparent hover:border-paper-brown"
|
|
>
|
|
<FaArrowLeft />
|
|
Back to Albums
|
|
</button>
|
|
</div>
|
|
|
|
{/* Album Header */}
|
|
<div className="max-w-7xl mx-auto px-4 md:px-8 pb-12">
|
|
<div className="grid md:grid-cols-2 gap-12 items-start">
|
|
{/* Album Cover */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
className="relative"
|
|
>
|
|
<div className="aspect-square overflow-hidden bg-paper-brown border-4 border-paper-dark shadow-paper-lg">
|
|
{album.coverImage ? (
|
|
<img
|
|
src={album.coverImage}
|
|
alt={album.title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center relative">
|
|
<div className="absolute inset-0 cardboard-texture"></div>
|
|
<div className="relative z-10 text-6xl md:text-8xl font-bold text-paper-dark/20 p-8 text-center">
|
|
{album.title}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{isPurchased && (
|
|
<div className="absolute top-6 right-6 bg-paper-dark text-paper-light px-4 py-2 border-2 border-paper-brown text-sm font-semibold shadow-paper">
|
|
Owned
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
|
|
{/* Album Info */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
className="space-y-6"
|
|
>
|
|
<div>
|
|
<p className="text-sm text-paper-brown mb-2 font-medium">{album.year} • {album.genre}</p>
|
|
<h1 className="text-4xl md:text-5xl font-bold text-paper-dark mb-4 tracking-tight border-b-4 border-paper-dark inline-block pb-2">
|
|
{album.title}
|
|
</h1>
|
|
<p className="text-xl text-paper-dark leading-relaxed mt-6">
|
|
{album.description}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Album Stats */}
|
|
<div className="flex gap-6 text-paper-dark p-4 paper-card">
|
|
<div className="flex items-center gap-2">
|
|
<FaMusic className="text-paper-brown" />
|
|
<span className="font-medium">{album.songs.length} tracks</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<FaClock className="text-paper-brown" />
|
|
<span className="font-medium">{formatTotalDuration(totalDuration)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Price */}
|
|
{!isPurchased && (
|
|
<div className="text-3xl font-bold text-paper-light p-4 paper-card-dark">
|
|
{formatPrice(album.price)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex gap-4 pt-4">
|
|
<button
|
|
onClick={() => setCurrentAlbum(album)}
|
|
className="flex-1 py-4 bg-paper-sand hover:bg-paper-gray border-2 border-paper-dark font-semibold text-paper-dark transition-all shadow-paper hover:shadow-paper-lg flex items-center justify-center gap-2"
|
|
>
|
|
<FaPlay />
|
|
{isPurchased ? 'Play Album' : 'Preview'}
|
|
</button>
|
|
|
|
{!isPurchased && (
|
|
<>
|
|
<button
|
|
onClick={() => setAlbumToPurchase(album)}
|
|
className="flex-1 py-4 bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark font-semibold text-paper-light transition-all shadow-paper-lg flex items-center justify-center gap-2"
|
|
>
|
|
Buy Now
|
|
</button>
|
|
<button
|
|
onClick={handleAddToCart}
|
|
disabled={inCart}
|
|
className={`py-4 px-6 ${
|
|
inCart
|
|
? 'bg-paper-gray cursor-not-allowed opacity-50'
|
|
: 'bg-paper-light hover:bg-paper-sand border-2 border-paper-brown'
|
|
} font-semibold text-paper-dark transition-all flex items-center justify-center gap-2 shadow-paper`}
|
|
>
|
|
<FaShoppingCart />
|
|
{inCart ? 'In Cart' : 'Add to Cart'}
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Track List */}
|
|
<div className="max-w-7xl mx-auto px-4 md:px-8 pb-20">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="paper-card p-8 cardboard-texture"
|
|
>
|
|
<h2 className="text-2xl font-bold text-paper-dark mb-6 border-b-2 border-paper-dark pb-2">Track List</h2>
|
|
<div className="space-y-2">
|
|
{album.songs.map((song, index) => (
|
|
<motion.div
|
|
key={song.id}
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.4, delay: index * 0.05 }}
|
|
className="flex items-center justify-between p-3 md:p-4 hover:bg-paper-sand border-2 border-transparent hover:border-paper-brown transition-all group cursor-pointer"
|
|
onClick={() => setCurrentAlbum(album)}
|
|
>
|
|
<div className="flex items-center gap-2 md:gap-4 flex-1 min-w-0">
|
|
<span className="text-paper-gray font-mono text-xs md:text-sm w-6 md:w-8 flex-shrink-0">
|
|
{String(index + 1).padStart(2, '0')}
|
|
</span>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="text-paper-dark font-medium group-hover:font-bold transition-all truncate text-sm md:text-base">
|
|
{song.title}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2 md:gap-6 flex-shrink-0">
|
|
{!isPurchased && (
|
|
<span className="hidden sm:inline text-xs text-paper-dark px-2 py-1 bg-paper-brown/20 border border-paper-brown whitespace-nowrap">
|
|
Preview
|
|
</span>
|
|
)}
|
|
<span className="text-paper-brown text-xs md:text-sm font-mono whitespace-nowrap">
|
|
{song.duration}
|
|
</span>
|
|
<FaPlay className="text-paper-dark opacity-0 group-hover:opacity-100 transition-opacity text-xs md:text-base flex-shrink-0" />
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Music Player */}
|
|
{currentAlbum && (
|
|
<MusicPlayer
|
|
album={currentAlbum}
|
|
isPurchased={purchasedAlbums.includes(currentAlbum.id)}
|
|
onClose={() => setCurrentAlbum(null)}
|
|
onPurchase={setAlbumToPurchase}
|
|
/>
|
|
)}
|
|
|
|
{/* Payment Modal */}
|
|
<PaymentModal
|
|
album={albumToPurchase}
|
|
onClose={() => setAlbumToPurchase(null)}
|
|
onSuccess={handlePurchaseSuccess}
|
|
/>
|
|
|
|
{/* Purchase Success Modal */}
|
|
<PurchaseSuccessModal
|
|
show={showSuccessModal}
|
|
album={albumToPurchase}
|
|
purchase={latestPurchase}
|
|
onClose={handleCloseSuccessModal}
|
|
/>
|
|
|
|
{/* Cart Sidebar */}
|
|
<CartSidebar isOpen={cartOpen} onClose={() => setCartOpen(false)} />
|
|
</>
|
|
);
|
|
}
|