/**
 * GdShipSkinsPreview — превью 2D-скинов корабля для ship-режима GD (15 моделей).
 * Маршрут: /admin-preview/gd-ship-skins
 * Single-select. Сохраняется в kubikon3d_savegame (project_id=295, namespace='gd_ship_skin').
 * data = { equipped: 'ss_v3' }
 *
 * Карточки — плоские 256x256 canvas с draw() из shipSkinFactories.
 * Это и есть тот самый визуал, что наложится на грань куба в игре.
 */
import React, { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../auth/AuthContext.jsx';
import { jwtDecode } from 'jwt-decode';
import axios from 'axios';
import { STORYS_addres } from '../api/API';

import { SHIP_SKIN_CATALOG, renderShipSkin } from './gdShipSkins/shipSkinFactories';

const CHOICES_PID = 295;
const CHOICES_NS = 'gd_ship_skin';

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;
});

function SkinCard({ skin, isChosen, onPick }) {
    const canvasRef = useRef(null);
    useEffect(() => {
        if (canvasRef.current) renderShipSkin(canvasRef.current, skin.id);
    }, [skin]);
    return (
        <div
            onClick={onPick}
            style={{
                ...cardStyle,
                border: isChosen ? '3px solid #44ccff' : '2px solid #2a3146',
                boxShadow: isChosen ? '0 0 18px rgba(68,204,255,0.5)' : 'none',
                cursor: 'pointer',
            }}
        >
            <canvas
                ref={canvasRef}
                width={256}
                height={256}
                style={{ width: '100%', height: 'auto', display: 'block', imageRendering: 'pixelated' }}
            />
            <div style={{ padding: '8px 12px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                    <div style={{ fontSize: 13, fontWeight: 700, color: '#fff' }}>{skin.title}</div>
                    <div style={{ fontSize: 11, color: '#888' }}><code>{skin.id}</code></div>
                </div>
                {isChosen && <span style={{ color: '#44ccff', fontSize: 22 }}>✓</span>}
            </div>
        </div>
    );
}

export default function GdShipSkinsPreview() {
    const { userRole, isLoading } = useAuth();
    const navigate = useNavigate();
    const [equipped, setEquipped] = useState(null);
    const [status, setStatus] = useState('idle');

    useEffect(() => {
        const uid = getUserId();
        if (!uid) return;
        api.get(`/kubikon3d/savegame/${CHOICES_PID}/${uid}/${CHOICES_NS}`)
            .then((r) => setEquipped(r.data?.data?.equipped || null))
            .catch(() => {});
    }, []);

    const save = async () => {
        const uid = getUserId();
        if (!uid || !equipped) { setStatus('error'); return; }
        setStatus('loading');
        try {
            await api.post(`/kubikon3d/savegame/${CHOICES_PID}/${uid}/${CHOICES_NS}`, { data: { equipped } });
            setStatus('saved');
        } catch (e) { console.warn('[GdShipSkinsPreview] save failed', e); setStatus('error'); }
    };

    if (isLoading) return <div style={{ padding: 24, color: '#fff' }}>Загрузка...</div>;
    if (userRole !== 'admin') {
        return (
            <div style={{ padding: 24, color: '#fff', background: '#070a14', minHeight: '100vh' }}>
                <h2>Доступ только для администратора</h2>
                <button onClick={() => navigate('/')} style={btnStyle}>На главную</button>
            </div>
        );
    }

    return (
        <div style={{ minHeight: '100vh', background: '#070a14', color: '#fff', padding: '20px 24px' }}>
            <div style={{
                position: 'sticky', top: 0, background: '#070a14', zIndex: 10,
                padding: '12px 0', marginBottom: 16, borderBottom: '1px solid #2a3146',
                display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
            }}>
                <button onClick={() => navigate('/')} style={btnStyle}>← Назад</button>
                <h1 style={{ margin: 0, fontSize: 22, color: '#44ccff' }}>GD — Скины-обложки корабля ({SHIP_SKIN_CATALOG.length})</h1>
                <div style={{ flex: 1, fontSize: 14, color: '#888' }}>
                    {equipped ? <>Выбрано: <span style={{ color: '#44ccff', fontWeight: 700 }}>{equipped}</span></> : 'Не выбрано'}
                </div>
                <button onClick={save} disabled={status === 'loading' || !equipped} style={{
                    ...btnPrimary, opacity: status === 'loading' || !equipped ? 0.5 : 1,
                }}>
                    {status === 'loading' ? '⏳ Сохраняю...' : status === 'saved' ? '✓ Сохранено' : '💾 Сохранить выбор'}
                </button>
                {status === 'error' && <span style={{ color: '#ff5566' }}>Ошибка</span>}
            </div>
            <div style={{ marginBottom: 20, color: '#aab', fontSize: 14, lineHeight: 1.5 }}>
                Выбранная текстура накладывается на грани куба в ship-режиме (после прохода через ship-портал).
                Сам куб остаётся кубом, но визуально выглядит как корабль/НЛО/шар.
            </div>
            <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
                gap: 16,
            }}>
                {SHIP_SKIN_CATALOG.map(skin => (
                    <SkinCard
                        key={skin.id}
                        skin={skin}
                        isChosen={equipped === skin.id}
                        onPick={() => { setEquipped(skin.id); setStatus('idle'); }}
                    />
                ))}
            </div>
        </div>
    );
}

const cardStyle = { background: '#0e1525', borderRadius: 10, overflow: 'hidden', transition: 'all 0.15s' };
const btnStyle = { padding: '10px 18px', background: '#2a3146', color: '#cdd4e0', border: 'none', borderRadius: 8, cursor: 'pointer', fontWeight: 600, fontSize: 14 };
const btnPrimary = { padding: '10px 24px', background: 'linear-gradient(135deg, #44ccff, #2266ff)', color: '#000', border: 'none', borderRadius: 8, cursor: 'pointer', fontWeight: 700, fontSize: 15 };
