import React, { useState, useEffect } from 'react';
import { RobotTarget } from '../../types';
import { comms } from '../../communication';

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

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[]>([]);

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

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

    return (
        <footer className="absolute bottom-0 left-0 right-0 h-10 bg-black/80 border-t border-neon-blue/30 flex items-center px-6 justify-between z-40 backdrop-blur text-xs font-mono text-slate-400">
            <div className="flex gap-4">
                {/* H/W 상태 표시 (윈폼 HWState와 동일) */}
                {hwStatus.map((hw) => {
                    const colors = getStatusColor(hw.status);
                    return (
                        <div key={hw.name} className="flex items-center gap-1.5" title={`${hw.name}: ${hw.title}`}>
                            <div className={`w-2 h-2 rounded-full transition-all ${colors.bg} ${colors.shadow}`}></div>
                            <span className={`font-bold ${colors.text}`}>{hw.name}</span>
                            <span className="text-[10px] text-slate-500">{hw.title}</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="flex gap-8 text-neon-blue">
                <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>
    );
};