/**
 * QR Code Destination Page JavaScript - Enhanced with Multiple Check-ins Support
 * Handles staff check-in functionality with GPS location support, language switching, and 30-minute interval validation
 */

// Global variables (PRESERVED FROM ORIGINAL)
let isSubmitting = false;
let currentTime = new Date();

// Location tracking variables (PRESERVED FROM ORIGINAL)
let userLocation = {
  latitude: null,
  longitude: null,
  accuracy: null,
  altitude: null,
  timestamp: null,
  source: "manual",
  address: null,
};
let locationRequestActive = false;
let locationWatchId = null;

// BILINGUAL FUNCTIONALITY (PRESERVED FROM ORIGINAL)
let currentLanguage = 'en';
const translations = {
  en: {
    languageText: 'EN',
    statusMessages: {
      processing: 'Processing check-in...',
      success: 'Check-in successful!',
      error: 'Check-in failed. Please try again.',
      duplicate: 'You have already checked in today.',
      tooSoon: 'Please wait before checking in again.',
      multipleSuccess: 'Submitted successfully!',
      invalidId: 'Please enter a valid Employee ID.',
      locationError: 'Unable to get location data.',
      networkError: 'Network error. Please check your connection.'
    }
  },
  es: {
    languageText: 'ES',
    statusMessages: {
      processing: 'Procesando registro...',
      success: '¡Registro exitoso!',
      error: 'Error en el registro. Por favor intente de nuevo.',
      duplicate: 'Ya se ha registrado hoy.',
      tooSoon: 'Por favor espere antes de registrarse nuevamente.',
      multipleSuccess: 'Submitted successful!!',
      invalidId: 'Por favor ingrese un ID de empleado válido.',
      locationError: 'No se pudo obtener datos de ubicación.',
      networkError: 'Error de red. Verifique su conexión.'
    }
  }
};

// DOM Content Loaded Event (PRESERVED FROM ORIGINAL)
document.addEventListener("DOMContentLoaded", function() {
  console.log("🎯 QR Destination page loaded");
  
  // Initialize language functionality
  initializeLanguage();
  
  // Initialize form handling
  initializeForm();
  
  // Initialize location services
  initializeLocation();
  
  // Start real-time clock
  startClock();
  
  // Add fade-in animation to elements
  setTimeout(() => {
    document.querySelectorAll('.fade-transition').forEach(el => {
      el.classList.add('active');
    });
  }, 100);
});

// ENHANCED FORM HANDLING FOR MULTIPLE CHECK-INS
function initializeForm() {
  const form = document.getElementById("checkinForm");
  const submitButton = document.getElementById("submitCheckin");
  
  if (form && submitButton) {
    form.addEventListener("submit", handleFormSubmit);
    
    // Add real-time Employee ID validation
    const employeeIdInput = document.getElementById("employee_id");
    if (employeeIdInput) {
      employeeIdInput.addEventListener("input", validateEmployeeId);
      employeeIdInput.addEventListener("keypress", function(e) {
        if (e.key === 'Enter') {
          e.preventDefault();
          handleFormSubmit(e);
        }
      });
    }
  }
}

function handleFormSubmit(event) {
  event.preventDefault();
  
  if (isSubmitting) {
    console.log("⏳ Check-in already in progress, ignoring duplicate submission");
    return;
  }
  
  console.log("🎯 Form submission triggered");
  
  const employeeId = document.getElementById("employee_id")?.value?.trim();
  
  if (!employeeId) {
    showLocalizedStatusMessage('invalidId', 'error');
    return;
  }
  
  if (employeeId.length < 2) {
    showLocalizedStatusMessage('invalidId', 'error');
    return;
  }
  
  // Show processing status
  showLocalizedStatusMessage('processing', 'info');
  
  // Submit the check-in
  submitCheckin();
}

// ENHANCED CHECK-IN SUBMISSION WITH MULTIPLE CHECK-IN SUPPORT
function submitCheckin() {
  console.log("🚀 Starting check-in submission process");
  
  if (isSubmitting) {
    console.log("⏳ Already submitting, aborting");
    return;
  }
  
  isSubmitting = true;
  updateSubmitButton(true);
  
  const employeeId = document.getElementById("employee_id").value.trim();
  
  if (!employeeId) {
    showLocalizedStatusMessage('invalidId', 'error');
    isSubmitting = false;
    updateSubmitButton(false);
    return;
  }
  
  console.log(`👤 Employee ID: ${employeeId}`);
  console.log(`📍 User location:`, userLocation);
  
  // Prepare form data
  const formData = new FormData();
  formData.append("employee_id", employeeId);
  formData.append("latitude", userLocation.latitude ? userLocation.latitude.toFixed(8) : "");
  formData.append("longitude", userLocation.longitude ? userLocation.longitude.toFixed(8) : "");
  formData.append("accuracy", userLocation.accuracy || "");
  formData.append("altitude", userLocation.altitude || "");
  formData.append("location_source", userLocation.source || "manual");
  formData.append("address", userLocation.address || "");

  const currentUrl = window.location.pathname;
  const checkinUrl = `${currentUrl}/checkin`;

  console.log("🎯 Submitting to URL:", checkinUrl);

  fetch(checkinUrl, {
    method: "POST",
    body: formData,
    headers: {
      "X-Requested-With": "XMLHttpRequest",
    },
  })
    .then((response) => {
      console.log("📡 Server response status:", response.status);
      return response.json();
    })
    .then((data) => {
      console.log("📊 Server response data:", data);
      handleCheckinResponse(data);
    })
    .catch((error) => {
      console.error("❌ Check-in error:", error);
      handleCheckinError(error);
    })
    .finally(() => {
      isSubmitting = false;
      updateSubmitButton(false);
    });
}

// ENHANCED RESPONSE HANDLING FOR MULTIPLE CHECK-INS
function handleCheckinResponse(data) {
  if (data.success) {
    handleCheckinSuccess(data);
  } else {
    const errorMsg = data.message || 'Submission failed';
    console.log("❌ Submission failed:", errorMsg);
    
    // NEW: Handle different types of check-in failures
    if (errorMsg.toLowerCase().includes('already submitted')) {
      showLocalizedStatusMessage('duplicate', 'warning');
    } else if (errorMsg.toLowerCase().includes('submit again in') || errorMsg.toLowerCase().includes('minutes')) {
      // Handle 30-minute interval message
      showCustomStatusMessage(errorMsg, 'warning');
    } else {
      showLocalizedStatusMessage('error', 'error');
    }
  }
}

// ENHANCED SUCCESS HANDLING WITH MULTIPLE CHECK-IN INFO
function handleCheckinSuccess(data) {
  console.log("✅ Submitted successful!");
  
  const responseData = data.data || data || {};
  const checkinCount = responseData.checkin_count_today || 1;
  const checkinSequence = responseData.checkin_sequence || 'Check-in';
  
  // Show appropriate success message based on check-in count
  if (checkinCount > 1) {
    showLocalizedStatusMessage('multipleSuccess', 'success');
  } else {
    showLocalizedStatusMessage('success', 'success');
  }
  
  // Hide form (PRESERVED FROM ORIGINAL)
  const form = document.getElementById("checkinForm");
  if (form) {
    form.style.display = "none";
  }

  // Update success card with enhanced information
  const successCard = document.getElementById("successCard");
  if (successCard) {
    successCard.style.display = "block";
    successCard.classList.add('active');

    const updateElement = (id, value) => {
      const el = document.getElementById(id);
      if (el) {
        el.textContent = value || "N/A";
      }
    };

    const employeeId = responseData.employee_id || "Unknown";
    const location = responseData.location || "Unknown Location";
    const event = responseData.event || responseData.location_event || "Check-in";
    const checkInTime = responseData.check_in_time || new Date().toLocaleTimeString();
    const checkInDate = responseData.check_in_date || new Date().toLocaleDateString();

    updateElement("successEmployeeId", employeeId);
    updateElement("successLocation", location);
    updateElement("successEvent", event);
    updateElement("successCheckInTime", checkInTime);
    updateElement("successCheckInDate", checkInDate);
    
    // NEW: Add check-in sequence information
    updateElement("successCheckinSequence", checkinSequence);
    
    // Update additional info if available
    if (responseData.device_info) {
      updateElement("successDeviceInfo", responseData.device_info);
    }
    
    if (responseData.coordinates) {
      updateElement("successCoordinates", responseData.coordinates);
    }
    
    if (responseData.address) {
      updateElement("successAddress", responseData.address);
    }
    
    if (responseData.location_accuracy) {
      updateElement("successLocationAccuracy", `${responseData.location_accuracy} miles`);
    }
  }

  // NEW: Add option to check in again after success
  //setTimeout(() => {
  //  addCheckInAgainOption();
  //}, 3000);
}

// NEW: Add option to check in again
function addCheckInAgainOption() {
  const successCard = document.getElementById("successCard");
  if (successCard && !document.getElementById("checkInAgainButton")) {
    const checkInAgainHtml = `
      <div class="check-in-again-section" style="margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e0e4e7;">
        <p class="check-in-again-text" style="margin-bottom: 1rem; color: #64748b; font-size: 0.9rem;">
          <span data-en="Need to check in again? You can do so after 30 minutes." 
                data-es="¿Necesita registrarse nuevamente? Puede hacerlo después de 30 minutos.">
            Need to check in again? You can do so after 30 minutes.
          </span>
        </p>
        <button id="checkInAgainButton" class="btn btn-outline" style="width: 100%;" onclick="resetForNewCheckin()">
          <i class="fas fa-redo"></i>
          <span data-en="Check In Again" data-es="Registrarse Nuevamente">Check In Again</span>
        </button>
      </div>
    `;
    successCard.insertAdjacentHTML('beforeend', checkInAgainHtml);
    
    // Apply current language translations
    applyTranslations();
  }
}

// NEW: Reset form for new check-in
function resetForNewCheckin() {
  console.log("🔄 Resetting for new check-in");
  
  // Show form again
  const form = document.getElementById("checkinForm");
  if (form) {
    form.style.display = "block";
  }
  
  // Hide success card
  const successCard = document.getElementById("successCard");
  if (successCard) {
    successCard.style.display = "none";
    successCard.classList.remove('active');
  }
  
  // Clear previous employee ID
  const employeeIdInput = document.getElementById("employee_id");
  if (employeeIdInput) {
    employeeIdInput.value = '';
    employeeIdInput.focus();
  }
  
  // Clear status messages
  clearStatusMessages();
  
  // Reset location if needed
  if (!userLocation.latitude || !userLocation.longitude) {
    requestLocationData();
  }
}

// NEW: Show custom status message (for interval warnings)
function showCustomStatusMessage(message, type = 'info') {
  const statusContainer = document.getElementById("statusMessage");
  if (statusContainer) {
    statusContainer.className = `status-message ${type}`;
    statusContainer.innerHTML = `
      <div class="status-content">
        <i class="fas ${getStatusIcon(type)}"></i>
        <span>${message}</span>
      </div>
    `;
    statusContainer.style.display = "block";
    
    // Auto-hide after 5 seconds
    setTimeout(() => {
      statusContainer.style.display = "none";
    }, 5000);
  }
}

// Helper function to get appropriate icon for status type
function getStatusIcon(type) {
  switch (type) {
    case 'success': return 'fa-check-circle';
    case 'error': return 'fa-exclamation-circle';
    case 'warning': return 'fa-clock';
    case 'info': 
    default: return 'fa-info-circle';
  }
}

// PRESERVED: All other existing functions remain unchanged
function showLocalizedStatusMessage(messageKey, type = 'info') {
  const message = translations[currentLanguage].statusMessages[messageKey] || 
                 translations['en'].statusMessages[messageKey] || 
                 'Status update';
  
  showCustomStatusMessage(message, type);
}

function clearStatusMessages() {
  const statusContainer = document.getElementById("statusMessage");
  if (statusContainer) {
    statusContainer.style.display = "none";
  }
}

function handleCheckinError(error) {
  console.error("❌ Check-in submission error:", error);
  showLocalizedStatusMessage('networkError', 'error');
}

function updateSubmitButton(isLoading) {
  const submitButton = document.getElementById("submitCheckin");
  if (submitButton) {
    if (isLoading) {
      submitButton.disabled = true;
      submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> <span data-en="Processing..." data-es="Procesando...">Processing...</span>';
    } else {
      submitButton.disabled = false;
      submitButton.innerHTML = '<i class="fas fa-user-check"></i> <span data-en="Submit" data-es="Someter">Submit</span>';
    }
    applyTranslations();
  }
}

function validateEmployeeId() {
  const employeeIdInput = document.getElementById("employee_id");
  const submitButton = document.getElementById("submitCheckin");
  
  if (employeeIdInput && submitButton) {
    const isValid = employeeIdInput.value.trim().length >= 2;
    submitButton.disabled = !isValid || isSubmitting;
    
    if (isValid) {
      employeeIdInput.classList.remove('invalid');
      employeeIdInput.classList.add('valid');
    } else {
      employeeIdInput.classList.remove('valid');
      if (employeeIdInput.value.length > 0) {
        employeeIdInput.classList.add('invalid');
      }
    }
  }
}

// All location and language functions remain unchanged from original
function initializeLocation() {
  console.log("📍 Initializing location services");
  requestLocationData();
}

function requestLocationData() {
  if (locationRequestActive) {
    console.log("📍 Location request already active, skipping");
    return;
  }
  
  if (!navigator.geolocation) {
    console.log("❌ Geolocation not supported");
    userLocation.source = "manual";
    return;
  }
  
  locationRequestActive = true;
  console.log("📍 Requesting location data...");
  
  const options = {
    enableHighAccuracy: true,
    timeout: 10000,
    maximumAge: 300000
  };
  
  navigator.geolocation.getCurrentPosition(
    handleLocationSuccess,
    handleLocationError,
    options
  );
}

function handleLocationSuccess(position) {
  console.log("✅ Location obtained successfully");
  
  userLocation = {
    latitude: position.coords.latitude,
    longitude: position.coords.longitude,
    accuracy: position.coords.accuracy,
    altitude: position.coords.altitude,
    timestamp: new Date(),
    source: "gps",
    address: null
  };
  
  console.log("📍 Location data:", userLocation);
  
  // Reverse geocode to get address
  reverseGeocode(userLocation.latitude, userLocation.longitude);
  
  locationRequestActive = false;
}

function handleLocationError(error) {
  console.log("❌ Location error:", error.message);
  userLocation.source = "manual";
  locationRequestActive = false;
}

function reverseGeocode(lat, lng) {
  // This would typically use a geocoding service
  // For now, just set a placeholder
  userLocation.address = `${lat.toFixed(10)}, ${lng.toFixed(10)}`;
}

// Language functionality remains unchanged
function initializeLanguage() {
  const languageToggle = document.getElementById('languageToggle');
  if (languageToggle) {
    languageToggle.addEventListener('click', toggleLanguage);
  }
  applyTranslations();
}

function toggleLanguage() {
  currentLanguage = currentLanguage === 'en' ? 'es' : 'en';
  applyTranslations();
  console.log(`🌐 Language switched to: ${currentLanguage}`);
}

function applyTranslations() {
  const languageText = document.getElementById('languageText');
  if (languageText) {
    languageText.textContent = translations[currentLanguage].languageText;
  }
  
  document.querySelectorAll(`[data-${currentLanguage}]`).forEach(element => {
    element.textContent = element.getAttribute(`data-${currentLanguage}`);
  });
}

function startClock() {
  function updateClock() {
    currentTime = new Date();
    const timeElements = document.querySelectorAll('.current-time');
    timeElements.forEach(el => {
      el.textContent = currentTime.toLocaleTimeString();
    });
  }
  
  updateClock();
  setInterval(updateClock, 1000);
}