import React from 'react';
import Tooltip from './Tooltip';

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 concentration = metrics.volume?.concentration?.hhi || 0;
    const diversity = metrics.volume?.concentration?.gini || 0;
    const peakHour = metrics.time_habits?.peak_hour !== undefined ? `${metrics.time_habits.peak_hour}:00` : "N/A";

    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 group">
                    <div className="flex items-center gap-2 mb-1">
                        <div className="text-3xl font-bold text-white">{uniqueArtists}</div>
                        <Tooltip text="The number of unique artists you've listened to in this period.">
                            <span className="material-symbols-outlined text-slate-500 text-sm cursor-help">info</span>
                        </Tooltip>
                    </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 group">
                    <div className="flex items-center gap-4">
                        <div className="text-center">
                            <Tooltip text="Concentration score (HHI). High means you focus on few artists, low means you spread your listening.">
                                <div className="text-xl font-bold text-white">{(1 - concentration).toFixed(2)}</div>
                                <div className="text-slate-500 text-[9px] uppercase tracking-tighter">Variety</div>
                            </Tooltip>
                        </div>
                        <div className="w-px h-8 bg-slate-700"></div>
                        <div className="text-center">
                            <Tooltip text={`Your peak listening time is around ${peakHour}.`}>
                                <div className="text-xl font-bold text-white">{peakHour}</div>
                                <div className="text-slate-500 text-[9px] uppercase tracking-tighter">Peak Time</div>
                            </Tooltip>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default StatsGrid;
