import Globe from 'globe.gl';
import { orphanages } from './data.js';

const globeEl = document.getElementById('globe');
const panelEl = document.getElementById('panel');
const resetBtn = document.getElementById('reset-view');
const hintEl = document.getElementById('hint');
const countryListEl = document.getElementById('country-list');

// ---- globe ---------------------------------------------------------------

const world = new Globe(globeEl, { animateIn: true })
  .backgroundColor('rgba(0,0,0,0)')
  .showAtmosphere(true)
  .atmosphereColor('#4ea8de')
  .atmosphereAltitude(0.18)
  .globeImageUrl('https://unpkg.com/three-globe/example/img/earth-night.jpg')
  .bumpImageUrl('https://unpkg.com/three-globe/example/img/earth-topology.png')
  .pointsData(orphanages)
  .pointLat(d => d.lat)
  .pointLng(d => d.lng)
  .pointAltitude(0.012)
  .pointRadius(0.55)
  .pointColor(d => '#d6a05c')
  .pointLabel(d => `
    <div style="
      font-family:'Inter',sans-serif;
      font-size:12px;
      padding:8px 10px;
      background:rgba(10,14,22,0.92);
      border:1px solid rgba(255,255,255,0.12);
      border-radius:8px;
      color:#f4ecd8;
      max-width:220px;
    ">
      <div style="color:#d6a05c;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px;">
        ${d.city} · ${d.country}
      </div>
      <div style="font-weight:600;">${d.name}</div>
      <div style="color:#8d9bb1;margin-top:4px;">~${d.children} children · founded ${d.founded}</div>
    </div>
  `)
  .onPointClick(d => selectOrphanage(d))
  .pointsMerge(false);

// customise controls (orbit-style damping + zoom limits)
const controls = world.controls();
controls.autoRotate = false;
controls.enableDamping = true;
controls.dampingFactor = 0.08;
controls.rotateSpeed = 0.6;
controls.zoomSpeed = 0.8;
controls.minDistance = 180;
controls.maxDistance = 700;

// sizing
function resize() {
  const w = globeEl.clientWidth;
  const h = globeEl.clientHeight;
  world.width(w).height(h);
}
resize();
window.addEventListener('resize', resize);

// default view (a nice angle that shows all 10)
world.pointOfView({ lat: 24, lng: 38, altitude: 2.4 }, 0);

resetBtn.addEventListener('click', () => {
  world.pointOfView({ lat: 24, lng: 38, altitude: 2.4 }, 900);
  renderEmpty();
});

// ---- panel rendering ------------------------------------------------------

function renderEmpty() {
  panelEl.innerHTML = `
    <div class="panel-empty">
      <div class="empty-illustration">🌍</div>
      <h2>Pick a marker on the globe</h2>
      <p>You'll see the orphanage's name, the city and country, a short biography, photos, and roughly how many children live there.</p>
      <ul class="country-list" id="country-list"></ul>
    </div>
  `;
  fillCountryList();
}

function fillCountryList() {
  const ul = document.getElementById('country-list');
  if (!ul) return;
  ul.innerHTML = orphanages
    .map(
      (o, i) =>
        `<li><span>${i + 1}. ${o.name}</span><span class="num">${o.children}</span></li>`
    )
    .join('');
}

function selectOrphanage(o) {
  // fly to the marker
  world.pointOfView({ lat: o.lat, lng: o.lng, altitude: 1.6 }, 900);

  panelEl.innerHTML = `
    <div class="card-head">
      <div>
        <div class="city">${o.city}</div>
        <h2>${o.name}</h2>
        <div class="country">${o.country}</div>
      </div>
      <div class="children-badge">
        <div class="num">${o.children}</div>
        <div class="label">Children</div>
      </div>
    </div>

    <div class="stats">
      <div class="stat"><div class="label">City</div><div class="value">${o.city}</div></div>
      <div class="stat"><div class="label">Country</div><div class="value">${o.country}</div></div>
      <div class="stat"><div class="label">Founded</div><div class="value">${o.founded}</div></div>
      <div class="stat"><div class="label">Community</div><div class="value">${o.religion}</div></div>
    </div>

    <p class="bio">${o.bio}</p>

    <div class="photos">
      ${o.photos
        .map(
          (url, i) =>
            `<div class="photo" data-url="${url}">
               <img src="${url}" alt="${o.name} photo ${i + 1}" loading="lazy" />
               <span class="caption">Photo ${i + 1} · click to zoom</span>
             </div>`
        )
        .join('')}
    </div>
  `;

  // photo lightbox
  panelEl.querySelectorAll('.photo').forEach(el => {
    el.addEventListener('click', () => openLightbox(el.dataset.url));
  });

  if (hintEl) hintEl.textContent = `Viewing · ${o.name}`;
}

function openLightbox(url) {
  const lb = document.createElement('div');
  lb.className = 'lightbox open';
  lb.innerHTML = `<img src="${url}" alt="Enlarged photo" />`;
  lb.addEventListener('click', () => lb.remove());
  document.body.appendChild(lb);
}

// initial empty panel
renderEmpty();

// dev-only debug helper, harmless in prod
window.__select = id => {
  const o = orphanages.find(x => x.id === id);
  if (o) selectOrphanage(o);
};