/* Mobile JavaScript for Seismo Fleet Manager */
/* Handles hamburger menu, modals, offline sync, and mobile interactions */

// ===== GLOBAL STATE =====
let currentUnitData = null;
let isOnline = navigator.onLine;

// ===== HAMBURGER MENU TOGGLE =====
function toggleMenu() {
  const sidebar = document.getElementById('sidebar');
  const backdrop = document.getElementById('backdrop');
  const hamburgerBtn = document.getElementById('hamburgerBtn');

  if (sidebar && backdrop) {
    const isOpen = sidebar.classList.contains('open');

    if (isOpen) {
      // Close menu
      sidebar.classList.remove('open');
      backdrop.classList.remove('show');
      hamburgerBtn?.classList.remove('menu-open');
      document.body.style.overflow = '';
      document.body.classList.remove('menu-open');
    } else {
      // Open menu
      sidebar.classList.add('open');
      backdrop.classList.add('show');
      hamburgerBtn?.classList.add('menu-open');
      document.body.style.overflow = 'hidden';
      document.body.classList.add('menu-open');
    }
  }
}

// Close menu when clicking backdrop
function closeMenuFromBackdrop() {
  const sidebar = document.getElementById('sidebar');
  const backdrop = document.getElementById('backdrop');
  const hamburgerBtn = document.getElementById('hamburgerBtn');

  if (sidebar && backdrop) {
    sidebar.classList.remove('open');
    backdrop.classList.remove('show');
    hamburgerBtn?.classList.remove('menu-open');
    document.body.style.overflow = '';
    document.body.classList.remove('menu-open');
  }
}

// Close menu when window is resized to desktop
function handleResize() {
  if (window.innerWidth >= 768) {
    const sidebar = document.getElementById('sidebar');
    const backdrop = document.getElementById('backdrop');
    const hamburgerBtn = document.getElementById('hamburgerBtn');

    if (sidebar && backdrop) {
      sidebar.classList.remove('open');
      backdrop.classList.remove('show');
      hamburgerBtn?.classList.remove('menu-open');
      document.body.style.overflow = '';
      document.body.classList.remove('menu-open');
    }
  }
}

// ===== UNIT DETAIL MODAL =====
function openUnitModal(unitId, status = null, age = null) {
  const modal = document.getElementById('unitModal');
  if (!modal) return;

  // Store the status info passed from the card
  // Accept status if it's a non-empty string, use age if provided or default to '--'
  const cardStatusInfo = (status && status !== '') ? {
    status: status,
    age: age || '--'
  } : null;

  console.log('openUnitModal:', { unitId, status, age, cardStatusInfo });

  // Fetch unit data and populate modal
  fetchUnitDetails(unitId).then(unit => {
    if (unit) {
      currentUnitData = unit;
      // Pass the card status info to the populate function
      populateUnitModal(unit, cardStatusInfo);
      modal.classList.add('show');
      document.body.style.overflow = 'hidden';
    }
  });
}

function closeUnitModal(event) {
  // Only close if clicking backdrop or close button
  if (event && event.target.closest('.unit-modal-content') && !event.target.closest('[data-close-modal]')) {
    return;
  }

  const modal = document.getElementById('unitModal');
  if (modal) {
    modal.classList.remove('show');
    document.body.style.overflow = '';
    currentUnitData = null;
  }
}

async function fetchUnitDetails(unitId) {
  try {
    // Try to fetch from network first
    const response = await fetch(`/api/roster/${unitId}`);
    if (response.ok) {
      const unit = await response.json();

      // Save to IndexedDB if offline support is available
      if (window.offlineDB) {
        await window.offlineDB.saveUnit(unit);
      }

      return unit;
    }
  } catch (error) {
    console.log('Network fetch failed, trying offline storage:', error);

    // Fall back to offline storage
    if (window.offlineDB) {
      return await window.offlineDB.getUnit(unitId);
    }
  }

  return null;
}

function populateUnitModal(unit, cardStatusInfo = null) {
  // Set unit ID in header
  const modalUnitId = document.getElementById('modalUnitId');
  if (modalUnitId) {
    modalUnitId.textContent = unit.id;
  }

  // Populate modal content
  const modalContent = document.getElementById('modalContent');
  if (!modalContent) return;

  // Use status from card if provided, otherwise get from snapshot or derive from unit
  let statusInfo = cardStatusInfo || getUnitStatus(unit.id, unit);
  console.log('populateUnitModal:', { unit, cardStatusInfo, statusInfo });

  const statusColor = statusInfo.status === 'OK' ? 'green' :
                      statusInfo.status === 'Pending' ? 'yellow' :
                      statusInfo.status === 'Missing' ? 'red' : 'gray';

  const statusTextColor = statusInfo.status === 'OK' ? 'text-green-600 dark:text-green-400' :
                          statusInfo.status === 'Pending' ? 'text-yellow-600 dark:text-yellow-400' :
                          statusInfo.status === 'Missing' ? 'text-red-600 dark:text-red-400' :
                          'text-gray-600 dark:text-gray-400';

  // Determine status label (show "Benched" instead of "Unknown" for non-deployed units)
  let statusLabel = statusInfo.status;
  if ((statusInfo.status === 'Unknown' || statusInfo.status === 'N/A') && !unit.deployed) {
    statusLabel = 'Benched';
  }

  // Create navigation URL for location
  const createNavUrl = (address, coordinates) => {
    if (address) {
      // Use address for navigation
      const encodedAddress = encodeURIComponent(address);
      // Universal link that works on iOS and Android
      return `https://www.google.com/maps/search/?api=1&query=${encodedAddress}`;
    } else if (coordinates) {
      // Use coordinates for navigation (format: lat,lon)
      const encodedCoords = encodeURIComponent(coordinates);
      return `https://www.google.com/maps/search/?api=1&query=${encodedCoords}`;
    }
    return null;
  };

  const navUrl = createNavUrl(unit.address, unit.coordinates);

  modalContent.innerHTML = `
    <!-- Status Section -->
    <div class="flex items-center justify-between pb-4 border-b border-gray-200 dark:border-gray-700">
      <div class="flex items-center gap-2">
        <span class="w-4 h-4 rounded-full bg-${statusColor}-500"></span>
        <span class="font-semibold ${statusTextColor}">${statusLabel}</span>
      </div>
      <span class="text-sm text-gray-500">${statusInfo.age || '--'}</span>
    </div>

    <!-- Device Info -->
    <div class="space-y-3">
      <div>
        <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Device Type</label>
        <p class="mt-1 text-gray-900 dark:text-white">${unit.device_type || '--'}</p>
      </div>

      ${unit.unit_type ? `
      <div>
        <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Unit Type</label>
        <p class="mt-1 text-gray-900 dark:text-white">${unit.unit_type}</p>
      </div>
      ` : ''}

      ${unit.project_id ? `
      <div>
        <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Project ID</label>
        <p class="mt-1 text-gray-900 dark:text-white">${unit.project_id}</p>
      </div>
      ` : ''}

      ${unit.address ? `
      <div>
        <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Address</label>
        ${navUrl ? `
        <a href="${navUrl}" target="_blank" class="mt-1 flex items-center gap-2 text-seismo-orange hover:text-orange-600 dark:text-seismo-orange dark:hover:text-orange-400">
          <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
          </svg>
          <span class="underline">${unit.address}</span>
        </a>
        ` : `
        <p class="mt-1 text-gray-900 dark:text-white">${unit.address}</p>
        `}
      </div>
      ` : ''}

      ${unit.coordinates && !unit.address ? `
      <div>
        <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Coordinates</label>
        ${navUrl ? `
        <a href="${navUrl}" target="_blank" class="mt-1 flex items-center gap-2 text-seismo-orange hover:text-orange-600 dark:text-seismo-orange dark:hover:text-orange-400">
          <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
          </svg>
          <span class="font-mono text-sm underline">${unit.coordinates}</span>
        </a>
        ` : `
        <p class="mt-1 text-gray-900 dark:text-white font-mono text-sm">${unit.coordinates}</p>
        `}
      </div>
      ` : ''}

      <!-- Seismograph-specific fields -->
      ${unit.device_type === 'seismograph' ? `
        ${unit.last_calibrated ? `
        <div>
          <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Last Calibrated</label>
          <p class="mt-1 text-gray-900 dark:text-white">${unit.last_calibrated}</p>
        </div>
        ` : ''}

        ${unit.next_calibration_due ? `
        <div>
          <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Next Calibration Due</label>
          <p class="mt-1 text-gray-900 dark:text-white">${unit.next_calibration_due}</p>
        </div>
        ` : ''}

        ${unit.deployed_with_modem_id ? `
        <div>
          <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Deployed With Modem</label>
          <p class="mt-1 text-gray-900 dark:text-white">${unit.deployed_with_modem_id}</p>
        </div>
        ` : ''}
      ` : ''}

      <!-- Modem-specific fields -->
      ${unit.device_type === 'modem' ? `
        ${unit.ip_address ? `
        <div>
          <label class="text-xs font-medium text-gray-500 dark:text-gray-400">IP Address</label>
          <p class="mt-1 text-gray-900 dark:text-white">${unit.ip_address}</p>
        </div>
        ` : ''}

        ${unit.phone_number ? `
        <div>
          <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Phone Number</label>
          <p class="mt-1 text-gray-900 dark:text-white">${unit.phone_number}</p>
        </div>
        ` : ''}

        ${unit.hardware_model ? `
        <div>
          <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Hardware Model</label>
          <p class="mt-1 text-gray-900 dark:text-white">${unit.hardware_model}</p>
        </div>
        ` : ''}
      ` : ''}

      ${unit.note ? `
      <div>
        <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Notes</label>
        <p class="mt-1 text-gray-900 dark:text-white whitespace-pre-wrap">${unit.note}</p>
      </div>
      ` : ''}

      <div class="grid grid-cols-2 gap-3 pt-2">
        <div>
          <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Deployed</label>
          <p class="mt-1 text-gray-900 dark:text-white">${unit.deployed ? 'Yes' : 'No'}</p>
        </div>
        <div>
          <label class="text-xs font-medium text-gray-500 dark:text-gray-400">Retired</label>
          <p class="mt-1 text-gray-900 dark:text-white">${unit.retired ? 'Yes' : 'No'}</p>
        </div>
      </div>
    </div>
  `;

  // Update action buttons
  const editBtn = document.getElementById('modalEditBtn');
  const deployBtn = document.getElementById('modalDeployBtn');
  const deleteBtn = document.getElementById('modalDeleteBtn');

  if (editBtn) {
    editBtn.onclick = () => {
      window.location.href = `/unit/${unit.id}`;
    };
  }

  if (deployBtn) {
    deployBtn.textContent = unit.deployed ? 'Bench Unit' : 'Deploy Unit';
    deployBtn.onclick = () => toggleDeployStatus(unit.id, !unit.deployed);
  }

  if (deleteBtn) {
    deleteBtn.onclick = () => deleteUnit(unit.id);
  }
}

function getUnitStatus(unitId, unit = null) {
  // Prefer roster table data if it was rendered with the current view
  if (window.rosterStatusMap && window.rosterStatusMap[unitId]) {
    return window.rosterStatusMap[unitId];
  }

  // Try to get status from dashboard snapshot if it exists
  if (window.lastStatusSnapshot && window.lastStatusSnapshot.units && window.lastStatusSnapshot.units[unitId]) {
    const unitStatus = window.lastStatusSnapshot.units[unitId];
    return {
      status: unitStatus.status,
      age: unitStatus.age,
      last: unitStatus.last
    };
  }

  // Fallback: if unit data is provided, derive status from deployment state
  if (unit) {
    if (unit.deployed) {
      // For deployed units without status data, default to "Unknown"
      return { status: 'Unknown', age: '--', last: '--' };
    } else {
      // For benched units, use "N/A" which will be displayed as "Benched"
      return { status: 'N/A', age: '--', last: '--' };
    }
  }

  return { status: 'Unknown', age: '--', last: '--' };
}

async function toggleDeployStatus(unitId, deployed) {
  try {
    const formData = new FormData();
    formData.append('deployed', deployed ? 'true' : 'false');

    const response = await fetch(`/api/roster/edit/${unitId}`, {
      method: 'POST',
      body: formData
    });

    if (response.ok) {
      showToast('✓ Unit updated successfully');
      closeUnitModal();

      // Trigger HTMX refresh if on roster page
      const rosterTable = document.querySelector('[hx-get*="roster"]');
      if (rosterTable) {
        htmx.trigger(rosterTable, 'refresh');
      }
    } else {
      showToast('❌ Failed to update unit', 'error');
    }
  } catch (error) {
    console.error('Error toggling deploy status:', error);
    showToast('❌ Failed to update unit', 'error');
  }
}

async function deleteUnit(unitId) {
  if (!confirm(`Are you sure you want to delete unit ${unitId}?\n\nThis action cannot be undone!`)) {
    return;
  }

  try {
    const response = await fetch(`/api/roster/${unitId}`, {
      method: 'DELETE'
    });

    if (response.ok) {
      showToast('✓ Unit deleted successfully');
      closeUnitModal();

      // Refresh roster page if present
      const rosterTable = document.querySelector('[hx-get*="roster"]');
      if (rosterTable) {
        htmx.trigger(rosterTable, 'refresh');
      }
    } else {
      showToast('❌ Failed to delete unit', 'error');
    }
  } catch (error) {
    console.error('Error deleting unit:', error);
    showToast('❌ Failed to delete unit', 'error');
  }
}

// ===== ONLINE/OFFLINE STATUS =====
function updateOnlineStatus() {
  isOnline = navigator.onLine;
  const offlineIndicator = document.getElementById('offlineIndicator');

  if (offlineIndicator) {
    if (isOnline) {
      offlineIndicator.classList.remove('show');
      // Trigger sync when coming back online
      if (window.offlineDB) {
        syncPendingEdits();
      }
    } else {
      offlineIndicator.classList.add('show');
    }
  }
}

window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);

// ===== SYNC FUNCTIONALITY =====
async function syncPendingEdits() {
  if (!window.offlineDB) return;

  try {
    const pendingEdits = await window.offlineDB.getPendingEdits();

    if (pendingEdits.length === 0) return;

    console.log(`Syncing ${pendingEdits.length} pending edits...`);

    for (const edit of pendingEdits) {
      try {
        const formData = new FormData();
        for (const [key, value] of Object.entries(edit.changes)) {
          formData.append(key, value);
        }

        const response = await fetch(`/api/roster/edit/${edit.unitId}`, {
          method: 'POST',
          body: formData
        });

        if (response.ok) {
          await window.offlineDB.clearEdit(edit.id);
          console.log(`Synced edit ${edit.id} for unit ${edit.unitId}`);
        } else {
          console.error(`Failed to sync edit ${edit.id}`);
        }
      } catch (error) {
        console.error(`Error syncing edit ${edit.id}:`, error);
        // Keep in queue for next sync attempt
      }
    }

    // Show success toast
    showToast('✓ Synced successfully');

  } catch (error) {
    console.error('Error in syncPendingEdits:', error);
  }
}

// Manual sync button
function manualSync() {
  if (!isOnline) {
    showToast('⚠️ Cannot sync while offline', 'warning');
    return;
  }

  syncPendingEdits();
}

// ===== TOAST NOTIFICATIONS =====
function showToast(message, type = 'success') {
  const toast = document.getElementById('syncToast');
  if (!toast) return;

  // Update toast appearance based on type
  toast.classList.remove('bg-green-500', 'bg-red-500', 'bg-yellow-500');

  if (type === 'success') {
    toast.classList.add('bg-green-500');
  } else if (type === 'error') {
    toast.classList.add('bg-red-500');
  } else if (type === 'warning') {
    toast.classList.add('bg-yellow-500');
  }

  toast.textContent = message;
  toast.classList.add('show');

  // Auto-hide after 3 seconds
  setTimeout(() => {
    toast.classList.remove('show');
  }, 3000);
}

// ===== BOTTOM NAV ACTIVE STATE =====
function updateBottomNavActiveState() {
  const currentPath = window.location.pathname;
  const navButtons = document.querySelectorAll('.bottom-nav-btn');

  navButtons.forEach(btn => {
    const href = btn.getAttribute('data-href');
    if (href && (currentPath === href || (href !== '/' && currentPath.startsWith(href)))) {
      btn.classList.add('active');
    } else {
      btn.classList.remove('active');
    }
  });
}

// ===== INITIALIZATION =====
document.addEventListener('DOMContentLoaded', () => {
  // Initialize online/offline status
  updateOnlineStatus();

  // Update bottom nav active state
  updateBottomNavActiveState();

  // Add resize listener
  window.addEventListener('resize', handleResize);

  // Close menu on navigation (for mobile)
  document.addEventListener('click', (e) => {
    const link = e.target.closest('a');
    if (link && link.closest('#sidebar')) {
      // Delay to allow navigation to start
      setTimeout(() => {
        if (window.innerWidth < 768) {
          closeMenuFromBackdrop();
        }
      }, 100);
    }
  });

  // Prevent scroll when modals are open (iOS fix)
  document.addEventListener('touchmove', (e) => {
    const modal = document.querySelector('.unit-modal.show, #sidebar.open');
    if (modal && !e.target.closest('.unit-modal-content, #sidebar')) {
      e.preventDefault();
    }
  }, { passive: false });

  console.log('Mobile.js initialized');
});

// ===== SERVICE WORKER REGISTRATION =====
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('Service Worker registered:', registration);

      // Check for updates periodically
      setInterval(() => {
        registration.update();
      }, 60 * 60 * 1000); // Check every hour
    })
    .catch(error => {
      console.error('Service Worker registration failed:', error);
    });

  // Listen for service worker updates
  navigator.serviceWorker.addEventListener('controllerchange', () => {
    console.log('Service Worker updated, reloading page...');
    window.location.reload();
  });
}

// Export functions for global use
window.toggleMenu = toggleMenu;
window.closeMenuFromBackdrop = closeMenuFromBackdrop;
window.openUnitModal = openUnitModal;
window.closeUnitModal = closeUnitModal;
window.manualSync = manualSync;
window.showToast = showToast;
