@extends('layouts.app')

@section('title', __('messages.login') . ' - ' . __('messages.app_name'))
@section('description', __('messages.login_subtitle'))

@section('content')
@php $lang = app()->getLocale(); @endphp

<div class="min-h-screen bg-[#F5F7FA] relative">
    {{-- ===== CURVED HEADER (280px, blue gradient, bottom curve) ===== --}}
    <div class="relative w-full overflow-hidden" style="height: 280px;">
        <div class="absolute inset-0" style="background: linear-gradient(135deg, #3a9d7a 0%, #2e8b6b 50%, #162422 100%);"></div>

        {{-- Bottom curve (quadratic bezier to match Flutter _CurvedClipper) --}}
        <svg class="absolute bottom-0 left-0" width="100%" height="50" viewBox="0 0 100 50" preserveAspectRatio="none">
            <path d="M 0,0 Q 50,60 100,0 L 100,50 L 0,50 Z" fill="#F5F7FA"/>
        </svg>

        {{-- Content --}}
        <div class="relative z-10 h-full flex flex-col items-center pt-10 pb-16">
            {{-- Back button --}}
            <div class="absolute top-6 {{ $lang === 'ar' ? 'right-4' : 'left-4' }}">
                <button type="button" onclick="if(history.length>1){history.back()}else{location.href='{{ route('home') }}'}" class="w-11 h-11 flex items-center justify-center rounded-full" style="background: rgba(255,255,255,0.2);" aria-label="Back">
                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="white" class="{{ $lang === 'ar' ? 'rotate-180' : '' }}">
                        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
                    </svg>
                </button>
            </div>

            <div class="h-[50px]"></div>

            {{-- Logo --}}
            <a href="{{ route('home') }}" class="block">
                <img src="{{ asset('images/logosportirak.png') }}" alt="lebuttn" style="width: 67px; height: 67px;">
            </a>
            <div class="h-3"></div>

            {{-- Welcome message --}}
            <div class="text-white font-bold" style="font-size: 22px;">{{ __('messages.welcome_message') }}</div>
            <div class="h-1.5"></div>

            {{-- Subtitle --}}
            <div class="text-white/80" style="font-size: 13px;">{{ __('messages.login_subtitle') }}</div>
        </div>
    </div>

    {{-- ===== SCROLLABLE CONTENT (offset -40 to overlap curve) ===== --}}
    <div class="relative z-10 px-6 pb-8" style="margin-top: -40px;">

        {{-- LOGIN CARD --}}
        <div class="bg-white rounded-[20px] shadow-sm p-6">
            {{-- Title --}}
            <div class="text-center text-black/60 font-bold" style="font-size: 17px;">{{ __('messages.login') }}</div>
            <div class="h-2"></div>
            {{-- Subtitle --}}
            <div class="text-center text-[#666]" style="font-size: 12px;">{{ __('messages.google_login_desc') }}</div>
            <div class="h-6"></div>

            {{-- Google Sign-In Button --}}
            <button type="button" id="google-btn" onclick="googleSignIn()" class="w-full flex items-center justify-center rounded-[16px] disabled:opacity-50" style="height: 56px; border: 1px solid #E0E0E0;">
                <span class="font-bold" style="font-size: 20px; color: #4285F4; line-height: 1.2;">G</span>
                <span id="google-btn-label" class="ms-3 font-bold text-black/60" style="font-size: 13px;">{{ __('messages.continue_with_google') }}</span>
            </button>

            {{-- Error message --}}
            <div id="login-error" class="hidden mt-3 p-3 rounded-xl flex items-start gap-2" style="background: rgba(229, 57, 53, 0.08);">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="#E53935" class="flex-shrink-0 mt-0.5"><path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>
                <span id="login-error-text" class="text-[#E53935] flex-1" style="font-size: 13px;"></span>
            </div>

            <div class="h-6"></div>

            {{-- Divider with "why register" --}}
            <div class="flex items-center">
                <div class="flex-1 h-px bg-[#E0E0E0]"></div>
                <div class="px-4 text-[#999]" style="font-size: 12px;">{{ __('messages.why_register') }}</div>
                <div class="flex-1 h-px bg-[#E0E0E0]"></div>
            </div>
            <div class="h-4"></div>

            {{-- Advantages --}}
            @foreach(['advantage_predict', 'advantage_compete', 'advantage_leaderboard'] as $key)
                <div class="flex items-center py-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#2e8b6b" class="flex-shrink-0"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    <span class="ms-3 text-[#555]" style="font-size: 14px;">{{ __('messages.' . $key) }}</span>
                </div>
            @endforeach
        </div>

        <div class="h-8"></div>

        {{-- Skip button (Continue without account) --}}
        <a href="{{ route('home') }}" class="w-full flex items-center justify-center rounded-[14px] bg-gray-100 hover:bg-gray-200" style="height: 52px;">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="#9CA3AF" class="{{ $lang === 'ar' ? 'rotate-180' : '' }}">
                <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
            </svg>
            <span class="ms-2 font-medium text-gray-600" style="font-size: 14px;">{{ __('messages.skip_login') }}</span>
        </a>

        <div class="h-6"></div>
    </div>
</div>

@push('scripts')
<script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js";
    import { getAuth, GoogleAuthProvider, signInWithPopup, signOut, onAuthStateChanged, setPersistence, browserLocalPersistence }
        from "https://www.gstatic.com/firebasejs/10.14.1/firebase-auth.js";

    const firebaseConfig = {
        apiKey: "AIzaSyAzMbCMTgmqkbk6_rDOnnVNigysAs3stj8",
        authDomain: "lebuttn-4a213.firebaseapp.com",
        projectId: "lebuttn-4a213",
        storageBucket: "lebuttn-4a213.firebasestorage.app",
        messagingSenderId: "720826047492",
        appId: "1:720826047492:web:14446a49293333bd066951",
        measurementId: "G-SBFVNZFPZ0"
    };

    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);
    await setPersistence(auth, browserLocalPersistence);

    // If already signed in, skip login page
    onAuthStateChanged(auth, (user) => {
        if (user) {
            try {
                localStorage.setItem('lebuttn_user', JSON.stringify({
                    uid: user.uid,
                    name: user.displayName || '',
                    email: user.email || '',
                    photo: user.photoURL || '',
                }));
            } catch (_) {}
        }
    });

    window.googleSignIn = async function () {
        const btn = document.getElementById('google-btn');
        const errBox = document.getElementById('login-error');
        const errText = document.getElementById('login-error-text');
        errBox.classList.add('hidden');
        if (btn) btn.disabled = true;

        try {
            const provider = new GoogleAuthProvider();
            provider.setCustomParameters({ prompt: 'select_account' });
            const result = await signInWithPopup(auth, provider);
            const user = result.user;

            localStorage.setItem('lebuttn_user', JSON.stringify({
                uid: user.uid,
                name: user.displayName || '',
                email: user.email || '',
                photo: user.photoURL || '',
            }));

            // Redirect: ?from=premium → remove-ads, else home
            const params = new URLSearchParams(location.search);
            const from = params.get('from');
            location.href = from === 'premium' ? '/remove-ads' : '{{ route('home') }}';
        } catch (e) {
            console.error('[Login] Google sign-in error:', e);
            let msg = e?.message || 'Erreur lors de la connexion';
            if (e?.code === 'auth/popup-closed-by-user') msg = '{{ __('messages.login_cancelled') }}';
            else if (e?.code === 'auth/popup-blocked') msg = '{{ __('messages.login_popup_blocked') }}';
            else if (e?.code === 'auth/unauthorized-domain') msg = '{{ __('messages.login_unauthorized_domain') }}';
            errText.textContent = msg;
            errBox.classList.remove('hidden');
            if (btn) btn.disabled = false;
        }
    };
</script>
@endpush
@endsection