<div class="container py-5 d-flex justify-content-center">
  <div class="card bstz-card">
    <div class="card-body p-3 position-relative">
      <label class="form-label small fw-semibold">Timezone</label>
      <input type="text" class="form-control" id="bstzInput" placeholder="Search city or UTC offset..." autocomplete="off">
      <div class="bstz-dropdown d-none" id="bstzDropdown"></div>
      <p class="small text-muted mt-2 mb-0" id="bstzSelected">No timezone selected.</p>
    </div>
  </div>
</div>

.bstz-card { width: 360px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bstz-dropdown {
  position: absolute; left: 12px; right: 12px; top: 68px; z-index: 5; max-height: 220px; overflow-y: auto;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 20px rgba(20,22,28,.08);
}
.bstz-item { display: flex; justify-content: space-between; padding: 8px 12px; font-size: 13px; cursor: pointer; }
.bstz-item:hover, .bstz-item-active { background: #f8f9fb; }
.bstz-offset { color: #9ca3af; font: 600 11.5px ui-monospace, monospace; }

const ZONES = [
  { city: 'San Francisco', offset: -8 }, { city: 'Denver', offset: -7 }, { city: 'Chicago', offset: -6 },
  { city: 'New York', offset: -5 }, { city: 'S\u00e3o Paulo', offset: -3 }, { city: 'London', offset: 0 },
  { city: 'Paris', offset: 1 }, { city: 'Cairo', offset: 2 }, { city: 'Nairobi', offset: 3 },
  { city: 'Dubai', offset: 4 }, { city: 'Mumbai', offset: 5.5 }, { city: 'Dhaka', offset: 6 },
  { city: 'Bangkok', offset: 7 }, { city: 'Singapore', offset: 8 }, { city: 'Tokyo', offset: 9 },
  { city: 'Sydney', offset: 10 }, { city: 'Auckland', offset: 12 },
];

function formatOffset(offset) {
  const sign = offset >= 0 ? '+' : '-';
  const abs = Math.abs(offset);
  const h = Math.floor(abs);
  const m = Math.round((abs - h) * 60);
  return 'UTC' + sign + String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0');
}

const input = document.getElementById('bstzInput');
const dropdown = document.getElementById('bstzDropdown');
const selected = document.getElementById('bstzSelected');
let activeIndex = -1;
let visible = [];

// Repaints the dropdown from the current visible/activeIndex state — never
// recomputes the filtered list itself, so keyboard navigation can move the
// highlight without accidentally re-filtering (and re-resetting the index).
function paint() {
  dropdown.innerHTML = visible.map((z, i) =>
    '<div class="bstz-item' + (i === activeIndex ? ' bstz-item-active' : '') + '" data-index="' + i + '">' +
    '<span>' + z.city + '</span><span class="bstz-offset">' + formatOffset(z.offset) + '</span></div>'
  ).join('') || '<div class="bstz-item text-muted">No matches</div>';
  dropdown.classList.remove('d-none');
}

// Recomputes the filtered list from the query and resets the highlight —
// only called when the actual search text changes, not on every keypress.
function search(query) {
  const q = query.trim().toLowerCase();
  visible = !q ? ZONES : ZONES.filter(z =>
    z.city.toLowerCase().includes(q) || formatOffset(z.offset).toLowerCase().includes(q)
  );
  activeIndex = visible.length ? 0 : -1;
  paint();
}

function choose(zone) {
  input.value = zone.city + ' (' + formatOffset(zone.offset) + ')';
  selected.textContent = 'Selected: ' + zone.city + ', ' + formatOffset(zone.offset) + '.';
  dropdown.classList.add('d-none');
}

input.addEventListener('focus', () => search(input.value));
input.addEventListener('input', () => search(input.value));

input.addEventListener('keydown', e => {
  if (e.key === 'ArrowDown') {
    e.preventDefault();
    activeIndex = Math.min(activeIndex + 1, visible.length - 1);
    paint();
  } else if (e.key === 'ArrowUp') {
    e.preventDefault();
    activeIndex = Math.max(activeIndex - 1, 0);
    paint();
  } else if (e.key === 'Enter' && visible[activeIndex]) {
    choose(visible[activeIndex]);
  }
});

dropdown.addEventListener('click', e => {
  const item = e.target.closest('.bstz-item');
  if (item && visible[Number(item.dataset.index)]) choose(visible[Number(item.dataset.index)]);
});

document.addEventListener('click', e => {
  if (!e.target.closest('.bstz-card')) dropdown.classList.add('d-none');
});