import React from 'react';
import { Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer } from 'recharts';

const VibeRadar = ({ vibe }) => {
    if (!vibe) return null;

    const data = [
        { subject: 'Acoustic', A: vibe.acousticness || 0, fullMark: 1 },
        { subject: 'Dance', A: vibe.danceability || 0, fullMark: 1 },
        { subject: 'Energy', A: vibe.energy || 0, fullMark: 1 },
        { subject: 'Instrumental', A: vibe.instrumentalness || 0, fullMark: 1 },
        { subject: 'Valence', A: vibe.valence || 0, fullMark: 1 },
        { subject: 'Live', A: vibe.liveness || 0, fullMark: 1 },
    ];

    const energy = vibe.energy || 0;
    const danceability = vibe.danceability || 0;
    const instrumentalness = vibe.instrumentalness || 0;
    const valence = vibe.valence || 0;
    const acousticness = vibe.acousticness || 0;

    const partyScore = Math.round(((energy + danceability) / 2) * 100);
    const focusScore = Math.round(((instrumentalness + (1 - valence)) / 2) * 100);
    const chillScore = Math.round(((acousticness + (1 - energy)) / 2) * 100);
    
    const total = partyScore + focusScore + chillScore || 1;
    const partyPct = Math.round((partyScore / total) * 100);
    const focusPct = Math.round((focusScore / total) * 100);
    const chillPct = 100 - partyPct - focusPct;

    const whiplash = vibe.whiplash || {};
    const maxWhiplash = Math.max(
        whiplash.tempo || 0,
        (whiplash.energy || 0) * 100,
        (whiplash.valence || 0) * 100
    );
    const volatilityLevel = maxWhiplash > 25 ? "HIGH" : maxWhiplash > 12 ? "MEDIUM" : "LOW";
    const volatilityColor = volatilityLevel === "HIGH" ? "text-red-400" : volatilityLevel === "MEDIUM" ? "text-yellow-400" : "text-green-400";

    return (
        <div className="bg-card-dark border border-[#222f49] rounded-xl p-6">
            <div className="flex items-center justify-between mb-6">
                <h3 className="text-xl font-bold text-white flex items-center gap-2">
                    <span className="material-symbols-outlined text-primary">fingerprint</span> 
                    Sonic DNA
                </h3>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="aspect-square relative flex items-center justify-center bg-card-darker rounded-lg border border-[#222f49]/50 p-4">
                    <ResponsiveContainer width="100%" height={200} minHeight={200}>
                        <RadarChart cx="50%" cy="50%" outerRadius="70%" data={data}>
                            <PolarGrid stroke="#334155" />
                            <PolarAngleAxis dataKey="subject" tick={{ fill: '#94a3b8', fontSize: 12 }} />
                            <PolarRadiusAxis angle={30} domain={[0, 1]} tick={false} axisLine={false} />
                            <Radar
                                name="My Vibe"
                                dataKey="A"
                                stroke="#256af4"
                                strokeWidth={2}
                                fill="rgba(37, 106, 244, 0.4)"
                                fillOpacity={0.4}
                            />
                        </RadarChart>
                    </ResponsiveContainer>
                </div>

                <div className="flex flex-col gap-6">
                    <div className="flex-1 flex flex-col justify-center">
                        <h4 className="text-sm text-slate-400 mb-4 font-medium uppercase">Mood Clusters</h4>
                        <div className="relative h-40 w-full rounded-lg border border-dashed border-[#334155] bg-card-darker/50">
                            <div className="absolute top-1/2 left-1/4 -translate-x-1/2 -translate-y-1/2 size-20 rounded-full bg-primary/20 border border-primary text-primary flex items-center justify-center text-xs font-bold text-center p-1 cursor-pointer hover:bg-primary hover:text-white transition-colors z-10">
                                Party<br/>{partyPct}%
                            </div>
                            <div className="absolute top-1/3 right-1/4 size-14 rounded-full bg-accent-purple/20 border border-accent-purple text-accent-purple flex items-center justify-center text-[10px] font-bold text-center p-1 cursor-pointer hover:bg-accent-purple hover:text-white transition-colors">
                                Focus<br/>{focusPct}%
                            </div>
                            <div className="absolute bottom-4 right-1/3 size-12 rounded-full bg-accent-neon/20 border border-accent-neon text-accent-neon flex items-center justify-center text-[10px] font-bold text-center p-1 cursor-pointer hover:bg-accent-neon hover:text-black transition-colors">
                                Chill<br/>{chillPct}%
                            </div>
                        </div>
                    </div>

                    <div>
                        <div className="flex justify-between items-end mb-2">
                            <h4 className="text-sm text-slate-400 font-medium uppercase">Whiplash Meter</h4>
                            <span className={`text-xs font-bold ${volatilityColor}`}>{volatilityLevel} VOLATILITY</span>
                        </div>
                        <div className="space-y-2">
                            <div className="flex items-center gap-2">
                                <span className="text-xs text-slate-500 w-16">Tempo</span>
                                <div className="flex-1 h-2 bg-card-darker rounded overflow-hidden">
                                    <div 
                                        className="h-full bg-gradient-to-r from-primary to-red-500 transition-all"
                                        style={{ width: `${Math.min((whiplash.tempo || 0) / 40 * 100, 100)}%` }}
                                    />
                                </div>
                                <span className="text-xs text-slate-400 w-12 text-right">{(whiplash.tempo || 0).toFixed(1)}</span>
                            </div>
                            <div className="flex items-center gap-2">
                                <span className="text-xs text-slate-500 w-16">Energy</span>
                                <div className="flex-1 h-2 bg-card-darker rounded overflow-hidden">
                                    <div 
                                        className="h-full bg-gradient-to-r from-primary to-yellow-500 transition-all"
                                        style={{ width: `${Math.min((whiplash.energy || 0) * 100 / 0.4 * 100, 100)}%` }}
                                    />
                                </div>
                                <span className="text-xs text-slate-400 w-12 text-right">{((whiplash.energy || 0) * 100).toFixed(0)}%</span>
                            </div>
                            <div className="flex items-center gap-2">
                                <span className="text-xs text-slate-500 w-16">Valence</span>
                                <div className="flex-1 h-2 bg-card-darker rounded overflow-hidden">
                                    <div 
                                        className="h-full bg-gradient-to-r from-primary to-green-500 transition-all"
                                        style={{ width: `${Math.min((whiplash.valence || 0) * 100 / 0.4 * 100, 100)}%` }}
                                    />
                                </div>
                                <span className="text-xs text-slate-400 w-12 text-right">{((whiplash.valence || 0) * 100).toFixed(0)}%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default VibeRadar;
