import React, { useState } from 'react';

// 🏎️ Runtime Benchmark Visualizer

export default function RuntimeShowdown() {
    const [selectedMetric, setSelectedMetric] = useState('reqs'); // reqs, startup

    const runtimes = [
        { 
            name: 'Node.js', 
            color: 'bg-green-500', 
            bg: 'bg-green-50 dark:bg-green-900/10',
            border: 'border-green-200 dark:border-green-900/30',
            reqs: 70, // % width
            startup: 100 // % width (slower is bigger bar usually, but here lets do efficiency/speed... wait startup time lower is better)
            // Lets visualize "Score" instead
        },
        { 
            name: 'Bun', 
            color: 'bg-yellow-400', 
             bg: 'bg-yellow-50 dark:bg-yellow-900/10',
            border: 'border-yellow-200 dark:border-yellow-900/30',
            reqs: 100, 
            startup: 15 // Only 15% of Node's time
        },
        { 
            name: 'Deno', 
            color: 'bg-purple-500', 
            bg: 'bg-purple-50 dark:bg-purple-900/10',
            border: 'border-purple-200 dark:border-purple-900/30',
            reqs: 85, 
            startup: 35 
        }
    ];

    return (
        <div className="bg-slate-50 dark:bg-slate-950 p-8 rounded-3xl border border-slate-200 dark:border-slate-800 shadow-xl">
             <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-10 gap-6">
                <div>
                     <h3 className="text-3xl font-black text-gray-900 dark:text-white flex items-center gap-3">
                        <span className="text-blue-600">🏁</span> Runtime Wars
                    </h3>
                    <p className="text-gray-500 mt-2">Interactive Benchmark Results.</p>
                </div>
                
                 <div className="flex bg-slate-200 dark:bg-slate-900 p-1 rounded-xl">
                    <button 
                        onClick={() => setSelectedMetric('reqs')}
                        className={`px-6 py-2 rounded-lg font-bold text-sm transition-all ${selectedMetric === 'reqs' ? 'bg-white dark:bg-slate-800 shadow text-blue-600' : 'text-slate-500'}`}
                    >
                        Throughput (Req/s)
                    </button>
                    <button 
                        onClick={() => setSelectedMetric('startup')}
                        className={`px-6 py-2 rounded-lg font-bold text-sm transition-all ${selectedMetric === 'startup' ? 'bg-white dark:bg-slate-800 shadow text-blue-600' : 'text-slate-500'}`}
                    >
                        Startup Time (ms)
                    </button>
                </div>
            </div>

            <div className="space-y-6">
                {runtimes.map((r) => {
                    // Calculate bar width.
                    // For requs: higher is better. (width = val%)
                    // For startup: lower is better. We need to invert visual or show time. 
                    // Let's show bars relative to max.
                    
                    let width = 0;
                    let valueText = '';
                    
                    if (selectedMetric === 'reqs') {
                        width = r.reqs;
                        valueText = r.name === 'Bun' ? '185k' : r.name === 'Node.js' ? '110k' : '135k';
                    } else {
                        // Startup. Node (100) is 120ms. Bun (15) is 8ms. Deno (35) is 40ms.
                        // We want to visualize Short Bars = Good? Or Speed?
                        // Usually benchmarks show "Time taken" so shorter is better.
                        width = r.startup; 
                        valueText = r.name === 'Bun' ? '8ms' : r.name === 'Node.js' ? '120ms' : '40ms';
                    }
                    
                    return (
                        <div key={r.name} className={`p-6 rounded-2xl border ${r.bg} ${r.border}`}>
                            <div className="flex justify-between items-center mb-2">
                                <h4 className="font-bold text-lg flex items-center gap-2">
                                    {r.name === 'Bun' && <span className="text-yellow-500">⚡</span>}
                                    {r.name === 'Node.js' && <span className="text-green-600">🖥️</span>}
                                    {r.name === 'Deno' && <span className="text-purple-500">🛡️</span>}
                                    {r.name}
                                </h4>
                                <div className="text-2xl font-black">{valueText}</div>
                            </div>
                            
                            <div className="w-full bg-white dark:bg-black/20 h-6 rounded-full overflow-hidden relative">
                                <div 
                                    className={`h-full ${r.color} transition-all duration-1000 ease-out flex items-center justify-end px-2 text-xs text-white font-bold`}
                                    style={{ width: `${width}%` }}
                                >
                                </div>
                            </div>
                            {selectedMetric === 'startup' && r.name === 'Bun' && (
                                <div className="text-xs text-yellow-600 mt-2 font-bold">🚀 15x Faster than Node</div>
                            )}
                        </div>
                    );
                })}
            </div>

        </div>
    );
}