MusicAnalyser/frontend/src/components/StatsGrid.jsx

import React from 'react';

const StatsGrid = ({ metrics }) => {
    if (!metrics) return null;

    const totalMinutes = Math.round((metrics.volume?.estimated_minutes || 0));
    const daysListened = (totalMinutes / (24 * 60)).toFixed(1);

    const obsessionTrack = metrics.volume?.top_tracks?.[0];
    const obsessionName = obsessionTrack ? obsessionTrack.name : "N/A";
    const obsessionArtist = obsessionTrack ? obsessionTrack.artist : "N/A";
    const obsessionCount = obsessionTrack ? obsessionTrack.count : 0;
    const obsessionImage = obsessionTrack?.image || "https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17?q=80&w=400&auto=format&fit=crop";

    const uniqueArtists = metrics.volume?.unique_artists || 0;
    
    const hipsterScore = metrics.taste?.hipster_score || 0;
    const obscurityRating = metrics.taste?.obscurity_rating || 0;

    return (
        <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div className="bg-card-dark border border-[#222f49] rounded-xl p-6 flex flex-col justify-between h-full min-h-[200px] group hover:border-primary/50 transition-colors">
                <div className="flex items-start justify-between">
                    <span className="text-slate-400 text-sm font-medium uppercase tracking-wider">Minutes Listened</span>
                    <span className="material-symbols-outlined text-primary">schedule</span>
                </div>
                <div>
                    <div className="text-4xl lg:text-5xl font-bold text-white mb-2">{totalMinutes.toLocaleString()}</div>
                    <div className="text-accent-neon text-sm font-medium flex items-center gap-1">
                        <span className="material-symbols-outlined text-sm">trending_up</span>
                        That's {daysListened} days straight
                    </div>
                </div>
            </div>

            <div className="bg-card-dark border border-[#222f49] rounded-xl relative overflow-hidden h-full min-h-[200px] group lg:col-span-2">
                <div 
                    className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105" 
                    style={{ backgroundImage: `url('${obsessionImage}')` }}
                >
                    <div className="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent"></div>
                </div>
                <div className="relative z-10 p-6 flex flex-col justify-end h-full">
                    <div className="flex justify-between items-end">
                        <div>
                            <span className="inline-block px-2 py-1 rounded bg-primary/80 text-white text-[10px] font-bold tracking-widest mb-2">OBSESSION</span>
                            <h3 className="text-2xl font-bold text-white leading-tight truncate max-w-[200px] md:max-w-[300px]">{obsessionName}</h3>
                            <p className="text-slate-300">{obsessionArtist}</p>
                        </div>
                        <div className="text-right hidden sm:block">
                            <div className="text-3xl font-bold text-white">{obsessionCount}</div>
                            <div className="text-xs text-slate-400 uppercase">Plays this month</div>
                        </div>
                    </div>
                </div>
            </div>

            <div className="flex flex-col gap-4 h-full">
                <div className="bg-card-dark border border-[#222f49] rounded-xl p-5 flex-1 flex flex-col justify-center items-center text-center">
                    <span className="material-symbols-outlined text-4xl text-primary mb-2">visibility</span>
                    <div className="text-3xl font-bold text-white">{uniqueArtists}</div>
                    <div className="text-slate-400 text-xs uppercase tracking-wider">Unique Artists</div>
                </div>
                
                <div className="bg-card-dark border border-[#222f49] rounded-xl p-5 flex-1 flex flex-col justify-center items-center">
                    <div className="relative size-20">
                        <svg className="size-full -rotate-90" viewBox="0 0 36 36">
                            <path className="text-[#222f49]" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" strokeWidth="3"></path>
                            <path 
                                className="text-primary transition-all duration-1000 ease-out" 
                                d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" 
                                fill="none" 
                                stroke="currentColor" 
                                strokeDasharray={`${Math.min(hipsterScore, 100)}, 100`} 
                                strokeWidth="3"
                            ></path>
                        </svg>
                        <div className="absolute inset-0 flex items-center justify-center flex-col">
                            <span className="text-sm font-bold text-white">{hipsterScore.toFixed(0)}%</span>
                        </div>
                    </div>
                    <div className="text-slate-400 text-[10px] uppercase tracking-wider mt-2">Hipster Score</div>
                    <div className="text-slate-500 text-[9px] mt-1">Obscurity: {obscurityRating.toFixed(0)}%</div>
                </div>
            </div>
        </section>
    );
};

export default StatsGrid;