{% extends "base.html" %} {% import "partials/icons.html" as icons %} {% block title %}Brewlog · Check In{% endblock %}

{% block head %}
<script>
function locateUser() {
  const root = document.getElementById('checkin-root');
  const emit = (name, detail) =>
    root.dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));

  if (!navigator.geolocation) {
    emit('location-error', { message: 'Geolocation not supported by your browser.' });
    return;
  }

  emit('location-start');

  navigator.geolocation.getCurrentPosition(
    (pos) => {
      emit('location-found', { lat: pos.coords.latitude, lng: pos.coords.longitude });
    },
    (err) => {
      if (err.code === 1) {
        emit('location-error', { message: 'Location access denied. Search by name instead.' });
      } else {
        emit('location-error', { message: 'Could not determine location. Search by name instead.' });
      }
    },
    { enableHighAccuracy: true, timeout: 15000 },
  );
}
</script>
{% endblock %}

{% block content %}
<section
  id="checkin-root"
  data-signals:_step="1"
  data-signals:_cafe-id="''"
  data-signals:_cafe-name="''"
  data-signals:_cafe-city="''"
  data-signals:_cafe-country="''"
  data-signals:_cafe-lat="0"
  data-signals:_cafe-lng="0"
  data-signals:_cafe-website="''"
  data-signals:_cafe-search="''"
  data-signals:_roast-id="''"
  data-signals:_roast-name="''"
  data-signals:_roaster-name="''"
  data-signals:_rating="0"
  data-signals:_error="''"
  data-signals:_submitting="false"
  data-signals:_locating="false"
  data-signals:_location-found="false"
  data-signals:_user-lat="0"
  data-signals:_user-lng="0"
  data-signals:_search-by-city="false"
  data-signals:_city-name="''"
  data-signals:_reviewing-cafe="false"
  data-signals:_scan-waiting="false"
  data-signals:_scan-success="''"
  data-on:location-found="$_locating = false; $_locationFound = true; $_userLat = evt.detail.lat; $_userLng = evt.detail.lng; @get('/api/v1/nearby-cafes?lat=' + evt.detail.lat + '&lng=' + evt.detail.lng + '&q=coffee', {responseOverrides: {selector: '#nearby-results', mode: 'replace'}})"
  data-on:location-error="$_locating = false; $_error = evt.detail.message"
  data-on:location-start="$_locating = true"
>
  <header class="flex flex-col gap-2">
    <h1 class="text-3xl font-semibold">Check In</h1>
    <p class="max-w-2xl text-sm text-stone-600">
      Record a cup of coffee at a cafe.
    </p>
  </header>

  <!-- Selected cafe summary (shown after selection) -->
  <div
    class="mt-4 rounded-lg border border-amber-300 bg-amber-100/80 px-4 py-3 shadow-sm flex items-center justify-between"
    data-show="$_cafeName && !$_reviewingCafe"
    style="display: none"
  >
    <div class="flex items-center gap-2">
      {% call icons::location("h-4 w-4 text-amber-600 shrink-0") %}
      <span class="font-medium text-amber-800" data-text="$_cafeName"></span>
      <span class="text-xs text-stone-500" data-show="$_cafeCity" data-text="$_cafeCity" style="display: none"></span>
    </div>
    <button
      type="button"
      data-on:click="$_cafeId = ''; $_cafeName = ''; $_step = 1"
      class="text-xs text-stone-500 hover:text-stone-700"
    >Change</button>
  </div>

  <!-- Selected roast summary (shown after selection) -->
  <div
    class="mt-2 rounded-lg border border-amber-300 bg-amber-100/80 px-4 py-3 shadow-sm flex items-center justify-between"
    data-show="$_roastName && $_step > 2"
    style="display: none"
  >
    <div class="flex items-center gap-2">
      {% call icons::bag("h-4 w-4 text-amber-600 shrink-0") %}
      <span class="font-medium text-amber-800" data-text="$_roastName"></span>
      <span class="text-xs text-stone-500" data-show="$_roasterName" data-text="$_roasterName" style="display: none"></span>
    </div>
    <button
      type="button"
      data-on:click="$_roastId = ''; $_roastName = ''; $_roasterName = ''; $_scanSuccess = ''; $_step = 2"
      class="text-xs text-stone-500 hover:text-stone-700"
    >Change</button>
  </div>

  <!-- Step indicators -->
  <div class="mt-4 flex gap-2 text-sm">
    <span
      class="rounded-full px-3 py-1 font-medium"
      data-class:bg-amber-600="$_step === 1"
      data-class:text-white="$_step === 1"
      data-class:bg-amber-200="$_step > 1"
      data-class:text-amber-800="$_step > 1"
    >1. Cafe</span>
    <span
      class="rounded-full px-3 py-1 font-medium"
      data-class:bg-amber-600="$_step === 2"
      data-class:text-white="$_step === 2"
      data-class:bg-amber-200="$_step > 2"
      data-class:text-amber-800="$_step > 2"
      data-class:bg-stone-200="$_step < 2"
      data-class:text-stone-500="$_step < 2"
    >2. Coffee</span>
    <span
      class="rounded-full px-3 py-1 font-medium"
      data-class:bg-amber-600="$_step === 3"
      data-class:text-white="$_step === 3"
      data-class:bg-stone-200="$_step < 3"
      data-class:text-stone-500="$_step < 3"
    >3. Rate</span>
  </div>

  <!-- Error display -->
  <p
    class="mt-3 text-sm text-red-600"
    data-show="$_error"
    style="display: none"
    data-text="$_error"
  ></p>

  <!-- Step 1: Cafe selection -->
  <div class="mt-4" data-show="$_step === 1" style="display: none">
    <div class="rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm">
      <div class="flex flex-wrap items-center gap-3 mb-4" data-show="!$_reviewingCafe">
        <button
          type="button"
          data-on:click="locateUser()"
          data-show="!$_searchByCity"
          class="inline-flex items-center gap-2 rounded-md border border-amber-500 px-4 py-2.5 text-sm font-medium text-amber-700 transition hover:bg-amber-50"
          data-attr:disabled="$_locating || $_locationFound"
        >
          {% call icons::location("h-4 w-4") %}
          <span data-text="$_locating ? 'Locating\u2026' : $_locationFound ? 'Location found' : 'Use My Location'">Use My Location</span>
        </button>
        <div data-show="!$_searchByCity && $_locating" style="display: none">
          {% call icons::spinner("h-5 w-5") %}
        </div>
        <input
          type="text"
          data-bind:_city-name
          data-show="$_searchByCity"
          style="display: none"
          class="input-field flex-1 min-w-[200px] text-sm"
          placeholder="City name&hellip;"
          data-on:input__debounce.350ms="$_cityName.length >= 2 && $_cafeSearch.length >= 2 && @get('/api/v1/nearby-cafes?near=' + encodeURIComponent($_cityName) + '&q=' + encodeURIComponent($_cafeSearch), {responseOverrides: {selector: '#nearby-results', mode: 'replace'}})"
        />
        <label class="flex items-center gap-1.5 text-xs text-stone-500 cursor-pointer select-none">
          <input type="checkbox" data-bind:_search-by-city class="accent-amber-600" />
          Search by city
        </label>
      </div>

      <input
        type="text"
        data-bind:_cafe-search
        data-show="!$_reviewingCafe"
        class="input-field w-full text-sm"
        placeholder="Search for a cafe&hellip;"
        data-on:input__debounce.350ms="if ($_searchByCity) { $_cityName.length >= 2 && $_cafeSearch.length >= 2 && @get('/api/v1/nearby-cafes?near=' + encodeURIComponent($_cityName) + '&q=' + encodeURIComponent($_cafeSearch), {responseOverrides: {selector: '#nearby-results', mode: 'replace'}}) } else { $_locationFound && @get('/api/v1/nearby-cafes?lat=' + $_userLat + '&lng=' + $_userLng + '&q=' + encodeURIComponent($_cafeSearch), {responseOverrides: {selector: '#nearby-results', mode: 'replace'}}) }"
      />

      <!-- Nearby results (replaced by server fragment) -->
      <div data-show="!$_reviewingCafe" id="nearby-results" class="hidden mt-3 max-h-60 overflow-y-auto rounded-lg border border-amber-200 bg-white"></div>

      <!-- Review form for new cafe from Foursquare -->
      <div
        class="mt-3 border-t border-amber-200 pt-4"
        data-show="$_reviewingCafe"
        style="display: none"
      >
        <h3 class="text-base font-semibold text-amber-700 mb-1">Confirm cafe details</h3>
        <p class="text-sm text-stone-600 mb-3">Review and edit the details before saving.</p>
        <div class="grid gap-4 sm:grid-cols-2">
          <label class="flex flex-col gap-1 text-sm">
            <span class="text-stone-700">Name *</span>
            <input type="text" data-bind:_cafe-name required class="input-field" />
          </label>
          <label class="flex flex-col gap-1 text-sm">
            <span class="text-stone-700">City</span>
            <input type="text" data-bind:_cafe-city class="input-field" />
          </label>
          <label class="flex flex-col gap-1 text-sm">
            <span class="text-stone-700">Country</span>
            <input type="text" data-bind:_cafe-country class="input-field" />
          </label>
          <label class="flex flex-col gap-1 text-sm">
            <span class="text-stone-700">Website</span>
            <input type="url" data-bind:_cafe-website class="input-field" placeholder="https://&hellip;" />
          </label>
        </div>
        <div class="mt-4 flex items-center justify-end gap-2">
          <button
            type="button"
            class="rounded-md border border-amber-300 px-4 py-2 text-sm font-semibold text-stone-700 transition hover:border-amber-400 hover:text-stone-800"
            data-on:click="$_reviewingCafe = false; $_cafeName = ''; $_cafeCity = ''; $_cafeCountry = ''; $_cafeLat = 0; $_cafeLng = 0; $_cafeWebsite = ''"
          >
            Cancel
          </button>
          <button
            type="button"
            class="rounded-md bg-amber-600 px-4 py-2 text-sm font-semibold text-amber-50 transition hover:bg-amber-500"
            data-on:click="$_reviewingCafe = false; $_step = 2"
          >
            Confirm
          </button>
        </div>
      </div>

      <!-- Saved cafes -->
      {% if !cafe_options.is_empty() %}
      <div class="mt-3 border-t border-amber-200 pt-3" data-show="!$_reviewingCafe">
        <p class="mb-2 text-xs text-stone-500">Or choose a saved cafe:</p>
        <select
          class="input-field w-full text-sm"
          data-on:change="if (el.value) { const opt = el.options[el.selectedIndex]; $_cafeId = el.value; $_cafeName = opt.dataset.name || ''; $_cafeCity = opt.dataset.city || ''; $_cafeCountry = ''; $_cafeLat = 0; $_cafeLng = 0; $_cafeWebsite = ''; $_step = 2 }"
        >
          <option value="">Select a cafe&hellip;</option>
          {% for cafe in cafe_options %}
          <option value="{{ cafe.id }}" data-name="{{ cafe.name }}" data-city="{{ cafe.city }}">{{ cafe.label }}</option>
          {% endfor %}
        </select>
      </div>
      {% endif %}
    </div>
  </div>

  <!-- Step 2: Roast identification -->
  <div class="mt-4" data-show="$_step === 2" style="display: none">
    <div class="rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm">
      <h3 class="text-base font-semibold text-amber-700 mb-3">What are you drinking?</h3>

      <div data-show="!$_scanWaiting && !$_scanSuccess" style="display: none" class="mb-4">
        <p class="text-sm text-stone-600 mb-3">Scan a bag to identify the coffee, or select from your existing roasts below.</p>

        <input type="file" id="checkin-photo" accept="image/*" capture="environment" class="hidden"
          onchange="if(this.files[0]){const r=new FileReader();r.onload=()=>{document.getElementById('checkin-image').value=r.result;document.getElementById('checkin-scan-form').requestSubmit()};r.readAsDataURL(this.files[0]);this.value=''}" />

        <div id="scan-submit-result"></div>

        <form id="checkin-scan-form"
          data-on:submit="$_scanWaiting = true; $_error = ''; @post('/api/v1/scan', {contentType: 'form'})"
          data-on:datastar-fetch="if (!$_scanWaiting) return; if (evt.detail.type === 'finished') { $_scanWaiting = false; $_roastName = $_scanSuccess; $_step = 3 } else if (evt.detail.type === 'error') { $_scanWaiting = false; $_error = 'Scan failed. Please try again.' }"
        >
          <input type="hidden" name="image" id="checkin-image" />
          <input type="hidden" name="prompt" id="checkin-prompt-hidden" />

          <div class="flex flex-wrap items-center gap-3">
            <button
              type="button"
              onclick="document.getElementById('checkin-photo').click()"
              class="inline-flex items-center gap-2 rounded-md border border-amber-500 px-4 py-2.5 text-sm font-medium text-amber-700 transition hover:bg-amber-50"
            >
              {% call icons::camera("h-5 w-5") %}
              Scan Bag
            </button>
            <span class="text-xs text-stone-400">or</span>
            <div class="flex flex-1 min-w-[200px] gap-2">
              <input
                type="text"
                id="checkin-prompt-text"
                class="input-field w-full text-sm"
                placeholder="Describe the coffee&hellip;"
                onkeydown="if(event.key==='Enter'){event.preventDefault();document.getElementById('checkin-prompt-hidden').value=this.value;document.getElementById('checkin-scan-form').requestSubmit()}"
              />
              <button
                type="button"
                onclick="document.getElementById('checkin-prompt-hidden').value=document.getElementById('checkin-prompt-text').value;document.getElementById('checkin-scan-form').requestSubmit()"
                class="rounded-md border border-amber-500 px-3 py-2 text-sm font-medium text-amber-700 transition hover:bg-amber-50"
              >
                Go
              </button>
            </div>
          </div>
        </form>
      </div>

      <div
        class="flex items-center gap-3 text-sm text-amber-700 mb-4"
        data-show="$_scanWaiting"
        style="display: none"
      >
        {% call icons::spinner("h-5 w-5") %}
        Scanning &amp; saving&hellip;
      </div>

      <div
        class="mb-4 rounded-md bg-green-50 border border-green-200 px-3 py-2 text-sm text-green-800"
        data-show="$_scanSuccess"
        style="display: none"
      >
        Scanned: <span class="font-medium" data-text="$_scanSuccess"></span>
      </div>

      <div class="border-t border-amber-200 pt-3">
        <p class="text-xs text-stone-500 mb-2">Or select an existing roast:</p>
        <select
          class="input-field w-full text-sm"
          data-on:change="$_roastId = el.value; $_roastName = el.options[el.selectedIndex].dataset.name || ''; $_roasterName = el.options[el.selectedIndex].dataset.roaster || ''; el.value && ($_step = 3)"
        >
          <option value="">Select a roast&hellip;</option>
          {% for roast in roast_options %}
          <option value="{{ roast.id }}" data-name="{{ roast.name }}" data-roaster="{{ roast.roaster_name }}">{{ roast.label }}</option>
          {% endfor %}
        </select>
      </div>
    </div>
  </div>

  <!-- Step 3: Rating + submit -->
  <div class="mt-4" data-show="$_step === 3" style="display: none">
    <div class="rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm">
      <h3 class="text-base font-semibold text-amber-700 mb-3">How was it? (optional)</h3>
      <div class="flex gap-1 mb-6">
        {% for i in 1..=5 %}
        <button
          type="button"
          class="transition hover:text-amber-400"
          data-on:click="$_rating = {{ i }}"
          data-class:text-amber-500="$_rating >= {{ i }}"
          data-class:text-stone-300="$_rating < {{ i }}"
          aria-label="Rate {{ i }} stars"
        >
          {% call icons::star("h-8 w-8") %}
        </button>
        {% endfor %}
      </div>

      <form
        data-on:submit="$_submitting = true; $_error = ''; @post('/api/v1/check-in', {contentType: 'form'})"
        data-on:datastar-fetch="if (!$_submitting) return; if (evt.detail.type === 'finished') { window.location.href = '/' } else if (evt.detail.type === 'error') { $_submitting = false; $_error = 'Check-in failed. Please try again.' }"
      >
        <input type="hidden" name="cafe_id" data-attr:value="$_cafeId" />
        <input type="hidden" name="cafe_name" data-attr:value="$_cafeName" />
        <input type="hidden" name="cafe_city" data-attr:value="$_cafeCity" />
        <input type="hidden" name="cafe_country" data-attr:value="$_cafeCountry" />
        <input type="hidden" name="cafe_lat" data-attr:value="$_cafeLat" />
        <input type="hidden" name="cafe_lng" data-attr:value="$_cafeLng" />
        <input type="hidden" name="cafe_website" data-attr:value="$_cafeWebsite" />
        <input type="hidden" name="roast_id" data-attr:value="$_roastId" />
        <input type="hidden" name="rating" data-attr:value="$_rating" />
        <button
          type="submit"
          class="w-full rounded-md bg-amber-600 px-4 py-3 text-sm font-semibold text-amber-50 transition hover:bg-amber-500 disabled:opacity-50"
          data-attr:disabled="$_submitting"
        >
          Check In
        </button>
      </form>
    </div>
  </div>
</section>
{% endblock %}