import React, { useState, useEffect, useMemo } from 'react';
import { Palette, ChevronUp } from 'lucide-react';
import { RobotTarget } from '../../types';
import { comms } from '../../communication';
import { useTheme, themes, ThemeName } from '../../contexts/ThemeContext';

// HW 상태 타입 (윈폼 HWState와 동일)
// status: 0=SET(미설정/회색), 1=ON(연결/녹색), 2=TRIG(트리거/노란색), 3=OFF(연결안됨/빨간색)
interface HWItem {
    name: string;
    title: string;
    status: number;
}

// 오류 우선순위: motion(1) > i/o(2) > emergency(3) > general(4)
interface HardwareError {
    type: 'motion' | 'io' | 'emergency' | 'general';
    priority: number;
    message: string;
}

interface FooterProps {
    isHostConnected: boolean;
    robotTarget: RobotTarget;
}

// 상태에 따른 LED 색상 반환
const getStatusColor = (status: number): { bg: string; shadow: string; text: string } => {
    switch (status) {
        case 1: // ON - 녹색
            return { bg: 'bg-neon-green', shadow: 'shadow-[0_0_5px_#0aff00]', text: 'text-green-400' };
        case 2: // TRIG - 노란색
            return { bg: 'bg-yellow-400', shadow: 'shadow-[0_0_5px_#facc15]', text: 'text-yellow-400' };
        case 3: // OFF - 빨간색
            return { bg: 'bg-red-500', shadow: 'shadow-[0_0_5px_#ef4444]', text: 'text-red-400' };
        default: // SET - 회색 (미설정)
            return { bg: 'bg-gray-500', shadow: '', text: 'text-gray-400' };
    }
};

export const Footer: React.FC<FooterProps> = ({ isHostConnected, robotTarget }) => {
    const [hwStatus, setHwStatus] = useState<HWItem[]>([]);
    const [showThemeSelector, setShowThemeSelector] = useState(false);
    const { theme, themeName, setTheme, availableThemes } = useTheme();

    useEffect(() => {
        // HW_STATUS_UPDATE 이벤트 구독
        const unsubscribe = comms.subscribe((msg: any) => {
            if (msg?.type === 'HW_STATUS_UPDATE' && msg.data) {
                setHwStatus(msg.data);
            }
        });

        return () => {
            unsubscribe();
        };
    }, []);

    // 하드웨어 오류 감지 및 우선순위 기반 표시
    // 우선순위: motion(1) > i/o(2) > emergency(3) > general(4)
    const hardwareError = useMemo((): HardwareError | null => {
        const errors: HardwareError[] = [];

        for (const hw of hwStatus) {
            if (hw.status === 3) { // OFF 상태 (오류)
                if (hw.name === 'MOT') {
                    errors.push({ type: 'motion', priority: 1, message: 'MOTION HARDWARE ERROR' });
                } else if (hw.name === 'DIO' || hw.name === 'I/O') {
                    errors.push({ type: 'io', priority: 2, message: 'I/O HARDWARE ERROR' });
                } else if (hw.name === 'EMG') {
                    errors.push({ type: 'emergency', priority: 3, message: 'EMERGENCY ERROR' });
                }
                // 다른 하드웨어는 일반 오류로 표시하지 않음 (BCD, VIS, PRT 등은 일반적인 연결 상태)
            }
        }

        // 우선순위가 가장 높은(숫자가 낮은) 오류 반환
        if (errors.length === 0) return null;
        return errors.sort((a, b) => a.priority - b.priority)[0];
    }, [hwStatus]);

    // 테마 선택 팝업을 닫기 위한 외부 클릭 감지
    useEffect(() => {
        const handleClickOutside = (e: MouseEvent) => {
            const target = e.target as HTMLElement;
            if (!target.closest('.theme-selector')) {
                setShowThemeSelector(false);
            }
        };

        if (showThemeSelector) {
            document.addEventListener('click', handleClickOutside);
        }

        return () => {
            document.removeEventListener('click', handleClickOutside);
        };
    }, [showThemeSelector]);

    // 테마별 배경색 스타일 (Windows Classic은 특별 처리)
    const getFooterBgClass = () => {
        switch (themeName) {
            case 'windows-classic':
                return 'bg-[#c0c0c0] border-t-2 border-white shadow-[inset_0_-1px_0_#808080]';
            case 'dark-modern':
                return 'bg-zinc-900/90 border-t border-zinc-700/50';
            case 'matrix':
                return 'bg-black/95 border-t border-green-500/30';
            case 'industrial':
                return 'bg-stone-900/95 border-t border-orange-500/30';
            case 'otaku':
                return 'bg-[#1a1025]/95 border-t border-pink-500/30 shadow-[0_-2px_20px_rgba(255,107,157,0.1)]';
            case 'pink-pink':
                return 'bg-[#ffe4e9]/95 border-t-2 border-pink-300 shadow-[0_-2px_10px_rgba(255,105,180,0.2)]';
            default:
                return 'bg-black/80 border-t border-neon-blue/30';
        }
    };

    return (
        <>
            {/* 하드웨어 오류 표시 배너 - 화면 중앙 상단에 크게 표시 */}
            {hardwareError && (
                <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[200] pointer-events-none">
                    <div className="bg-red-900/95 border-4 border-red-500 rounded-lg px-12 py-8 shadow-[0_0_50px_rgba(239,68,68,0.5)] animate-pulse">
                        <div className="text-center">
                            <div className="text-red-400 text-6xl mb-4">⚠</div>
                            <div className="text-red-100 text-3xl font-bold font-tech tracking-wider">
                                {hardwareError.message}
                            </div>
                            <div className="text-red-300 text-sm mt-3 font-mono">
                                CHECK HARDWARE CONNECTION
                            </div>
                        </div>
                    </div>
                </div>
            )}

            <footer className={`absolute bottom-0 left-0 right-0 h-10 ${getFooterBgClass()} flex items-center px-6 justify-between z-40 backdrop-blur text-xs font-mono`}>
                <div className="flex gap-4 items-center">
                    {/* H/W 상태 표시 (윈폼 HWState와 동일) */}
                    {hwStatus.map((hw) => {
                        const colors = getStatusColor(hw.status);
                        return (
                            <div key={hw.name} className="flex items-center gap-1" title={`${hw.name}: ${hw.title}`}>
                                <div className={`w-2 h-2 rounded-full transition-all ${colors.bg} ${colors.shadow}`}></div>
                                <span className={`text-[11px] font-bold ${colors.text}`}>{hw.name}</span>
                            </div>
                        );
                    })}
                    {/* HOST 연결 상태 */}
                    <div className="flex items-center gap-1.5 ml-2 pl-2 border-l border-slate-700">
                        <div className={`w-2 h-2 rounded-full transition-all ${isHostConnected ? 'bg-neon-green shadow-[0_0_5px_#0aff00]' : 'bg-red-500 shadow-[0_0_5px_#ff0000] animate-pulse'}`}></div>
                        <span className={`font-bold ${isHostConnected ? 'text-green-400' : 'text-red-400'}`}>HOST</span>
                    </div>
                </div>

                {/* 중앙: 테마 선택 버튼 */}
                <div className="relative theme-selector">
                    <button
                        onClick={(e) => {
                            e.stopPropagation();
                            setShowThemeSelector(!showThemeSelector);
                        }}
                        className={`flex items-center gap-2 px-3 py-1 rounded transition-all ${
                            themeName === 'windows-classic'
                                ? 'bg-[#c0c0c0] border-2 border-outset hover:bg-[#d0d0d0]'
                                : 'hover:bg-white/10 text-slate-400 hover:text-white'
                        }`}
                        style={{ color: themeName !== 'windows-classic' ? theme.colors.primary : undefined }}
                        title="Change Theme"
                    >
                        <Palette className="w-4 h-4" />
                        <span className="text-[11px] font-bold">{theme.displayName}</span>
                        <ChevronUp className={`w-3 h-3 transition-transform ${showThemeSelector ? 'rotate-180' : ''}`} />
                    </button>

                    {/* 테마 선택 팝업 */}
                    {showThemeSelector && (
                        <div className={`absolute bottom-full left-1/2 -translate-x-1/2 mb-2 min-w-[200px] rounded-lg shadow-2xl overflow-hidden animate-fadeIn ${
                            themeName === 'windows-classic'
                                ? 'bg-[#c0c0c0] border-2 border-outset'
                                : 'bg-slate-900/95 border border-slate-700 backdrop-blur'
                        }`}>
                            <div className={`px-3 py-2 text-xs font-bold ${
                                themeName === 'windows-classic'
                                    ? 'bg-gradient-to-r from-[#000080] to-[#1084d0] text-white'
                                    : 'border-b border-slate-700 text-slate-400'
                            }`}>
                                SELECT THEME
                            </div>
                            <div className="p-2 space-y-1">
                                {availableThemes.map((name) => {
                                    const t = themes[name];
                                    const isActive = name === themeName;
                                    return (
                                        <button
                                            key={name}
                                            onClick={() => {
                                                setTheme(name);
                                                setShowThemeSelector(false);
                                            }}
                                            className={`w-full flex items-center gap-3 px-3 py-2 rounded text-left transition-all ${
                                                themeName === 'windows-classic'
                                                    ? `${isActive ? 'bg-[#000080] text-white' : 'hover:bg-[#d0d0d0] text-black'}`
                                                    : `${isActive ? 'bg-white/10 text-white' : 'hover:bg-white/5 text-slate-400 hover:text-white'}`
                                            }`}
                                        >
                                            {/* 테마 미리보기 색상 */}
                                            <div className="flex gap-1">
                                                <div
                                                    className="w-3 h-3 rounded-full"
                                                    style={{ backgroundColor: t.colors.primary }}
                                                ></div>
                                                <div
                                                    className="w-3 h-3 rounded-full"
                                                    style={{ backgroundColor: t.colors.secondary }}
                                                ></div>
                                            </div>
                                            <span className="text-xs font-medium">{t.displayName}</span>
                                            {isActive && (
                                                <span className="ml-auto text-[10px]" style={{ color: t.colors.primary }}>●</span>
                                            )}
                                        </button>
                                    );
                                })}
                            </div>
                        </div>
                    )}
                </div>

                {/* 우측: 로봇 위치 */}
                <div className="flex gap-8" style={{ color: theme.colors.primary }}>
                    <span>POS.X: {robotTarget.x.toFixed(3)}</span>
                    <span>POS.Y: {robotTarget.y.toFixed(3)}</span>
                    <span>POS.Z: {robotTarget.z.toFixed(3)}</span>
                </div>
            </footer>
        </>
    );
};