import React, { useState, useRef, useEffect } from 'react';
import { 
  Activity, 
  RotateCw, 
  Bluetooth, 
  Battery, 
  ChevronLeft, 
  Zap, 
  Sliders, 
  Waves,
  Power
} from 'lucide-react';
import { AreaChart, Area, ResponsiveContainer } from 'recharts';

type ViewMode = 'hub' | 'free' | 'pattern';
type DeviceState = 'disconnected' | 'connecting' | 'connected';

interface Pattern {
    id: string;
    name: string;
    icon: React.ReactNode;
    color: string;
}

const PATTERNS: Pattern[] = [
    { id: 'pulse', name: '脉冲跳动', icon: <Activity size={18} />, color: '#C084FC' },
    { id: 'wave', name: '深海潮汐', icon: <Waves size={18} />, color: '#60A5FA' },
    { id: 'climb', name: '登峰造极', icon: <RotateCw size={18} />, color: '#34D399' },
    { id: 'storm', name: '雷雨风暴', icon: <Zap size={18} />, color: '#FBBF24' },
    { id: 'chaos', name: '随机漫步', icon: <Sliders size={18} />, color: '#F472B6' },
    { id: 'sos', name: 'SOS', icon: <Power size={18} />, color: '#F87171' },
];

const DeviceCard: React.FC<{ 
    status: DeviceState; 
    onConnect: () => void;
    onDisconnect: () => void;
}> = ({ status, onConnect, onDisconnect }) => {
    return (
        <div className="w-full glass-panel p-5 rounded-3xl mb-6 bg-white/10 border border-white/20 relative overflow-hidden shadow-lg">
            <div className="absolute -right-6 -top-6 text-white/5">
                <Bluetooth size={120} />
            </div>

            <div className="flex justify-between items-start relative z-10">
                <div>
                    <h3 className="text-white font-bold text-lg flex items-center gap-2">
                        Link-X Pro
                        {status === 'connected' && (
                            <span className="text-[10px] font-bold bg-[#34D399]/20 text-[#34D399] px-2 py-0.5 rounded-full border border-[#34D399]/30 leading-none mt-0.5">
                                ONLINE
                            </span>
                        )}
                    </h3>
                    <p className="text-white/60 text-xs font-mono mt-1">
                        {status === 'disconnected' ? '设备未连接' : status === 'connecting' ? '正在搜索信号...' : 'ID: 884-X9-01'}
                    </p>
                </div>
                <button 
                    onClick={status === 'connected' ? onDisconnect : onConnect}
                    className={`px-5 py-2 rounded-full text-xs font-bold transition-all ${
                        status === 'connected' 
                        ? 'bg-white/10 text-white/70 border border-white/10' 
                        : status === 'connecting'
                            ? 'bg-white/20 text-white animate-pulse'
                            : 'bg-white text-[#2e1065] shadow-lg hover:shadow-xl'
                    }`}
                >
                    {status === 'connected' ? '断开' : status === 'connecting' ? '连接中' : '连接设备'}
                </button>
            </div>

            {status === 'connected' && (
                <div className="mt-6 flex items-center gap-6 relative z-10">
                    <div className="flex items-center gap-2">
                        <Battery size={16} className="text-[#34D399]" />
                        <span className="text-sm font-mono text-white">85%</span>
                    </div>
                </div>
            )}
        </div>
    );
};

const FreeControlView: React.FC<{ onBack: () => void }> = ({ onBack }) => {
    const [intensity, setIntensity] = useState(0);
    const [isClimax, setIsClimax] = useState(false);
    const controlRef = useRef<HTMLDivElement>(null);

    const handleInteraction = (e: React.MouseEvent | React.TouchEvent) => {
        if (!controlRef.current) return;
        const rect = controlRef.current.getBoundingClientRect();
        const clientY = 'touches' in e ? e.touches[0].clientY : (e as React.MouseEvent).clientY;
        const relativeY = Math.max(0, Math.min(1, (rect.bottom - clientY) / rect.height));
        setIntensity(Math.round(relativeY * 100));
    };

    const handleClimax = () => {
        setIsClimax(true);
        setIntensity(100);
        if (window.navigator.vibrate) window.navigator.vibrate(500);
        setTimeout(() => {
            setIsClimax(false);
            setIntensity(20);
        }, 3000);
    };

    return (
        <div className="h-full flex flex-col">
            <div className="flex items-center mb-6">
                <button onClick={onBack} className="p-2 -ml-2 text-white/70 hover:text-white">
                    <ChevronLeft size={24} />
                </button>
                <h2 className="text-lg font-bold text-white ml-2">自由操控</h2>
            </div>

            <div className="flex-1 flex flex-col items-center justify-center">
                <div 
                    ref={controlRef}
                    className="relative w-48 h-[60vh] rounded-[32px] border border-white/20 bg-white/5 shadow-2xl overflow-hidden touch-none backdrop-blur-xl"
                    onTouchMove={handleInteraction}
                    onMouseDown={(e) => e.buttons === 1 && handleInteraction(e)}
                    onMouseMove={(e) => e.buttons === 1 && handleInteraction(e)}
                >
                    <div 
                        className={`absolute bottom-0 w-full transition-all duration-75 ease-linear backdrop-blur-md flex items-start justify-center pt-2 ${isClimax ? 'bg-red-500/50' : 'bg-[#C084FC]/50'}`}
                        style={{ height: `${intensity}%` }}
                    >
                        <div className={`w-full h-[3px] ${isClimax ? 'bg-red-500 shadow-[0_0_20px_white]' : 'bg-white shadow-[0_0_15px_white]'}`}></div>
                    </div>

                    <div className="absolute inset-0 flex flex-col justify-between p-6 pointer-events-none">
                        <span className="text-xs text-white/40 font-mono mx-auto">MAX</span>
                        <div className="flex-1 flex items-center justify-center">
                            <span className={`text-5xl font-bold font-mono tracking-tighter transition-colors drop-shadow-lg ${isClimax ? 'text-red-200' : 'text-white'}`}>
                                {intensity}
                            </span>
                        </div>
                        <span className="text-xs text-white/40 font-mono mx-auto">OFF</span>
                    </div>
                </div>

                <p className="mt-6 text-white/60 text-xs font-mono tracking-wider">上下滑动触控板以控制强度</p>
            </div>

            <button 
                onClick={handleClimax}
                disabled={isClimax}
                className={`w-full py-4 mt-6 rounded-2xl font-bold tracking-widest text-white transition-all active:scale-95 shadow-lg ${
                    isClimax 
                    ? 'bg-red-500 animate-pulse cursor-not-allowed' 
                    : 'bg-white/10 border border-red-400/50 text-red-300 hover:bg-red-500/20'
                }`}
            >
                {isClimax ? 'MAX OUTPUT...' : '一键爆发'}
            </button>
        </div>
    );
};

const PatternControlView: React.FC<{ onBack: () => void }> = ({ onBack }) => {
    const [activePattern, setActivePattern] = useState<string | null>(null);
    const [globalIntensity, setGlobalIntensity] = useState(50);
    
    const generateWaveData = (patternId: string | null) => {
        if (!patternId) return Array(20).fill({ v: 10 });
        return Array.from({ length: 20 }, (_, i) => ({
            v: patternId === 'pulse' ? (i % 5 === 0 ? 90 : 20) : 
               patternId === 'wave' ? 40 + Math.sin(i) * 30 :
               Math.random() * 80 + 10
        }));
    };
    const [waveData, setWaveData] = useState(generateWaveData(null));

    useEffect(() => {
        if (activePattern) {
            const interval = setInterval(() => {
                setWaveData(prev => {
                    const next = [...prev.slice(1), { v: Math.random() * (globalIntensity) + 20 }];
                    return next;
                });
            }, 100);
            return () => clearInterval(interval);
        } else {
             setWaveData(Array(20).fill({ v: 10 }));
        }
    }, [activePattern, globalIntensity]);

    return (
        <div className="h-full flex flex-col">
            <div className="flex items-center mb-6">
                <button onClick={onBack} className="p-2 -ml-2 text-white/70 hover:text-white">
                    <ChevronLeft size={24} />
                </button>
                <h2 className="text-lg font-bold text-white ml-2">波形控制</h2>
            </div>

            <div className="h-40 w-full glass-panel rounded-3xl mb-8 p-4 flex items-center justify-center relative overflow-hidden bg-white/5 border border-white/10">
                <ResponsiveContainer width="100%" height="100%">
                    <AreaChart data={waveData}>
                        <defs>
                            <linearGradient id="waveGradient" x1="0" y1="0" x2="0" y2="1">
                                <stop offset="5%" stopColor="#C084FC" stopOpacity={0.8}/>
                                <stop offset="95%" stopColor="#C084FC" stopOpacity={0}/>
                            </linearGradient>
                        </defs>
                        <Area 
                            type="monotone" 
                            dataKey="v" 
                            stroke="#E9D5FF" 
                            strokeWidth={3}
                            fill="url(#waveGradient)" 
                            isAnimationActive={false}
                        />
                    </AreaChart>
                </ResponsiveContainer>
            </div>

            <div className="mb-8">
                <div className="flex justify-between text-xs text-white/60 mb-2 uppercase tracking-wider">
                    <span>强度</span>
                    <span>{globalIntensity}%</span>
                </div>
                <input 
                    type="range" 
                    min="0" 
                    max="100" 
                    value={globalIntensity} 
                    onChange={(e) => setGlobalIntensity(parseInt(e.target.value))}
                    className="w-full h-2 bg-white/20 rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:shadow-lg"
                />
            </div>

            <div className="grid grid-cols-2 gap-3 overflow-y-auto no-scrollbar pb-6">
                {PATTERNS.map(p => {
                    const isActive = activePattern === p.id;
                    return (
                        <button
                            key={p.id}
                            onClick={() => setActivePattern(isActive ? null : p.id)}
                            className={`p-4 rounded-2xl border transition-all duration-300 flex flex-col items-center gap-2 ${
                                isActive 
                                ? 'bg-white text-[#2e1065] border-white shadow-lg scale-[1.02]' 
                                : 'bg-white/5 border-white/10 text-white/60 hover:bg-white/10'
                            }`}
                        >
                            <div className={`p-2 rounded-full ${isActive ? 'bg-[#2e1065]/10 text-[#2e1065]' : 'bg-white/5'}`}>
                                {p.icon}
                            </div>
                            <span className="text-sm font-bold">
                                {p.name}
                            </span>
                        </button>
                    )
                })}
            </div>
        </div>
    );
};

const ManualControl: React.FC = () => {
  const [view, setView] = useState<ViewMode>('hub');
  const [deviceStatus, setDeviceStatus] = useState<DeviceState>('disconnected');

  const connectDevice = () => {
      setDeviceStatus('connecting');
      setTimeout(() => setDeviceStatus('connected'), 1500);
  };

  const disconnectDevice = () => {
      setDeviceStatus('disconnected');
  };

  if (view === 'free') return <div className="pt-4 px-6 h-full"><FreeControlView onBack={() => setView('hub')} /></div>;
  if (view === 'pattern') return <div className="pt-4 px-6 h-full"><PatternControlView onBack={() => setView('hub')} /></div>;

  return (
    <div className="pt-4 px-6 h-full flex flex-col">
        <div className="mb-2">
            <DeviceCard 
                status={deviceStatus} 
                onConnect={connectDevice} 
                onDisconnect={disconnectDevice}
            />
        </div>

        <h2 className="text-xs font-bold text-white/40 uppercase tracking-widest mb-3">操控模式</h2>
        <div className="grid grid-cols-1 gap-4">
            
            <button 
                onClick={() => setView('free')}
                disabled={deviceStatus !== 'connected'}
                className={`group relative overflow-hidden h-36 rounded-3xl flex items-center px-8 transition-all ${
                    deviceStatus === 'connected' 
                    ? 'bg-white/10 border border-white/20 active:scale-[0.98] backdrop-blur-md' 
                    : 'bg-white/5 border border-white/5 opacity-50 cursor-not-allowed'
                }`}
            >
                <div className="w-14 h-14 rounded-full bg-[#C084FC]/20 flex items-center justify-center text-[#C084FC] group-hover:scale-110 transition-transform">
                    <Sliders size={28} />
                </div>
                <div className="ml-5 text-left">
                    <h3 className="text-xl font-bold text-white group-hover:text-[#C084FC] transition-colors">自由操控</h3>
                    <p className="text-xs text-white/50 mt-1">指尖滑动控制 • 实时反馈</p>
                </div>
            </button>

            <button 
                onClick={() => setView('pattern')}
                disabled={deviceStatus !== 'connected'}
                className={`group relative overflow-hidden h-36 rounded-3xl flex items-center px-8 transition-all ${
                    deviceStatus === 'connected' 
                    ? 'bg-white/10 border border-white/20 active:scale-[0.98] backdrop-blur-md' 
                    : 'bg-white/5 border border-white/5 opacity-50 cursor-not-allowed'
                }`}
            >
                <div className="w-14 h-14 rounded-full bg-[#60A5FA]/20 flex items-center justify-center text-[#60A5FA] group-hover:scale-110 transition-transform">
                    <Waves size={28} />
                </div>
                <div className="ml-5 text-left">
                    <h3 className="text-xl font-bold text-white group-hover:text-[#60A5FA] transition-colors">波形模式</h3>
                    <p className="text-xs text-white/50 mt-1">9种预设震动韵律</p>
                </div>
            </button>

        </div>
    </div>
  );
};

export default ManualControl;