import React, { useState } from 'react';
import { IOPoint } from '../types';

interface IOMonitorPageProps {
    ioPoints: IOPoint[];
    onToggle: (id: number, type: 'input' | 'output') => void;
    activeIOTab: 'in' | 'out';
    onIOTabChange: (tab: 'in' | 'out') => void;
}

export const IOMonitorPage: React.FC<IOMonitorPageProps> = ({ ioPoints, onToggle, activeIOTab, onIOTabChange }) => {
    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={() => onIOTabChange('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={() => onIOTabChange('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">
                    {/* Grid Layout - More columns for full screen */}
                    {/* Grid Layout - 2 Columns for list view */}
                    <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>
    );
};