/**
 * GdPlayWrapper — обёртка над KubikonPlayer для GD-уровней.
 *
 * Если URL = /play/<id> где id ∈ [296..305] И нет ?play=1 →
 * показывает intro-экран уровня (название, best, монеты, кнопки).
 * Иначе → рендерит обычный KubikonPlayer.
 *
 * Цель: не запускать движок до нажатия «Играть».
 */
import React, { useEffect, useState } from 'react';
import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
import { jwtDecode } from 'jwt-decode';
import axios from 'axios';
import { STORYS_addres } from '../api/API';
// 2026-05-25: KubikonPlayer теперь живёт в отдельном фронте плеера
// (player.rublox.pro, см. PLAN.md «1 - Неделя 4/1 - Web-плеер на rublox.pro»).
// Майнкрафтия только редиректит на него через play-ticket.
// Старый KubikonPlayer.jsx НЕ удалён, импорт сохранён в комментарии
// как точка возврата на случай если новый плеер сломается у юзеров:
//   import KubikonPlayer from '../KubikonPlayer/KubikonPlayer';
import KubikonPlayerRedirect from './KubikonPlayerRedirect';
import { availableStars } from './gdStars';

const GD_LEVELS = {
    // Эпоха I — Лес
    296: { num: 1,  name: 'Первый шаг',     duration: 90,  boss: false },
    297: { num: 2,  name: 'Через пропасть', duration: 95,  boss: false },
    298: { num: 3,  name: 'Пружина',        duration: 100, boss: false },
    299: { num: 4,  name: 'Быстрее ветра',  duration: 100, boss: false },
    300: { num: 5,  name: 'Лестница',       duration: 110, boss: false },
    301: { num: 6,  name: 'Танец',          duration: 110, boss: false },
    302: { num: 7,  name: 'Парящий',        duration: 115, boss: false },
    303: { num: 8,  name: 'Ритм-секция',    duration: 115, boss: false },
    304: { num: 9,  name: 'Гонка',          duration: 120, boss: false },
    305: { num: 10, name: 'Стражник леса',  duration: 240, boss: true  },
    // Эпоха II — Горы
    306: { num: 11, name: 'Каменная тропа',     duration: 120, boss: false },
    350: { num: 12, name: 'Пружинистые скалы',  duration: 120, boss: false },
    351: { num: 13, name: 'Ступени в горах',    duration: 120, boss: false },
    352: { num: 14, name: 'Парящие платформы',  duration: 120, boss: false },
    353: { num: 15, name: 'Ледяная шахта',      duration: 120, boss: false },
    354: { num: 16, name: 'Двойная шахта',      duration: 140, boss: false },
    355: { num: 17, name: 'Лабиринт пещер',     duration: 160, boss: false },
    356: { num: 18, name: 'Извилистая шахта',   duration: 150, boss: false },
    357: { num: 19, name: 'Снежный марафон',    duration: 140, boss: false },
    358: { num: 20, name: 'Король горы',        duration: 240, boss: true  },
};

// Соответствие id → русское название (для intro-экрана)
const SKIN_NAMES_RU = {
    cube_default: 'Обычный',
    cube_smile:   'Улыбка',
    cube_sad:     'Грусть',
    cube_cool:    'Очки',
    cube_skull:   'Череп',
    cube_star:    'Звезда',
    cube_flame:   'Пламя',
    cube_ice:     'Лёд',
    cube_pizza:   'Пицца',
    cube_cat:     'Кот',
};

function getUserId() {
    try {
        const t = localStorage.getItem('Authorization');
        if (!t) return 0;
        return Number(jwtDecode(t).id) || 0;
    } catch (e) { return 0; }
}

const api = axios.create({ baseURL: STORYS_addres, timeout: 15000 });
api.interceptors.request.use((cfg) => {
    try {
        const token = localStorage.getItem('Authorization');
        if (token) cfg.headers.Authorization = token;
    } catch (e) {}
    return cfg;
});

// pid=295 — это «карточка-лаунчер» GD (опубликованный проект в ленте).
// Клик «Играть» на нём не должен запускать sandbox-карту 295 как плеер,
// а должен открыть меню эпох GD.
const GD_LAUNCHER_PID = 295;

export default function GdPlayWrapper() {
    const { id } = useParams();
    const [searchParams] = useSearchParams();
    const navigate = useNavigate();
    const pid = Number(id);

    // Лаунчер → в меню GD.
    useEffect(() => {
        if (pid === GD_LAUNCHER_PID) navigate('/gd', { replace: true });
    }, [pid, navigate]);
    if (pid === GD_LAUNCHER_PID) return null;

    const level = GD_LEVELS[pid];

    // Не-GD-проект ИЛИ ?play=1 → сразу плеер (теперь это редирект на
    // player.rublox.pro, который обменивает ticket на JWT и грузит ту
    // же сцену 1-в-1, включая GD-уровни — engine один и тот же).
    if (!level || searchParams.get('play') === '1') {
        return <KubikonPlayerRedirect />;
    }
    return <GdIntro pid={pid} level={level} navigate={navigate} />;
}

function GdIntro({ pid, level, navigate }) {
    const [progress, setProgress] = useState(null);

    useEffect(() => {
        const uid = getUserId();
        if (!uid) { setProgress({}); return; }
        // Читаем из ВСЕХ 10, чтобы корректно посчитать звёзды для intro
        const allIds = Object.keys(GD_LEVELS).map(Number);
        Promise.allSettled(allIds.map((p) =>
            api.get(`/kubikon3d/savegame/${p}/${uid}/gd_progress`)
                .then((r) => r.data?.data || {})
                .catch(() => ({}))
        )).then((results) => {
            const merged = {};
            for (const r of results) {
                if (r.status === 'fulfilled' && r.value) Object.assign(merged, r.value);
            }
            setProgress(merged);
        });
    }, [pid]);

    if (!progress) {
        return (
            <div style={bgWrap}>
                <div style={{ color: '#fff', fontSize: 22 }}>Загрузка...</div>
            </div>
        );
    }

    const passed = !!progress[`level_${level.num}_passed`];
    const bestMs = Number(progress[`level_${level.num}_best_ms`]) || 0;
    const coins = [1, 2, 3].filter((i) => progress[`level_${level.num}_coin_${i}`]).length;
    const totalStars = availableStars(progress);
    const equippedSkin = progress.equipped_skin || 'cube_default';
    const equippedColor = progress.equipped_color || '#66ff66';

    return (
        <div style={bgWrap}>
            <div style={card}>
                <div style={{ fontSize: 18, color: '#888', marginBottom: 8, letterSpacing: 1 }}>
                    🌲 ЭПОХА I — ЛЕС
                </div>
                <div style={{ fontSize: 24, color: level.boss ? '#ffaa44' : '#cdd4e0', fontWeight: 700, marginBottom: 6 }}>
                    {level.boss ? '👹 БОСС' : `Уровень ${level.num}`}
                </div>
                <h1 style={{ margin: '0 0 28px 0', fontSize: 52, color: '#22ff66', fontWeight: 800, textShadow: '0 0 14px rgba(34,255,102,0.4)' }}>
                    {level.name}
                </h1>

                <div style={{ display: 'flex', justifyContent: 'center', gap: 32, marginBottom: 30, flexWrap: 'wrap' }}>
                    <Stat label="Длительность" value={`${level.duration} с`} color="#cdd4e0" />
                    <Stat label="Лучшее время" value={bestMs > 0 ? `${(bestMs / 1000).toFixed(2)} с` : '—'} color="#ffe44a" />
                    <Stat label="Монеты" value={`${coins} / 3`} color="#ffd700" />
                    <Stat label="Статус" value={passed ? '✓ Пройден' : 'Не пройден'} color={passed ? '#22ff66' : '#888'} />
                </div>

                <div style={{ marginBottom: 30, padding: '16px 22px', background: '#0a1428', borderRadius: 10, display: 'inline-block' }}>
                    <span style={{ color: '#888', fontSize: 18 }}>Скин: </span>
                    <span style={{ color: equippedColor, fontSize: 20, fontWeight: 700 }}>{SKIN_NAMES_RU[equippedSkin] || 'Обычный'}</span>
                    <span style={{ color: '#888', fontSize: 18, marginLeft: 22 }}>Звёзды: </span>
                    <span style={{ color: '#ffe44a', fontSize: 20, fontWeight: 700 }}>⭐ {totalStars}</span>
                </div>

                <div style={{ display: 'flex', justifyContent: 'center', gap: 14, flexWrap: 'wrap' }}>
                    <button onClick={() => navigate(`/play/${pid}?play=1`)} style={btnPlay}>
                        ▶  ИГРАТЬ
                    </button>
                    <button onClick={() => navigate('/gd')} style={btnSecondary}>
                        ← В меню
                    </button>
                    <button onClick={() => navigate('/gd/shop')} style={btnSecondary}>
                        🛒 Магазин
                    </button>
                </div>

                {level.boss && (
                    <div style={{ marginTop: 24, padding: 14, background: '#3a1a20', borderRadius: 8, fontSize: 17, color: '#ffaa44' }}>
                        ⚔ Это босс-уровень. Пройди его чтобы открыть Эпоху II.
                    </div>
                )}
            </div>
        </div>
    );
}

function Stat({ label, value, color }) {
    return (
        <div style={{ textAlign: 'center' }}>
            <div style={{ fontSize: 15, color: '#888', textTransform: 'uppercase', letterSpacing: 1, marginBottom: 6 }}>{label}</div>
            <div style={{ fontSize: 26, color, fontWeight: 700 }}>{value}</div>
        </div>
    );
}

const bgWrap = {
    position: 'fixed', inset: 0,
    background: 'linear-gradient(180deg, #0a1428 0%, #1a2a4a 100%)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    padding: 24, fontFamily: 'system-ui, -apple-system, sans-serif',
    zIndex: 100,
};
const card = {
    background: '#070a14',
    border: '3px solid #22ff66',
    borderRadius: 16,
    padding: '40px 48px',
    textAlign: 'center',
    color: '#fff',
    maxWidth: 720, width: '100%',
    boxShadow: '0 0 40px rgba(34,255,102,0.2)',
};
const btnPlay = {
    padding: '14px 36px', fontSize: 20, fontWeight: 800,
    background: 'linear-gradient(135deg, #22ff66, #44aaff)',
    color: '#000', border: 'none', borderRadius: 10, cursor: 'pointer',
    boxShadow: '0 4px 12px rgba(34,255,102,0.3)',
};
const btnSecondary = {
    padding: '14px 24px', fontSize: 16, fontWeight: 600,
    background: '#2a3146', color: '#cdd4e0',
    border: 'none', borderRadius: 10, cursor: 'pointer',
};
