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;
}

interface InterlockData {
    axisIndex: number;
    axisName: string;
    nonAxis: boolean;
    locks: { id: number; name: string; state: boolean }[];
    hexValue: string;
}

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

    // Fetch initial IO list when page mounts
    useEffect(() => {
        const fetchIOList = async () => {
            setIsLoading(true);
            try {
                const ioStr = await comms.getIOList();
                const ioData = JSON.parse(ioStr);

                // Handle new structured format: { inputs: [...], outputs: [...], interlocks: [...] }
                if (ioData.inputs && ioData.outputs) {
                    // New format
                    const flatIoList: IOPoint[] = [
                        ...ioData.outputs.map((io: any) => ({ id: io.id, name: io.name, type: 'output' as const, state: io.state })),
                        ...ioData.inputs.map((io: any) => ({ id: io.id, name: io.name, type: 'input' as const, state: io.state }))
                    ];
                    setIoPoints(flatIoList);
                    setInterlocks(ioData.interlocks || []);
                } else if (Array.isArray(ioData)) {
                    // Old format - already flat array
                    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 = activeIOTab === 'interlock'
        ? []
        : 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">
                            {activeIOTab === 'interlock' ? `TOTAL AXES: ${interlocks.length}` : `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>
                        <button
                            onClick={() => setActiveIOTab('interlock')}
                            className={`px-6 py-2 rounded-full font-tech font-bold text-sm transition-all ${activeIOTab === 'interlock' ? 'bg-neon-blue/20 text-neon-blue border border-neon-blue shadow-[0_0_15px_rgba(0,255,255,0.3)]' : 'text-slate-400 hover:text-white hover:bg-white/5'}`}
                        >
                            INTERLOCKS ({interlocks.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>
                    ) : activeIOTab === 'interlock' ? (
                        <div className="p-4 space-y-4">
                            {interlocks.map(axis => (
                                <div key={axis.axisIndex} className="bg-slate-900/60 border border-slate-700 rounded-lg p-4">
                                    <div className="flex items-center justify-between mb-3">
                                        <div className="flex items-center gap-3">
                                            <span className="text-xl font-tech font-bold text-neon-blue">{axis.axisName}</span>
                                            <span className="text-sm font-mono text-slate-400">({axis.hexValue})</span>
                                        </div>
                                    </div>
                                    <div className="grid grid-cols-3 gap-2">
                                        {axis.locks.map(lock => (
                                            <div
                                                key={lock.id}
                                                className={`
                                                    flex items-center gap-2 px-3 py-2 transition-all border rounded
                                                    ${lock.state
                                                        ? 'bg-red-500/20 border-red-500 text-red-400 shadow-[0_0_10px_rgba(239,68,68,0.3)]'
                                                        : 'bg-slate-800/40 border-slate-700 text-slate-500'}
                                                `}
                                            >
                                                <div className={`w-2 h-2 rounded-full shrink-0 ${lock.state ? 'bg-red-500 shadow-[0_0_6px_#ef4444]' : 'bg-slate-700'}`}></div>
                                                <span className="text-xs font-mono truncate">{lock.name}</span>
                                            </div>
                                        ))}
                                    </div>
                                </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>
    );
};