hmitestWinform/frontend/pages/IOMonitorPage.tsx

import React, { useState, useEffect } from 'react';
import { RotateCw } from 'lucide-react';
import { IOPoint } from '../types';
import { comms } from '../communication';

interface IOMonitorPageProps {
    onToggle: (id: number, type: 'input' | 'output') => void;
}

export const IOMonitorPage: React.FC<IOMonitorPageProps> = ({ onToggle }) => {
    const [ioPoints, setIoPoints] = useState<IOPoint[]>([]);
    const [isLoading, setIsLoading] = useState(true);
    const [activeIOTab, setActiveIOTab] = useState<'in' | 'out'>('in');

    // Fetch initial IO list when page mounts
    useEffect(() => {
        const fetchIOList = async () => {
            setIsLoading(true);
            try {
                const ioStr = await comms.getIOList();
                const ioData: IOPoint[] = JSON.parse(ioStr);
                setIoPoints(ioData);
            } catch (e) {
                console.error('Failed to fetch IO list:', e);
            }
            setIsLoading(false);
        };
        fetchIOList();

        // Subscribe to real-time IO updates
        const unsubscribe = comms.subscribe((msg: any) => {
            if (msg?.type === 'STATUS_UPDATE' && msg.ioState) {
                setIoPoints(prev => {
                    const newIO = [...prev];
                    msg.ioState.forEach((update: { id: number, type: string, state: boolean }) => {
                        const idx = newIO.findIndex(p => p.id === update.id && p.type === update.type);
                        if (idx >= 0) newIO[idx] = { ...newIO[idx], state: update.state };
                    });
                    return newIO;
                });
            }
        });

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

    const points = ioPoints.filter(p => p.type === (activeIOTab === 'in' ? 'input' : 'output'));

    return (
        <main className="relative w-full h-full px-6 pt-6 pb-20">
            <div className="glass-holo p-6 h-full flex flex-col gap-4">

                {/* Local Header / Controls */}
                <div className="flex items-center justify-between shrink-0">
                    <div className="flex items-center gap-4">
                        <h2 className="text-2xl font-tech font-bold text-white tracking-wider">
                            SYSTEM I/O MONITOR
                        </h2>
                        <div className="h-6 w-px bg-white/20"></div>
                        <div className="text-sm font-mono text-neon-blue">
                            TOTAL POINTS: {ioPoints.length}
                        </div>
                    </div>

                    <div className="bg-black/40 backdrop-blur-md p-1 rounded-full border border-white/10 flex gap-1">
                        <button
                            onClick={() => setActiveIOTab('in')}
                            className={`px-6 py-2 rounded-full font-tech font-bold text-sm transition-all ${activeIOTab === 'in' ? 'bg-neon-yellow/20 text-neon-yellow border border-neon-yellow shadow-[0_0_15px_rgba(255,230,0,0.3)]' : 'text-slate-400 hover:text-white hover:bg-white/5'}`}
                        >
                            INPUTS ({ioPoints.filter(p => p.type === 'input').length})
                        </button>
                        <button
                            onClick={() => setActiveIOTab('out')}
                            className={`px-6 py-2 rounded-full font-tech font-bold text-sm transition-all ${activeIOTab === 'out' ? 'bg-neon-green/20 text-neon-green border border-neon-green shadow-[0_0_15px_rgba(10,255,0,0.3)]' : 'text-slate-400 hover:text-white hover:bg-white/5'}`}
                        >
                            OUTPUTS ({ioPoints.filter(p => p.type === 'output').length})
                        </button>
                    </div>
                </div>

                <div className="bg-slate-950/40 backdrop-blur-md flex-1 overflow-y-auto custom-scrollbar rounded-lg border border-white/5">
                    {isLoading ? (
                        <div className="h-full flex flex-col items-center justify-center gap-4 animate-pulse">
                            <RotateCw className="w-16 h-16 text-neon-blue animate-spin" />
                            <div className="text-xl font-tech text-neon-blue tracking-widest">LOADING IO POINTS...</div>
                        </div>
                    ) : (
                        <div className="grid grid-cols-2 gap-x-8 gap-y-2 p-4">
                            {points.map(p => (
                                <div
                                    key={p.id}
                                    onClick={() => onToggle(p.id, p.type)}
                                    className={`
                                        flex items-center gap-4 px-4 py-3 cursor-pointer transition-all border
                                        clip-tech-sm group hover:translate-x-1
                                        ${p.state
                                            ? (p.type === 'output'
                                                ? 'bg-neon-green/10 border-neon-green text-neon-green shadow-[0_0_15px_rgba(10,255,0,0.2)]'
                                                : 'bg-neon-yellow/10 border-neon-yellow text-neon-yellow shadow-[0_0_15px_rgba(255,230,0,0.2)]')
                                            : 'bg-slate-900/40 border-slate-800 text-slate-500 hover:border-slate-600 hover:bg-slate-800/40'}
                                    `}
                                >
                                    {/* LED Indicator */}
                                    <div className={`w-3 h-3 rounded-full shrink-0 transition-all ${p.state ? (p.type === 'output' ? 'bg-neon-green shadow-[0_0_8px_#0aff00]' : 'bg-neon-yellow shadow-[0_0_8px_#ffe600]') : 'bg-slate-800 border border-slate-700'}`}></div>

                                    {/* ID Badge */}
                                    <div className={`w-12 font-mono font-bold text-lg ${p.state ? 'text-white' : 'text-slate-600'}`}>
                                        {p.type === 'input' ? 'I' : 'Q'}{p.id.toString().padStart(2, '0')}
                                    </div>

                                    {/* Name */}
                                    <div className={`flex-1 font-bold uppercase tracking-wide truncate ${p.state ? 'text-white' : 'text-slate-500'} group-hover:text-white transition-colors`}>
                                        {p.name}
                                    </div>
                                </div>
                            ))}
                        </div>
                    )}
                </div>
            </div>
        </main>
    );
};