import React, { useState } from 'react';
import { Activity } from 'lucide-react';
import { IOPoint } from '../types';
import { PanelHeader } from './common/PanelHeader';
import { TechButton } from './common/TechButton';

interface IOPanelProps {
    ioPoints: IOPoint[];
    onToggle: (id: number, type: 'input' | 'output') => void;
}

export const IOPanel: React.FC<IOPanelProps> = ({ ioPoints, onToggle }) => {
    const [tab, setTab] = useState<'in' | 'out'>('in');
    const points = ioPoints.filter(p => p.type === (tab === 'in' ? 'input' : 'output'));

    return (
        <div className="h-full flex flex-col">
            <PanelHeader title="I/O Monitor" icon={Activity} />
            <div className="flex gap-2 mb-4">
                <TechButton active={tab === 'in'} onClick={() => setTab('in')} className="flex-1">Inputs</TechButton>
                <TechButton active={tab === 'out'} onClick={() => setTab('out')} className="flex-1" variant="blue">Outputs</TechButton>
            </div>
            <div className="grid grid-cols-4 gap-2 overflow-y-auto pr-2 custom-scrollbar pb-4">
                {points.map(p => (
                    <div
                        key={p.id}
                        onClick={() => onToggle(p.id, p.type)}
                        className={`
                            aspect-square flex flex-col items-center justify-center p-1 cursor-pointer transition-all border
                            clip-tech
                            ${p.state
                                ? (p.type === 'output'
                                    ? 'bg-neon-green/10 border-neon-green text-neon-green shadow-[0_0_10px_rgba(10,255,0,0.3)]'
                                    : 'bg-neon-yellow/10 border-neon-yellow text-neon-yellow shadow-[0_0_10px_rgba(255,230,0,0.3)]')
                                : 'bg-slate-900/50 border-slate-700 text-slate-600 hover:border-slate-500'}
                        `}
                    >
                        <div className={`w-2 h-2 rounded-full mb-2 ${p.state ? (p.type === 'output' ? 'bg-neon-green' : 'bg-neon-yellow') : 'bg-slate-800'}`}></div>
                        <span className="font-mono text-[10px] font-bold">
                            {p.type === 'input' ? 'I' : 'Q'}{p.id.toString().padStart(2, '0')}
                        </span>
                        <span className="text-[8px] text-center uppercase leading-tight mt-1 opacity-80 truncate w-full px-1">
                            {p.name.replace(/(Sensor|Door|Lamp)/g, '')}
                        </span>
                    </div>
                ))}
            </div>
        </div>
    );
};