import React, { useState } from 'react';
import cl from './PleeseReg.module.css';
import a1 from './img/1.png';
import MyButton_1 from '../MyButton_1/MyButton_1';

// В dev (localhost / 127.0.0.1) — показываем форму вставки JWT и кнопку
// «Войти как гость» (STANDALONE-режим). В prod — редирект на rublox.pro,
// где работает настоящая регистрация. Регистрация и логин по паролю в
// opensource-студии умышленно НЕ реализованы — это отдельный сервис.

const IS_DEV =
    typeof window !== 'undefined' &&
    (window.location.hostname === 'localhost' ||
        window.location.hostname === '127.0.0.1');

const RUBLOX_HOME =
    (typeof import.meta !== 'undefined' && import.meta.env?.VITE_RUBLOX_HOME) ||
    'https://rublox.pro/app';

const PleeseReg = ({ textDefault, ...props }) => {
    const [showJwtInput, setShowJwtInput] = useState(false);
    const [jwt, setJwt] = useState('');
    const [err, setErr] = useState('');

    const applyJwt = () => {
        const t = jwt.trim();
        if (!t.startsWith('eyJ')) {
            setErr('Это не похоже на JWT (должен начинаться с eyJ)');
            return;
        }
        try {
            localStorage.setItem('Authorization', t);
            localStorage.setItem('player_jwt', t);
            window.location.reload();
        } catch (e) {
            setErr('localStorage недоступен: ' + e.message);
        }
    };

    const enableStandalone = () => {
        // Перезагрузим страницу с ?standalone=1 — AuthContext подхватит.
        const url = new URL(window.location.href);
        url.searchParams.set('standalone', '1');
        window.location.href = url.toString();
    };

    if (IS_DEV) {
        return (
            <div className={cl.Wrap} {...props}>
                <div className={cl.wrapLast}>
                    <img src={a1} alt="" />
                    <div>
                        {!showJwtInput ? (
                            <>
                                <MyButton_1 onClick={enableStandalone}>Войти как гость</MyButton_1>
                                <p>или</p>
                                <MyButton_1 onClick={() => setShowJwtInput(true)}>
                                    Вставить JWT
                                </MyButton_1>
                                <p className={cl.ppropsRegPleese}>
                                    {textDefault}
                                    <br />
                                    <small style={{ opacity: 0.7 }}>
                                        Dev-режим: настоящая регистрация только на{' '}
                                        <a href={RUBLOX_HOME} target="_blank" rel="noreferrer">
                                            rublox.pro
                                        </a>
                                    </small>
                                </p>
                            </>
                        ) : (
                            <>
                                <textarea
                                    value={jwt}
                                    onChange={(e) => {
                                        setJwt(e.target.value);
                                        setErr('');
                                    }}
                                    placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
                                    style={{
                                        width: 360,
                                        height: 90,
                                        fontFamily: 'monospace',
                                        fontSize: 11,
                                        padding: 8,
                                        marginBottom: 12,
                                        wordBreak: 'break-all',
                                    }}
                                />
                                {err && (
                                    <p style={{ color: 'red', fontSize: 13, margin: '0 0 8px' }}>{err}</p>
                                )}
                                <MyButton_1 onClick={applyJwt}>Применить</MyButton_1>
                                <p
                                    style={{ cursor: 'pointer', textDecoration: 'underline', marginTop: 8 }}
                                    onClick={() => setShowJwtInput(false)}
                                >
                                    ← назад
                                </p>
                                <p className={cl.ppropsRegPleese} style={{ fontSize: 12 }}>
                                    Получить JWT: войди на{' '}
                                    <a href={RUBLOX_HOME} target="_blank" rel="noreferrer">
                                        rublox.pro
                                    </a>
                                    , открой DevTools → Application → Local Storage → скопируй ключ{' '}
                                    <code>Authorization</code>
                                </p>
                            </>
                        )}
                    </div>
                </div>
            </div>
        );
    }

    // Prod: единственный путь — настоящий сайт Рублокса.
    return (
        <div className={cl.Wrap} {...props}>
            <div className={cl.wrapLast}>
                <img src={a1} alt="" />
                <div>
                    <a href={`${RUBLOX_HOME}/login`} style={{ textDecoration: 'none' }}>
                        <MyButton_1>Войти</MyButton_1>
                    </a>
                    <p>или</p>
                    <a href={`${RUBLOX_HOME}/registration`} style={{ textDecoration: 'none' }}>
                        <MyButton_1>Зарегистрироваться</MyButton_1>
                    </a>
                    <p className={cl.ppropsRegPleese}>{textDefault}</p>
                </div>
            </div>
        </div>
    );
};

export default PleeseReg;