import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react';
import { MODEL_TYPES, MODEL_CATEGORIES } from './engine/ModelTypes';
import { GAMEPLAY_KITS, KIT_CATEGORIES } from './engine/GameplayKits';
import { getModelThumbnail, cancelThumbnailRequest } from './engine/ModelThumbnails';
import {
    getMyUserModels, getPublicUserModels, likeUserModel,
} from '../api/Kubikon3DService';
import cl from './ToolboxModal.module.css';
import Icon from './Icon';

/**
 * 📦 Тулбокс — модалка с библиотекой 3D-моделей.
 *
 * Этап 2 редактора моделей: три корневых раздела.
 *   - "Стандартные" — встроенные 500+ Kenney-моделей (18 подкатегорий)
 *   - "Мои модели"  — пользовательские модели (voxel|smooth), приватные
 *   - "Сообщество"  — опубликованные другими пользователями
 *
 * Props:
 *   open
 *   activeId — текущая выбранная модель (для стандартных = id строкой, для
 *              пользовательских = `user:<numericId>`)
 *   onClose
 *   onPick(modelId)
 *   userId — id текущего пользователя (для запросов "Мои модели")
 */

// Значения — имена иконок компонента <Icon name=.../>.
const CATEGORY_ICONS = {
    'Природа':    'trees',
    'Транспорт':  'box',
    'Лодки':      'box',
    'Sci-Fi':     'rocket',
    'Здания':     'home',
    'Дороги':     'map',
    'Замки':      'building',
    'Мебель':     'box',
    'Еда':        'box',
    'Оружие':     'swords',
    'Праздники':  'tree',
    'Выживание':  'backpack',
    'Арена':      'shield',
    'Персонажи':  'user',
    'Двери':      'door',
    'Заборы':     'construction',
    'Механизмы':  'settings',
    'Предметы':   'star',
    'Враги': 'zombie',
};

/**
 * Карточка модели с lazy-рендером превью.
 * Запрос на превью отправляется когда карточка попала в viewport,
 * и отменяется когда карточка ушла (юзер сменил вкладку или скроллил мимо).
 */
const ThumbCard = ({ model, active, onPick }) => {
    const ref = useRef(null);
    const [thumb, setThumb] = useState(null);
    const [loading, setLoading] = useState(false);
    const requestedRef = useRef(false);
    const aliveRef = useRef(true);

    useEffect(() => {
        aliveRef.current = true;
        return () => { aliveRef.current = false; };
    }, []);

    useEffect(() => {
        const el = ref.current;
        if (!el || thumb) return;
        // Synthetic-модели (спавнер-диск) не имеют GLB — не запрашиваем превью.
        if (model.synthetic) return;
        if (!model.file) return;

        const io = new IntersectionObserver((entries) => {
            for (const e of entries) {
                if (e.isIntersecting && !requestedRef.current) {
                    requestedRef.current = true;
                    setLoading(true);
                    getModelThumbnail(model.id).then(url => {
                        if (!aliveRef.current) return;
                        setThumb(url || 'failed');   // отмечаем сбой чтобы не дёргать снова
                        setLoading(false);
                    }).catch(() => {
                        if (!aliveRef.current) return;
                        setThumb('failed');
                        setLoading(false);
                    });
                } else if (!e.isIntersecting && requestedRef.current && !thumb) {
                    // Ушли из viewport, и превью ещё не отрисовано — отменяем
                    cancelThumbnailRequest(model.id);
                    requestedRef.current = false;
                    setLoading(false);
                }
            }
        }, { rootMargin: '100px' });
        io.observe(el);
        return () => {
            io.disconnect();
            // При unmount — тоже отменяем если ещё в очереди
            if (requestedRef.current && !thumb) {
                cancelThumbnailRequest(model.id);
            }
        };
    }, [model.id, model.file, thumb]);

    const tip = model.gameplay
        ? `${model.name}\n\nСКРИПТ-ОБЪЕКТ\n${model.gameplay.description || ''}\n\nID: ${model.id}`
        : `${model.name}\nID: ${model.id}\nКатегория: ${model.category}`;

    return (
        <button
            ref={ref}
            className={`${cl.card} ${active ? cl.cardActive : ''}`}
            onClick={onPick}
            title={tip}
        >
            {model.synthetic === 'spawner-disk' ? (
                <div className={cl.cardIconPlaceholder} style={{
                    background: 'radial-gradient(circle, #2a0a2a 0%, #0f0010 100%)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                    <svg width="80" height="60" viewBox="0 0 80 60">
                        {/* Диск — эллипс с градиентом */}
                        <defs>
                            <radialGradient id={`g_${model.id}`} cx="50%" cy="40%" r="50%">
                                <stop offset="0%" stopColor="#ff66ff" />
                                <stop offset="60%" stopColor="#aa22aa" />
                                <stop offset="100%" stopColor="#440044" />
                            </radialGradient>
                        </defs>
                        <ellipse cx="40" cy="40" rx="32" ry="10" fill={`url(#g_${model.id})`} stroke="#ff99ff" strokeWidth="1.5" />
                        {/* Кольцо сверху */}
                        <ellipse cx="40" cy="32" rx="26" ry="7" fill="none" stroke="#ff66ff" strokeWidth="2.5" opacity="0.95" />
                        {/* Лучик света */}
                        <line x1="40" y1="32" x2="40" y2="6" stroke="#ff99ff" strokeWidth="1" opacity="0.4" strokeDasharray="2,2" />
                    </svg>
                </div>
            ) : thumb && thumb !== 'failed' ? (
                <img src={thumb} alt={model.name} className={cl.cardThumb} />
            ) : (
                <div className={cl.cardIconPlaceholder}>
                    <Icon name={loading ? 'loading' : (CATEGORY_ICONS[model.category] || 'box')} size={28} />
                </div>
            )}
            <div className={cl.cardName}>{model.name}</div>
            <div className={cl.cardCat}>{model.category}</div>
            {model.parts && (
                <div className={cl.cardBadge} title="Сложная модель — добавляется папкой"><Icon name="folder" size={14} /></div>
            )}
            {model.gameplay && (
                <div
                    className={cl.cardBadge}
                    title={model.gameplay.description}
                    style={{
                        background: '#5a8c3e',
                        color: '#fff',
                        right: model.parts ? 28 : 4,
                    }}
                ><Icon name="script" size={13} /> </div>
            )}
        </button>
    );
};

/**
 * Карточка пользовательской модели — рендерится из thumbnail_b64.
 * Если isMine=true — добавляются hover-кнопки Edit / Settings / Delete.
 *
 * Props:
 *   model        — модель из API
 *   active       — выделена ли сейчас (для рамки)
 *   onPick       — клик по карточке для использования модели в сцене
 *   isMine       — этап 6: карточка моя → показываем кнопки управления
 *   onEdit(m)    — открыть редактор для правки voxel-данных
 *   onSettings(m)— открыть модалку для смены имени/описания/публичности
 *   onDelete(m)  — удалить модель
 *   showSocial   — этап 6.3: показывать счётчики лайков/использований
 *                  + кнопку лайка (для раздела «Сообщество»)
 *   onLike(m)    — toggle лайка модели
 */
const UserModelCard = ({
    model, active, onPick, isMine, onEdit, onSettings, onDelete,
    showSocial, onLike,
}) => {
    const kindIcon = model.kind === 'voxel' ? 'square' : 'sphere';
    const tip = `${model.title}\nАвтор: ${model.author_username || '—'}\nИспользований: ${model.uses_count || 0}\nЛайков: ${model.likes_count || 0}\nID: ${model.id}`;
    // Обёртка для action-кнопок — останавливает propagation чтобы клик по
    // кнопке не выбирал модель.
    const stop = (e, fn) => {
        e.stopPropagation();
        e.preventDefault();
        fn();
    };
    return (
        <div className={`${cl.card} ${active ? cl.cardActive : ''} ${cl.userCard}`}
             onClick={onPick}
             title={tip}
             role="button"
             tabIndex={0}>
            {model.thumbnail_b64 ? (
                <img src={model.thumbnail_b64} alt={model.title} className={cl.cardThumb} />
            ) : (
                <div className={cl.cardIconPlaceholder}><Icon name={kindIcon} size={28} /></div>
            )}
            <div className={cl.cardName}>{model.title}</div>
            <div className={cl.cardCat}>
                {model.kind === 'voxel' ? 'Воксельная' : 'Гладкая'}
                {model.author_username ? ` · ${model.author_username}` : ''}
            </div>
            {model.is_public && (
                <div className={cl.cardBadge} title="Опубликована">
                    <Icon name="globe" size={13} />
                </div>
            )}
            {/* Этап 6.3: социальная строка — лайки + использования.
                Показывается в разделе «Сообщество» (showSocial). */}
            {showSocial && (
                <div className={cl.cardSocial}>
                    <button
                        type="button"
                        className={`${cl.cardLikeBtn} ${model.liked_by_me ? cl.cardLikeActive : ''}`}
                        onClick={(e) => stop(e, () => onLike?.(model))}
                        title={model.liked_by_me ? 'Убрать лайк' : 'Поставить лайк'}
                    >
                        <Icon name="heart" size={13} />
                        <span>{model.likes_count || 0}</span>
                    </button>
                    <span className={cl.cardUses} title="Использований в играх">
                        <Icon name="download" size={12} />
                        {model.uses_count || 0}
                    </span>
                </div>
            )}
            {/* Hover-overlay с действиями. Только для своих моделей. */}
            {isMine && (
                <div className={cl.cardActions}>
                    <button
                        type="button"
                        className={cl.cardActionBtn}
                        onClick={(e) => stop(e, () => onEdit?.(model))}
                        title="Редактировать модель (изменить воксели)"
                    >
                        <Icon name="rename" size={14} />
                    </button>
                    <button
                        type="button"
                        className={cl.cardActionBtn}
                        onClick={(e) => stop(e, () => onSettings?.(model))}
                        title="Настройки (название, описание, публикация)"
                    >
                        <Icon name="settings" size={14} />
                    </button>
                    <button
                        type="button"
                        className={`${cl.cardActionBtn} ${cl.cardActionDanger}`}
                        onClick={(e) => stop(e, () => onDelete?.(model))}
                        title="Удалить модель"
                    >
                        <Icon name="trash" size={14} />
                    </button>
                </div>
            )}
        </div>
    );
};

/** Префикс для id пользовательских моделей чтобы отличать от стандартных. */
export const USER_MODEL_PREFIX = 'user:';
const userModelKey = (m) => `${USER_MODEL_PREFIX}${m.id}`;

const ToolboxModal = ({
    open, activeId, onClose, onPick, userId = null,
    // Этап 6: управление своими моделями.
    // Все три callback'а вызываются с объектом модели { id, title, ... }.
    // Родитель должен после успешного действия обновить раздел "Мои" —
    // для этого передаётся отдельный refresh-сигнал.
    onEditUserModel, onUserModelSettings, onDeleteUserModel,
    userModelsRefreshKey = 0,
    // Раздел, на котором открыть модалку: 'standard' | 'mine' | 'community'.
    // По умолчанию 'standard'. Кнопка «Мои модели» передаёт 'mine'.
    initialSection = 'standard',
}) => {
    // Корневой раздел: 'standard' | 'mine' | 'community'
    // === Roblox-style Toolbox (задача 17) ===
    // Верхняя вкладка: 'store' | 'inventory' | 'recent' | 'tips'.
    const [view, setView] = useState('store');
    // Выбранная категория магазина (null = главный экран с 6 плитками):
    //   '3d' | 'fx' | '2d' | 'gameplay' | 'plugins' | 'audio'.
    const [storeCat, setStoreCat] = useState(null);

    const [section, setSection] = useState('standard');
    const [search, setSearch] = useState('');
    const [category, setCategory] = useState('all');     // для 'standard'
    const [userKind, setUserKind] = useState('all');     // для 'mine'/'community': all|voxel|smooth
    const [kitCat, setKitCat] = useState('all');         // для 'gameplay': категория кита

    // Загруженные модели для 'mine' и 'community'
    const [myModels, setMyModels] = useState(null);          // null = ещё не загружено
    const [communityModels, setCommunityModels] = useState(null);
    const [loading, setLoading] = useState(false);
    const [loadError, setLoadError] = useState('');

    useEffect(() => {
        if (open) {
            setSearch('');
            // initialSection маппится в новую структуру: mine → inventory.
            if (initialSection === 'mine') { setView('inventory'); setStoreCat(null); }
            else { setView('store'); setStoreCat(null); }
            setSection(initialSection || 'standard');
            setCategory('all');
            setUserKind('all');
            setKitCat('all');
            setMyModels(null);
            setCommunityModels(null);
            setLoadError('');
        }
    }, [open, initialSection]);

    // Маппинг категории магазина → внутренний section (для lazy-load моделей).
    const STORE_CAT_TO_SECTION = { '3d': 'standard', gameplay: 'gameplay', '2d': 'standard' };
    const openStoreCategory = useCallback((catId) => {
        setStoreCat(catId);
        setSearch('');
        setCategory('all');
        setKitCat('all');
        const sec = STORE_CAT_TO_SECTION[catId];
        if (sec) setSection(sec);
    }, []);

    // Синхронизация верхней вкладки → внутренний section (для lazy-load).
    useEffect(() => {
        if (view === 'inventory') setSection('mine');
        else if (view === 'recent') setSection('community');
    }, [view]);

    // Esc — закрыть (если открыта категория магазина — сначала назад к плиткам)
    useEffect(() => {
        if (!open) return;
        const onKey = (e) => { if (e.key === 'Escape') { if (view === 'store' && storeCat) setStoreCat(null); else onClose(); } };
        window.addEventListener('keydown', onKey);
        return () => window.removeEventListener('keydown', onKey);
    }, [open, onClose, view, storeCat]);

    // Lazy-load моих моделей при переключении на 'mine'
    useEffect(() => {
        if (!open || section !== 'mine' || myModels !== null) return;
        if (!userId) {
            setMyModels([]);
            return;
        }
        setLoading(true);
        setLoadError('');
        getMyUserModels(userId, { limit: 300 })
            .then(res => setMyModels(res.data.models || []))
            .catch(err => {
                console.error('[Toolbox] mine load failed:', err);
                setLoadError('Не удалось загрузить ваши модели');
                setMyModels([]);
            })
            .finally(() => setLoading(false));
    }, [open, section, myModels, userId]);

    // Этап 6: при изменении refreshKey (после edit/settings/delete) — сброс
    // кэша "Мои модели" и "Сообщество". useEffect выше перезагрузит при
    // следующем рендере.
    useEffect(() => {
        if (userModelsRefreshKey > 0) {
            setMyModels(null);
            setCommunityModels(null);
        }
    }, [userModelsRefreshKey]);

    // Lazy-load публичных моделей при переключении на 'community'.
    // userId передаём — чтобы у моделей пришёл флаг liked_by_me (Этап 6.3).
    useEffect(() => {
        if (!open || section !== 'community' || communityModels !== null) return;
        setLoading(true);
        setLoadError('');
        getPublicUserModels({ limit: 120, userId })
            .then(res => setCommunityModels(res.data.models || []))
            .catch(err => {
                console.error('[Toolbox] community load failed:', err);
                setLoadError('Не удалось загрузить публичные модели');
                setCommunityModels([]);
            })
            .finally(() => setLoading(false));
    }, [open, section, communityModels, userId]);

    // === Стандартные модели ===
    const standardFiltered = useMemo(() => {
        const q = search.trim().toLowerCase();
        let arr = MODEL_TYPES.filter(m => !m.hidden);
        if (category !== 'all') {
            arr = arr.filter(m => m.category === category);
        }
        if (q) {
            arr = arr.filter(m =>
                m.name.toLowerCase().includes(q) ||
                m.id.toLowerCase().includes(q) ||
                m.category.toLowerCase().includes(q)
            );
        }
        return arr;
    }, [search, category]);

    const standardCategoriesWithCount = useMemo(() => {
        const counts = {};
        for (const m of MODEL_TYPES) {
            if (m.hidden) continue;
            counts[m.category] = (counts[m.category] || 0) + 1;
        }
        const sorted = MODEL_CATEGORIES.slice().sort();
        return [
            { id: 'all', label: 'Все', count: MODEL_TYPES.length },
            ...sorted.map(c => ({ id: c, label: c, count: counts[c] || 0 })),
        ];
    }, []);

    // === Пользовательские модели (mine/community) — фильтрация по kind + search ===
    const filterUserModels = useCallback((arr) => {
        if (!arr) return [];
        const q = search.trim().toLowerCase();
        let result = arr;
        if (userKind !== 'all') {
            result = result.filter(m => m.kind === userKind);
        }
        if (q) {
            result = result.filter(m =>
                (m.title || '').toLowerCase().includes(q) ||
                (m.author_username || '').toLowerCase().includes(q)
            );
        }
        return result;
    }, [search, userKind]);

    const mineFiltered = useMemo(
        () => filterUserModels(myModels),
        [myModels, filterUserModels]
    );
    const communityFiltered = useMemo(
        () => filterUserModels(communityModels),
        [communityModels, filterUserModels]
    );

    // === Готовые механики (gameplay-киты) — фильтр по категории + search ===
    const kitsFiltered = useMemo(() => {
        const q = search.trim().toLowerCase();
        let arr = GAMEPLAY_KITS;
        if (kitCat !== 'all') arr = arr.filter(k => k.category === kitCat);
        if (q) arr = arr.filter(k =>
            k.name.toLowerCase().includes(q) || k.desc.toLowerCase().includes(q));
        return arr;
    }, [search, kitCat]);

    // Активный счётчик для шапки
    const visibleCount = section === 'standard'
        ? standardFiltered.length
        : section === 'mine'
            ? mineFiltered.length
            : communityFiltered.length;
    const totalForSection = section === 'standard'
        ? MODEL_TYPES.length
        : section === 'mine'
            ? (myModels?.length || 0)
            : (communityModels?.length || 0);

    // 6 категорий магазина (как в Roblox Creator Store).
    const STORE_CATEGORIES = [
        { id: '3d', label: '3D-объекты', icon: 'cube', desc: '700+ моделей: природа, дома, мебель, NPC' },
        { id: 'fx', label: 'Эффекты', icon: 'sparkles', desc: 'Частицы, лучи, маркеры' },
        { id: '2d', label: '2D-картинки', icon: 'image', desc: 'Иконки и текстуры для интерфейса' },
        { id: 'gameplay', label: 'Готовые механики', icon: 'zap', desc: `${GAMEPLAY_KITS.length} механик: вставил — работает` },
        { id: 'plugins', label: 'Плагины', icon: 'puzzle', desc: 'Расширения студии' },
        { id: 'audio', label: 'Аудио', icon: 'sound', desc: 'Звуки и музыка' },
    ];
    // Trending — что популярно (для главного экрана магазина). Берём яркие киты.
    const TRENDING = GAMEPLAY_KITS.filter(k =>
        ['shift-to-run', 'day-night-cycle', 'loot-crate', 'confetti'].includes(k.id));
    // Эффекты-примитивы для категории «Эффекты».
    const FX_ITEMS = [
        { id: 'emitter', name: 'Эмиттер частиц', icon: 'sparkles', desc: 'Источник частиц (огонь/искры/дым)' },
        { id: 'beam', name: 'Луч (beam)', icon: 'zap', desc: 'Бегущий луч между точками' },
        { id: 'pointer', name: 'Указатель-стрелка', icon: 'arrow-up', desc: 'Парящая стрелка-подсказка' },
        { id: 'light', name: 'Источник света', icon: 'sun', desc: 'Точечная лампа' },
        { id: 'checkpoint', name: 'Триггер-зона', icon: 'flag', desc: 'Невидимая зона-триггер' },
    ];

    if (!open) return null;

    // Обработчик выбора пользовательской модели — пока stub.
    // Этап 5 плана подключит реальную постановку (материализация voxel/smooth).
    const handlePickUserModel = (m) => {
        const key = userModelKey(m);
        // Передаём наверх id с префиксом + сам объект модели — родитель
        // кладёт его метаданные в «Недавние модели» (история показывает
        // и пользовательские модели, а не только стандартные).
        onPick(key, m);
        onClose();
    };

    /** Этап 6.3: toggle лайка модели сообщества.
     *  Оптимистично обновляем UI сразу, потом синхронизируем с ответом
     *  сервера (он возвращает точные liked + likes_count). */
    const handleLikeModel = async (m) => {
        if (!userId) {
            // eslint-disable-next-line no-alert
            alert('Войдите, чтобы ставить лайки.');
            return;
        }
        // Оптимистичное обновление списка community.
        setCommunityModels((prev) => {
            if (!prev) return prev;
            return prev.map((x) => {
                if (x.id !== m.id) return x;
                const liked = !x.liked_by_me;
                return {
                    ...x,
                    liked_by_me: liked,
                    likes_count: Math.max(0, (x.likes_count || 0) + (liked ? 1 : -1)),
                };
            });
        });
        try {
            const res = await likeUserModel(m.id, userId);
            // Синхронизируем с точными данными сервера.
            setCommunityModels((prev) => {
                if (!prev) return prev;
                return prev.map((x) => x.id === m.id
                    ? { ...x, liked_by_me: res.data.liked, likes_count: res.data.likes_count }
                    : x);
            });
        } catch (err) {
            console.error('[Toolbox] like failed:', err);
            // Откат оптимистичного обновления при ошибке.
            setCommunityModels((prev) => {
                if (!prev) return prev;
                return prev.map((x) => {
                    if (x.id !== m.id) return x;
                    const liked = !x.liked_by_me;   // вернуть как было
                    return {
                        ...x,
                        liked_by_me: liked,
                        likes_count: Math.max(0, (x.likes_count || 0) + (liked ? 1 : -1)),
                    };
                });
            });
        }
    };

    return (
        <div className={cl.overlay} onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
            <div className={cl.modal}>
                {/* === Шапка с 4 верхними вкладками (как Roblox Creator Store) === */}
                <header className={cl.header}>
                    <h2 className={cl.title} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <Icon name="box" size={20} /> Toolbox
                    </h2>
                    <button className={cl.closeBtn} onClick={onClose} title="Закрыть (Esc)">
                        <Icon name="close" size={14} />
                    </button>
                </header>

                <div className={cl.topTabs}>
                    {[
                        { id: 'store', label: 'Магазин', icon: 'box' },
                        { id: 'inventory', label: 'Инвентарь', icon: 'grid' },
                        { id: 'recent', label: 'Недавние', icon: 'clock' },
                        { id: 'tips', label: 'Советы', icon: 'bulb' },
                    ].map(t => (
                        <button
                            key={t.id}
                            className={`${cl.topTab} ${view === t.id ? cl.topTabActive : ''}`}
                            onClick={() => { setView(t.id); setStoreCat(null); setSearch(''); }}
                            title={t.label}
                        >
                            <Icon name={t.icon} size={18} />
                            <span>{t.label}</span>
                        </button>
                    ))}
                </div>

                {/* Поиск — скрыт только на главном экране магазина и в советах */}
                {!(view === 'store' && !storeCat) && view !== 'tips' && (
                    <div className={cl.searchBar}>
                        <input
                            type="text"
                            className={cl.searchInput}
                            placeholder="Поиск по названию..."
                            value={search}
                            onChange={(e) => setSearch(e.target.value)}
                            autoFocus
                        />
                    </div>
                )}

                {/* Хлебные крошки/назад при открытой категории магазина */}
                {view === 'store' && storeCat && (
                    <div className={cl.breadcrumb}>
                        <button className={cl.backBtn} onClick={() => setStoreCat(null)}>
                            <Icon name="arrow-left" size={14} /> Категории
                        </button>
                        <span className={cl.crumbCurrent}>
                            {(STORE_CATEGORIES.find(c => c.id === storeCat) || {}).label}
                        </span>
                    </div>
                )}

                {/* Подкатегории standard (3D) */}
                {view === 'store' && storeCat === '3d' && (
                    <div className={cl.categoryTabs}>
                        {standardCategoriesWithCount.map(c => (
                            <button
                                key={c.id}
                                className={`${cl.categoryTab} ${category === c.id ? cl.categoryTabActive : ''}`}
                                onClick={() => setCategory(c.id)}
                                title={c.label}
                            >
                                <Icon name={CATEGORY_ICONS[c.id] || (c.id === 'all' ? 'library' : 'box')} size={14} /> {c.label}
                                <span className={cl.categoryCount}>{c.count}</span>
                            </button>
                        ))}
                    </div>
                )}
                {/* Подкатегории механик */}
                {view === 'store' && storeCat === 'gameplay' && (
                    <div className={cl.categoryTabs}>
                        {KIT_CATEGORIES.map(c => (
                            <button
                                key={c.id}
                                className={`${cl.categoryTab} ${kitCat === c.id ? cl.categoryTabActive : ''}`}
                                onClick={() => setKitCat(c.id)}
                            >{c.label}</button>
                        ))}
                    </div>
                )}
                {/* Фильтр kind для инвентаря */}
                {view === 'inventory' && (
                    <div className={cl.categoryTabs}>
                        <button className={`${cl.categoryTab} ${userKind === 'all' ? cl.categoryTabActive : ''}`} onClick={() => setUserKind('all')}><Icon name="library" size={14} /> Все</button>
                        <button className={`${cl.categoryTab} ${userKind === 'voxel' ? cl.categoryTabActive : ''}`} onClick={() => setUserKind('voxel')}><Icon name="square" size={14} /> Воксельные</button>
                        <button className={`${cl.categoryTab} ${userKind === 'smooth' ? cl.categoryTabActive : ''}`} onClick={() => setUserKind('smooth')}><Icon name="sphere" size={14} /> Гладкие</button>
                    </div>
                )}

                {/* ====================== КОНТЕНТ ====================== */}

                {/* --- МАГАЗИН: главный экран (6 плиток + Trending) --- */}
                {view === 'store' && !storeCat && (
                    <div className={cl.storeHome}>
                        <div className={cl.sectionLabel}>Категории</div>
                        <div className={cl.catGrid}>
                            {STORE_CATEGORIES.map(c => (
                                <button key={c.id} className={cl.catTile} onClick={() => openStoreCategory(c.id)}>
                                    <div className={cl.catTileIcon}><Icon name={c.icon} size={26} /></div>
                                    <div className={cl.catTileLabel}>{c.label}</div>
                                    <div className={cl.catTileDesc}>{c.desc}</div>
                                </button>
                            ))}
                        </div>
                        <div className={cl.sectionLabel} style={{ marginTop: 18 }}>
                            <Icon name="trending" size={15} /> Популярное
                        </div>
                        <div className={cl.trendRow}>
                            {TRENDING.map(kit => (
                                <button key={kit.id} className={cl.trendCard}
                                    onClick={() => { onPick('kit:' + kit.id); onClose(); }} title={kit.desc}>
                                    <div className={cl.trendIcon}><Icon name={kit.icon || 'zap'} size={28} /></div>
                                    <div className={cl.trendName}>{kit.name}</div>
                                    <div className={cl.freeBadge}>FREE</div>
                                </button>
                            ))}
                        </div>
                    </div>
                )}

                {/* --- МАГАЗИН: категория 3D-объекты --- */}
                {view === 'store' && storeCat === '3d' && (
                    <div className={cl.grid}>
                        {standardFiltered.length === 0
                            ? <div className={cl.empty}>Ничего не найдено</div>
                            : standardFiltered.map(m => (
                                <ThumbCard key={m.id} model={m} active={activeId === m.id}
                                    onPick={() => { onPick(m.id); onClose(); }} />
                            ))}
                    </div>
                )}

                {/* --- МАГАЗИН: Эффекты --- */}
                {view === 'store' && storeCat === 'fx' && (
                    <div className={cl.grid}>
                        {FX_ITEMS.filter(f => !search.trim() || f.name.toLowerCase().includes(search.trim().toLowerCase())).map(f => (
                            <button key={f.id} type="button" className={cl.card} style={{ textAlign: 'left' }}
                                onClick={() => { onPick('primitive:' + f.id); onClose(); }} title={f.desc}>
                                <div className={cl.cardIconWrap}>
                                    <div className={cl.cardIconPlaceholder} style={{ background: 'linear-gradient(135deg, rgba(255,90,176,0.22), rgba(255,210,58,0.18))' }}>
                                        <Icon name={f.icon} size={30} />
                                    </div>
                                </div>
                                <div className={cl.cardName}>{f.name}</div>
                                <div className={cl.cardCat} style={{ fontSize: 11, opacity: 0.8 }}>{f.desc}</div>
                            </button>
                        ))}
                    </div>
                )}

                {/* --- МАГАЗИН: Готовые механики --- */}
                {view === 'store' && storeCat === 'gameplay' && (
                    <div className={cl.grid}>
                        {kitsFiltered.length === 0
                            ? <div className={cl.empty}>Ничего не найдено</div>
                            : kitsFiltered.map(kit => (
                                <button key={kit.id} type="button" className={cl.card} style={{ textAlign: 'left' }}
                                    onClick={() => { onPick('kit:' + kit.id); onClose(); }} title={kit.desc}>
                                    <div className={cl.cardIconWrap}>
                                        <div className={cl.cardIconPlaceholder} style={{ background: 'linear-gradient(135deg, rgba(77,107,255,0.25), rgba(54,213,122,0.18))' }}>
                                            <Icon name={kit.icon || 'zap'} size={30} />
                                        </div>
                                    </div>
                                    <div className={cl.cardName}>{kit.name}</div>
                                    <div className={cl.cardCat} style={{ fontSize: 11, opacity: 0.8, lineHeight: 1.3, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{kit.desc}</div>
                                    <div className={cl.freeBadge}>FREE</div>
                                </button>
                            ))}
                    </div>
                )}

                {/* --- МАГАЗИН: 2D-картинки / Плагины / Аудио — пока «скоро» --- */}
                {view === 'store' && (storeCat === '2d' || storeCat === 'plugins' || storeCat === 'audio') && (
                    <div className={cl.soon}>
                        <Icon name={storeCat === 'audio' ? 'sound' : storeCat === '2d' ? 'image' : 'puzzle'} size={42} />
                        <div className={cl.soonTitle}>Скоро будет</div>
                        <div className={cl.soonText}>
                            {storeCat === '2d' && 'Иконки и текстуры для интерфейса появятся в следующем обновлении.'}
                            {storeCat === 'plugins' && 'Плагины-расширения студии — в разработке (фаза T4).'}
                            {storeCat === 'audio' && 'Библиотека звуков и музыки — в разработке.'}
                        </div>
                    </div>
                )}

                {/* --- ИНВЕНТАРЬ: мои модели --- */}
                {view === 'inventory' && (
                    <div className={cl.grid}>
                        {loading || myModels === null ? (
                            <div className={cl.empty}>⏳ Загрузка...</div>
                        ) : !userId ? (
                            <div className={cl.empty}>Войдите в аккаунт, чтобы видеть свои модели</div>
                        ) : loadError ? (
                            <div className={cl.empty}>{loadError}</div>
                        ) : mineFiltered.length === 0 ? (
                            <div className={cl.empty}>
                                {myModels.length === 0
                                    ? 'У вас пока нет своих моделей. Создайте их в воксельном редакторе.'
                                    : 'Ничего не найдено по фильтру'}
                            </div>
                        ) : (
                            mineFiltered.map(m => (
                                <UserModelCard key={m.id} model={m} active={activeId === userModelKey(m)}
                                    onPick={() => handlePickUserModel(m)} isMine
                                    onEdit={onEditUserModel} onSettings={onUserModelSettings} onDelete={onDeleteUserModel} />
                            ))
                        )}
                    </div>
                )}

                {/* --- НЕДАВНИЕ: сообщество (популярные модели сообщества) --- */}
                {view === 'recent' && (
                    <div className={cl.grid}>
                        {communityModels === null ? (
                            <div className={cl.empty}>⏳ Загрузка...</div>
                        ) : communityFiltered.length === 0 ? (
                            <div className={cl.empty}>Пока пусто. Используй ассеты — они появятся здесь.</div>
                        ) : (
                            communityFiltered.map(m => (
                                <UserModelCard key={m.id} model={m} active={activeId === userModelKey(m)}
                                    onPick={() => handlePickUserModel(m)}
                                    isMine={userId != null && m.user_id === userId}
                                    onEdit={onEditUserModel} onSettings={onUserModelSettings} onDelete={onDeleteUserModel}
                                    showSocial onLike={handleLikeModel} />
                            ))
                        )}
                    </div>
                )}

                {/* --- СОВЕТЫ --- */}
                {view === 'tips' && (
                    <div className={cl.tips}>
                        <h3>Как пользоваться Toolbox</h3>
                        <ul>
                            <li><b>3D-объекты</b> — 700+ готовых моделей: деревья, дома, мебель, персонажи. Клик → объект появляется на сцене.</li>
                            <li><b>Готовые механики</b> — вставь поведение одним кликом: бег на Shift, смена дня/ночи, сундук с лутом, счётчик монет. Скрипт прикрепляется сам.</li>
                            <li><b>Эффекты</b> — частицы, лучи, источники света, триггер-зоны.</li>
                            <li><b>Инвентарь</b> — твои воксельные модели, созданные в редакторе.</li>
                            <li>Жми на категорию, ищи через поиск, кликни ассет — он добавится в проект.</li>
                        </ul>
                        <p style={{ opacity: 0.7 }}>Собери целую игру, не написав ни строчки кода — просто перетаскивая готовые механики.</p>
                    </div>
                )}
            </div>
        </div>
    );
};

export default ToolboxModal;
