import React, { useState } from 'react';
import { Brain, AlertCircle } from 'lucide-react';

export default function VillainControlPanel() {
  const [packing, setPacking] = useState(60);
  const [restraint, setRestraint] = useState(75);
  const [neural, setNeural] = useState(40);
  const [sedative, setSedative] = useState(25);
  const [timeDilation, setTimeDilation] = useState(1);
  const [isoLevel, setIsoLevel] = useState(2);

  const getTimeDilationDisplay = (val) => {
    if (val === 0) return '0.75x';
    if (val === 1) return '1.0x';
    if (val === 2) return '2.0x';
    if (val === 3) return '4.0x';
    if (val === 4) return '8.0x';
    return '12.0x';
  };

  return (
    <div className="w-full h-screen bg-gradient-to-br from-slate-900 to-purple-900 flex items-center justify-center p-8">
      <div className="w-full max-w-6xl bg-black rounded-3xl border-4 border-cyan-400 shadow-2xl shadow-cyan-500/50 overflow-hidden">
        
        {/* Top Alert Banner */}
        <div className="bg-gradient-to-r from-yellow-600 to-orange-600 p-4 border-b-4 border-cyan-400">
          <div className="flex items-center justify-center gap-3">
            <AlertCircle className="w-8 h-8 text-white animate-pulse" />
            <span className="text-white font-black text-2xl tracking-wide">SUBJECT APPROACHING COMPLIANCE STATE</span>
            <AlertCircle className="w-8 h-8 text-white animate-pulse" />
          </div>
        </div>

        {/* Main Content Area */}
        <div className="p-8">
          <div className="grid grid-cols-12 gap-8">
            
            {/* Left Side - Vitals & Chamber ID */}
            <div className="col-span-3 space-y-4">
              <div className="bg-gradient-to-r from-purple-600 to-pink-600 p-4 rounded-xl border-2 border-cyan-400 text-center">
                <h1 className="text-white font-black text-3xl tracking-widest">NEST/3</h1>
              </div>
              
              <div className="bg-gray-900 p-4 rounded-xl border-2 border-cyan-400 space-y-3">
                <div className="text-center border-b-2 border-cyan-700 pb-3">
                  <div className="text-green-400 text-4xl font-black">92</div>
                  <div className="text-cyan-300 text-sm font-bold">BPM</div>
                </div>
                <div className="text-center border-b-2 border-cyan-700 pb-3">
                  <div className="text-purple-400 text-4xl font-black">38%</div>
                  <div className="text-cyan-300 text-sm font-bold">BRAIN</div>
                </div>
                <div className="text-center">
                  <div className="text-red-400 text-4xl font-black">54%</div>
                  <div className="text-cyan-300 text-sm font-bold">RESIST</div>
                </div>
              </div>
            </div>

            {/* Middle - Physical Controls */}
            <div className="col-span-5 space-y-4">
              <div className="bg-gray-900 p-5 rounded-xl border-2 border-orange-400">
                <h2 className="text-orange-300 font-black text-xl mb-4 border-b-2 border-orange-600 pb-2">PHYSICAL CONTROLS</h2>
                
                <div className="space-y-4">
                  <div>
                    <div className="flex justify-between mb-2">
                      <span className="text-orange-300 font-bold text-lg">PACKING</span>
                      <span className="text-orange-400 font-black text-2xl">{packing}%</span>
                    </div>
                    <input 
                      type="range" 
                      min="0" 
                      max="100" 
                      value={packing}
                      onChange={(e) => setPacking(Number(e.target.value))}
                      className="w-full h-8 rounded-lg appearance-none cursor-pointer"
                      style={{
                        background: `linear-gradient(to right, #fb923c ${packing}%, #374151 ${packing}%)`
                      }}
                    />
                  </div>

                  <div>
                    <div className="flex justify-between mb-2">
                      <span className="text-red-300 font-bold text-lg">RESTRAINT</span>
                      <span className="text-red-400 font-black text-2xl">{restraint}%</span>
                    </div>
                    <input 
                      type="range" 
                      min="0" 
                      max="100" 
                      value={restraint}
                      onChange={(e) => setRestraint(Number(e.target.value))}
                      className="w-full h-8 rounded-lg appearance-none cursor-pointer"
                      style={{
                        background: `linear-gradient(to right, #f87171 ${restraint}%, #374151 ${restraint}%)`
                      }}
                    />
                  </div>

                  <div>
                    <div className="text-cyan-300 font-bold text-lg mb-3">ISO LEVEL</div>
                    <div className="grid grid-cols-4 gap-2">
                      {[0, 1, 2, 3].map((level) => (
                        <button
                          key={level}
                          onClick={() => setIsoLevel(level)}
                          className={`py-3 px-4 rounded-lg font-black text-xl transition border-2 ${
                            isoLevel === level 
                              ? 'bg-cyan-500 text-white border-cyan-300' 
                              : 'bg-gray-700 text-gray-400 border-gray-600 hover:bg-gray-600'
                          }`}
                        >
                          {level}
                        </button>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Right - Headspace Controls */}
            <div className="col-span-4 space-y-4">
              <div className="bg-gray-900 p-5 rounded-xl border-2 border-purple-400">
                <h2 className="text-purple-300 font-black text-xl mb-4 border-b-2 border-purple-600 pb-2 flex items-center gap-2">
                  <Brain className="w-6 h-6" />
                  HEADSPACE
                </h2>
                
                <div className="space-y-4">
                  <div>
                    <div className="flex justify-between mb-2">
                      <span className="text-purple-300 font-bold text-lg">NEURAL</span>
                      <span className="text-purple-400 font-black text-2xl">{neural}%</span>
                    </div>
                    <input 
                      type="range" 
                      min="0" 
                      max="100" 
                      value={neural}
                      onChange={(e) => setNeural(Number(e.target.value))}
                      className="w-full h-8 rounded-lg appearance-none cursor-pointer"
                      style={{
                        background: `linear-gradient(to right, #c084fc ${neural}%, #374151 ${neural}%)`
                      }}
                    />
                  </div>

                  <div>
                    <div className="flex justify-between mb-2">
                      <span className="text-cyan-300 font-bold text-lg">SEDATIVE</span>
                      <span className="text-cyan-400 font-black text-2xl">{sedative}%</span>
                    </div>
                    <input 
                      type="range" 
                      min="0" 
                      max="100" 
                      value={sedative}
                      onChange={(e) => setSedative(Number(e.target.value))}
                      className="w-full h-8 rounded-lg appearance-none cursor-pointer"
                      style={{
                        background: `linear-gradient(to right, #22d3ee ${sedative}%, #374151 ${sedative}%)`
                      }}
                    />
                  </div>

                  <div>
                    <div className="flex justify-between mb-2">
                      <span className="text-pink-300 font-bold text-lg">TIME DILATION</span>
                      <span className="text-pink-400 font-black text-2xl">{getTimeDilationDisplay(timeDilation)}</span>
                    </div>
                    <input 
                      type="range" 
                      min="0" 
                      max="5" 
                      value={timeDilation}
                      onChange={(e) => setTimeDilation(Number(e.target.value))}
                      className="w-full h-8 rounded-lg appearance-none cursor-pointer"
                      style={{
                        background: `linear-gradient(to right, #ec4899 ${(timeDilation/5)*100}%, #374151 ${(timeDilation/5)*100}%)`
                      }}
                    />
                  </div>
                </div>
              </div>

              <button className="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-black text-2xl py-6 rounded-xl shadow-lg shadow-purple-500/50 border-2 border-purple-400 transition">
                INITIATE
              </button>
            </div>

          </div>
        </div>

        {/* Bottom Status Bar */}
        <div className="bg-gray-900 p-4 border-t-4 border-cyan-400">
          <div className="grid grid-cols-3 gap-4 text-center">
            <div>
              <span className="text-green-400 font-black text-lg">CHAMBER INTEGRITY: </span>
              <span className="text-green-300 font-black text-lg">100% (UNBREAKABLE)</span>
            </div>
            <div>
              <span className="text-cyan-400 font-black text-lg">BIOMETRIC LOCK: </span>
              <span className="text-cyan-300 font-black text-lg">ENGAGED</span>
            </div>
            <div>
              <span className="text-yellow-400 font-black text-lg">EST. TIME TO COMPLIANCE: </span>
              <span className="text-yellow-300 font-black text-lg">4H:47M</span>
            </div>
          </div>
        </div>

      </div>
    </div>
  );
}