import {
    Leaf, Flower2, TestTube2, Wind, Package, Scissors, Lock,
    Square, Grid3X3, Rows3, LayoutGrid
} from 'lucide-react';
import { useLayoutStore, LayoutRoom } from '../../../stores/layoutStore';

const ROOM_TYPES: { type: LayoutRoom['type']; icon: React.ReactNode; label: string; color: string }[] = [
    { type: 'VEG', icon: <Leaf size={16} />, label: 'Vegetative', color: '#10b981' },
    { type: 'FLOWER', icon: <Flower2 size={16} />, label: 'Flower', color: '#a855f7' },
    { type: 'CLONE', icon: <TestTube2 size={16} />, label: 'Clone', color: '#3b82f6' },
    { type: 'DRY', icon: <Wind size={16} />, label: 'Drying', color: '#f59e0b' },
    { type: 'CURE', icon: <Package size={16} />, label: 'Curing', color: '#f97316' },
    { type: 'TRIM', icon: <Scissors size={16} />, label: 'Trim', color: '#64748b' },
    { type: 'VAULT', icon: <Lock size={16} />, label: 'Vault', color: '#71717a' },
];

const FIXTURES = [
    { type: 'TABLE', icon: <LayoutGrid size={16} />, label: '4×8 Table' },
    { type: 'RACK', icon: <Rows3 size={16} />, label: 'Dry Rack' },
    { type: 'TRAY', icon: <Grid3X3 size={16} />, label: 'Clone Tray' },
];

export function ElementsPanel() {
    const { activeTool, setActiveTool, pendingRoomType, setPendingRoomType } = useLayoutStore();

    const handleRoomTypeClick = (type: LayoutRoom['type']) => {
        if (pendingRoomType === type) {
            setPendingRoomType(null);
            setActiveTool('select');
        } else {
            setPendingRoomType(type);
            setActiveTool('room');
        }
    };

    return (
        <div className="flex-1 overflow-auto">
            <div className="p-3 border-b border-white/10">
                <h3 className="text-xs font-semibold text-[var(--color-text-tertiary)] uppercase tracking-wider">
                    Elements
                </h3>
            </div>

            {/* Room Types */}
            <div className="p-2">
                <p className="text-xs text-[var(--color-text-tertiary)] px-2 mb-2">Rooms</p>
                <div className="grid grid-cols-2 gap-1">
                    {ROOM_TYPES.map(({ type, icon, label, color }) => {
                        const isActive = pendingRoomType === type && activeTool === 'room';

                        return (
                            <button
                                key={type}
                                onClick={() => handleRoomTypeClick(type)}
                                className={`
                                    flex items-center gap-2 px-2 py-2 rounded-lg text-xs transition-all
                                    ${isActive
                                        ? 'bg-[var(--color-primary)]/30 text-white ring-1 ring-emerald-500'
                                        : 'bg-slate-800/50 hover:bg-slate-700 text-slate-300'
                                    }
                                `}
                            >
                                <div style={{ color }}>{icon}</div>
                                <span className="truncate">{label}</span>
                            </button>
                        );
                    })}
                </div>
            </div>

            {/* Fixtures */}
            <div className="p-2 border-t border-white/10">
                <p className="text-xs text-[var(--color-text-tertiary)] px-2 mb-2">Fixtures</p>
                <div className="space-y-1">
                    {FIXTURES.map(({ type, icon, label }) => (
                        <button
                            key={type}
                            className="w-full flex items-center gap-2 px-2 py-2 bg-slate-800/50 hover:bg-slate-700 rounded-lg text-xs text-slate-300 transition-colors"
                        >
                            {icon}
                            <span>{label}</span>
                        </button>
                    ))}
                </div>
            </div>

            {/* Instructions */}
            <div className="p-3 border-t border-white/10">
                <div className="bg-slate-800/50 rounded-lg p-3 text-xs text-[var(--color-text-tertiary)]">
                    {activeTool === 'room' && pendingRoomType ? (
                        <p>Click on the canvas to place a <span className="text-emerald-400">{pendingRoomType}</span> room</p>
                    ) : (
                        <p>Select a room type above, then click on the canvas to add it</p>
                    )}
                </div>
            </div>
        </div>
    );
}
