import React, { useState, useMemo } from 'react';
import { Navigation, Package, Zap, ChevronRight, Hash, Type } from 'lucide-react';
import { SimulationMap } from '../types';

interface AcsControlsProps {
    onSend: (cmd: number, data?: number[]) => void;
    isConnected: boolean;
    mapData: SimulationMap;
}

const AcsControls: React.FC<AcsControlsProps> = ({ onSend, isConnected, mapData }) => {
    const [tagId, setTagId] = useState('0001');
    const [alias, setAlias] = useState('charger1');

    const PRESET_ALIASES = [
        'charger1', 'charger2',
        'loader', 'unloader', 'cleaner',
        'buffer1', 'buffer2', 'buffer3', 'buffer4', 'buffer5', 'buffer6'
    ];

    const availableTags = useMemo(() => {
        // Extract unique, non-empty RFID tags from map nodes
        const tags = mapData.nodes
            .filter(n => n.rfidId && n.rfidId.trim() !== '')
            .map(n => n.rfidId);
        return Array.from(new Set(tags)).sort();
    }, [mapData]);

    const handleSend = (cmd: number, dataStr?: string, dataByte?: number) => {
        if (!isConnected) return;

        let payload: number[] = [];

        if (dataStr !== undefined) {
            // Convert string to ASCII bytes
            for (let i = 0; i < dataStr.length; i++) {
                payload.push(dataStr.charCodeAt(i));
            }
        } else if (dataByte !== undefined) {
            payload.push(dataByte);
        }

        onSend(cmd, payload);
    };

    return (
        <div className={`bg-gray-800 p-4 border-t border-gray-700 select-none ${!isConnected ? 'opacity-50 pointer-events-none' : ''}`}>
            <h3 className="text-sm font-semibold mb-3 text-green-400 flex items-center justify-between">
                <span className="flex items-center gap-2"><Navigation size={16} /> ACS Control</span>
                <span className="text-[10px] bg-gray-900 px-1.5 py-0.5 rounded text-gray-500 border border-gray-700">EXT CMD</span>
            </h3>

            {/* Navigation Commands */}
            <div className="space-y-2 mb-4">
                {/* Goto Tag */}
                <div className="flex items-center gap-2">
                    <div className="relative flex-1">
                        <Hash size={12} className="absolute left-2 top-1/2 -translate-y-1/2 text-gray-500" />
                        <input
                            list="tag-options"
                            type="text"
                            value={tagId}
                            onChange={(e) => setTagId(e.target.value)}
                            className="w-full bg-gray-900 border border-gray-600 rounded py-1 pl-7 pr-2 text-xs text-white font-mono focus:border-green-500 outline-none"
                            placeholder="Tag ID"
                        />
                        <datalist id="tag-options">
                            {availableTags.map(tag => (
                                <option key={tag} value={tag} />
                            ))}
                        </datalist>
                    </div>
                    <button
                        onClick={() => handleSend(0x81, tagId)}
                        className="bg-gray-700 hover:bg-green-700 text-white text-xs px-3 py-1.5 rounded flex items-center gap-1 transition-colors border border-gray-600"
                    >
                        GO <ChevronRight size={10} />
                    </button>
                </div>

                {/* Goto Alias */}
                <div className="flex items-center gap-2">
                    <div className="relative flex-1">
                        <Type size={12} className="absolute left-2 top-1/2 -translate-y-1/2 text-gray-500" />
                        <input
                            list="alias-options"
                            type="text"
                            value={alias}
                            onChange={(e) => setAlias(e.target.value)}
                            className="w-full bg-gray-900 border border-gray-600 rounded py-1 pl-7 pr-2 text-xs text-white font-mono focus:border-green-500 outline-none"
                            placeholder="Alias Name"
                        />
                        <datalist id="alias-options">
                            {PRESET_ALIASES.map(item => (
                                <option key={item} value={item} />
                            ))}
                        </datalist>
                    </div>
                    <button
                        onClick={() => handleSend(0x82, alias)}
                        className="bg-gray-700 hover:bg-green-700 text-white text-xs px-3 py-1.5 rounded flex items-center gap-1 transition-colors border border-gray-600"
                    >
                        GO <ChevronRight size={10} />
                    </button>
                </div>
            </div>


            <div className="h-px bg-gray-700 my-3" />

            {/* Action Buttons Grid */}
            <div className="grid grid-cols-2 gap-2 mb-3">
                <button
                    onClick={() => handleSend(0x83, undefined, 1)}
                    className="flex items-center justify-center gap-2 bg-blue-900/40 hover:bg-blue-800 border border-blue-800 text-blue-200 py-2 rounded text-xs transition-colors"
                >
                    <Package size={14} /> Pick ON
                </button>
                <button
                    onClick={() => handleSend(0x83, undefined, 0)}
                    className="flex items-center justify-center gap-2 bg-gray-700 hover:bg-gray-600 border border-gray-600 text-gray-300 py-2 rounded text-xs transition-colors"
                >
                    <Package size={14} /> Pick OFF
                </button>

                <button
                    onClick={() => handleSend(0x84, undefined, 1)}
                    className="flex items-center justify-center gap-2 bg-yellow-900/40 hover:bg-yellow-800 border border-yellow-800 text-yellow-200 py-2 rounded text-xs transition-colors"
                >
                    <Zap size={14} /> Charge ON
                </button>
                <button
                    onClick={() => handleSend(0x84, undefined, 0)}
                    className="flex items-center justify-center gap-2 bg-gray-700 hover:bg-gray-600 border border-gray-600 text-gray-300 py-2 rounded text-xs transition-colors"
                >
                    <Zap size={14} /> Charge OFF
                </button>
            </div>

            {/* Lift Controls (New) */}
            <div className="mb-3">
                <h4 className="text-[10px] text-gray-500 uppercase font-bold mb-1">Lift Control</h4>
                <div className="flex gap-1">
                    <button onClick={() => handleSend(0x85, undefined, 1)} className="flex-1 bg-gray-700 hover:bg-green-700 text-white text-xs py-1.5 rounded border border-gray-600">UP</button>
                    <button onClick={() => handleSend(0x85, undefined, 0)} className="flex-1 bg-gray-700 hover:bg-red-700 text-white text-xs py-1.5 rounded border border-gray-600">STOP</button>
                    <button onClick={() => handleSend(0x85, undefined, 2)} className="flex-1 bg-gray-700 hover:bg-green-700 text-white text-xs py-1.5 rounded border border-gray-600">DOWN</button>
                </div>
            </div>

            {/* System Controls (New) */}
            <div>
                <h4 className="text-[10px] text-gray-500 uppercase font-bold mb-1">System Control</h4>
                <div className="grid grid-cols-2 gap-2 mb-2">
                    <button onClick={() => handleSend(0x86)} className="bg-red-900/40 hover:bg-red-800 text-red-200 border border-red-800 text-xs py-1.5 rounded font-bold">EMG STOP</button>
                    <button onClick={() => handleSend(0x87)} className="bg-gray-700 hover:bg-gray-600 text-gray-200 border border-gray-600 text-xs py-1.5 rounded">RESET</button>
                </div>
                <div className="flex items-center justify-between bg-gray-900 p-2 rounded border border-gray-700">
                    <span className="text-xs text-gray-400">Mark Stop</span>
                    <div className="flex gap-1">
                        <button onClick={() => handleSend(0x88, undefined, 1)} className="px-2 py-0.5 text-[10px] bg-green-900 text-green-300 rounded border border-green-800 hover:bg-green-800">ON</button>
                        <button onClick={() => handleSend(0x88, undefined, 0)} className="px-2 py-0.5 text-[10px] bg-gray-700 text-gray-300 rounded border border-gray-600 hover:bg-gray-600">OFF</button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default AcsControls;