import React, { useState, useEffect } from 'react';
import { 
  ChevronLeft, 
  Bluetooth, 
  RefreshCw, 
  Zap, 
  Smartphone, 
  Wifi, 
  Battery, 
  Settings,
  Power,
  Activity,
  CheckCircle2
} from 'lucide-react';

interface DeviceManagerProps {
  onBack: () => void;
}

type ScanStatus = 'scanning' | 'found' | 'connected';

interface Device {
    id: string;
    name: string;
    signal: number;
    isPaired: boolean;
}

const DeviceManager: React.FC<DeviceManagerProps> = ({ onBack }) => {
  const [status, setStatus] = useState<ScanStatus>('scanning');
  const [scannedDevices, setScannedDevices] = useState<Device[]>([]);
  const [connectStep, setConnectStep] = useState(0); // 0: idle, 1: connecting, 2: success

  // Simulation: Scan for devices
  useEffect(() => {
    if (status === 'scanning') {
        const timer = setTimeout(() => {
            setScannedDevices([
                { id: '1', name: 'Link-X Pro', signal: 92, isPaired: true },
                { id: '2', name: 'Unknown Signal (Weak)', signal: 30, isPaired: false },
            ]);
            setStatus('found');
        }, 2500);
        return () => clearTimeout(timer);
    }
  }, [status]);

  const handleConnect = (device: Device) => {
      setConnectStep(1);
      // Simulate connection delay
      setTimeout(() => {
          setConnectStep(2);
          setTimeout(() => {
              setStatus('connected');
              setConnectStep(0);
          }, 1000);
      }, 1500);
  };

  const handleDisconnect = () => {
      if(window.confirm('确定要断开与设备的连接吗？')) {
          setStatus('scanning');
          setScannedDevices([]);
      }
  };

  const testVibration = () => {
      if (window.navigator.vibrate) {
          window.navigator.vibrate([200, 100, 200]);
      }
      alert('已发送震动测试指令');
  };

  // --- RENDER: Connected View ---
  if (status === 'connected') {
      return (
        <div className="fixed inset-0 z-[60] bg-[#0F1014] flex flex-col h-full overflow-hidden animate-in fade-in duration-300">
            {/* Header */}
            <div className="relative z-20 pt-safe-top px-4 py-3 flex items-center justify-between border-b border-white/5 bg-[#0F1014]/80 backdrop-blur-md">
                <button onClick={onBack} className="p-2 -ml-2 text-white/70 hover:text-white active:scale-95 transition-transform">
                    <ChevronLeft size={24} />
                </button>
                <h1 className="text-base font-bold text-white tracking-wider">设备管理</h1>
                <div className="w-8"></div>
            </div>

            <div className="flex-1 overflow-y-auto no-scrollbar p-6">
                
                {/* Device Visual Card */}
                <div className="relative w-full aspect-video bg-[#1C1F26] rounded-2xl border border-white/10 overflow-hidden mb-6 flex items-center justify-center group">
                    <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-20"></div>
                    <div className="absolute inset-0 bg-gradient-to-br from-[#8B5CF6]/10 via-transparent to-[#0F1014]"></div>
                    
                    {/* Glowing Center */}
                    <div className="relative z-10 flex flex-col items-center">
                        <div className="w-24 h-24 rounded-full bg-[#0F1014] border-2 border-[#8B5CF6] shadow-[0_0_30px_#8B5CF6] flex items-center justify-center mb-4 relative">
                            <Bluetooth size={40} className="text-white" />
                            <div className="absolute inset-0 rounded-full border border-[#8B5CF6] animate-ping opacity-20"></div>
                        </div>
                        <h2 className="text-xl font-bold text-white tracking-widest">Link-X Pro</h2>
                        <div className="flex items-center gap-1.5 mt-1">
                            <div className="w-1.5 h-1.5 rounded-full bg-[#10B981] animate-pulse"></div>
                            <span className="text-xs text-[#10B981] font-mono">已连接</span>
                        </div>
                    </div>
                </div>

                {/* Status Grid */}
                <div className="grid grid-cols-2 gap-4 mb-6">
                    <div className="bg-[#1C1F26]/60 p-4 rounded-xl border border-white/5 flex flex-col gap-2">
                        <div className="flex items-center gap-2 text-[#94A3B8]">
                            <Battery size={16} />
                            <span className="text-xs">剩余电量</span>
                        </div>
                        <span className="text-2xl font-bold text-white font-mono">85<span className="text-sm text-[#94A3B8]">%</span></span>
                        <div className="w-full h-1 bg-white/10 rounded-full overflow-hidden">
                            <div className="h-full w-[85%] bg-[#10B981]"></div>
                        </div>
                    </div>
                    <div className="bg-[#1C1F26]/60 p-4 rounded-xl border border-white/5 flex flex-col gap-2">
                        <div className="flex items-center gap-2 text-[#94A3B8]">
                            <Wifi size={16} />
                            <span className="text-xs">信号强度</span>
                        </div>
                        <span className="text-2xl font-bold text-white font-mono">-42<span className="text-sm text-[#94A3B8]">dBm</span></span>
                        <div className="flex gap-1 h-1 mt-auto">
                            <div className="flex-1 bg-[#8B5CF6] rounded-full"></div>
                            <div className="flex-1 bg-[#8B5CF6] rounded-full"></div>
                            <div className="flex-1 bg-[#8B5CF6] rounded-full"></div>
                            <div className="flex-1 bg-white/10 rounded-full"></div>
                        </div>
                    </div>
                </div>

                {/* Actions */}
                <h3 className="text-xs font-bold text-[#64748B] uppercase tracking-widest mb-3">设备控制</h3>
                <div className="space-y-3">
                    <button onClick={testVibration} className="w-full p-4 bg-[#1C1F26] active:bg-[#2D3039] rounded-xl flex items-center justify-between group transition-all border border-white/5 hover:border-[#8B5CF6]/50">
                        <div className="flex items-center gap-3">
                            <div className="p-2 rounded-lg bg-[#8B5CF6]/10 text-[#8B5CF6] group-hover:bg-[#8B5CF6] group-hover:text-white transition-colors">
                                <Activity size={18} />
                            </div>
                            <span className="text-sm text-white font-medium">震动马达测试</span>
                        </div>
                        <span className="text-xs text-[#64748B]">点击运行</span>
                    </button>
                    
                    <button className="w-full p-4 bg-[#1C1F26] active:bg-[#2D3039] rounded-xl flex items-center justify-between group transition-all border border-white/5">
                        <div className="flex items-center gap-3">
                            <div className="p-2 rounded-lg bg-white/5 text-[#94A3B8] group-hover:text-white transition-colors">
                                <RefreshCw size={18} />
                            </div>
                            <div className="flex flex-col items-start">
                                <span className="text-sm text-white font-medium">固件更新</span>
                                <span className="text-[10px] text-[#64748B]">当前版本: v2.0.4 (最新)</span>
                            </div>
                        </div>
                    </button>

                    <button className="w-full p-4 bg-[#1C1F26] active:bg-[#2D3039] rounded-xl flex items-center justify-between group transition-all border border-white/5">
                        <div className="flex items-center gap-3">
                            <div className="p-2 rounded-lg bg-white/5 text-[#94A3B8] group-hover:text-white transition-colors">
                                <Settings size={18} />
                            </div>
                            <span className="text-sm text-white font-medium">更多设置</span>
                        </div>
                    </button>
                </div>

                <button 
                    onClick={handleDisconnect}
                    className="w-full mt-8 p-4 rounded-xl border border-[#F43F5E]/30 text-[#F43F5E] flex items-center justify-center gap-2 text-sm font-bold active:bg-[#F43F5E]/10 transition-colors"
                >
                    <Power size={16} /> 断开连接
                </button>
            </div>
        </div>
      );
  }

  // --- RENDER: Scanning View ---
  return (
    <div className="fixed inset-0 z-[60] bg-[#0F1014] flex flex-col h-full overflow-hidden animate-in slide-in-from-right duration-300">
        {/* Header */}
        <div className="relative z-20 pt-safe-top px-4 py-3 flex items-center justify-between border-b border-white/5 bg-[#0F1014]/80 backdrop-blur-md">
            <button onClick={onBack} className="p-2 -ml-2 text-white/70 hover:text-white active:scale-95 transition-transform">
                <ChevronLeft size={24} />
            </button>
            <h1 className="text-base font-bold text-white tracking-wider">搜索设备</h1>
            <div className="w-8">
                {status === 'scanning' && <RefreshCw size={18} className="text-[#8B5CF6] animate-spin" />}
            </div>
        </div>

        <div className="flex-1 flex flex-col items-center pt-12 px-6">
            
            {/* Radar Animation */}
            <div className="relative w-64 h-64 flex items-center justify-center mb-12">
                {/* Rings */}
                <div className="absolute inset-0 rounded-full border border-white/5"></div>
                <div className="absolute inset-12 rounded-full border border-white/5"></div>
                <div className="absolute inset-24 rounded-full border border-white/5"></div>
                
                {/* Active Scan Line */}
                {status === 'scanning' && (
                    <div className="absolute inset-0 rounded-full animate-[spin_3s_linear_infinite] bg-gradient-to-tr from-transparent via-transparent to-[#8B5CF6]/20 border-t border-[#8B5CF6]/50" style={{ clipPath: 'polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 50%)' }}></div>
                )}
                
                {/* Center Icon */}
                <div className="relative z-10 w-20 h-20 bg-[#1C1F26] rounded-full flex items-center justify-center border border-white/10 shadow-[0_0_30px_rgba(0,0,0,0.5)]">
                    <Bluetooth size={32} className={`${status === 'scanning' ? 'text-[#8B5CF6] animate-pulse' : 'text-white'}`} />
                </div>
                
                {/* Status Text */}
                <div className="absolute -bottom-10 left-0 w-full text-center">
                    <p className="text-xs text-[#94A3B8] font-mono tracking-wider">
                        {status === 'scanning' ? 'SCANNING FOR SIGNALS...' : 'SCAN COMPLETE'}
                    </p>
                </div>
            </div>

            {/* Device List */}
            <div className="w-full space-y-3">
                {scannedDevices.map(device => (
                    <button 
                        key={device.id}
                        onClick={() => handleConnect(device)}
                        disabled={connectStep !== 0}
                        className="w-full bg-[#1C1F26]/80 p-4 rounded-xl flex items-center justify-between border border-white/5 active:scale-[0.98] transition-all group hover:border-[#8B5CF6]/50"
                    >
                        <div className="flex items-center gap-4">
                            <div className="w-10 h-10 rounded-full bg-black/40 flex items-center justify-center text-white">
                                {connectStep === 1 ? <RefreshCw size={18} className="animate-spin text-[#8B5CF6]" /> : <Smartphone size={18} />}
                            </div>
                            <div className="flex flex-col items-start">
                                <span className="text-sm font-bold text-white group-hover:text-[#8B5CF6] transition-colors">{device.name}</span>
                                <div className="flex items-center gap-2 mt-0.5">
                                    <div className="flex gap-0.5">
                                        {[1,2,3,4].map(i => (
                                            <div key={i} className={`w-0.5 h-2 rounded-full ${i*25 <= device.signal ? 'bg-[#10B981]' : 'bg-[#334155]'}`}></div>
                                        ))}
                                    </div>
                                    <span className="text-[10px] text-[#64748B]">RSSI {device.signal}dBm</span>
                                </div>
                            </div>
                        </div>
                        {device.isPaired && (
                             <span className="text-[10px] bg-[#8B5CF6]/20 text-[#8B5CF6] px-2 py-0.5 rounded border border-[#8B5CF6]/30">
                                 已配对
                             </span>
                        )}
                    </button>
                ))}
            </div>

            {/* Help */}
            <div className="mt-auto pb-12 flex items-center gap-2 text-[#64748B] text-xs">
                 <Zap size={12} />
                 <span>请确保设备已开机并处于配对模式</span>
            </div>
        </div>
        
        {/* Full Screen Loading Overlay for Connection */}
        {connectStep === 2 && (
            <div className="absolute inset-0 z-50 bg-[#0F1014]/90 backdrop-blur-md flex flex-col items-center justify-center animate-in fade-in">
                <CheckCircle2 size={48} className="text-[#10B981] mb-4 animate-bounce" />
                <h3 className="text-lg font-bold text-white">连接成功</h3>
            </div>
        )}
    </div>
  );
};

export default DeviceManager;