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

/**
 * GameDecorModal — «оформление» игры: Графика и эффекты, Стартовый экран
 * (Ken Burns), Экран загрузки. Вынесено из настроек во вкладку «Игра»
 * (TopRibbon) тремя отдельными кнопками. Открывается с нужной секцией через
 * проп `section` ('graphics' | 'startscreen' | 'loadingscreen'), вверху —
 * табы для переключения между ними.
 *
 * Props:
 *   open       — открыто ли
 *   section    — какую секцию показать первой
 *   initial    — { loading_screen:{...}, graphics:{...} } (из scene/проекта)
 *   onClose    — закрыть без сохранения
 *   onSave(data) — data = { loading_screen, graphics } (как в GameSettingsModal)
 */
const MAX_IMG_BYTES = 500 * 1024;

const TABS = [
    { id: 'graphics',     title: 'Графика',          icon: 'sparkles' },
    { id: 'startscreen',  title: 'Стартовый экран',  icon: 'loader' },
    { id: 'loadingscreen', title: 'Экран загрузки',  icon: 'loader' },
];

const GameDecorModal = ({ open, section = 'graphics', initial, onClose, onSave }) => {
    const [tab, setTab] = useState(section);

    // Экран загрузки
    const [loadingLogo, setLoadingLogo] = useState('');
    const [loadingAccent, setLoadingAccent] = useState('#ffc020');
    const [loadingSpinner, setLoadingSpinner] = useState(true);
    const [loadingSkip, setLoadingSkip] = useState(false);
    // Стартовый 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 [gfxPreset, setGfxPreset] = useState('off');
    const [gfxBloom, setGfxBloom] = useState(false);
    const [gfxFxaa, setGfxFxaa] = useState(false);
    const [gfxVignette, setGfxVignette] = useState(false);
    const [gfxSsao, setGfxSsao] = useState(false);
    const [gfxSaturation, setGfxSaturation] = useState(1.0);
    const [gfxContrast, setGfxContrast] = useState(1.0);
    const [error, setError] = useState('');

    const logoInputRef = useRef(null);
    const lsBgInputRef = useRef(null);
    const lsCoverInputRef = useRef(null);

    useEffect(() => {
        if (!open) return;
        setTab(section || 'graphics');
        const ls = initial?.loading_screen || {};
        setLoadingLogo(ls.logo || '');
        setLoadingAccent(ls.accentColor || '#ffc020');
        setLoadingSpinner(ls.defaultSpinner !== false);
        setLoadingSkip(!!ls.defaultSkipButton);
        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);
        const gx = initial?.graphics || {};
        setGfxPreset(gx.preset || 'off');
        setGfxBloom(!!(gx.bloom && gx.bloom.enabled));
        setGfxFxaa(!!gx.fxaa);
        setGfxVignette(!!(gx.vignette && gx.vignette.enabled));
        setGfxSsao(!!gx.ssao);
        setGfxSaturation((gx.grading && Number.isFinite(gx.grading.saturation)) ? gx.grading.saturation : 1.0);
        setGfxContrast((gx.grading && Number.isFinite(gx.grading.contrast)) ? gx.grading.contrast : 1.0);
        setError('');
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [open, section]);

    if (!open) return null;

    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_IMG_BYTES) { setError('Логотип слишком большой (макс. 500 КБ)'); return; }
        const reader = new FileReader();
        reader.onload = (ev) => { setLoadingLogo(ev.target.result); setError(''); };
        reader.readAsDataURL(file);
    };
    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_IMG_BYTES) { setError('Изображение слишком большое (макс. 500 КБ)'); return; }
        const reader = new FileReader();
        reader.onload = (ev) => { setter(ev.target.result); setError(''); };
        reader.readAsDataURL(file);
    };

    const applyPresetToToggles = (preset) => {
        setGfxPreset(preset);
        const P = {
            off:       { b: false, f: false, v: false, s: false, sat: 1.0, con: 1.0 },
            low:       { b: true,  f: true,  v: false, s: false, sat: 1.0, con: 1.0 },
            medium:    { b: true,  f: true,  v: true,  s: false, sat: 1.1, con: 1.05 },
            high:      { b: true,  f: true,  v: true,  s: true,  sat: 1.2, con: 1.1 },
            ultra:     { b: true,  f: true,  v: true,  s: true,  sat: 1.25, con: 1.12 },
            cinematic: { b: true,  f: true,  v: true,  s: true,  sat: 1.05, con: 1.18 },
            vivid:     { b: true,  f: true,  v: false, s: false, sat: 1.5, con: 1.1 },
            night:     { b: true,  f: true,  v: true,  s: true,  sat: 0.85, con: 1.2 },
            retro:     { b: false, f: false, v: true,  s: false, sat: 0.7, con: 1.3 },
            soft:      { b: true,  f: true,  v: true,  s: false, sat: 1.05, con: 0.95 },
        }[preset];
        if (!P) return;
        setGfxBloom(P.b); setGfxFxaa(P.f); setGfxVignette(P.v);
        setGfxSsao(P.s); setGfxSaturation(P.sat); setGfxContrast(P.con);
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        onSave({
            loading_screen: {
                logo: loadingLogo || null,
                accentColor: loadingAccent || '#ffc020',
                defaultSpinner: loadingSpinner,
                defaultSkipButton: loadingSkip,
                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,
            },
            graphics: {
                preset: gfxPreset,
                bloom: { enabled: gfxBloom },
                fxaa: gfxFxaa,
                vignette: { enabled: gfxVignette },
                ssao: gfxSsao,
                grading: {
                    enabled: (gfxSaturation !== 1.0 || gfxContrast !== 1.0),
                    saturation: Number(gfxSaturation) || 1.0,
                    contrast: Number(gfxContrast) || 1.0,
                },
            },
        });
    };

    return (
        <div className={cl.overlay} onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
            <div className={cl.modal}>
                <div className={cl.header}>
                    <div className={cl.title}><Icon name="sparkles" size={16} /> Оформление игры</div>
                    <button className={cl.closeBtn} onClick={onClose}><Icon name="close" size={14} /></button>
                </div>

                {/* Табы разделов */}
                <div style={{ display: 'flex', gap: 6, padding: '0 18px', marginTop: 6, flexWrap: 'wrap' }}>
                    {TABS.map((t) => (
                        <button
                            key={t.id}
                            type="button"
                            onClick={() => setTab(t.id)}
                            style={{
                                display: 'flex', alignItems: 'center', gap: 6,
                                padding: '8px 14px', borderRadius: 8, cursor: 'pointer',
                                border: '1px solid ' + (tab === t.id ? 'rgba(120,150,255,0.6)' : 'rgba(255,255,255,0.10)'),
                                background: tab === t.id ? 'rgba(90,120,255,0.18)' : 'transparent',
                                color: tab === t.id ? '#dfe6ff' : '#aab', fontSize: 13, fontWeight: 600,
                            }}
                        >
                            <Icon name={t.icon} size={13} /> {t.title}
                        </button>
                    ))}
                </div>

                <form onSubmit={handleSubmit}>
                    <div className={cl.body}>

                        {/* === ГРАФИКА === */}
                        {tab === 'graphics' && (
                            <div className={cl.field}>
                                <div className={cl.fieldHint} style={{ marginBottom: 10 }}>
                                    Свечение, цветокоррекция, тени и сглаживание (как шейдеры).
                                    По умолчанию выключено. На слабых устройствах тяжёлые эффекты
                                    урезаются автоматически. Также управляется из скриптов (game.graphics).
                                </div>
                                <label style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 12 }}>
                                    <span style={{ fontSize: 12, color: '#aab' }}>Пресет</span>
                                    <select className={cl.select} value={gfxPreset}
                                        onChange={(e) => applyPresetToToggles(e.target.value)}>
                                        <option value="off">Выключено</option>
                                        <option value="low">Низкое (свечение)</option>
                                        <option value="medium">Среднее</option>
                                        <option value="high">Высокое</option>
                                        <option value="ultra">Ультра (с глубиной резкости)</option>
                                        <option value="cinematic">🎬 Кино</option>
                                        <option value="vivid">🌈 Сочное</option>
                                        <option value="night">🌙 Ночь</option>
                                        <option value="retro">📺 Ретро</option>
                                        <option value="soft">☁️ Мягкое</option>
                                    </select>
                                </label>
                                <div className={cl.togglesRow}>
                                    <label className={cl.toggleRow}>
                                        <input type="checkbox" className={cl.toggle}
                                            checked={gfxBloom} onChange={(e) => { setGfxBloom(e.target.checked); setGfxPreset('custom'); }} />
                                        <div className={cl.toggleText}>
                                            <div className={cl.toggleTitle}>Свечение (Bloom)</div>
                                            <div className={cl.toggleHint}><span>Яркие объекты светятся</span></div>
                                        </div>
                                    </label>
                                    <label className={cl.toggleRow}>
                                        <input type="checkbox" className={cl.toggle}
                                            checked={gfxFxaa} onChange={(e) => { setGfxFxaa(e.target.checked); setGfxPreset('custom'); }} />
                                        <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={gfxVignette} onChange={(e) => { setGfxVignette(e.target.checked); setGfxPreset('custom'); }} />
                                        <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={gfxSsao} onChange={(e) => { setGfxSsao(e.target.checked); setGfxPreset('custom'); }} />
                                        <div className={cl.toggleText}>
                                            <div className={cl.toggleTitle}>Контактные тени (SSAO)</div>
                                            <div className={cl.toggleHint}><span>Затемнение в углах и стыках</span></div>
                                        </div>
                                    </label>
                                </div>
                                <div style={{ display: 'flex', gap: 16, marginTop: 12, flexWrap: 'wrap' }}>
                                    <label style={{ display: 'flex', flexDirection: 'column', gap: 4, flex: 1, minWidth: 160 }}>
                                        <span style={{ fontSize: 12, color: '#aab' }}>Насыщенность: {gfxSaturation.toFixed(2)}</span>
                                        <input type="range" min="0.5" max="2" step="0.05" value={gfxSaturation}
                                            onChange={(e) => { setGfxSaturation(Number(e.target.value)); setGfxPreset('custom'); }} />
                                    </label>
                                    <label style={{ display: 'flex', flexDirection: 'column', gap: 4, flex: 1, minWidth: 160 }}>
                                        <span style={{ fontSize: 12, color: '#aab' }}>Контраст: {gfxContrast.toFixed(2)}</span>
                                        <input type="range" min="0.5" max="1.6" step="0.05" value={gfxContrast}
                                            onChange={(e) => { setGfxContrast(Number(e.target.value)); setGfxPreset('custom'); }} />
                                    </label>
                                </div>
                            </div>
                        )}

                        {/* === СТАРТОВЫЙ ЭКРАН (Ken Burns) === */}
                        {tab === 'startscreen' && (
                            <div className={cl.field}>
                                <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>
                        )}

                        {/* === ЭКРАН ЗАГРУЗКИ === */}
                        {tab === 'loadingscreen' && (
                            <div className={cl.field}>
                                <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>
                        )}

                        {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}>
                            <Icon name="save" size={13} /> Сохранить
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};

export default GameDecorModal;