@extends('layouts.app')

@section('content')
<div class="min-h-[80vh] flex items-center justify-center px-4 py-12 bg-gradient-to-b from-sky-50/50 to-white">
    <div class="w-full max-w-sm rounded-3xl shadow-xl p-8 flex flex-col items-center border border-blue-100 bg-white animate-slide-up">
        {{-- Icon --}}
        <div class="flex items-center justify-center w-14 h-14 rounded-2xl bg-sky-50 mb-6 shadow-lg border border-sky-100">
            <i class="fas fa-mobile-alt text-2xl text-sky-700"></i>
        </div>

        <h2 class="text-2xl font-semibold mb-2 text-center text-gray-900">
            সাইন ইন করুন
        </h2>
        <p class="text-gray-500 text-sm mb-6 text-center leading-relaxed">
            আপনার <strong class="text-gray-800">মোবাইল নম্বর</strong> দিয়ে OTP পাঠিয়ে লগইন বা সাইন আপ করুন
        </p>

        {{-- Error Alerts --}}
        <div id="auth-alert" class="hidden w-full mb-4 p-4 rounded-xl border flex items-start gap-2.5 text-sm transition-all duration-300">
            <i class="fas fa-exclamation-circle mt-0.5"></i>
            <span id="auth-alert-message" class="font-medium"></span>
        </div>

        {{-- Phone Number Screen --}}
        <div id="phone-screen" class="w-full transition-all duration-300">
            <form id="phone-form" class="w-full flex flex-col gap-3">
                @csrf

                <div>
                    <label for="phone" class="block text-sm font-semibold text-gray-800 mb-2">
                        <i class="fas fa-phone-alt text-sky-600 mr-1"></i>
                        মোবাইল নম্বর
                    </label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 font-bold text-sm select-none">+88</span>
                        <input
                            type="tel"
                            id="phone"
                            name="phone"
                            inputmode="numeric"
                            autocomplete="tel-national"
                            placeholder="01712345678"
                            required
                            autofocus
                            maxlength="11"
                            class="w-full pl-12 pr-3 py-3 rounded-xl border border-gray-300 focus:outline-none focus:ring-2 focus:ring-sky-200 focus:border-sky-400 bg-white text-gray-900 text-base transition-all"
                        >
                    </div>
                    <p class="text-xs text-gray-500 mt-2">
                        উদাহরণ: 01712345678 (শুধু ১১ ডিজিটের বাংলাদেশী নম্বর)
                    </p>
                </div>

                <button type="submit" id="phone-submit-btn" class="w-full bg-gradient-to-b from-gray-700 to-gray-900 text-white font-medium py-3 rounded-xl shadow hover:brightness-105 cursor-pointer transition mt-1 flex items-center justify-center gap-2">
                    <span>ওটিপি পাঠান</span>
                    <i class="fas fa-arrow-right text-xs"></i>
                </button>
            </form>
        </div>

        {{-- OTP Verification Screen --}}
        <div id="otp-screen" class="w-full hidden transition-all duration-300">
            <form id="otp-form" class="w-full flex flex-col gap-3">
                @csrf
                <input type="hidden" id="otp-phone" name="phone">

                <div class="bg-sky-50 p-3 rounded-xl border border-sky-100 flex items-center justify-between">
                    <div class="text-sm text-sky-900 font-semibold">
                        <i class="fas fa-phone-alt mr-1 text-sky-600"></i>
                        <span id="display-phone"></span>
                    </div>
                    <button type="button" onclick="goToPhoneScreen()" class="text-xs text-sky-600 hover:text-sky-800 font-medium underline">
                        নম্বর পরিবর্তন
                    </button>
                </div>

                {{-- Dev OTP notice --}}
                <div id="dev-otp-notice" class="hidden bg-green-50 p-3 rounded-xl border border-green-200 text-xs text-green-800 font-semibold space-y-1 animate-pulse">
                    <div class="flex items-center gap-1.5">
                        <i class="fas fa-flask"></i>
                        <span>টেস্টিং ওটিপি কোড (ডেভেলপমেন্ট মোড):</span>
                    </div>
                    <div class="text-lg font-black text-center text-gray-900" id="dev-otp-code"></div>
                </div>

                <div>
                    <label for="otp" class="block text-sm font-semibold text-gray-800 mb-2">
                        <i class="fas fa-key text-sky-600 mr-1"></i>
                        OTP কোড
                    </label>
                    <input
                        type="text"
                        id="otp"
                        name="otp"
                        inputmode="numeric"
                        placeholder="৬ ডিজিটের OTP"
                        maxlength="6"
                        required
                        class="w-full px-3 py-3 rounded-xl border border-gray-300 focus:outline-none focus:ring-2 focus:ring-sky-200 focus:border-sky-400 bg-white text-gray-900 text-lg text-center tracking-[0.5em] transition-all"
                    >
                </div>

                <button type="submit" id="otp-submit-btn" class="w-full bg-gradient-to-b from-gray-700 to-gray-900 text-white font-medium py-3 rounded-xl shadow hover:brightness-105 cursor-pointer transition mt-1 flex items-center justify-center gap-2">
                    <span>যাচাই করে প্রবেশ করুন</span>
                    <i class="fas fa-check text-xs"></i>
                </button>
            </form>
        </div>

        {{-- Divider --}}
        <div class="flex items-center w-full my-5">
            <div class="flex-grow border-t border-dashed border-gray-200"></div>
            <span class="mx-3 text-xs text-gray-400">অথবা সোশ্যাল লগইন</span>
            <div class="flex-grow border-t border-dashed border-gray-200"></div>
        </div>

        {{-- Social Buttons --}}
        <div class="flex gap-3 w-full">
            <a href="{{ route('social.redirect', 'google') }}"
               class="flex items-center justify-center h-12 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 transition grow">
                <svg class="w-5 h-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <g transform="matrix(1, 0, 0, 1, 0, 0)">
                        <path d="M21.35,11.1H12v2.7h5.38C16.88,16.03,14.77,17.2,12,17.2c-3.17,0-5.85-2.14-6.81-5.02L2.55,14.28C4.5,18.17,8.54,20,12,20c4.4,0,8.08-3.08,8.08-8.9C20.08,10.6,21.35,11.1,21.35,11.1z" fill="#4285F4"/>
                        <path d="M12,6.8c1.62,0,3.08,0.56,4.22,1.64l3.15-3.15C17.45,3.48,14.9,2,12,2C7.75,2,4.1,4.9,2.5,9l3.3,2.56C6.7,8.7,9.15,6.8,12,6.8z" fill="#EA4335"/>
                        <path d="M5.8,11.5c-0.25-0.75-0.4-1.55-0.4-2.4s0.15-1.65,0.4-2.4L2.5,4.14C1.53,6.08,1,8.23,1,10.5c0,2.15,0.51,4.22,1.44,6.07L5.8,11.5z" fill="#FBBC05"/>
                        <path d="M12,3.8c3.55,0,6.45,2.9,6.45,6.45c0,0.35-0.03,0.7-0.08,1.05h3.03C21.92,10.85,22,10.38,22,9.9C22,4.43,17.52,0,12,0C7.62,0,3.87,2.83,2.5,6.8l3.3,2.56C6.7,6.3,9.15,3.8,12,3.8z" fill="#34A853"/>
                    </g>
                </svg>
            </a>
            <a href="{{ route('social.redirect', 'facebook') }}"
               class="flex items-center justify-center h-12 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 transition grow">
                <svg class="w-5 h-5 fill-current text-blue-600" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c4.56-.93 8-4.96 8-9.75z"/>
                </svg>
            </a>
        </div>
    </div>
</div>

<script>
    const phoneScreen = document.getElementById('phone-screen');
    const otpScreen = document.getElementById('otp-screen');
    const authAlert = document.getElementById('auth-alert');
    const authAlertMessage = document.getElementById('auth-alert-message');
    const devOtpNotice = document.getElementById('dev-otp-notice');
    const devOtpCode = document.getElementById('dev-otp-code');
    const phoneInput = document.getElementById('phone');

    phoneInput?.addEventListener('input', function () {
        this.value = this.value.replace(/\D/g, '').slice(0, 11);
    });

    function showAlert(message, type = 'error') {
        authAlert.classList.remove('hidden', 'bg-red-50', 'text-red-800', 'border-red-100', 'bg-green-50', 'text-green-800', 'border-green-100');

        if (type === 'error') {
            authAlert.classList.add('bg-red-50', 'text-red-800', 'border-red-100');
        } else {
            authAlert.classList.add('bg-green-50', 'text-green-800', 'border-green-100');
        }

        authAlertMessage.innerText = message;
        authAlert.classList.remove('hidden');
    }

    function hideAlert() {
        authAlert.classList.add('hidden');
    }

    function normalizePhone(value) {
        let phone = value.trim();
        if (phone.startsWith('+88')) phone = phone.substring(3);
        else if (phone.startsWith('88')) phone = phone.substring(2);
        return phone.replace(/\D/g, '');
    }

    function goToOtpScreen(phone) {
        document.getElementById('otp-phone').value = phone;
        document.getElementById('display-phone').innerText = '+88 ' + phone;

        phoneScreen.classList.add('hidden');
        otpScreen.classList.remove('hidden');
        document.getElementById('otp').focus();
    }

    function goToPhoneScreen() {
        otpScreen.classList.add('hidden');
        phoneScreen.classList.remove('hidden');
        phoneInput.focus();
        devOtpNotice.classList.add('hidden');
    }

    document.getElementById('phone-form').addEventListener('submit', function (e) {
        e.preventDefault();
        hideAlert();

        const normalizedPhone = normalizePhone(phoneInput.value);
        if (!/^01[3-9]\d{8}$/.test(normalizedPhone)) {
            showAlert('সঠিক ১১ ডিজিটের বাংলাদেশী মোবাইল নম্বর দিন (যেমন: 01712345678)');
            return;
        }

        phoneInput.value = normalizedPhone;

        const btn = document.getElementById('phone-submit-btn');
        const originalContent = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = `<i class="fas fa-spinner animate-spin"></i> <span>প্রক্রিয়াধীন...</span>`;

        const formData = new FormData(this);

        fetch("{{ route('otp.send') }}", {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(async response => {
            const data = await response.json();
            btn.disabled = false;
            btn.innerHTML = originalContent;

            if (response.ok && data.success) {
                goToOtpScreen(normalizedPhone);
                showAlert(data.message, 'success');

                if (data.otp) {
                    devOtpCode.innerText = data.otp;
                    devOtpNotice.classList.remove('hidden');
                }
            } else {
                showAlert(data.message || 'ওটিপি পাঠাতে সমস্যা হয়েছে। আবার চেষ্টা করুন।');
            }
        })
        .catch(() => {
            btn.disabled = false;
            btn.innerHTML = originalContent;
            showAlert('সার্ভারের সাথে সংযোগ স্থাপন করা যাচ্ছে না। দয়া করে আবার চেষ্টা করুন।');
        });
    });

    document.getElementById('otp-form').addEventListener('submit', function (e) {
        e.preventDefault();
        hideAlert();

        const btn = document.getElementById('otp-submit-btn');
        const originalContent = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = `<i class="fas fa-spinner animate-spin"></i> <span>যাচাই করা হচ্ছে...</span>`;

        const formData = new FormData(this);

        fetch("{{ route('otp.verify') }}", {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(async response => {
            const data = await response.json();
            btn.disabled = false;
            btn.innerHTML = originalContent;

            if (response.ok && data.success) {
                window.location.href = data.redirect;
            } else {
                showAlert(data.message || 'ভুল ওটিপি কোড। আবার চেষ্টা করুন।');
            }
        })
        .catch(() => {
            btn.disabled = false;
            btn.innerHTML = originalContent;
            showAlert('সার্ভারের সাথে সংযোগ স্থাপন করা যাচ্ছে না। দয়া করে আবার চেষ্টা করুন।');
        });
    });
</script>
@endsection