// Hostapd Web UI JavaScript
// Handles API communication and dynamic UI updates

const API_BASE_URL = '/api/v1/sta';
const REFRESH_INTERVAL = 2000;
const DETAILS_REFRESH_INTERVAL =
    1000; // Refresh selected station details more frequently

let isRefreshing = false;
let selectedStation = null;
let detailsRefreshInterval = null;

// DOM Elements
const stationTableBody = document.getElementById('station-tbody');
const errorMessage = document.getElementById('error-message');
const lastUpdate = document.getElementById('last-update');
const detailsPanel = document.getElementById('station-details-panel');
const detailsContent = document.getElementById('station-details-content');

// Initialize the application
document.addEventListener('DOMContentLoaded', function() {
  // Load initial data
  refreshStations();

  setInterval(refreshStations, REFRESH_INTERVAL);
});

// Refresh station data
async function refreshStations() {
  if (isRefreshing)
    return; // Prevent concurrent refreshes

  isRefreshing = true;

  try {
    // Fetch station list
    const stations = await fetchStations();

    if (stations.length === 0) {
      showNoStations();
    } else {
      // Fetch details for each station and populate table
      await populateStationTable(stations);
    }

    // Update last refresh time
    lastUpdate.textContent = `Last update: ${new Date().toLocaleTimeString()}`;

    // Hide any previous error messages
    hideError();

  } catch (error) {
    console.error('Error refreshing stations:', error);
    showError(
        'Failed to load station data. Please check if the API is running.');
  } finally {
    isRefreshing = false;
  }
}

// Fetch list of connected stations
async function fetchStations() {
  const response = await fetch(`${API_BASE_URL}/list`);

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  return await response.json();
}

// Populate table with station data
async function populateStationTable(stations) {
  // Process each station concurrently
  const stationPromises = stations.map(async (mac) => {
    try {
      const details = await fetchStationDetails(mac);
      return {mac, details, error : null};
    } catch (error) {
      return {mac, details : null, error : error.message};
    }
  });

  const stationResults = await Promise.all(stationPromises);

  const rows = [];
  // Add rows to table
  stationResults.forEach(({mac, details, error}) => {
    const row = document.createElement('tr');
    row.dataset.mac = mac; // Store MAC address for selection

    if (error) {
      row.innerHTML = `
                <td>${mac}</td>
                <td colspan="6" class="error">Error: ${error}</td>
            `;
    } else {
      // Calculate total bytes
      const rxBytes = parseInt(details.rx_bytes) || 0;
      const txBytes = parseInt(details.tx_bytes) || 0;

      // Determine signal strength category
      const signal = parseInt(details.signal) || 0;
      let signalClass = 'status-established';
      if (signal < -80)
        signalClass = 'status-new';
      else if (signal < -60)
        signalClass = 'status-medium';

      row.innerHTML = `
                <td><span class="${
          getConnectionStatusClass(details.connected_time)}">${mac}</span></td>
                <td><span class="${signalClass}">${signal} dBm</span></td>
                <td>${formatDataRate(details.rx_rate_info)}/${
          formatDataRate(details.tx_rate_info)}</td>
                <td>${formatBytes(rxBytes)}/${formatBytes(txBytes)}</td>
            `;
    }

    // Add click handler for station selection
    row.addEventListener('click', () => selectStation(mac, details, error));

    // Highlight selected station
    if (mac === selectedStation) {
      row.classList.add('selected');
    }

    rows.push(row);
  });
  stationTableBody.replaceChildren(...rows);
}

// Fetch details for a specific station
async function fetchStationDetails(mac) {
  const response = await fetch(`${API_BASE_URL}/details/${mac}`);

  if (!response.ok) {
    if (response.status === 404) {
      throw new Error('Station not found');
    } else if (response.status === 400) {
      throw new Error('Invalid MAC address');
    } else {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
  }

  return await response.json();
}

// Show message when no stations are connected
function showNoStations() {
  stationTableBody.innerHTML = `
        <tr>
            <td colspan="7" class="loading">No stations connected</td>
        </tr>
    `;
}

// Show error message
function showError(message) {
  errorMessage.querySelector('p').textContent = message;
  errorMessage.classList.remove('hidden');
}

// Hide error message
function hideError() { errorMessage.classList.add('hidden'); }

// Format data rate (assuming it's in Mbps or similar)
function formatDataRate(rateStr) {
  if (!rateStr)
    return 'N/A';

  const rate = parseInt(rateStr);
  if (isNaN(rate))
    return rateStr;

  // Convert to Mbps if it seems to be in a different unit
  if (rate > 1000) {
    return `${(rate / 1000).toFixed(1)} Mbps`;
  }
  return `${rate} Mbps`;
}

// Format bytes to human readable format
function formatBytes(bytes) {
  if (bytes === 0)
    return '0 B';
  if (!bytes)
    return 'N/A';

  const k = 1024;
  const sizes = [ 'B', 'KB', 'MB', 'GB' ];
  const i = Math.floor(Math.log(bytes) / Math.log(k));

  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

// Get CSS class for connection status
function getConnectionStatusClass(connectedTimeStr) {
  if (!connectedTimeStr)
    return 'status-established';

  const seconds = parseInt(connectedTimeStr);
  if (isNaN(seconds))
    return 'status-established';

  if (seconds < 60)
    return 'status-new';
  else if (seconds < 300)
    return 'status-medium';
  else
    return 'status-established';
}

// Select a station and show its details
function selectStation(mac, details, error) {
  // Update selected station
  selectedStation = mac;

  // Highlight selected row
  const rows = stationTableBody.querySelectorAll('tr');
  rows.forEach(row => {
    if (row.dataset.mac === mac) {
      row.classList.add('selected');
    } else {
      row.classList.remove('selected');
    }
  });

  // Show details panel
  if (error) {
    showStationDetailsError(mac, error);
  } else {
    showStationDetails(mac, details);
  }

  // Start continuous details refresh
  startDetailsRefresh(mac);
}

// Friendly names mapping for known fields
const FIELD_FRIENDLY_NAMES = {
  '80211RSNAStatsSTAAddress' : 'RSNA Stats STA Address',
  '80211RSNAStatsSelectedPairwiseCipher' : 'RSNA Selected Pairwise Cipher',
  '80211RSNAStatsTKIPLocalMICFailures' : 'RSNA TKIP Local MIC Failures',
  '80211RSNAStatsTKIPRemoteMICFailures' : 'RSNA TKIP Remote MIC Failures',
  '80211RSNAStatsVersion' : 'RSNA Stats Version',
  'AKMSuiteSelector' : 'AKM Suite Selector',
  'aid' : 'Association ID',
  'auth_alg' : 'Authentication Algorithm',
  'auth_failures' : 'Authentication Failures',
  'authenticated' : 'Authenticated',
  'authorized' : 'Authorized',
  'capability' : 'Capability',
  'channel_width' : 'Channel Width',
  'connected_time' : 'Connected Time',
  'dot11RSNAStatsSTAAddress' : 'Dot11 RSNA Stats STA Address',
  'dot11RSNAStatsSelectedPairwiseCipher' :
      'Dot11 RSNA Selected Pairwise Cipher',
  'dot11RSNAStatsTKIPLocalMICFailures' : 'Dot11 RSNA TKIP Local MIC Failures',
  'dot11RSNAStatsTKIPRemoteMICFailures' : 'Dot11 RSNA TKIP Remote MIC Failures',
  'dot11RSNAStatsVersion' : 'Dot11 RSNA Stats Version',
  'ext_capab' : 'Extended Capabilities',
  'flags' : 'Flags',
  'hostapdMFPR' : 'Hostapd MFPR',
  'hostapdWPAPTKGroupState' : 'Hostapd WPA PTK Group State',
  'hostapdWPAPTKState' : 'Hostapd WPA PTK State',
  'ht_caps_info' : 'HT Capabilities Info',
  'ht_operation' : 'HT Operation',
  'inactive_msec' : 'Inactive Time (ms)',
  'listen_interval' : 'Listen Interval',
  'max_amsdu_length' : 'Max AMSDU Length',
  'noise' : 'Noise Level',
  'num_ps_buf_frames' : 'Number of PS Buffer Frames',
  'ps_buf_frames_freed' : 'PS Buffer Frames Freed',
  'ps_buffering' : 'Power Save Buffering',
  'rx_bitrate' : 'RX Bitrate',
  'rx_bytes' : 'RX Bytes',
  'rx_packets' : 'RX Packets',
  'rx_rate_info' : 'RX Rate Info',
  'short_preamble' : 'Short Preamble',
  'signal' : 'Signal Strength',
  'snr' : 'Signal-to-Noise Ratio',
  'supp_channels' : 'Supported Channels',
  'supp_op_classes' : 'Supported Operating Classes',
  'supported_rates' : 'Supported Rates',
  'timeout_next' : 'Next Timeout Action',
  'tx_ampdu_len' : 'TX AMPDU Length',
  'tx_ampdu_pkts' : 'TX AMPDU Packets',
  'tx_bitrate' : 'TX Bitrate',
  'tx_bytes' : 'TX Bytes',
  'tx_failed' : 'TX Failed',
  'tx_packets' : 'TX Packets',
  'tx_rate_info' : 'TX Rate Info',
  'vht_caps_info' : 'VHT Capabilities Info',
  'vht_operation' : 'VHT Operation',
  'wmm_ie' : 'WMM IE',
  'wpa' : 'WPA Version'
};

// Show station details in the details panel
function showStationDetails(mac, details) {
  // Build details HTML with all fields
  let detailsHTML = `
        <div class="detail-item">
            <div class="detail-label">MAC Address</div>
            <div class="detail-value mono">${mac}</div>
        </div>
    `;

  // Separate known important fields from others
  const importantFields = [
    'connected_time', 'signal', 'rx_packets', 'tx_packets', 'rx_bytes',
    'tx_bytes', 'rx_rate_info', 'tx_rate_info', 'flags', 'capability',
    'auth_alg'
  ];

  // Display important fields first
  importantFields.forEach(field => {
    if (details.hasOwnProperty(field)) {
      const friendlyName = FIELD_FRIENDLY_NAMES[field] || formatFieldName(field);
      const value = formatFieldValue(field, details[field]);
      const displayValue = value.toString();
      
      // Check if field name or value is too long for tooltip
      const needsTooltip = friendlyName.length > 25 || displayValue.length > 30;
      
      let labelHTML = friendlyName;
      if (friendlyName.length > 25) {
        labelHTML = `<span class="tooltip">${friendlyName.substring(0, 22)}...<span class="tooltiptext">${friendlyName}</span></span>`;
      }
      
      let valueHTML = displayValue;
      if (displayValue.length > 30) {
        valueHTML = `<span class="tooltip">${displayValue.substring(0, 27)}...<span class="tooltiptext">${displayValue}</span></span>`;
      }

      detailsHTML += `
        <div class="detail-item">
            <div class="detail-label">${labelHTML}</div>
            <div class="detail-value">${valueHTML}</div>
        </div>`;
    }
  });

  // Display all other fields
  const otherFields =
      Object.keys(details).filter(key => !importantFields.includes(key));
  if (otherFields.length > 0) {
    // Group fields alphabetically for better organization
    otherFields.sort().forEach(key => {
      const friendlyName = FIELD_FRIENDLY_NAMES[key] || formatFieldName(key);
      const value = formatFieldValue(key, details[key]);
      const displayValue = value.toString();
      
      // Check if field name or value is too long for tooltip
      const needsTooltip = friendlyName.length > 25 || displayValue.length > 30;
      
      let labelHTML = friendlyName;
      if (friendlyName.length > 25) {
        labelHTML = `<span class="tooltip">${friendlyName.substring(0, 22)}...<span class="tooltiptext">${friendlyName}</span></span>`;
      }
      
      let valueHTML = displayValue;
      if (displayValue.length > 30) {
        valueHTML = `<span class="tooltip">${displayValue.substring(0, 27)}...<span class="tooltiptext">${displayValue}</span></span>`;
      }

      detailsHTML += `
        <div class="detail-item">
            <div class="detail-label">${labelHTML}</div>
            <div class="detail-value">${valueHTML}</div>
        </div>`;
    });
  }

  detailsContent.innerHTML = detailsHTML;
}

// Format field names to be more readable
function formatFieldName(fieldName) {
  // Convert camelCase to Title Case
  let formatted = fieldName.replace(/([A-Z])/g, ' $1');
  // Replace underscores with spaces
  formatted = formatted.replace(/_/g, ' ');
  // Capitalize first letter
  formatted = formatted.charAt(0).toUpperCase() + formatted.slice(1);
  return formatted;
}

// Format field values based on their type
function formatFieldValue(fieldName, value) {
  if (value === undefined || value === null) {
    return 'N/A';
  }

  // Handle numeric fields
  if (fieldName.includes('bytes')) {
    const numValue = parseInt(value);
    return isNaN(numValue) ? value : formatBytes(numValue);
  }

  if (fieldName.includes('rate') && fieldName.includes('info')) {
    return formatDataRate(value);
  }

  if (fieldName.includes('time')) {
    const numValue = parseInt(value);
    return isNaN(numValue) ? value : formatConnectedTime(value);
  }

  if (fieldName.includes('signal') || fieldName.includes('noise') ||
      fieldName.includes('snr')) {
    const numValue = parseInt(value);
    return isNaN(numValue) ? value : `${numValue} dBm`;
  }

  // Handle flag-like fields
  if (typeof value === 'string' && (value === 'true' || value === 'false')) {
    return value.charAt(0).toUpperCase() + value.slice(1);
  }

  // Handle hex values
  if (typeof value === 'string' && value.match(/^[0-9a-fA-F\-]+$/)) {
    return value.toUpperCase();
  }

  return value.toString();
}

// Show error in details panel
function showStationDetailsError(mac, error) {
  detailsContent.innerHTML = `
        <div class="detail-item">
            <div class="detail-label">MAC Address</div>
            <div class="detail-value mono">${mac}</div>
        </div>
        <div class="detail-item">
            <div class="detail-label">Error</div>
            <div class="detail-value error">${error}</div>
        </div>
    `;
}

// Format connected time to human readable format
function formatConnectedTime(secondsStr) {
  if (!secondsStr)
    return 'Unknown';

  const seconds = parseInt(secondsStr);
  if (isNaN(seconds))
    return secondsStr;

  if (seconds < 60) {
    return `${seconds} seconds`;
  } else if (seconds < 3600) {
    const minutes = Math.floor(seconds / 60);
    return `${minutes} minute${minutes !== 1 ? 's' : ''}`;
  } else {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    return `${hours} hour${hours !== 1 ? 's' : ''} ${minutes} minute${
        minutes !== 1 ? 's' : ''}`;
  }
}

// Start continuous details refresh for selected station
function startDetailsRefresh(mac) {
  stopDetailsRefresh(); // Clear any existing interval

  detailsRefreshInterval = setInterval(async () => {
    if (selectedStation) {
      try {
        const details = await fetchStationDetails(selectedStation);
        showStationDetails(selectedStation, details);
      } catch (error) {
        showStationDetailsError(selectedStation, error.message);
      }
    }
  }, DETAILS_REFRESH_INTERVAL);
}

// Stop continuous details refresh
function stopDetailsRefresh() {
  if (detailsRefreshInterval) {
    clearInterval(detailsRefreshInterval);
    detailsRefreshInterval = null;
  }
}