WebUITest-RealProjecT/FrontEnd/components/layout/Footer.tsx

import React, { useState, useEffect, useMemo } 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;
}

// 오류 우선순위: 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[]>([]);

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

    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 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" 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="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>
        </>
    );
};