import React, { useState, useRef, useEffect } from 'react';
import cl from './GameSettingsModal.module.css';
import Icon from './Icon';

/**
 * Модалка настроек игры (как Game Settings в Roblox Studio).
 *
 * Поля:
 *   - Название (обязательное, до 100 символов)
 *   - Описание (до 500 символов)
 *   - Иконка (data URL Base64) — превью + кнопка «Снять кадр сцены» + загрузка PNG/JPG
 *   - Жанр (селект)
 *   - Публикация — toggle is_public
 *
 * Props:
 *   open                — открыта ли
 *   initial             — { title, description, genre, thumbnail, is_public }
 *   onClose             — закрыть без сохранения
 *   onSave(data)        — сохранить (data — те же поля что initial)
 *   onCaptureScreenshot — функция возвращающая data URL текущей сцены
 *   mode                — 'edit' | 'create' — текст заголовка/кнопки чуть отличается
 */
const GENRES = [
    { id: 'platformer', name: 'Платформер' },
    { id: 'racing',     name: 'Гонки' },
    { id: 'shooter',    name: 'Шутер' },
    { id: 'sandbox',    name: 'Песочница' },
    { id: 'adventure',  name: 'Приключение' },
    { id: 'puzzle',     name: 'Головоломка' },
    { id: 'tycoon',     name: 'Тайкун' },
    { id: 'rpg',        name: 'РПГ' },
    { id: 'other',      name: 'Другое' },
];

const MAX_TITLE_LEN = 100;
const MAX_DESC_LEN  = 500;
const MAX_THUMBNAIL_BYTES = 500 * 1024;   // 500 КБ — разумный потолок для base64

const GameSettingsModal = ({ open, initial, onClose, onSave, onCaptureScreenshot, mode = 'edit' }) => {
    const [title, setTitle] = useState('');
    const [description, setDescription] = useState('');
    const [genre, setGenre] = useState('other');
    const [thumbnail, setThumbnail] = useState('');
    const [isPublic, setIsPublic] = useState(false);
    const [multiplayer, setMultiplayer] = useState(false);
    const [maxPlayers, setMaxPlayers] = useState(10);
    const [isTest, setIsTest] = useState(false);
    // Задача 12: экран загрузки
    const [loadingLogo, setLoadingLogo] = useState('');
    const [loadingAccent, setLoadingAccent] = useState('#ffc020');
    const [loadingSpinner, setLoadingSpinner] = useState(true);
    const [loadingSkip, setLoadingSkip] = useState(false);
    // Задача 05: стартовый Ken-Burns экран
    const [lsEnabled, setLsEnabled] = useState(true);
    const [lsBackground, setLsBackground] = useState('');
    const [lsCover, setLsCover] = useState('');
    const [lsStyle, setLsStyle] = useState('ken-burns');
    const [lsPlaceName, setLsPlaceName] = useState('');
    const [lsStudioName, setLsStudioName] = useState('');
    const [lsVerified, setLsVerified] = useState(false);
    const [lsDuration, setLsDuration] = useState(2.5);
    const [lsProgressBar, setLsProgressBar] = useState(true);
    const [error, setError] = useState('');
    const fileInputRef = useRef(null);
    const logoInputRef = useRef(null);
    const lsBgInputRef = useRef(null);
    const lsCoverInputRef = useRef(null);

    // Заполняем поля ОДИН РАЗ при открытии модала.
    // Не зависим от `initial` — родитель часто передаёт литерал-объект,
    // и каждый его новый instance сбрасывал бы поля при ре-рендере.
    useEffect(() => {
        if (!open) return;
        setTitle(initial?.title || '');
        setDescription(initial?.description || '');
        setGenre(initial?.genre || 'other');
        setThumbnail(initial?.thumbnail || '');
        setIsPublic(!!initial?.is_public);
        setMultiplayer(!!initial?.multiplayer);
        setIsTest(!!initial?.is_test);
        const ls = initial?.loading_screen || {};
        setLoadingLogo(ls.logo || '');
        setLoadingAccent(ls.accentColor || '#ffc020');
        setLoadingSpinner(ls.defaultSpinner !== false);
        setLoadingSkip(!!ls.defaultSkipButton);
        // Задача 05:
        setLsEnabled(ls.enabled !== false);
        setLsBackground(ls.background || '');
        setLsCover(ls.cover || '');
        setLsStyle(ls.style || 'ken-burns');
        setLsPlaceName(ls.placeName || '');
        setLsStudioName(ls.studioName || '');
        setLsVerified(!!ls.verified);
        setLsDuration(Number.isFinite(ls.duration) && ls.duration > 0 ? ls.duration : 2.5);
        setLsProgressBar(ls.progressBar !== false);
        setMaxPlayers(
            typeof initial?.max_players === 'number'
                ? Math.max(2, Math.min(50, initial.max_players))
                : 10
        );
        setError('');
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [open]);

    if (!open) return null;

    const handleScreenshot = () => {
        if (!onCaptureScreenshot) return;
        const data = onCaptureScreenshot();
        if (data) setThumbnail(data);
    };

    const handleFileSelect = (e) => {
        const file = e.target.files?.[0];
        if (!file) return;
        if (!/^image\/(png|jpeg|webp)$/.test(file.type)) {
            setError('Только PNG, JPG или WEBP');
            return;
        }
        if (file.size > MAX_THUMBNAIL_BYTES) {
            setError('Файл слишком большой (макс. 500 КБ)');
            return;
        }
        const reader = new FileReader();
        reader.onload = (ev) => {
            setThumbnail(ev.target.result);
            setError('');
        };
        reader.readAsDataURL(file);
    };

    const handleLogoSelect = (e) => {
        const file = e.target.files?.[0];
        if (!file) return;
        if (!/^image\/(png|jpeg|webp)$/.test(file.type)) { setError('Логотип: только PNG, JPG или WEBP'); return; }
        if (file.size > MAX_THUMBNAIL_BYTES) { setError('Логотип слишком большой (макс. 500 КБ)'); return; }
        const reader = new FileReader();
        reader.onload = (ev) => { setLoadingLogo(ev.target.result); setError(''); };
        reader.readAsDataURL(file);
    };

    // Задача 05: универсальный загрузчик изображения (фон / cover-карточка).
    const handleLsImage = (e, setter) => {
        const file = e.target.files?.[0];
        if (!file) return;
        if (!/^image\/(png|jpeg|webp)$/.test(file.type)) { setError('Только PNG, JPG или WEBP'); return; }
        if (file.size > MAX_THUMBNAIL_BYTES) { setError('Изображение слишком большое (макс. 500 КБ)'); return; }
        const reader = new FileReader();
        reader.onload = (ev) => { setter(ev.target.result); setError(''); };
        reader.readAsDataURL(file);
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        const trimmedTitle = title.trim();
        if (!trimmedTitle) {
            setError('Название обязательно');
            return;
        }
        if (trimmedTitle.length > MAX_TITLE_LEN) {
            setError(`Название не длиннее ${MAX_TITLE_LEN} символов`);
            return;
        }
        if (description.length > MAX_DESC_LEN) {
            setError(`Описание не длиннее ${MAX_DESC_LEN} символов`);
            return;
        }
        onSave({
            title: trimmedTitle,
            description: description.trim(),
            genre,
            thumbnail,
            is_public: isPublic,
            multiplayer,
            max_players: Math.max(2, Math.min(50, Number(maxPlayers) || 10)),
            is_test: isTest,
            loading_screen: {
                logo: loadingLogo || null,
                accentColor: loadingAccent || '#ffc020',
                defaultSpinner: loadingSpinner,
                defaultSkipButton: loadingSkip,
                // Задача 05:
                enabled: lsEnabled,
                background: lsBackground || null,
                cover: lsCover || null,
                style: lsStyle || 'ken-burns',
                placeName: lsPlaceName.trim(),
                studioName: lsStudioName.trim(),
                verified: lsVerified,
                duration: Math.max(1, Math.min(10, Number(lsDuration) || 2.5)),
                progressBar: lsProgressBar,
            },
        });
    };

    return (
        <div className={cl.overlay} onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
            <div className={cl.modal}>
                <header className={cl.header}>
                    <h2 className={cl.title}>
                        {mode === 'create' ? <><Icon name="sparkles" size={13} /> Новая игра</> : <><Icon name="settings" size={13} /> Настройки игры</>}
                    </h2>
                    <button className={cl.closeBtn} onClick={onClose}><Icon name="close" size={14} /></button>
                </header>

                <form onSubmit={handleSubmit} className={cl.form}>
                    <div className={cl.body}>
                        {/* Иконка */}
                        <div className={cl.iconRow}>
                            <div className={cl.iconPreview}>
                                {thumbnail ? (
                                    <img src={thumbnail} alt="Иконка" />
                                ) : (
                                    <div className={cl.iconPlaceholder}><Icon name="gamepad" size={14} /></div>
                                )}
                            </div>
                            <div className={cl.iconActions}>
                                <div className={cl.fieldLabel}>Иконка</div>
                                <div className={cl.iconButtons}>
                                    {onCaptureScreenshot && (
                                        <button type="button" className={cl.actionBtn} onClick={handleScreenshot}>
                                            <Icon name="camera" size={14} /> Снять кадр
                                        </button>
                                    )}
                                    <button type="button" className={cl.actionBtn} onClick={() => fileInputRef.current?.click()}>
                                        <Icon name="folder" size={14} /> Загрузить
                                    </button>
                                    {thumbnail && (
                                        <button type="button" className={cl.removeBtn} onClick={() => setThumbnail('')}>
                                            <Icon name="close" size={14} />
                                        </button>
                                    )}
                                </div>
                                <input
                                    ref={fileInputRef}
                                    type="file"
                                    accept="image/png,image/jpeg,image/webp"
                                    style={{ display: 'none' }}
                                    onChange={handleFileSelect}
                                />
                                <div className={cl.fieldHint}>PNG/JPG/WEBP, до 500 КБ</div>
                            </div>
                        </div>

                        {/* Название */}
                        <label className={cl.field}>
                            <div className={cl.fieldLabel}>
                                Название <span className={cl.required}>*</span>
                                <span className={cl.counter}>{title.length} / {MAX_TITLE_LEN}</span>
                            </div>
                            <input
                                type="text"
                                className={cl.input}
                                value={title}
                                onChange={(e) => setTitle(e.target.value.slice(0, MAX_TITLE_LEN))}
                                placeholder="Например, Гонки Стива по горам"
                                autoFocus
                            />
                        </label>

                        {/* Описание */}
                        <label className={cl.field}>
                            <div className={cl.fieldLabel}>
                                Описание
                                <span className={cl.counter}>{description.length} / {MAX_DESC_LEN}</span>
                            </div>
                            <textarea
                                className={cl.textarea}
                                value={description}
                                onChange={(e) => setDescription(e.target.value.slice(0, MAX_DESC_LEN))}
                                placeholder="Что это за игра, как в неё играть, чем она интересна..."
                                rows={3}
                            />
                        </label>

                        {/* Жанр */}
                        <label className={cl.field}>
                            <div className={cl.fieldLabel}>Жанр</div>
                            <div className={cl.genreGrid}>
                                {GENRES.map(g => (
                                    <button
                                        key={g.id}
                                        type="button"
                                        className={`${cl.genreBtn} ${genre === g.id ? cl.genreBtnActive : ''}`}
                                        onClick={() => setGenre(g.id)}
                                    >
                                        {g.name}
                                    </button>
                                ))}
                            </div>
                        </label>

                        {/* Публикация + Мультиплеер — в одну строку 2 столбца */}
                        <div className={cl.togglesRow}>
                            <label className={cl.toggleRow}>
                                <input
                                    type="checkbox"
                                    className={cl.toggle}
                                    checked={isPublic}
                                    onChange={(e) => setIsPublic(e.target.checked)}
                                />
                                <div className={cl.toggleText}>
                                    <div className={cl.toggleTitle}>Опубликовать</div>
                                    <div className={cl.toggleHint}>
                                        <Icon name={isPublic ? 'globe' : 'locked'} size={12} />
                                        <span>{isPublic ? 'Видна в ленте' : 'Приватная'}</span>
                                    </div>
                                </div>
                            </label>

                            <label className={cl.toggleRow}>
                                <input
                                    type="checkbox"
                                    className={cl.toggle}
                                    checked={multiplayer}
                                    onChange={(e) => setMultiplayer(e.target.checked)}
                                />
                                <div className={cl.toggleText}>
                                    <div className={cl.toggleTitle}>Мультиплеер</div>
                                    <div className={cl.toggleHint}>
                                        <Icon name="globe" size={12} />
                                        <span>{multiplayer ? 'Игроки видят друг друга' : 'Одиночная игра'}</span>
                                    </div>
                                </div>
                            </label>
                        </div>

                        {/* Тестовая игра — для разработки/проверки в плеере.
                            Не попадает в каталог (лента/поиск/профиль). */}
                        <label className={cl.toggleRow} style={{ marginTop: 8 }}>
                            <input
                                type="checkbox"
                                className={cl.toggle}
                                checked={isTest}
                                onChange={(e) => setIsTest(e.target.checked)}
                            />
                            <div className={cl.toggleText}>
                                <div className={cl.toggleTitle}>Тестовая игра</div>
                                <div className={cl.toggleHint}>
                                    <Icon name={isTest ? 'flask' : 'eye'} size={12} />
                                    <span>{isTest
                                        ? 'Только для тебя: можно тестить в плеере, но НЕ видна в каталоге'
                                        : 'Обычная игра — попадает в каталог при публикации'}</span>
                                </div>
                            </div>
                        </label>

                        {multiplayer && (
                            <label className={cl.field}>
                                <div className={cl.fieldLabel}>
                                    Макс. игроков в комнате
                                    <span className={cl.counter}>{maxPlayers}</span>
                                </div>
                                <input
                                    type="range"
                                    min="2"
                                    max="50"
                                    step="1"
                                    value={maxPlayers}
                                    onChange={(e) => setMaxPlayers(Number(e.target.value))}
                                    style={{
                                        width: '100%',
                                        accentColor: '#3357ff',
                                        cursor: 'pointer',
                                    }}
                                />
                                <div className={cl.fieldHint}>
                                    От 2 до 50. Чем больше — тем выше нагрузка на сервер.
                                </div>
                            </label>
                        )}

                        {/* Экран загрузки (задача 12) */}
                        <div className={cl.field} style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 14, marginTop: 4 }}>
                            <div className={cl.fieldLabel} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                                <Icon name="loader" size={13} /> Экран загрузки
                            </div>
                            <div className={cl.fieldHint} style={{ marginBottom: 10 }}>
                                Логотип и цвет акцента для экранов загрузки между мирами (game.loading).
                            </div>
                            <div style={{ display: 'flex', gap: 14, alignItems: 'center', marginBottom: 12 }}>
                                <div style={{
                                    width: 96, height: 54, borderRadius: 8, background: '#15192a',
                                    border: '1px solid rgba(255,255,255,0.12)', display: 'flex',
                                    alignItems: 'center', justifyContent: 'center', overflow: 'hidden', flex: '0 0 auto',
                                }}>
                                    {loadingLogo
                                        ? <img src={loadingLogo} alt="Логотип" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} />
                                        : <span style={{ color: '#5a6178', fontSize: 11 }}>лого = обложка</span>}
                                </div>
                                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                                    <button type="button" className={cl.actionBtn} onClick={() => logoInputRef.current?.click()}>
                                        <Icon name="folder" size={14} /> Логотип игры
                                    </button>
                                    {loadingLogo && (
                                        <button type="button" className={cl.removeBtn} style={{ alignSelf: 'flex-start' }} onClick={() => setLoadingLogo('')}>
                                            <Icon name="close" size={13} /> Убрать
                                        </button>
                                    )}
                                    <input ref={logoInputRef} type="file" accept="image/png,image/jpeg,image/webp"
                                        style={{ display: 'none' }} onChange={handleLogoSelect} />
                                </div>
                                <label style={{ display: 'flex', flexDirection: 'column', gap: 4, marginLeft: 'auto' }}>
                                    <span style={{ fontSize: 12, color: '#aab' }}>Цвет акцента</span>
                                    <input type="color" value={loadingAccent}
                                        onChange={(e) => setLoadingAccent(e.target.value)}
                                        style={{ width: 48, height: 32, border: 'none', background: 'none', cursor: 'pointer' }} />
                                </label>
                            </div>
                            <div className={cl.togglesRow}>
                                <label className={cl.toggleRow}>
                                    <input type="checkbox" className={cl.toggle}
                                        checked={loadingSpinner} onChange={(e) => setLoadingSpinner(e.target.checked)} />
                                    <div className={cl.toggleText}>
                                        <div className={cl.toggleTitle}>Спиннер</div>
                                        <div className={cl.toggleHint}><span>Показывать «ЗАГРУЗКА» по умолчанию</span></div>
                                    </div>
                                </label>
                                <label className={cl.toggleRow}>
                                    <input type="checkbox" className={cl.toggle}
                                        checked={loadingSkip} onChange={(e) => setLoadingSkip(e.target.checked)} />
                                    <div className={cl.toggleText}>
                                        <div className={cl.toggleTitle}>Кнопка «Пропустить»</div>
                                        <div className={cl.toggleHint}><span>Показывать по умолчанию</span></div>
                                    </div>
                                </label>
                            </div>
                        </div>

                        {/* Стартовый экран — Ken Burns + название места (задача 05) */}
                        <div className={cl.field} style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 14, marginTop: 4 }}>
                            <div className={cl.fieldLabel} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                                <Icon name="loader" size={13} /> Стартовый экран входа (Ken Burns)
                            </div>
                            <div className={cl.fieldHint} style={{ marginBottom: 10 }}>
                                Что видит игрок при входе в игру: размытый фон с медленным движением (Ken Burns), карточка-витрина по центру, название места и автор.
                            </div>
                            <label className={cl.toggleRow} style={{ marginBottom: 10 }}>
                                <input type="checkbox" className={cl.toggle}
                                    checked={lsEnabled} onChange={(e) => setLsEnabled(e.target.checked)} />
                                <div className={cl.toggleText}>
                                    <div className={cl.toggleTitle}>Показывать стартовый экран</div>
                                    <div className={cl.toggleHint}><span>Если выключено — игрок сразу попадает в 3D-сцену</span></div>
                                </div>
                            </label>

                            {lsEnabled && (
                                <>
                                    {/* Фон + карточка */}
                                    <div style={{ display: 'flex', gap: 14, marginBottom: 12, flexWrap: 'wrap' }}>
                                        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                                            <div style={{
                                                width: 130, height: 74, borderRadius: 8, background: '#15192a',
                                                border: '1px solid rgba(255,255,255,0.12)', overflow: 'hidden',
                                                display: 'flex', alignItems: 'center', justifyContent: 'center',
                                                backgroundImage: lsBackground ? `url(${lsBackground})` : 'none',
                                                backgroundSize: 'cover', backgroundPosition: 'center',
                                            }}>
                                                {!lsBackground && <span style={{ color: '#5a6178', fontSize: 11 }}>фон (размытый)</span>}
                                            </div>
                                            <button type="button" className={cl.actionBtn} onClick={() => lsBgInputRef.current?.click()}>
                                                <Icon name="folder" size={14} /> Фон
                                            </button>
                                            {lsBackground && (
                                                <button type="button" className={cl.removeBtn} style={{ alignSelf: 'flex-start' }} onClick={() => setLsBackground('')}>
                                                    <Icon name="close" size={13} /> Убрать
                                                </button>
                                            )}
                                            <input ref={lsBgInputRef} type="file" accept="image/png,image/jpeg,image/webp"
                                                style={{ display: 'none' }} onChange={(e) => handleLsImage(e, setLsBackground)} />
                                        </div>
                                        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                                            <div style={{
                                                width: 74, height: 74, borderRadius: 12, background: '#15192a',
                                                border: '1px solid rgba(255,255,255,0.12)', overflow: 'hidden',
                                                display: 'flex', alignItems: 'center', justifyContent: 'center',
                                                backgroundImage: lsCover ? `url(${lsCover})` : 'none',
                                                backgroundSize: 'cover', backgroundPosition: 'center',
                                            }}>
                                                {!lsCover && <span style={{ color: '#5a6178', fontSize: 10, textAlign: 'center' }}>карточка</span>}
                                            </div>
                                            <button type="button" className={cl.actionBtn} onClick={() => lsCoverInputRef.current?.click()}>
                                                <Icon name="folder" size={14} /> Карточка
                                            </button>
                                            {lsCover && (
                                                <button type="button" className={cl.removeBtn} style={{ alignSelf: 'flex-start' }} onClick={() => setLsCover('')}>
                                                    <Icon name="close" size={13} /> Убрать
                                                </button>
                                            )}
                                            <input ref={lsCoverInputRef} type="file" accept="image/png,image/jpeg,image/webp"
                                                style={{ display: 'none' }} onChange={(e) => handleLsImage(e, setLsCover)} />
                                        </div>
                                        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flex: 1, minWidth: 180 }}>
                                            <input type="text" className={cl.input} placeholder="Название места (по умолчанию = название игры)"
                                                value={lsPlaceName} maxLength={40}
                                                onChange={(e) => setLsPlaceName(e.target.value)} />
                                            <input type="text" className={cl.input} placeholder="Имя автора"
                                                value={lsStudioName} maxLength={40}
                                                onChange={(e) => setLsStudioName(e.target.value)} />
                                            <label className={cl.toggleRow}>
                                                <input type="checkbox" className={cl.toggle}
                                                    checked={lsVerified} onChange={(e) => setLsVerified(e.target.checked)} />
                                                <div className={cl.toggleText}>
                                                    <div className={cl.toggleTitle}>Галочка verified</div>
                                                </div>
                                            </label>
                                        </div>
                                    </div>

                                    {/* Стиль + длительность + прогресс */}
                                    <div style={{ display: 'flex', gap: 14, alignItems: 'flex-end', flexWrap: 'wrap' }}>
                                        <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                                            <span style={{ fontSize: 12, color: '#aab' }}>Стиль анимации</span>
                                            <select className={cl.input} value={lsStyle} onChange={(e) => setLsStyle(e.target.value)}>
                                                <option value="ken-burns">Ken Burns (плавный pan+zoom)</option>
                                                <option value="static">Статичный фон</option>
                                                <option value="parallax">Параллакс (по мыши)</option>
                                                <option value="particles">Частицы (искры)</option>
                                            </select>
                                        </label>
                                        <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                                            <span style={{ fontSize: 12, color: '#aab' }}>Длительность: {Number(lsDuration).toFixed(1)} с</span>
                                            <input type="range" min="1" max="10" step="0.5" value={lsDuration}
                                                onChange={(e) => setLsDuration(Number(e.target.value))}
                                                style={{ width: 160 }} />
                                        </label>
                                        <label className={cl.toggleRow}>
                                            <input type="checkbox" className={cl.toggle}
                                                checked={lsProgressBar} onChange={(e) => setLsProgressBar(e.target.checked)} />
                                            <div className={cl.toggleText}>
                                                <div className={cl.toggleTitle}>Прогресс-бар</div>
                                            </div>
                                        </label>
                                    </div>
                                </>
                            )}
                        </div>

                        {error && <div className={cl.error}><Icon name="warning" size={14} /> {error}</div>}
                    </div>

                    <div className={cl.footer}>
                        <button type="button" className={cl.secondaryBtn} onClick={onClose}>
                            Отмена
                        </button>
                        <button type="submit" className={cl.primaryBtn}>
                            {mode === 'create' ? <><Icon name="sparkles" size={13} /> Создать игру</> : <><Icon name="save" size={13} /> Сохранить</>}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};

export default GameSettingsModal;
