@extends('layouts.app')

@section('content')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Google Identity Services (GIS) – load with async defer -->
<script src="https://accounts.google.com/gsi/client" async defer></script>

<section class="find-the-ride find-the--ride section">
  <div class="container">
    <div class="form-account-box shadow-none p-0">
      <div class="row align-items-center justify-content-center">
        <div class="col-lg-12">
          <div class="card-like d-flex shadow-sm">
            <div class="row g-0 w-100">

              <!-- Left visual -->
              <div class="col-md-6 d-none d-md-block">
                <div class="left-image h-100">
                  <figure class="h-100 m-0">
                    <img class="img-fluid h-100 w-100 object-fit-cover" src="{{ asset('images/left-image.png') }}" alt="{{ __('lang.app_name') }}">
                  </figure>
                </div>
              </div>

              <!-- Right: login form -->
              <div class="col-md-6">
                <div class="p-4 h-100 d-flex flex-column justify-content-center">

                  <div class="logo-icon text-center mb-3">
                    <figure class="m-0">
                      <img class="img-fluid" src="{{ asset('images/logo-icon.png') }}" alt="{{ __('lang.app_name') }}">
                    </figure>
                  </div>

                  <h3 class="text-center mb-3">{{ __('lang.login_title') }}</h3>

                  <div id="global-message-container" class="mb-3"></div>

                  <form id="phoneLoginForm" novalidate>

                    <div class="mb-3 phone-box">
                      <label class="form-label mb-3">{{ __('lang.phone_number') }} <span class="text-danger">*</span></label>
                      <div class="input-group p-2">
                        <select class="form-select flex-grow-0 w-auto countryCode shadow-none border-0 countrySelect" id="countryCode" required>
                          <option disabled selected>{{ __('lang.loading') }}</option>
                        </select>
                        <input type="tel" class="form-control border-top-0 border-bottom-0 border-end-0 py-0 pe-0 shadow-none" id="phoneNumber" placeholder="{{ __('lang.enter_mobile') }}" maxlength="10" required>
                      </div>
                      <div class="invalid-feedback">{{ __('lang.invalid_mobile') }}</div>
                    </div>

                    <div class="form-check mb-3 ps-0">
                      <input class="form-check-input" name="terms" type="checkbox" id="termsCheckbox">
                      <label class="form-check-label ps-3" for="termsCheckbox">
                        {{ __('lang.agree_terms') }}
                        <a href="{{ route('terms') }}" target="_blank" class="text-decoration-none">{{ __('lang.terms_conditions') }}</a>
                      </label>
                    </div>

                    <div id="recaptcha-container" class="mb-3 d-none"></div>

                    <div id="otpField" class="mb-3 d-none">
                      <label class="form-label">{{ __('lang.verify_code') }} <span class="text-danger">*</span></label>
                      <div class="form-text text-muted mb-2" id="otp-sent-to">                            
                      </div>
                      <input type="tel" class="form-control" id="otp" placeholder="{{ __('lang.enter_otp') }}" maxlength="6">
                      <div class="invalid-feedback">{{ __('lang.invalid_otp') }}</div>
                      <div class="form-text text-end">
                        <a href="javascript:void(0)" id="resendOtp">{{ __('lang.resend_otp') }}</a>
                      </div>
                    </div>

                    <div class="d-grid gap-2 mb-3">
                      <button type="submit" class="btn-default" id="submitPhoneBtn">
                        <span id="phoneBtnText">{{ __('lang.send_verification') }}</span>
                        <span class="spinner d-none"><i class="bi bi-arrow-repeat rotate"></i></span>
                      </button>
                    </div>
                    
                    <div class="or-divider text-center">
                      <span>OR</span>
                    </div>

                    <!-- Official Google Identity Services button container -->
                    <div class="d-grid gap-2">
                      <div id="g_id_onload"
                           data-client_id="{{ env('GOOGLE_CLIENT_ID') }}"
                           data-callback="handleGoogleCredential"
                           data-auto_prompt="false">
                      </div>
                      <div id="googleSignInButton" class="d-flex justify-content-center"></div>
                    </div>

                    <div class="text-center mt-3">
                      <p>{{ __('lang.no_account') }} <a href="{{ route('register') }}">{{ __('lang.signup') }}</a></p>
                    </div>

                  </form>
                  
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
const phoneLoginForm = $('#phoneLoginForm');
const submitPhoneBtn = $('#submitPhoneBtn');
const phoneBtnText = $('#phoneBtnText');
const otpField = $('#otpField');
const resendOtp = $('#resendOtp');
const phoneNumberInput = $('#phoneNumber');
const otpInput = $('#otp');
let appVerifier;
let confirmationResult;

async function initializeRecaptcha(showContainer = true) {
  try {
    if (appVerifier) {
      if (typeof appVerifier.clear === 'function') appVerifier.clear();
      window.recaptchaWidgetId = null;
    }
    
    // Make sure container is visible for initialization
    $('#recaptcha-container').removeClass('d-none');
    
    appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
      'size': 'normal',
      'callback': (response) => { 
       
        window.recaptchaVerified = true;
        window.recaptchaResponse = response;
        updateRecaptchaStatus();
        showMessage('{{ __('lang.recaptcha_verified') }}', 'success');
      },
      'expired-callback': () => { 
      
        showMessage('{{ __('lang.recaptcha_expired_please_verify_again') }}', 'warning'); 
        window.recaptchaVerified = false;
        window.recaptchaResponse = null;
        updateRecaptchaStatus();
      }
    });
    
    window.recaptchaWidgetId = await appVerifier.render();
    
    window.recaptchaVerified = false;
    window.recaptchaResponse = null;
    updateRecaptchaStatus();
    return true;
  } catch (error) {
    console.error('reCAPTCHA initialization error:', error);
    showMessage('{{ __('lang.recaptcha_init_failed') }}', 'danger');
    return false;
  }
}


function toggleButtonLoading(button, isLoading) {
  if (!button || !button.length) return;
  
  button.prop('disabled', isLoading);
  const spinner = button.find('.spinner');
  const buttonText = button.find('#phoneBtnText');
  
  if (isLoading) {
    spinner.removeClass('d-none');
    buttonText.addClass('d-none');
  } else {
    spinner.addClass('d-none');
    buttonText.removeClass('d-none');
  }
}

function validatePhone(phone) { return /^\d+$/.test(phone); }
function validateOtp(otp) { return /^\d{6}$/.test(otp); }

async function sendPhoneOtp(isResend = false) {
  const phoneNumber = phoneNumberInput.val().trim();
  const countryCode = $('#countryCode').val() || '+91';
  const fullPhoneNumber = countryCode + phoneNumber;

  const userExists = await checkUserExists(phoneNumber, 'phoneNumber');
  if (!userExists) {
    showMessage('{{ __('lang.no_account_create_one') }}', 'danger');
    toggleButtonLoading(submitPhoneBtn, false);
    return;
  }
  
  if (!validatePhone(phoneNumber)) {
    showMessage('{{ __('lang.please_enter_valid_mobile') }}', 'danger');
    toggleButtonLoading(submitPhoneBtn, false);
    return false;
  }

  // Check if reCAPTCHA is verified
  if (!isRecaptchaVerified()) {
    toggleButtonLoading(submitPhoneBtn, false);
    return false;
  }

  try {
    toggleButtonLoading(submitPhoneBtn, true);
    
    if (!appVerifier) {
      const recaptchaSuccess = await initializeRecaptcha(true);
      if (!recaptchaSuccess) {
        toggleButtonLoading(submitPhoneBtn, false);
        return false;
      }
    }
    
    confirmationResult = await firebase.auth().signInWithPhoneNumber(fullPhoneNumber, appVerifier);
    
    // Only hide elements if this is not a resend
    if (!isResend) {
      // Hide phone-related elements
      $('.phone-box').addClass('d-none');
      $('.form-check').addClass('d-none');
      
      // Show OTP field
      otpField.removeClass('d-none');
      
      phoneBtnText.text('{{ __('lang.verify_otp') }}');
      phoneNumberInput.prop('readonly', true);
      otpInput.attr('required', 'required');
    }
    
    otpInput.focus();
    
    const masked = getMaskedPhoneNumber(fullPhoneNumber);
    const sentToElement = document.getElementById('otp-sent-to');
    if (sentToElement) {
        sentToElement.textContent = `{{trans('lang.enter_six_digit_code_sent_to')}} ${masked}`;          
    }
    
    showMessage('{{ __('lang.otp_sent_to_phone') }}', 'success');
    toggleButtonLoading(submitPhoneBtn, false);
    return true;
    
  } catch (error) {
    console.error('Firebase error:', error);
    let errorMessage = '{{ __('lang.failed_to_send_otp_try_again') }}';
    
    if (error.code === 'auth/invalid-app-credential') {
      errorMessage = '{{ __('lang.recaptcha_failed_please_verify_again') }}';
      if (appVerifier) { 
        appVerifier.clear(); 
        appVerifier = null; 
        window.recaptchaVerified = false;
      }
    } else if (error.code === 'auth/too-many-requests') {
      errorMessage = '{{ __('lang.too_many_requests') }}';
    } else if (error.code === 'auth/quota-exceeded') {
      errorMessage = '{{ __('lang.quota_exceeded') }}';
    } else if (error.code === 'auth/invalid-phone-number') {
      errorMessage = '{{ __('lang.invalid_phone_number') }}';
    } else if (error.code === 'auth/network-request-failed') {
      errorMessage = '{{ __('lang.network_error') }}';
    }
    
    showMessage(errorMessage, 'danger');
    toggleButtonLoading(submitPhoneBtn, false);
    return false;
  }
}

async function verifyPhoneOtp() {
  const otp = otpInput.val().trim();
  
  if (!validateOtp(otp)) {
    showMessage('{{ __('lang.please_enter_valid_otp') }}', 'danger');
    return false;
  }

  // Check if reCAPTCHA is still verified (optional - you might not need this for verification)
  if (!isRecaptchaVerified()) {
    toggleButtonLoading(submitPhoneBtn, false);
    return false;
  }

  try {
    toggleButtonLoading(submitPhoneBtn, true);
    const credential = await confirmationResult.confirm(otp);
    await handleFirebaseLogin(credential.user, 'phone');
  } catch (error) {
    console.error('OTP verification error:', error);
    let errorMessage = '{{ __('lang.verification_failed_try_again') }}';
    
    if (error.code === 'auth/invalid-verification-code') {
      errorMessage = '{{ __('lang.invalid_otp_try_again') }}';
    } else if (error.code === 'auth/code-expired') {
      errorMessage = '{{ __('lang.otp_expired_request_new') }}';
    } else if (error.code === 'auth/too-many-requests') {
      errorMessage = '{{ __('lang.too_many_requests') }}';
    }
    
    showMessage(errorMessage, 'danger');
    toggleButtonLoading(submitPhoneBtn, false);
  }
}

async function checkUserExists(identifier, type) {
  try {
    const querySnapshot = await db.collection('users').where(type, '==', identifier).limit(1).get();
    return !querySnapshot.empty;
  } catch (error) {
    console.error('Error checking user:', error);
    return false;
  }
}

async function handleFirebaseLogin(user, method) {
  try {
    const userDoc = await firestore.collection('users').doc(user.uid).get();
    let userDataFromFirestore = {};
    
    if (userDoc.exists) {
      userDataFromFirestore = userDoc.data();
    } else {
      showMessage('{{ __('lang.no_profile_found') }}' || '{{ __('lang.no_profile_found') }}', 'danger');
      console.warn("Firestore user doc missing for UID:", user.uid);
      return;
    }

    const userData = {
      id_token: user.uid,
      loginType: method,
      name: (userDataFromFirestore.firstName || '') + ' ' + (userDataFromFirestore.lastName || ''),
      email: userDataFromFirestore.email || '',
      phoneNumber: userDataFromFirestore.phoneNumber || '',
      countryCode: userDataFromFirestore.countryCode || ''
    };


    const response = await $.ajax({
      url: '{{ route("firebase.login") }}',
      method: 'POST',
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}',
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      data: JSON.stringify(userData),
      dataType: 'json'
    });


    if (response.success) {
     
      window.location.href = response.redirect || '{{ route("home.index") }}';
    } else {
      showMessage(response.message || '{{ __('lang.login_failed') }}', 'danger');
      console.error("[Login] Backend said no:", response);
    }

  } catch (error) {
    console.error("[Login] AJAX / network error:", error);
    let errMsg = '{{ __('lang.login_error') }}' || '{{ __('lang.login_error') }}';
    
    if (error.status === 422) {
      errMsg = (error.responseJSON?.message) || '{{ __('lang.validation_failed') }}';
    } else if (error.status === 419) {
      errMsg = '{{ __('lang.csrf_mismatch') }}';
    } else if (error.status >= 500) {
      errMsg = '{{ __('lang.server_error') }}';
    }
    
    showMessage(errMsg, 'danger');
  }
}

function showMessage(message, type = 'info') {
  const container = $('#global-message-container');
  const alert = $(`<div class="alert alert-${type} p-2" role="alert">${message}</div>`);
  container.html(alert);
  setTimeout(() => { alert.fadeOut(300, () => alert.remove()); }, 4000);
}

$(document).ready(function() {
  initializeRecaptcha(true);
 
  phoneLoginForm.on('submit', async function(e) {
    e.preventDefault();
    if (!$('#termsCheckbox').is(':checked')) {
      // alert('{{ __("lang.accept_terms_alert") }}');
      showMessage('{{ __("lang.accept_terms_alert") }}', 'danger');
      return;
    }
    if (otpField.hasClass('d-none')) {
      if (!validatePhone(phoneNumberInput.val().trim())) {
        showMessage('{{ __('lang.please_enter_valid_mobile') }}', 'danger');
        return;
      }
      await sendPhoneOtp(false); 
    } else {
      if (!validateOtp(otpInput.val().trim())) {
        showMessage('{{ __('lang.please_enter_valid_otp') }}', 'danger');
        return;
      }
      await verifyPhoneOtp();
    }
  });


  resendOtp.on('click', async function(e) {
    e.preventDefault();
    
    // Disable resend button temporarily
    $(this).css('pointer-events', 'none').addClass('text-muted');
    
    try {
      // Show loading on main button
      toggleButtonLoading(submitPhoneBtn, true);
      
      // Get the current phone number
      const phoneNumber = phoneNumberInput.val().trim();
      const countryCode = $('#countryCode').val() || '+91';
      const fullPhoneNumber = countryCode + phoneNumber;
      
      
      // Check if reCAPTCHA is verified
      if (!isRecaptchaVerified()) {
        toggleButtonLoading(submitPhoneBtn, false);
        $(this).css('pointer-events', 'auto').removeClass('text-muted');
        return false;
      }
      
      // Check if we have a valid appVerifier
      if (!appVerifier) {
        const recaptchaSuccess = await initializeRecaptcha(true);
        if (!recaptchaSuccess) {
          throw new Error('Failed to initialize security verification');
        }
      }
      
      // Resend OTP using the existing appVerifier
      confirmationResult = await firebase.auth().signInWithPhoneNumber(fullPhoneNumber, appVerifier);
      
      // Update the masked phone number display
      const masked = getMaskedPhoneNumber(fullPhoneNumber);
      const sentToElement = document.getElementById('otp-sent-to');
      if (sentToElement) {
        sentToElement.textContent = `{{trans('lang.enter_six_digit_code_sent_to')}} ${masked}`;          
      }
      
      showMessage('{{ __('lang.otp_has_been_resent') }}', 'success');
      
    } catch (error) {
      console.error('Resend error:', error);
      
      let errorMessage = '{{ __('lang.failed_to_resend_otp') }}';
      if (error.code === 'auth/too-many-requests') {
        errorMessage = '{{ __('lang.too_many_requests') }}';
      } else if (error.code === 'auth/quota-exceeded') {
        errorMessage = '{{ __('lang.quota_exceeded') }}';
      } else if (error.code === 'auth/network-request-failed') {
        errorMessage = '{{ __('lang.network_error') }}';
      } else if (error.code === 'auth/invalid-phone-number') {
        errorMessage = '{{ __('lang.invalid_phone_number') }}';
      } else if (error.code === 'auth/invalid-app-credential') {
        errorMessage = '{{ __('lang.recaptcha_failed_please_verify_again') }}';
        // Reset reCAPTCHA
        if (appVerifier) {
          appVerifier.clear();
          appVerifier = null;
          window.recaptchaVerified = false;
        }
      }
      
      showMessage(errorMessage, 'danger');
    } finally {
      // Hide loading
      toggleButtonLoading(submitPhoneBtn, false);
      
      // Re-enable resend button after 30 seconds
      setTimeout(() => {
        $(this).css('pointer-events', 'auto').removeClass('text-muted');
      }, 30000);
    }
  });

  phoneNumberInput.on('input', function() { $(this).val($(this).val().replace(/\D/g, '').slice(0, 10)); });
  otpInput.on('input', function() { $(this).val($(this).val().replace(/\D/g, '').slice(0, 6)); });
});

function initGoogleButton() {
  // Safety check: make sure 'google' object exists
  if (typeof google === 'undefined' || !google.accounts || !google.accounts.id) {
    console.warn('Google Identity Services not loaded yet – retrying...');
    setTimeout(initGoogleButton, 500); // retry after 500ms
    return;
  }

  google.accounts.id.initialize({
    client_id: "{{ env('GOOGLE_CLIENT_ID') }}",
    callback: handleGoogleCredential
  });

  google.accounts.id.renderButton(
    document.getElementById("googleSignInButton"),
    {
      theme: "outline",
      size: "large",
      text: "continue_with",
      shape: "rectangular",
      logo_alignment: "left",
      width: "100%"
    }
  );

}
async function handleGoogleCredential(response) {
  try {
    const idToken = response.credential;
    const payload = JSON.parse(atob(idToken.split('.')[1]));
    const googleEmail = payload.email?.toLowerCase()?.trim();

    if (!googleEmail) {
      throw new Error("No email in Google token");
    }

    const credential = firebase.auth.GoogleAuthProvider.credential(idToken);
    let user;
    try {
      const result = await firebase.auth().signInWithCredential(credential);
      user = result.user;
      
      const userDoc = await firestore.collection('users').doc(user.uid).get();

      if (userDoc.exists) {
        await handleFirebaseLogin(user, 'google');
        return;
      } else {
        console.log("[Google] No Firestore profile yet → starting signup");
      }

    } catch (signInError) {
      if (signInError.code === 'auth/account-exists-with-different-credential') {
        showMessage(
          '{{ __('lang.email_already_registered') }}',
          'danger'
        );
        return;
      }

      if (signInError.code === 'auth/popup-closed-by-user') {
        showMessage('{{ __('lang.google_popup_closed') }}', 'warning');
        return;
      }
      throw signInError;
    }


    const displayName = user.displayName || '';
    const nameParts = displayName.trim().split(/\s+/);
    const firstName = nameParts[0] || '';
    const lastName = nameParts.slice(1).join(' ') || '';

    const params = new URLSearchParams({
      uuid: user.uid,
      email: user.email || googleEmail,
      firstName,
      lastName,
      phoneNumber: user.phoneNumber || '',
      photoURL: user.photoURL || '',
      provider: 'google'
    });

    const signupUrl = '{{ url("socialsignup") }}?' + params.toString();
  

    setTimeout(() => {
      window.location.assign(signupUrl);
    }, 400);

  } catch (error) {
    console.error("[Google] Critical error:", error.code || error.message, error);

    let msg = '{{ __('lang.google_signin_failed') }}';

    if (error.code === 'auth/account-exists-with-different-credential') {
      msg = '{{ __('lang.email_already_registered') }}';
    } else if (error.code === 'auth/popup-closed-by-user') {
      msg = '{{ __('lang.google_popup_closed') }}';
    }

    showMessage(msg, 'danger');
  }
}

function waitForGoogleScript() {
  if (typeof google !== 'undefined' && google.accounts && google.accounts.id) {
    initGoogleButton();
  } else {
    setTimeout(waitForGoogleScript, 200); // retry every 200ms
  }
}

waitForGoogleScript();
function getMaskedPhoneNumber(fullNumber) {
    if (!fullNumber || fullNumber.length < 8) return fullNumber;      
    
    const countryCode = fullNumber.startsWith('+') ? fullNumber.substring(0, fullNumber.indexOf(fullNumber.match(/\d/)[0]) + 2) : '+';
    const phoneDigits = fullNumber.replace(/\D/g, '');
    
    if (phoneDigits.length <= 6) return fullNumber;
    
    const visibleStart = phoneDigits.slice(0, 2);
    const visibleEnd   = phoneDigits.slice(-4);
    const masked       = '*'.repeat(phoneDigits.length - 6);
    
    return countryCode + visibleStart + masked + visibleEnd;
}
function isRecaptchaVerified() {
  if (!window.recaptchaVerified) {
    showMessage('{{ __('lang.please_complete_recaptcha') }}', 'warning');
    return false;
  }
  
  // Double-check with grecaptcha if available
  if (window.recaptchaWidgetId !== undefined && typeof grecaptcha !== 'undefined') {
    const recaptchaResponse = grecaptcha.getResponse(window.recaptchaWidgetId);
    if (!recaptchaResponse) {
      window.recaptchaVerified = false;
      showMessage('{{ __('lang.please_complete_recaptcha') }}', 'warning');
      return false;
    }
  }
  
  return true;
}
function updateRecaptchaStatus() {
  if (window.recaptchaVerified) {
    $('#recaptcha-container').removeClass('border-danger').addClass('border-success');
  } else {
    $('#recaptcha-container').removeClass('border-success').addClass('border-danger');
  }
}
</script>
@endsection