@extends('layouts.app')
@section('hide-header', true)

@section('content')
<section class="login-page">
    <div class="login-shell">
        <div class="login-panel">
            <div class="login-logo">
                <svg width="195" height="45" viewBox="0 0 520 120" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="ECOM Connector logo" class="login-svg-logo">
                    <style>
                        text { font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; }
                        .ecom { fill: #C8102E; font-weight: 700; }
                        .connector { fill: #7C5CFA; font-weight: 300; }
                    </style>

                    <text x="20" y="75" font-size="56">
                        <tspan class="ecom">ECOM</tspan>
                        <tspan class="connector">Connector v2</tspan>
                    </text>
                </svg>
                <p class="login-tagline">Single access to all of your commerce pipelines.</p>
            </div>

            <form method="POST" action="{{ route('login') }}" class="login-form" novalidate>
                @csrf
                <div class="form-group">
                    <label for="email">{{ __('E-Mail Address') }}</label>
                    <div class="input-shell">
                        <span class="input-icon">
                            <i class="fa-regular fa-envelope"></i>
                        </span>
                        <input id="email" type="email" class="login-input @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
                    </div>
                    @error('email')
                        <span class="form-error" role="alert" data-server-error="true">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="password">{{ __('Password') }}</label>
                    <div class="input-shell">
                        <span class="input-icon">
                            <i class="fa-solid fa-lock"></i>
                        </span>
                        <input id="password" type="password" class="login-input @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
                        <button type="button" class="input-action" data-password-toggle aria-label="Show password">
                            <i class="fa-regular fa-eye-slash" aria-hidden="true"></i>
                        </button>
                    </div>
                    @error('password')
                        <span class="form-error" role="alert" data-server-error="true">{{ $message }}</span>
                    @enderror
                </div>

                <div class="login-actions">
                    <label class="remember-me">
                        <input type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                        <span>{{ __('Remember Me') }}</span>
                    </label>

                    @if (Route::has('password.request'))
                        <a class="forgot-link" href="{{ route('password.request') }}">
                            {{ __('Forgot Your Password?') }}
                        </a>
                    @endif
                </div>

                <div class="login-alert login-alert-error" data-login-error hidden>
                    <i class="fa-solid fa-circle-exclamation"></i>
                    <span data-login-error-message>{{ __('Unable to login. Please check your credentials and try again.') }}</span>
                </div>

                <button type="submit" class="btn btn-login" data-login-button>
                    <span class="btn-label">{{ __('Login') }}</span>
                    <span class="btn-loader" aria-hidden="true"></span>
                </button>
            </form>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const loginForm = document.querySelector('.login-form');
        if (!loginForm) {
            return;
        }

        const loginButton = loginForm.querySelector('[data-login-button]');
        const errorAlert = loginForm.querySelector('[data-login-error]');
        const errorMessage = loginForm.querySelector('[data-login-error-message]');
        const csrfTokenTag = document.querySelector('meta[name="csrf-token"]');
        const passwordField = loginForm.querySelector('#password');
        const passwordToggle = loginForm.querySelector('[data-password-toggle]');
        const isSuccessfulStatus = (status) => status >= 200 && status < 300;
        const isRedirectStatus = (status) => status >= 300 && status < 400;
        const isJsonResponse = (response) => {
            if (!response || !response.headers) {
                return false;
            }
            const contentType = response.headers.get('Content-Type') || '';
            return contentType.includes('application/json');
        };

        const setLoading = (state) => {
            if (!loginButton) {
                return;
            }
            loginButton.disabled = state;
            loginButton.classList.toggle('is-loading', state);
        };

        const hideErrorAlert = () => {
            if (errorAlert) {
                errorAlert.setAttribute('hidden', 'hidden');
                errorAlert.classList.remove('is-visible');
            }
        };

        const showErrorAlert = (message) => {
            if (errorAlert && errorMessage) {
                errorMessage.textContent = message || 'Unable to login. Please try again.';
                errorAlert.removeAttribute('hidden');
                errorAlert.classList.add('is-visible');
            }
        };
        if (passwordField && passwordToggle) {
            passwordToggle.addEventListener('click', function () {
                const wasHidden = passwordField.getAttribute('type') === 'password';
                passwordField.setAttribute('type', wasHidden ? 'text' : 'password');
                const isVisible = wasHidden;
                const icon = this.querySelector('i');
                if (icon) {
                    icon.classList.toggle('fa-eye', isVisible);
                    icon.classList.toggle('fa-eye-slash', !isVisible);
                }
                this.setAttribute('aria-label', isVisible ? 'Hide password' : 'Show password');
            });
        }

        const clearFieldErrors = () => {
            loginForm.querySelectorAll('.is-invalid').forEach((input) => input.classList.remove('is-invalid'));
            loginForm.querySelectorAll('[data-field-error="true"]').forEach((el) => el.remove());
            loginForm.querySelectorAll('[data-server-error="true"]').forEach((el) => el.remove());
        };

        const applyFieldErrors = (errors) => {
            Object.entries(errors || {}).forEach(([field, messages]) => {
                const input = loginForm.querySelector(`[name="${field}"]`);
                if (!input) {
                    return;
                }

                input.classList.add('is-invalid');
                const span = document.createElement('span');
                span.className = 'form-error';
                span.setAttribute('role', 'alert');
                span.dataset.fieldError = 'true';
                span.textContent = Array.isArray(messages) ? messages[0] : messages;

                const container = input.closest('.form-group');
                if (container) {
                    container.appendChild(span);
                }
            });
        };

        const parseJsonSafely = async (response) => {
            if (!response) {
                return null;
            }
            try {
                return await response.json();
            } catch (error) {
                return null;
            }
        };

        const handleSuccessfulLogin = async (response) => {
            if (!response || response.type === 'opaqueredirect' || response.type === 'opaque') {
                window.location.reload();
                return;
            }

            if (isJsonResponse(response)) {
                const payload = await parseJsonSafely(response.clone());
                if (payload && payload.redirect) {
                    window.location.href = payload.redirect;
                    return;
                }
            }

            if (response.redirected && response.url) {
                window.location.href = response.url;
                return;
            }

            if (isRedirectStatus(response.status)) {
                const redirectUrl = response.headers ? response.headers.get('Location') : null;
                if (redirectUrl) {
                    window.location.href = redirectUrl;
                    return;
                }
            }

            window.location.reload();
        };

        loginForm.addEventListener('submit', function (event) {
            event.preventDefault();

            const action = loginForm.getAttribute('action');
            if (!action) {
                return loginForm.submit();
            }

            setLoading(true);
            hideErrorAlert();
            clearFieldErrors();

            const formData = new FormData(loginForm);

            fetch(action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfTokenTag ? csrfTokenTag.getAttribute('content') : '',
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                body: formData,
                credentials: 'same-origin',
                redirect: 'follow'
            })
            .then(async (response) => {
                if (response.type === 'opaqueredirect' || response.type === 'opaque') {
                    window.location.reload();
                    return;
                }

                if (response.status >= 200 && response.status < 400) {
                    await handleSuccessfulLogin(response);
                    return;
                }

                const payload = isJsonResponse(response) ? await parseJsonSafely(response.clone()) : null;
                if (payload && payload.errors) {
                    applyFieldErrors(payload.errors);
                }

                const message = (payload && payload.message)
                    ? payload.message
                    : (response.status === 429
                        ? 'Too many login attempts. Please try again shortly.'
                        : 'Unable to login with the provided credentials.');
                showErrorAlert(message);
            })
            .catch(() => {
                showErrorAlert('Something went wrong while trying to login. Please try again.');
            })
            .finally(() => {
                setLoading(false);
            });
        });
    });
</script>
@endpush