{% load app_tags %}

{# Track Episode Modal #}
<div x-show="trackOpen"
     @keydown.escape.window="trackOpen = false"
     class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
  <div class="w-100 max-h-[90vh] px-4 md:px-0 relative z-60"
       @click.outside="trackOpen = false">
    <div class="bg-[#2a2f35] p-6 rounded-lg max-h-[70svh] overflow-y-auto">

      {# Modal Header #}
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-xl font-bold text-white">Track Episode</h2>
        <button class="text-gray-400 hover:text-white transition-colors cursor-pointer"
                @click="trackOpen = false">{% include "app/icons/x.svg" with classes="w-5 h-5" %}</button>
      </div>

      {# Episode preview data #}
      <div class="bg-[#343a40] rounded-lg p-4 mb-6">
        <div class="flex items-start gap-4">
          <img alt="{{ episode.title }}"
               class="w-20 h-20 rounded object-cover shrink-0"
               src="{{ episode.image }}">
          <div>
            <h3 class="text-lg font-semibold mb-1 line-clamp-1">{{ episode_title }}</h3>
            <p class="text-sm text-gray-400">Episode {{ episode.episode_number }}</p>
            {% if episode.history %}
              {% if episode.history|length == 1 %}
                <p class="text-sm text-gray-400 mt-1">Watched once</p>
              {% else %}
                <p class="text-sm text-gray-400 mt-1">Watched {{ episode.history|length }} times</p>
              {% endif %}
            {% else %}
              <p class="text-sm text-gray-400 mt-1">Not watched yet</p>
            {% endif %}
          </div>
        </div>
      </div>

      {# Episode history list (if watched previously) #}
      {% if episode.history %}
        <div class="mb-6">
          <label class="block text-sm font-medium text-gray-300 mb-3">Previous Watches</label>
          <div class="max-h-50 overflow-y-auto space-y-2">
            {% for entry in episode.history %}
              <div class="flex items-center justify-between bg-[#343a40] rounded-md p-3 border border-gray-600">
                <div class="text-sm text-white">
                  {% if entry.end_date %}
                    {{ entry.end_date|datetime_format:request.user }}
                  {% else %}
                    No date provided
                  {% endif %}
                </div>
                <form hx-post="{% url 'media_delete' %}?next={{ request.path }}"
                      hx-swap="none">
                  {% csrf_token %}
                  <input type="hidden" name="instance_id" value="{{ entry.id }}">
                  <input type="hidden" name="media_type" value="episode">
                  <button type="submit"
                          class="text-red-400 hover:text-red-300 transition-colors text-sm px-2 py-1 hover:bg-red-600/20 rounded-md cursor-pointer">
                    Delete
                  </button>
                </form>
              </div>
            {% endfor %}
          </div>
        </div>
        <div class="border-t border-gray-600 mb-6"></div>
      {% endif %}

      {# Episode track form #}
      {# djlint:off #}
      <form hx-post="{% url 'episode_save' %}?next={{ request.path }}"
            hx-swap="none"
            x-data="{
              trackTime: {% if TRACK_TIME %}true{% else %}false{% endif %},
              inputType: '{% if TRACK_TIME %}datetime-local{% else %}date{% endif %}',
              inputDateTime: '',
              dropdownOpen: false,
              pointerOnPickerIcon: false,
              localNow(offsetMs = 0) {
                const iso = new Date(Date.now() + offsetMs - new Date().getTimezoneOffset() * 60000).toISOString();
                return this.trackTime ? iso.slice(0, 16) : iso.slice(0, 10);
              },
              init() { this.inputDateTime = this.localNow(); }
            }">
        {% csrf_token %}
        <input type="hidden" name="media_id" value="{{ media.media_id }}">
        <input type="hidden" name="season_number" value="{{ media.season_number }}">
        <input type="hidden" name="source" value="{{ media.source }}">
        <input type="hidden"
               name="episode_number"
               value="{{ episode.episode_number }}">

        <label class="block text-sm font-medium text-gray-300 mb-2">Watch Date</label>

        {# Watch Date Input with Inline Clear Button #}
        <div class="relative">
          <input class="w-full p-3 bg-[#343a40] rounded-md text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-[#4a9eff] appearance-none"
                 x-bind:type="inputType"
                 name="end_date"
                 @pointerdown="pointerOnPickerIcon = $event.clientX >= $el.getBoundingClientRect().right - 40"
                 @focus="if (!pointerOnPickerIcon) { $el.showPicker?.() }"
                 @click="pointerOnPickerIcon = false"
                 x-model="inputDateTime">
        </div>

        {# Submit Area #}
        <div class="mt-6 flex items-center justify-end gap-3">
          <div class="relative inline-flex shadow-sm rounded-md"
               @click.outside="dropdownOpen = false">

            {# Main Button #}
            <button type="submit"
                    class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-l-md transition duration-300 cursor-pointer font-medium"
                    title="Add watched entry with current settings">Add watch</button>

            {# Dropdown Toggle #}
            <button type="button"
                    @click="dropdownOpen = !dropdownOpen"
                    :style="dropdownOpen ? 'background-color: #4338ca;' : 'background-color: #4f46e5;'"
                    class="px-2 py-2 text-white rounded-r-md border-l border-indigo-500 transition duration-300 cursor-pointer flex items-center justify-center">
              <svg class="w-4 h-4 transition-transform duration-200"
                   :class="{'rotate-180': dropdownOpen}"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
              </svg>
            </button>

            {# Dropdown Menu #}
            <div x-show="dropdownOpen"
                 style="display: none"
                 x-transition
                 class="absolute right-0 bottom-full mb-2 w-48 bg-[#2a2f35] border border-gray-600 rounded-md shadow-2xl overflow-hidden">

              {# Option A - Current Time #}
              <button type="button"
                      @click="inputDateTime = localNow(); dropdownOpen = false"
                      class="w-full text-left px-4 py-3 text-sm text-gray-200 hover:bg-indigo-600 hover:text-white transition-colors cursor-pointer"
                      title="Fills in the current date and time">Fill in current time</button>

              {% if episode.runtime_minutes %}
                {# Option B - Finish Time #}
                <button type="button"
                        @click="inputDateTime = localNow({{ episode.runtime_minutes }} * 60000); dropdownOpen = false"
                        class="w-full text-left px-4 py-3 text-sm text-gray-200 hover:bg-indigo-600 hover:text-white transition-colors cursor-pointer"
                        title="Fills in the date and time the episode will be finished if started now">
                  Fill in end time
                </button>
              {% endif %}

              {# Option C - Air Date #}
              {% if episode.air_date %}
                <button type="button"
                        @click="inputDateTime = {% if TRACK_TIME %}'{{ episode.air_date|escapejs }}T' + localNow().slice(11, 16){% else %}'{{ episode.air_date|escapejs }}'{% endif %}; dropdownOpen = false"
                        class="w-full text-left px-4 py-3 text-sm text-gray-200 hover:bg-indigo-600 hover:text-white transition-colors cursor-pointer"
                        title="Fills in the air date of the episode, if available">Fill in air date</button>
              {% endif %}

              {# Option D - No Date #}
              <button type="button"
                      @click="inputDateTime = ''; dropdownOpen = false"
                      class="w-full text-left px-4 py-3 text-sm text-gray-200 hover:bg-indigo-600 hover:text-white transition-colors cursor-pointer"
                      title="Clears the watch date and time">Fill in no date</button>
            </div>

          </div>
        </div>
      </form>
      {# djlint:on #}
    </div>
  </div>
</div>