import React from 'react';
import { useNavigate } from 'react-router-dom';
import RublocsLogo from '../components/RublocsLogo/RublocsLogo';
import Icon from '../editor/Icon';

/**
 * Заглушка «только для компьютера» для редактора Рублокса.
 *
 * Используется в KubikonStudio / KubikonEditor / KubikonDocs, когда
 * пользователь зашёл с телефона или планшета: 3D-редактор требует мышь
 * и клавиатуру и не адаптирован под тач.
 *
 * Плеер опубликованных игр (`/play/:id`) поддерживает тач —
 * на него ведёт кнопка «Играть в опубликованные игры».
 */
const KubikonDesktopOnlyStub = ({ feature = 'Редактор Рублокса' }) => {
    const navigate = useNavigate();
    return (
        <div style={{
            minHeight: '100vh',
            background: 'linear-gradient(160deg, #0a0e1a 0%, #1a1f3a 100%)',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            padding: '20px',
            color: '#f1f5fb',
            fontFamily: '"Roboto Condensed", system-ui, sans-serif',
        }}>
            {/* Фиксированный top-bar — кнопка возврата в школу */}
            <div style={{
                width: '100%',
                maxWidth: 460,
                marginBottom: 16,
                display: 'flex',
                justifyContent: 'flex-start',
            }}>
                <button
                    onClick={() => navigate('/')}
                    style={{
                        background: 'rgba(255, 255, 255, 0.08)',
                        color: '#f1f5fb',
                        border: '1px solid rgba(255, 255, 255, 0.18)',
                        borderRadius: 999,
                        padding: '8px 14px',
                        fontSize: 13,
                        fontWeight: 600,
                        cursor: 'pointer',
                        whiteSpace: 'nowrap',
                    }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                        <Icon name="arrow-left" size={14} /> Майнкрафтия
                    </span>
                </button>
            </div>
            <div style={{
                flex: 1,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                width: '100%',
            }}>
            <div style={{
                maxWidth: 460,
                width: '100%',
                background: 'rgba(20, 24, 45, 0.94)',
                border: '1px solid rgba(255, 255, 255, 0.10)',
                borderRadius: 20,
                padding: 32,
                textAlign: 'center',
                boxShadow: '0 20px 60px rgba(0, 0, 0, 0.45)',
            }}>
                <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 18 }}>
                    <RublocsLogo size={64} />
                </div>
                <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 14, color: '#5470ff' }}>
                    <Icon name="monitor" size={60} strokeWidth={1.5} />
                </div>
                <h1 style={{
                    fontSize: 24,
                    fontWeight: 800,
                    margin: '0 0 12px',
                    color: '#f1f5fb',
                }}>
                    Только для компьютера
                </h1>
                <p style={{
                    fontSize: 16,
                    lineHeight: 1.5,
                    color: 'rgba(241, 245, 251, 0.72)',
                    margin: '0 0 22px',
                }}>
                    {feature} требует мышь и клавиатуру. Открой Рублокс с компьютера или ноутбука, чтобы создавать свои 3D-игры.
                </p>
                <div style={{
                    display: 'flex',
                    flexDirection: 'column',
                    gap: 10,
                    marginTop: 18,
                }}>
                    <button
                        onClick={() => navigate('/')}
                        style={{
                            background: 'linear-gradient(135deg, #3357ff 0%, #1e2da5 100%)',
                            color: '#fff',
                            border: 'none',
                            borderRadius: 12,
                            padding: '14px 18px',
                            fontSize: 16,
                            fontWeight: 700,
                            cursor: 'pointer',
                            boxShadow: '0 8px 24px rgba(51, 87, 255, 0.35)',
                        }}>
                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                            <Icon name="gamepad" size={16} /> Играть в опубликованные игры
                        </span>
                    </button>
                    <button
                        onClick={() => navigate('/')}
                        style={{
                            background: 'transparent',
                            color: 'rgba(241, 245, 251, 0.72)',
                            border: '1px solid rgba(255, 255, 255, 0.18)',
                            borderRadius: 12,
                            padding: '12px 18px',
                            fontSize: 15,
                            fontWeight: 600,
                            cursor: 'pointer',
                        }}>
                        На главную школы
                    </button>
                </div>
            </div>
            </div>
        </div>
    );
};

export default KubikonDesktopOnlyStub;