script.js

const API_BASE = 'https://bustimes.org/api';

const $ = id => document.getElementById(id);
const typeSearch = $('type-search');
const typeDropdown = $('type-dropdown');
const selectedType = $('selected-type');
const resultsEl = $('results');
const loadingEl = $('loading');
const errorEl = $('error');
const opFilter = $('op-filter');
const regionSelect = $('region-select');
const filterCard = $('filter-card');

let vehicleTypes = [];
let selectedTypes = new Map(); // id -> name
let allVehicles = [];
let filteredVehicles = [];
let regionOps = null;

async function fetchPaginated(url) {
  const results = [];
  while (url) {
    const r = await fetch(url);
    if (!r.ok) throw new Error(`API error: ${r.status}`);
    const d = await r.json();
    results.push(...d.results);
    url = d.next;
  }
  return results;
}

async function loadVehicleTypes() {
  try {
    vehicleTypes = await fetchPaginated(`${API_BASE}/vehicletypes/`);
  } catch (e) {
    showError('Failed to load vehicle types: ' + e.message);
  }
}

function renderDropdown(filter = '') {
  const items = vehicleTypes.filter(t =>
    t.name.toLowerCase().includes(filter.toLowerCase())
  );
  if (!items.length) {
    typeDropdown.innerHTML = '<div class="dropdown-item" style="color:#888">No matches</div>';
  } else {
    typeDropdown.innerHTML = items.map(t => {
      const checked = selectedTypes.has(t.id);
      return `<div class="dropdown-item${checked ? ' selected' : ''}" data-id="${t.id}" data-name="${t.name.replace(/"/g,'&quot;')}">
        <span class="check">${checked ? '✓' : ''}</span>
        <span class="dropdown-item-text">${t.name}
        <span class="meta">${t.fuel}${t.double_decker ? ' • double-decker' : ''}${t.coach ? ' • coach' : ''}${t.electric ? ' • electric' : ''}</span></span>
      </div>`;
    }).join('');
  }
  typeDropdown.classList.add('open');
}

function renderSelectedChips() {
  if (selectedTypes.size === 0) {
    selectedType.innerHTML = '';
    return;
  }
  selectedType.innerHTML = Array.from(selectedTypes.entries()).map(([id, name]) =>
    `<span class="type-chip" data-id="${id}">${name}<button type="button" class="chip-remove" data-id="${id}" aria-label="Remove ${name}">×</button></span>`
  ).join('');
}

function toggleType(id, name) {
  if (selectedTypes.has(id)) {
    selectedTypes.delete(id);
  } else {
    selectedTypes.set(id, name);
  }
  renderSelectedChips();
  renderDropdown(typeSearch.value);
  regionSelect.value = '';
  opFilter.value = '';
  regionOps = null;
  if (selectedTypes.size === 0) {
    filterCard.style.display = 'none';
    resultsEl.innerHTML = `<div class="panel empty-state">
      <span class="empty-glyph"><svg viewBox="0 0 24 24" width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="1.6"/><path d="M20 20L16.5 16.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></span>
      <p>Nothing to show yet — search for a vehicle type above to get started.</p>
    </div>`;
    return;
  }
  loadVehiclesForTypes(Array.from(selectedTypes.keys()));
}

typeSearch.addEventListener('focus', () => {
  if (vehicleTypes.length) renderDropdown(typeSearch.value);
});

typeSearch.addEventListener('input', () => {
  if (vehicleTypes.length) renderDropdown(typeSearch.value);
});

typeSearch.addEventListener('blur', () => {
  setTimeout(() => typeDropdown.classList.remove('open'), 200);
});

typeDropdown.addEventListener('click', e => {
  const item = e.target.closest('.dropdown-item');
  if (!item) return;
  const id = parseInt(item.dataset.id);
  const name = item.dataset.name;
  toggleType(id, name);
  typeSearch.value = '';
  typeSearch.focus();
});

selectedType.addEventListener('click', e => {
  const btn = e.target.closest('.chip-remove');
  if (!btn) return;
  const id = parseInt(btn.dataset.id);
  const name = selectedTypes.get(id);
  toggleType(id, name);
});

async function loadOperatorsForRegion(region) {
  if (!region) { regionOps = null; return; }
  const ops = await fetchPaginated(`${API_BASE}/operators/?region=${region}`);
  regionOps = new Set(ops.map(o => o.noc));
}

function applyFilters() {
  if (!allVehicles.length) return;
  let v = allVehicles;
  if (regionOps) v = v.filter(veh => regionOps.has(veh.operator?.id));
  filteredVehicles = v;
  renderResults();
}

async function loadVehiclesForTypes(typeIds) {
  loadingEl.style.display = 'flex';
  errorEl.style.display = 'none';
  resultsEl.innerHTML = '';
  filterCard.style.display = 'none';
  allVehicles = [];
  filteredVehicles = [];

  try {
    const results = await Promise.all(
      typeIds.map(id => fetchPaginated(`${API_BASE}/vehicles/?vehicle_type=${id}&withdrawn=false`))
    );
    const seen = new Set();
    allVehicles = [];
    for (const list of results) {
      for (const v of list) {
        if (seen.has(v.id)) continue;
        seen.add(v.id);
        allVehicles.push(v);
      }
    }
    filteredVehicles = [...allVehicles];
    loadingEl.style.display = 'none';
    if (allVehicles.length === 0) {
      resultsEl.innerHTML = '<div class="card"><p style="color:#888">No vehicles found for the selected type(s)</p></div>';
      return;
    }
    filterCard.style.display = 'block';
    renderResults();
  } catch (e) {
    loadingEl.style.display = 'none';
    showError('Failed to load vehicles: ' + e.message);
  }
}

function groupByOperator(vehicles) {
  const map = new Map();
  for (const v of vehicles) {
    const op = v.operator || { id: 'unknown', name: 'Unknown Operator', slug: '' };
    if (!map.has(op.id)) map.set(op.id, { operator: op, vehicles: [] });
    map.get(op.id).vehicles.push(v);
  }
  return Array.from(map.values()).sort((a, b) => b.vehicles.length - a.vehicles.length);
}

function renderResults() {
  const groups = groupByOperator(filteredVehicles);
  const total = filteredVehicles.length;
  const opFilterText = opFilter.value.toLowerCase().trim();

  const names = Array.from(selectedTypes.values());
  const heading = names.length <= 2 ? names.join(' + ') : `${names.length} vehicle types`;

  let html = `<div class="card">
    <div class="results-header">
      <h2>${heading}</h2>
      <span class="status-bar">${total} vehicle${total !== 1 ? 's' : ''} found</span>
    </div>`;

  let visibleCount = 0;

  if (groups.length === 0) {
    html += '<p style="color:#888">No vehicles match the current filter</p>';
  } else {
    for (const g of groups) {
      const op = g.operator;
      const count = g.vehicles.length;
      const opName = op.name || op.id;
      const matchesFilter = !opFilterText || opName.toLowerCase().includes(opFilterText);
      if (matchesFilter) visibleCount++;
      const display = matchesFilter ? '' : ' style="display:none"';
      const safeId = String(op.id).replace(/[^a-zA-Z0-9_-]/g, '_');

      html += `<div class="operator-group"${display} data-op="${op.id}">
        <div class="operator-header" onclick="toggleVehicles('${safeId}')">
          <span><span class="toggle-icon">▶</span><span class="operator-name">${opName}</span></span>
          <span class="operator-count">${count}</span>
        </div>
        <div class="vehicle-list" id="vl-${safeId}">`;

      for (const v of g.vehicles) {
        const reg = v.reg || '—';
        const fleet = v.fleet_code ? `${v.fleet_code}` : '';
        const garage = v.garage ? v.garage.name : '';
        const notes = v.notes || '';
        const slug = v.slug || '';
        const livery = v.livery;
        const liveryLeft = livery?.left || '';
        const liveryName = livery?.name || '';

        html += `<div class="vehicle-item">
          <span class="reg">${reg}</span>
          ${fleet ? `<span class="fleet">${fleet}</span>` : ''}
          ${garage ? `<span class="garage">• ${garage}</span>` : ''}
          ${notes ? `<span class="notes">${notes}</span>` : ''}
          ${liveryLeft ? `<span class="livery-swatch" style="background:${liveryLeft}" title="${liveryName}"></span>` : ''}
          ${slug ? `<a class="view-link" href="https://bustimes.org/vehicles/${slug}" target="_blank" rel="noopener">View</a>` : ''}
        </div>`;
      }

      html += `</div></div>`;
    }
  }

  if (groups.length > 0 && visibleCount === 0) {
    html += '<p style="color:#888;padding-top:10px">No operators match the current filter</p>';
  }

  html += '</div>';
  resultsEl.innerHTML = html;

  const firstOp = document.querySelector('.operator-group .vehicle-list');
  if (firstOp) {
    firstOp.classList.add('open');
    const icon = firstOp.closest('.operator-group').querySelector('.toggle-icon');
    if (icon) icon.textContent = '▼';
  }
}

function toggleVehicles(safeId) {
  const list = document.getElementById(`vl-${safeId}`);
  if (!list) return;
  const isOpen = list.classList.toggle('open');
  const header = list.closest('.operator-group').querySelector('.toggle-icon');
  if (header) header.textContent = isOpen ? '▼' : '▶';
}

function showError(msg) {
  errorEl.textContent = msg;
  errorEl.style.display = 'block';
}

opFilter.addEventListener('input', () => {
  renderResults();
});

regionSelect.addEventListener('change', async () => {
  const region = regionSelect.value;
  if (!allVehicles.length) return;
  loadingEl.style.display = 'flex';
  try {
    await loadOperatorsForRegion(region);
    applyFilters();
  } catch (e) {
    showError('Failed to load operators: ' + e.message);
  }
  loadingEl.style.display = 'none';
});

loadVehicleTypes();