import { useEffect, useMemo, useState } from 'react';
import { useReveal, Icons, MoonMark, getBootstrap } from './atoms.jsx';

const FIELD_HINTS = {
    username: 'Используй латиницу и цифры. Регистр символов при входе не имеет значения.',
    invite_code: 'Регистрация доступна только по действующему инвайт-коду.',
};

function firstError(errors, field) {
    if (!errors || !errors[field]) return null;
    const value = errors[field];
    return Array.isArray(value) ? value[0] : value;
}

export default function Join() {
    const ref = useReveal();
    const bootstrap = getBootstrap();
    const flash = bootstrap.flash || {};
    const old = flash.old || {};
    const initialErrors = flash.errors || {};

    const [form, setForm] = useState({
        username: old.username || '',
        email: old.email || '',
        invite_code: old.invite_code || '',
        password: '',
        password_confirmation: '',
        terms: false,
    });
    const [touched, setTouched] = useState(() => {
        const t = {};
        Object.keys(initialErrors).forEach((k) => { t[k] = true; });
        return t;
    });
    const [serverErrors, setServerErrors] = useState(initialErrors);
    const [serverMessage, setServerMessage] = useState(flash.error || null);
    const [submitted, setSubmitted] = useState(Boolean(flash.success));
    const [successUsername, setSuccessUsername] = useState(
        flash.success_username || old.username || ''
    );
    const [submitting, setSubmitting] = useState(false);

    useEffect(() => {
        if (!submitted) return;
        const target = document.getElementById('join');
        if (target && (flash.success || flash.error || Object.keys(initialErrors).length)) {
            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    }, [submitted]);

    const set = (k) => (e) => {
        const v = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
        setForm((f) => ({ ...f, [k]: v }));
        if (serverErrors[k]) {
            setServerErrors((errs) => {
                const next = { ...errs };
                delete next[k];
                return next;
            });
        }
    };
    const blur = (k) => () => setTouched((t) => ({ ...t, [k]: true }));

    const clientErrors = useMemo(() => {
        const e = {};
        if (form.username && !/^[a-zA-Z0-9]{3,32}$/.test(form.username)) {
            e.username = 'Только латиница и цифры, 3–32 символа.';
        }
        if (form.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) {
            e.email = 'Похоже на некорректный email.';
        }
        if (form.invite_code && !/^[A-Za-z0-9-]{6,32}$/.test(form.invite_code)) {
            e.invite_code = 'Код из букв, цифр и тире, 6–32 символа.';
        }
        if (form.password && form.password.length < 8) {
            e.password = 'Минимум 8 символов.';
        } else if (form.password && !/[A-Za-z]/.test(form.password)) {
            e.password = 'Должна быть хотя бы одна буква.';
        } else if (form.password && !/\d/.test(form.password)) {
            e.password = 'Должна быть хотя бы одна цифра.';
        }
        if (form.password_confirmation && form.password_confirmation !== form.password) {
            e.password_confirmation = 'Пароли не совпадают.';
        }
        return e;
    }, [form]);

    const errorFor = (field) =>
        firstError(serverErrors, field) || (touched[field] && clientErrors[field]) || null;

    const valid =
        form.username &&
        form.email &&
        form.invite_code &&
        form.password &&
        form.password_confirmation &&
        form.terms &&
        Object.keys(clientErrors).length === 0;

    const onSubmit = (e) => {
        if (!valid) {
            e.preventDefault();
            setTouched({
                username: true,
                email: true,
                invite_code: true,
                password: true,
                password_confirmation: true,
                terms: true,
            });
            return;
        }
        setSubmitting(true);
    };

    if (submitted && flash.success) {
        return (
            <section id="join" data-screen-label="04 Join">
                <div className="wrap">
                    <div className="join-card join-success reveal is-visible">
                        <div className="join-success-mark">
                            <MoonMark size={56} />
                        </div>
                        <span className="eyebrow" style={{ justifyContent: 'center' }}>Добро пожаловать</span>
                        <h3 className="h-display" style={{ fontSize: 36, marginTop: 16 }}>
                            Аккаунт создан
                        </h3>
                        <p className="lead" style={{ marginTop: 14 }}>
                            {successUsername ? (
                                <>
                                    Логин <span style={{ color: 'var(--moon)', fontStyle: 'normal' }}>{successUsername}</span> готов к входу.
                                </>
                            ) : (
                                'Аккаунт готов к входу. '
                            )}
                            {' '}Открывай лаунчер и жми «Играть».
                        </p>
                        <div className="hero-cta" style={{ justifyContent: 'center', marginTop: 28 }}>
                            <a
                                href={bootstrap.auth?.cabinet_url || bootstrap.auth?.login_url || '#'}
                                className="btn btn-primary"
                            >
                                Войти в личный кабинет {Icons.arrow}
                            </a>
                        </div>
                    </div>
                </div>
            </section>
        );
    }

    const endpoint = bootstrap.register_endpoint || '/register';
    const csrfToken = bootstrap.csrf_token || '';

    return (
        <section id="join" data-screen-label="04 Join">
            <div className="wrap">
                <div className="join-grid reveal" ref={ref}>
                    <div className="join-intro">
                        <span className="eyebrow">Регистрация</span>
                        <div style={{ height: 20 }} />
                        <h2 className="h-display" style={{ fontSize: 'clamp(36px, 5vw, 56px)' }}>
                            Создай игровой аккаунт
                        </h2>
                        <div className="divider-ornament" style={{ justifyContent: 'flex-start', margin: '22px 0' }}>
                            <span style={{ opacity: 0.6 }}>✦</span>
                        </div>
                        <p className="lead" style={{ fontStyle: 'italic' }}>
                            Укажи инвайт-код, логин, почту и пароль — аккаунт будет готов к входу в игру сразу после
                            регистрации.
                        </p>
                        <div className="join-note">
                            <span className="join-note-k">Закрытый бета-доступ</span>
                            <span className="join-note-v">
                                Пока идёт закрытый этап: регистрация только по инвайт-кодам. Код можно получить у
                                друзей-игроков или в нашем Discord.
                            </span>
                        </div>
                    </div>

                    <form
                        className="join-card"
                        method="POST"
                        action={endpoint}
                        onSubmit={onSubmit}
                        noValidate
                    >
                        <input type="hidden" name="_token" value={csrfToken} />

                        <div className="join-card-corner tl" aria-hidden="true"></div>
                        <div className="join-card-corner tr" aria-hidden="true"></div>
                        <div className="join-card-corner bl" aria-hidden="true"></div>
                        <div className="join-card-corner br" aria-hidden="true"></div>

                        {serverMessage && (
                            <div className="join-error" style={{ marginBottom: 14 }}>{serverMessage}</div>
                        )}

                        <Field
                            label="Логин"
                            hint={FIELD_HINTS.username}
                            error={errorFor('username')}
                        >
                            <input
                                type="text"
                                name="username"
                                autoComplete="username"
                                placeholder="Moonwalker"
                                value={form.username}
                                onChange={set('username')}
                                onBlur={blur('username')}
                                maxLength={32}
                            />
                        </Field>

                        <Field label="Email" error={errorFor('email')}>
                            <input
                                type="email"
                                name="email"
                                autoComplete="email"
                                placeholder="player@example.com"
                                value={form.email}
                                onChange={set('email')}
                                onBlur={blur('email')}
                            />
                        </Field>

                        <Field
                            label="Инвайт-код"
                            hint={FIELD_HINTS.invite_code}
                            error={errorFor('invite_code')}
                            icon={Icons.mask}
                        >
                            <input
                                type="text"
                                name="invite_code"
                                placeholder="ABCD-EFGH-IJKL"
                                value={form.invite_code}
                                onChange={(e) =>
                                    setForm((f) => ({ ...f, invite_code: e.target.value.toUpperCase() }))
                                }
                                onBlur={blur('invite_code')}
                                maxLength={32}
                                style={{ letterSpacing: '0.14em', fontFamily: 'var(--f-mono)' }}
                            />
                        </Field>

                        <div className="join-row">
                            <Field label="Пароль" error={errorFor('password')}>
                                <input
                                    type="password"
                                    name="password"
                                    autoComplete="new-password"
                                    placeholder="Минимум 8 символов"
                                    value={form.password}
                                    onChange={set('password')}
                                    onBlur={blur('password')}
                                    maxLength={32}
                                />
                            </Field>
                            <Field
                                label="Повтор пароля"
                                error={errorFor('password_confirmation')}
                            >
                                <input
                                    type="password"
                                    name="password_confirmation"
                                    autoComplete="new-password"
                                    placeholder="Повтори пароль"
                                    value={form.password_confirmation}
                                    onChange={set('password_confirmation')}
                                    onBlur={blur('password_confirmation')}
                                    maxLength={32}
                                />
                            </Field>
                        </div>

                        <label className="join-check">
                            <input
                                type="checkbox"
                                name="terms"
                                value="1"
                                checked={form.terms}
                                onChange={set('terms')}
                            />
                            <span className="box" aria-hidden="true"></span>
                            <span>
                                Я принимаю <a href="#">правила сервера</a> и согласен на обработку данных для создания игрового
                                аккаунта.
                            </span>
                        </label>
                        {errorFor('terms') && (
                            <div className="join-error">{errorFor('terms')}</div>
                        )}

                        <button
                            type="submit"
                            className={`btn btn-primary join-submit ${(!valid || submitting) ? 'is-disabled' : ''}`}
                            disabled={!valid || submitting}
                        >
                            {submitting ? 'Создаём аккаунт…' : 'Зарегистрировать аккаунт'} {Icons.arrow}
                        </button>
                    </form>
                </div>
            </div>
        </section>
    );
}

function Field({ label, hint, error, icon, children }) {
    return (
        <div className={`join-field ${error ? 'has-error' : ''}`}>
            <label className="join-label">{label}</label>
            <div className="join-input">
                {icon && <span className="join-input-icon">{icon}</span>}
                {children}
            </div>
            {error ? (
                <div className="join-error">{error}</div>
            ) : hint ? (
                <div className="join-hint">{hint}</div>
            ) : null}
        </div>
    );
}