import React, { useState, useEffect } from 'react';
import { SimulationMap, MapNode, MagnetLine, FloorMark } from '../types';
import { Save, Wand2 } from 'lucide-react';

interface PropertyPanelProps {
    selectedItemIds: Set<string>;
    mapData: SimulationMap;
    onUpdate: (type: 'NODE' | 'MAGNET' | 'MARK', id: string, data: any) => void;
}

const PropertyPanel: React.FC<PropertyPanelProps> = ({ selectedItemIds, mapData, onUpdate }) => {
    const [formData, setFormData] = useState<any>(null);
    const [position, setPosition] = useState({ x: 1100, y: 100 });
    const [isDragging, setIsDragging] = useState(false);
    const dragOffset = React.useRef({ x: 0, y: 0 });

    // When selection changes, update form data
    useEffect(() => {
        if (selectedItemIds.size === 1) {
            const id = Array.from(selectedItemIds)[0];
            const node = mapData.nodes.find(n => n.id === id);
            const magnet = mapData.magnets.find(m => m.id === id);
            const mark = mapData.marks.find(m => m.id === id);

            if (node) {
                setFormData({ ...node, formType: 'NODE' });
            } else if (magnet) {
                setFormData({ ...magnet, formType: 'MAGNET' });
            } else if (mark) {
                setFormData({ ...mark, formType: 'MARK' });
            } else {
                setFormData(null);
            }
        } else {
            setFormData(null);
        }
    }, [selectedItemIds, mapData.nodes, mapData.magnets, mapData.marks]);

    const handleChange = (field: string, value: string | number | boolean) => {
        if (!formData) return;
        setFormData((prev: any) => ({ ...prev, [field]: value }));
    };

    const handleSave = () => {
        if (!formData) return;

        // Validate RFID Duplication
        if (formData.formType === 'NODE' && formData.rfidId && formData.rfidId !== '0000') {
            const isDuplicate = mapData.nodes.some(n =>
                n.rfidId === formData.rfidId && n.id !== formData.id
            );

            if (isDuplicate) {
                alert(`Error: RFID "${formData.rfidId}" is already used by another node.`);
                return;
            }
        }

        onUpdate(formData.formType, formData.id, formData);
    };

    // Auto Generate RFID
    const handleAutoRfid = () => {
        const usedRfids = new Set(mapData.nodes.map(n => n.rfidId));
        let nextRfid = 1; // Start from 1, assuming 0000 is default/null
        while (nextRfid < 10000) {
            const candidate = nextRfid.toString().padStart(4, '0');
            if (!usedRfids.has(candidate)) {
                handleChange('rfidId', candidate);
                return;
            }
            nextRfid++;
        }
        alert('No available RFID found between 0001 and 9999');
    };

    // Drag Logic
    const handleMouseDown = (e: React.MouseEvent) => {
        setIsDragging(true);
        dragOffset.current = {
            x: e.clientX - position.x,
            y: e.clientY - position.y
        };
    };

    const handleMouseMove = React.useCallback((e: MouseEvent) => {
        if (isDragging) {
            setPosition({
                x: e.clientX - dragOffset.current.x,
                y: e.clientY - dragOffset.current.y
            });
        }
    }, [isDragging]);

    const handleMouseUp = React.useCallback(() => {
        setIsDragging(false);
    }, []);

    useEffect(() => {
        if (isDragging) {
            window.addEventListener('mousemove', handleMouseMove);
            window.addEventListener('mouseup', handleMouseUp);
        } else {
            window.removeEventListener('mousemove', handleMouseMove);
            window.removeEventListener('mouseup', handleMouseUp);
        }
        return () => {
            window.removeEventListener('mousemove', handleMouseMove);
            window.removeEventListener('mouseup', handleMouseUp);
        };
    }, [isDragging, handleMouseMove, handleMouseUp]);


    if (!formData || selectedItemIds.size !== 1) return null;

    return (
        <div
            style={{
                position: 'fixed',
                left: position.x,
                top: position.y,
                zIndex: 100
            }}
            className="w-64 bg-gray-800 border border-gray-600 rounded-lg shadow-xl overflow-hidden flex flex-col"
        >
            {/* Header / Drag Handle */}
            <div
                onMouseDown={handleMouseDown}
                className="bg-gray-700 p-2 cursor-move flex items-center justify-between border-b border-gray-600 select-none"
            >
                <span className="text-gray-200 font-bold text-xs">Properties</span>
                <button
                    onMouseDown={(e) => e.stopPropagation()} // Prevent drag when clicking button
                    onClick={handleSave}
                    className="flex items-center gap-1 bg-blue-600 hover:bg-blue-500 text-white px-2 py-0.5 rounded text-[10px] transition-colors"
                >
                    <Save size={12} /> Save
                </button>
            </div>

            <div className="p-4 flex flex-col gap-4 max-h-[400px] overflow-y-auto">
                {/* Common Fields */}
                <div className="flex flex-col gap-1">
                    <label className="text-xs text-gray-400">ID</label>
                    <input
                        type="text"
                        value={formData.id}
                        disabled
                        className="bg-gray-900 border border-gray-700 text-gray-400 text-sm p-1 rounded"
                    />
                </div>

                {formData.formType === 'NODE' && (
                    <>
                        <div className="flex flex-col gap-1">
                            <label className="text-xs text-gray-400">Name (Alias)</label>
                            <input
                                type="text"
                                value={formData.name || ''}
                                onChange={(e) => handleChange('name', e.target.value)}
                                className="bg-gray-700 border border-gray-600 text-gray-200 text-sm p-1 rounded focus:border-blue-500 outline-none"
                            />
                        </div>
                        <div className="flex flex-col gap-1">
                            <label className="text-xs text-gray-400">RFID ID</label>
                            <div className="flex gap-2">
                                <input
                                    type="text"
                                    value={formData.rfidId || ''}
                                    onChange={(e) => handleChange('rfidId', e.target.value)}
                                    className="flex-1 bg-gray-700 border border-gray-600 text-gray-200 text-sm p-1 rounded focus:border-blue-500 outline-none font-mono"
                                />
                                <button
                                    onClick={handleAutoRfid}
                                    title="Auto Generate Unique RFID"
                                    className="p-1 bg-gray-600 hover:bg-gray-500 text-white rounded transition-colors"
                                >
                                    <Wand2 size={16} />
                                </button>
                            </div>
                        </div>

                        <div className="grid grid-cols-2 gap-2">
                            <div className="flex flex-col gap-1">
                                <label className="text-xs text-gray-400">X</label>
                                <input
                                    type="number"
                                    value={formData.x}
                                    onChange={(e) => handleChange('x', parseFloat(e.target.value))}
                                    className="bg-gray-700 border border-gray-600 text-gray-200 text-sm p-1 rounded focus:border-blue-500 outline-none"
                                />
                            </div>
                            <div className="flex flex-col gap-1">
                                <label className="text-xs text-gray-400">Y</label>
                                <input
                                    type="number"
                                    value={formData.y}
                                    onChange={(e) => handleChange('y', parseFloat(e.target.value))}
                                    className="bg-gray-700 border border-gray-600 text-gray-200 text-sm p-1 rounded focus:border-blue-500 outline-none"
                                />
                            </div>
                        </div>

                        <div className="border-t border-gray-600 my-2 pt-2">
                            <label className="text-xs font-bold text-gray-300 mb-2 block">Configuration</label>

                            <div className="grid grid-cols-2 gap-2 mb-2">
                                <div className="flex flex-col gap-1">
                                    <label className="text-[10px] text-gray-400">Station Type</label>
                                    <input
                                        type="number"
                                        value={formData.stationType || 0}
                                        onChange={(e) => handleChange('stationType', parseInt(e.target.value))}
                                        className="bg-gray-700 border border-gray-600 text-gray-200 text-xs p-1 rounded"
                                    />
                                </div>
                                <div className="flex flex-col gap-1">
                                    <label className="text-[10px] text-gray-400">Speed Limit</label>
                                    <input
                                        type="number"
                                        value={formData.speedLimit || 0}
                                        onChange={(e) => handleChange('speedLimit', parseInt(e.target.value))}
                                        className="bg-gray-700 border border-gray-600 text-gray-200 text-xs p-1 rounded"
                                    />
                                </div>
                                <div className="flex flex-col gap-1">
                                    <label className="text-[10px] text-gray-400">Dock Dir</label>
                                    <input
                                        type="number"
                                        value={formData.dockDirection || 0}
                                        onChange={(e) => handleChange('dockDirection', parseInt(e.target.value))}
                                        className="bg-gray-700 border border-gray-600 text-gray-200 text-xs p-1 rounded"
                                    />
                                </div>
                                <div className="flex flex-col gap-1">
                                    <label className="text-[10px] text-gray-400">Text Size</label>
                                    <input
                                        type="number"
                                        value={formData.nodeTextFontSize || 12}
                                        onChange={(e) => handleChange('nodeTextFontSize', parseInt(e.target.value))}
                                        className="bg-gray-700 border border-gray-600 text-gray-200 text-xs p-1 rounded"
                                    />
                                </div>
                            </div>

                            <div className="flex flex-col gap-1 mb-2">
                                <label className="text-[10px] text-gray-400">Text Color</label>
                                <div className="flex gap-2">
                                    <input
                                        type="color"
                                        value={formData.nodeTextForeColor || '#FFFFFF'}
                                        onChange={(e) => handleChange('nodeTextForeColor', e.target.value)}
                                        className="bg-transparent w-6 h-6 p-0 border-0"
                                    />
                                    <input
                                        type="text"
                                        value={formData.nodeTextForeColor || '#FFFFFF'}
                                        onChange={(e) => handleChange('nodeTextForeColor', e.target.value)}
                                        className="flex-1 bg-gray-700 border border-gray-600 text-gray-200 text-xs p-1 rounded font-mono"
                                    />
                                </div>
                            </div>

                            <div className="flex flex-col gap-2 mt-2">
                                {[
                                    { k: 'canDocking', l: 'Can Docking' },
                                    { k: 'canTurnLeft', l: 'Can Turn Left' },
                                    { k: 'canTurnRight', l: 'Can Turn Right' },
                                    { k: 'disableCross', l: 'Disable Cross' },
                                    { k: 'isActive', l: 'Is Active' },
                                ].map((item) => (
                                    <label key={item.k} className="flex items-center gap-2 cursor-pointer">
                                        <input
                                            type="checkbox"
                                            checked={!!formData[item.k]}
                                            onChange={(e) => handleChange(item.k, e.target.checked ? true : false)}
                                            className="rounded bg-gray-700 border-gray-600 text-blue-500 focus:ring-0"
                                        />
                                        <span className="text-xs text-gray-300">{item.l}</span>
                                    </label>
                                ))}
                            </div>
                        </div>
                    </>
                )}

            </div>
        </div>
    );
};

export default PropertyPanel;