script.js

'use strict';

// prettier-ignore
const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

/* UTILITY FUNCTIONS */
function capitalizeWords(str) {
  return str
    .split(' ')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
    .join(' ');
}

function formatSpotType(str) {
  if (!str) return '';
  return str
    .split('-') // split on dashes
    .map(word => word.charAt(0).toUpperCase() + word.slice(1)) // capitalize each
    .join(' '); // rejoin with spaces
}

const formatDate = date => {
  return `${date.getDate()} ${monthNames[date.getMonth()].substring(
    0,
    3
  )} ${date.getFullYear()}`;
};

// prettier-ignore
function popupHTML(studySession) {
  // prettier-ignore
  const formatType = s =>
    s
      .split('-')
      .map(w => w[0].toUpperCase() + w.slice(1))
      .join(' ');
  // prettier-ignore
      const esc = s =>
    String(s ?? '').replace(
      /[&<>"']/g,
      m =>
        ({
          '&': '&amp;',
          '<': '&lt;',
          '>': '&gt;',
          '"': '&quot;',
          "'": '&#39;',
        }[m])
    );

  return `
    <div class="popup">
      <div class="popup__top">
        <span class="popup__badge popup__badge--${studySession.type}">${formatType(
    studySession.type
  )}</span>
        <span class="popup__date">
          ${formatDate(studySession.date)}
        </span>
      </div>
      <div class="popup__loc">
        <span>${esc(
          studySession.location ||
            `Near ${studySession.coords[0].toFixed(5)}, ${studySession.coords[1].toFixed(
              5
            )}`
        )}</span>
      </div>
    </div>`;
}

/**
 * Build the nicest possible location string from a geocoder response.
 * Works even when there is no street address (like lakes, forests, etc.).
 */
function prettyLocationFromGeo(data, lat, lng) {
  // --- inline utils ---
  const pick = (...vals) =>
    vals.find(v => typeof v === 'string' && v.trim())?.trim();

  const asText = v =>
    typeof v === 'string'
      ? v
      : v && typeof v === 'object' && typeof v.name === 'string'
      ? v.name
      : '';

  const titleCase = s =>
    s
      .split(/[\s-]+/)
      .map(w => w.charAt(0).toUpperCase() + w.slice(1))
      .join(' ');

  const latlngText = (lat, lng) => `${lat.toFixed(5)}, ${lng.toFixed(5)}`;

  // --- extract values safely ---
  const stnumber = pick(data.stnumber, data.standard?.stnumber);
  const staddress = pick(
    data.staddress,
    data.standard?.staddress,
    data.standard?.addresst
  );
  const city = pick(data.city, asText(data.standard?.city));
  const county = pick(data.county, asText(data.standard?.county));
  const region = pick(
    data.region,
    data.state,
    data.prov,
    asText(data.standard?.region),
    asText(data.standard?.state)
  );
  const country = pick(
    data.country,
    asText(data.standard?.countryname),
    asText(data.standard?.country)
  );
  const postal = pick(data.postal, data.standard?.postal);

  const poi = pick(
    asText(data.osmtags?.name),
    asText(data.standard?.addresst), // sometimes a feature name
    asText(data.alt?.loc?.title)
  );

  // --- choose the nicest fallback ---
  if (staddress && stnumber)
    return titleCase(
      `${stnumber} ${staddress}, ${pick(city, region, country) || ''}${
        postal ? ' ' + postal : ''
      }`.trim()
    );

  if (staddress)
    return titleCase(
      `${staddress}, ${pick(city, region, country) || ''}`.trim()
    );

  if (poi && (city || region || country))
    return titleCase(`${poi}, ${pick(city, region, country)}`);

  if (city && (region || country))
    return titleCase(`${city}, ${pick(region, country)}`);

  if (region && country) return titleCase(`${region}, ${country}`);

  if (country) return titleCase(country);

  return `Near ${latlngText(lat, lng)}`;
}

class StudySession {
  date = new Date();
  id = (Date.now() + '').slice(-10);

  constructor(coords) {
    this.coords = coords;
  }

  async setLocation(coords) {
    const [lat, lng] = coords;
    const apiKey = '225012544721267652909x73918';

    try {
      const res = await fetch(
        `https://geocode.xyz/${lat},${lng}?geoit=json&auth=${apiKey}`
      );
      const data = await res.json();
      this.location = prettyLocationFromGeo(data, lat, lng); // <-- single path
      if (!this.location)
        this.location = `Near ${lat.toFixed(5)}, ${lng.toFixed(5)}`;
    } catch {
      this.location = `Near ${lat.toFixed(5)}, ${lng.toFixed(5)}`;
    }
  }
}

// StudySpot DOM hooks
const form = document.querySelector('.form');
const inputType = document.querySelector('.form__input--type');
const inputNoiseLevel = document.querySelector('.form__input--noise');
const inputFocusLevel = document.querySelector('.form__input--focus');
const inputPowerOutlet = document.querySelector('.form__input--outlet');
const inputFoodAllowed = document.querySelector('.form__input--food');
const inputRating = document.querySelectorAll('.stars input[name="rating"]');
const inputNotes = document.querySelector('.form__input--notes');
const spots = document.querySelector('.spots');
const noCardsMessage = document.querySelector('.no-cards');
const spotCard = document.querySelector('.spot-card');

class App {
  #map;
  #mapZoomLevel = 13;
  #mapEvent;
  #studySessions = [];

  constructor() {
    // Get user's positions
    this._getPosition();

    // Get data from local storage
    this._getLocalStorage();

    // Attach event handlers
    form.addEventListener('submit', this._newStudySession.bind(this));
    spots.addEventListener('click', this._moveToPopup.bind(this));
  }

  _getPosition() {
    if (navigator.geolocation)
      navigator.geolocation.getCurrentPosition(
        this._loadMap.bind(this),
        function () {
          alert('Could not get your position !');
        }
      );
  }

  _loadMap(position) {
    const { latitude } = position.coords;
    const { longitude } = position.coords;
    console.log(`https://www.google.pt/maps/@${latitude},${longitude}`);
    const coords = [latitude, longitude];

    this.#map = L.map('map').setView(coords, this.#mapZoomLevel);
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution:
        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(this.#map);

    // Handling clicks on map
    this.#map.on('click', this._clickMapEffect.bind(this));

    this.#studySessions.forEach(studySession => {
      this._renderStudySessionMarker(studySession);
    });
  }

  _clickMapEffect(mapE) {
    this.#mapEvent = mapE;
    // Showing Form
    form.classList.remove('hidden');
    inputType.focus();
  }

  async _newStudySession(e) {
    e.preventDefault();

    // Require a map click first
    if (!this.#mapEvent) {
      alert('Click on the map to pick a spot first.');
      return;
    }

    // Helper validators
    const validNums = (...vals) => vals.every(v => Number.isFinite(v));
    const allPositive = (...vals) => vals.every(v => v >= 0);

    // Coordinates from last map click
    const { lat, lng } = this.#mapEvent.latlng;

    // Read form values
    const type = inputType.value;
    const noise = +inputNoiseLevel.value;
    const focus = +inputFocusLevel.value; // 0–100 expected
    const outlet = +inputPowerOutlet.value;
    const foodIsAllowed = inputFoodAllowed.checked;
    const ratingEl = document.querySelector(
      '.stars input[name="rating"]:checked'
    );
    const rating = ratingEl ? +ratingEl.value : null; // 1–5 or null
    const notes = inputNotes.value.trim();

    // Validate numeric fields
    if (!validNums(noise, focus, outlet) || !allPositive(noise, focus, outlet))
      return alert('Inputs have to be positive numbers !');

    // Create & store session
    const studySession = new StudySession([lat, lng]);

    studySession.type = type;
    studySession.noise = noise;
    studySession.focus = focus;
    studySession.outlet = outlet;
    studySession.foodIsAllowed = foodIsAllowed;
    studySession.rating = rating;
    studySession.notes = notes;

    // wait for reverse geocode BEFORE rendering
    await studySession.setLocation([lat, lng]);

    this.#studySessions.push(studySession);

    // Render Study Session on map as a marker
    this._renderStudySessionMarker(studySession);

    // Render Study Session as a card
    this._renderStudySessionCard(studySession);

    // Clear the form
    inputType.value = '';
    inputNoiseLevel.value = '';
    inputFocusLevel.value = '';
    inputPowerOutlet.value = '';
    inputFoodAllowed.checked = false;
    document.querySelectorAll('.stars input[name="rating"]').forEach(r => {
      r.checked = false;
    });
    inputNotes.value = '';

    // Set Local Storagr to all Study Sessions
    this._setLocalStorage();
  }

  _renderStudySessionMarker(studySession) {
    L.marker(studySession.coords)
      .addTo(this.#map)
      .bindPopup(
        L.popup({
          maxWidth: 260,
          minWidth: 180,
          autoClose: false,
          closeOnClick: false,
          className: `${studySession.type}-popup`, // keeps your colored left border
        })
      )
      .setPopupContent(popupHTML(studySession))
      .openPopup();
  }

  _renderStudySessionCard(studySession) {
    noCardsMessage.textContent = '';

    let html = `<article class="spot-card is-${
      studySession.type
    }" data-id="${String(studySession.id)}">
        <div class="spot-card__media">
          <img
            src="./images/${studySession.type}.jpg"
            alt="Study spot preview"
          />
        </div>

        <div class="spot-card__body">
          <!-- badge + meta -->
          <div class="spot-card__top">
            <span class="spot-card__badge" data-type="${
              studySession.type
            }">${formatSpotType(studySession.type)}</span>
            <span class="spot-card__meta">Added ${formatDate(
              studySession.date
            )} </span>
          </div>

          <!-- title (location) -->
          <h3 class="spot-card__title">${studySession.location}</h3>

          <!-- note -->
          <p class="spot-card__note">
            ${studySession.notes}
          </p>

          <!-- 2×2 specs -->
          <ul class="spot-card__specs">
            <li class="spec">
              <span class="spec__icon" aria-hidden="true">
                <!-- noise icon -->
                <svg viewBox="0 0 24 24">
                  <path
                    d="M4 10v4h3l4 4V6L7 10H4zm9.5 2a3.5 3.5 0 0 0-1.5-2.9v5.8A3.5 3.5 0 0 0 13.5 12zm3 0c0-2.7-1.5-5-3.5-6.2v2c1 1 1.5 2.4 1.5 4.2s-.5 3.2-1.5 4.2v2c2-1.2 3.5-3.5 3.5-6.2z"
                  />
                </svg>
              </span>
              <span class="spec__label">Noise</span>
              <span class="spec__value">${studySession.noise} / 10</span>
            </li>

            <li class="spec">
              <span class="spec__icon" aria-hidden="true">
                <!-- focus icon -->
                <svg viewBox="0 0 24 24">
                  <path
                    d="M12 7a5 5 0 1 0 5 5h2a7 7 0 1 1-7-7v2zm1-5h-2v6h2V2z"
                  />
                </svg>
              </span>
              <span class="spec__label">Focus</span>
              <span class="spec__value">${studySession.focus}%</span>
            </li>

            <li class="spec">
              <span class="spec__icon" aria-hidden="true">
                <!-- outlets icon -->
                <svg viewBox="0 0 24 24">
                  <path
                    d="M7 2h10a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3zm2 4v6h2V6H9zm4 0v6h2V6h-2zm-2 10v2h4v-2h-4z"
                  />
                </svg>
              </span>
              <span class="spec__label">Outlets</span>
              <span class="spec__value">${studySession.outlet} / 10</span>
            </li>

            <li class="spec">
              <span class="spec__icon" aria-hidden="true">
                <!-- food icon -->
                <svg viewBox="0 0 24 24">
                  <path
                    d="M7 2v11a3 3 0 0 0 6 0V2h-2v6H9V2H7zm9 4h2v14h-2V6z"
                  />
                </svg>
              </span>
              <span class="spec__label">Food/Drinks</span>
              <span class="spec__value">${
                studySession.foodIsAllowed ? 'Allowed' : 'Restricted'
              } </span>
            </li>
          </ul>

          <!-- rating -->
          <div class="spot-card__footer">
            <div class="rating" aria-label="Rating:${
              studySession.rating
            } out of 5">
              <span class="rating__stars" data-value="${
                studySession.rating
              }">★★★★★</span>
              <span class="rating__value">${studySession.rating}.0</span>
            </div>
          </div>
        </div>
      </article>`;

    spots.insertAdjacentHTML('beforeend', html);
  }

  _moveToPopup(e) {
    const cardEl = e.target.closest('.spot-card');
    if (!cardEl) return;

    const targetId = cardEl.getAttribute('data-id')?.trim();

    const studySession = this.#studySessions.find(
      s => String(s.id) === targetId
    );

    this.#map.setView(studySession.coords, this.#mapZoomLevel, {
      animate: true,
      pan: {
        duration: 1,
      },
    });
  }

  _setLocalStorage() {
    localStorage.setItem('studySessions', JSON.stringify(this.#studySessions));
  }

  _getLocalStorage() {
    const data = localStorage.getItem('studySessions');
    if (!data) return;

    this.#studySessions = JSON.parse(data).map(obj => {
      // restore Date + prototype
      const session = Object.assign(new StudySession(obj.coords), obj);
      session.date = new Date(obj.date); // rehydrate date string to Date
      return session;
    });

    this.#studySessions.forEach(studySession => {
      this._renderStudySessionCard(studySession);
    });
  }

  reset() {
    localStorage.removeItem('studySessions');
    location.reload();
  }
}

const app = new App();