{% extends "users/base.html" %}
{% load user_tags %}
{% load app_tags %}

{% block title %}
  Import - Yamtrack
{% endblock title %}

{% block settings_content %}
  <div class="space-y-6"
       x-data="{ importFrequency: 'once', importTime: '{% now "H:i" %}', importMode: 'new' }">

    {# Import settings #}
    <div class="bg-[#2a2f35] rounded-lg p-6">
      <div class="flex items-center mb-4">
        {% include "app/icons/horizontal-sliders.svg" with classes="w-6 h-6 text-indigo-400 mr-3" %}
        <h2 class="text-xl font-semibold">Import Settings</h2>
      </div>
      <p class="text-gray-400 mb-5 text-sm">Configure your import preferences.</p>
      <div class="bg-[#39404b] p-5 rounded-lg">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block text-sm text-gray-400 mb-2">Import Frequency</label>
            <div class="relative">
              <select x-model="importFrequency"
                      class="w-full py-2 px-3 bg-[#2a2f35] rounded-md text-white text-sm border border-gray-600 focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 appearance-none">
                <option value="once">One Time Import</option>
                <option value="daily">Every Day</option>
                <option value="2days">Every 2 Days</option>
              </select>
              {% include "app/icons/chevron-down.svg" with classes="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" %}
            </div>
            <div x-cloak class="mt-4" x-show="importFrequency !== 'once'">
              <label class="block text-sm text-gray-400 mb-2">Import Time</label>
              <input x-model="importTime"
                     class="w-full py-2 px-3 bg-[#2a2f35] rounded-md text-white text-sm border border-gray-600 focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 scheme-dark"
                     type="time">
            </div>
          </div>
          <div>
            <label class="block text-sm text-gray-400 mb-2">Import Mode</label>
            <div class="relative">
              <select x-model="importMode"
                      class="w-full py-2 px-3 bg-[#2a2f35] rounded-md text-white text-sm border border-gray-600 focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 appearance-none">
                <option value="new">Only Sync New Items</option>
                <option value="overwrite">Sync New Items and Overwrite Existing</option>
              </select>
              {% include "app/icons/chevron-down.svg" with classes="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" %}
            </div>
          </div>
        </div>
      </div>
    </div>

    {# Import Sources #}
    <div class="bg-[#2a2f35] rounded-lg p-6">
      <div class="flex items-center mb-4">
        {% include "app/icons/database.svg" with classes="w-6 h-6 text-indigo-400 mr-3" %}
        <h2 class="text-xl font-semibold">Import Sources</h2>
      </div>
      <p class="text-gray-400 mb-5 text-sm">
        Some of these require additional configuration, check the
        <a href="https://github.com/FuzzyGrim/Yamtrack/wiki/Media-Import-Configuration"
           target="_blank"
           class="text-indigo-400 hover:text-indigo-300 underline">import configuration guide</a>.
      </p>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

        {# Trakt #}
        <div class="bg-[#39404b] p-4 rounded-lg"
             x-data="{ traktImportMethod: 'public' }">
          <div class="flex items-center mb-3">{% source_display "trakt" %}</div>
          <p class="text-sm text-gray-400 mb-3"
             x-text="traktImportMethod !== 'export' || importFrequency === 'once' ? 'Import TV shows and movies' : 'File uploads are not available for periodic imports'">
          </p>

          <div class="mb-3">
            <label class="block text-sm font-medium text-gray-300 mb-2">Import method</label>
            <select x-model="traktImportMethod"
                    class="w-full py-2 px-3 bg-[#2a2f35] rounded-md text-white text-sm border border-gray-600 focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 appearance-none">
              <option value="public">Public</option>
              <option value="private">Private (requires authentication)</option>
              <option value="export">Export (requires ZIP file)</option>
            </select>
          </div>

          <form class="flex items-center"
                method="post"
                x-show="traktImportMethod === 'public'"
                action="{% url 'import_trakt_public' %}">
            {% csrf_token %}
            <input type="hidden" name="frequency" x-model="importFrequency">
            <input type="hidden" name="time" x-model="importTime">
            <input type="hidden" name="mode" x-model="importMode">

            <div class="flex w-full">
              <input placeholder="Public Trakt username"
                     name="user"
                     class="relative w-full py-2 px-3 bg-[#2a2f35] rounded-l-md text-white text-sm border border-gray-600 focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                     type="text"
                     required>
              <button type="submit"
                      class="px-3 py-2 bg-indigo-600 text-white rounded-r-md hover:bg-indigo-700 transition-colors text-sm border border-indigo-600 cursor-pointer">
                Import
              </button>
            </div>
          </form>

          <form class="flex items-center"
                method="post"
                x-show="traktImportMethod === 'private'"
                action="{% url 'trakt_oauth' %}">
            {% csrf_token %}
            <input type="hidden" name="frequency" x-model="importFrequency">
            <input type="hidden" name="time" x-model="importTime">
            <input type="hidden" name="mode" x-model="importMode">

            <button type="submit"
                    class="w-full px-4 py-2 text-sm rounded-md transition-colors cursor-pointer bg-indigo-600 text-white hover:bg-indigo-700">
              Connect with Trakt & Import
            </button>
          </form>

          <form class="flex items-center"
                method="post"
                x-show="traktImportMethod === 'export'"
                action="{% url 'import_trakt_export' %}"
                enctype="multipart/form-data">
            {% csrf_token %}
            <input type="hidden" name="frequency" x-model="importFrequency">
            <input type="hidden" name="time" x-model="importTime">
            <input type="hidden" name="mode" x-model="importMode">
            <label class="flex items-center justify-center w-full px-4 py-2 text-sm rounded-md transition-colors"
                   :class="importFrequency === 'once' ? 'bg-indigo-600 text-white hover:bg-indigo-700 cursor-pointer' : 'bg-gray-600 text-gray-400 cursor-not-allowed'"
                   :disabled="importFrequency !== 'once'">
              <input name="trakt_export_zip"
                     accept=".zip"
                     class="hidden"
                     type="file"
                     :disabled="importFrequency !== 'once'"
                     @change="importFrequency === 'once' && $el.form.submit()">
              Select ZIP File
            </label>
          </form>
        </div>

        {# Simkl #}
        <div class="bg-[#39404b] p-4 rounded-lg">
          <div class="flex items-center mb-3">{% source_display "simkl" %}</div>
          <p class="text-sm text-gray-400 mb-3">Import TV shows, movies and anime</p>
          <form method="post" action="{% url 'simkl_oauth' %}">
            {% csrf_token %}
            <input type="hidden" name="frequency" x-model="importFrequency">
            <input type="hidden" name="time" x-model="importTime">
            <input type="hidden" name="mode" x-model="importMode">
            <button type="submit"
                    class="w-full px-4 py-2 text-sm rounded-md transition-colors cursor-pointer bg-indigo-600 text-white hover:bg-indigo-700">
              Connect with Simkl & Import
            </button>
          </form>
        </div>

        {# MyAnimeList #}
        <div class="bg-[#39404b] p-4 rounded-lg">
          <div class="flex items-center mb-3">{% source_display "myanimelist" %}</div>
          <p class="text-sm text-gray-400 mb-3">Import anime and manga</p>
          <form class="flex items-center"
                method="post"
                action="{% url 'import_mal' %}">
            {% csrf_token %}
            <input type="hidden" name="frequency" x-model="importFrequency">
            <input type="hidden" name="time" x-model="importTime">
            <input type="hidden" name="mode" x-model="importMode">
            <div class="flex w-full">
              <input placeholder="MAL username"
                     name="user"
                     class="relative w-full py-2 px-3 bg-[#2a2f35] rounded-l-md text-white text-sm border border-gray-600 focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                     type="text">
              <button type="submit"
                      class="px-3 py-2 bg-indigo-600 text-white rounded-r-md hover:bg-indigo-700 transition-colors text-sm border border-indigo-600 cursor-pointer">
                Import
              </button>
            </div>
          </form>
        </div>

        {# AniList #}
        <div class="bg-[#39404b] p-4 rounded-lg"
             x-data="{ usePrivateImport: false }">
          <div class="flex items-center mb-3">{% source_display "anilist" %}</div>
          <p class="text-sm text-gray-400 mb-3">Import anime and manga</p>

          <div class="mb-3">
            <label class="flex items-center text-sm text-gray-300">
              <input type="checkbox"
                     x-model="usePrivateImport"
                     class="mr-2 rounded bg-[#2a2f35] border-gray-600 text-indigo-600 focus:ring-indigo-500 focus:ring-offset-0">
              Import private profile (requires authentication)
            </label>
          </div>

          <form class="flex items-center"
                method="post"
                x-show="!usePrivateImport"
                action="{% url 'import_anilist_public' %}">
            {% csrf_token %}
            <input type="hidden" name="frequency" x-model="importFrequency">
            <input type="hidden" name="time" x-model="importTime">
            <input type="hidden" name="mode" x-model="importMode">

            <div class="flex w-full">
              <input placeholder="Public AniList username"
                     name="user"
                     class="relative w-full py-2 px-3 bg-[#2a2f35] rounded-l-md text-white text-sm border border-gray-600 focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                     type="text"
                     required>
              <button type="submit"
                      class="px-3 py-2 bg-indigo-600 text-white rounded-r-md hover:bg-indigo-700 transition-colors text-sm border border-indigo-600 cursor-pointer">
                Import
              </button>
            </div>
          </form>

          <form class="flex items-center"
                method="post"
                x-show="usePrivateImport"
                action="{% url 'import_anilist_oauth' %}">
            {% csrf_token %}
            <input type="hidden" name="frequency" x-model="importFrequency">
            <input type="hidden" name="time" x-model="importTime">
            <input type="hidden" name="mode" x-model="importMode">

            <button type="submit"
                    class="w-full px-4 py-2 text-sm rounded-md transition-colors cursor-pointer bg-indigo-600 text-white hover:bg-indigo-700">
              Connect with AniList & Import
            </button>
          </form>
        </div>

        {# Kitsu #}
        <div class="bg-[#39404b] p-4 rounded-lg">
          <div class="flex items-center mb-3">{% source_display "kitsu" %}</div>
          <p class="text-sm text-gray-400 mb-3">Import anime and manga</p>
          <form class="flex items-center"
                method="post"
                action="{% url 'import_kitsu' %}">
            {% csrf_token %}
            <input type="hidden" name="frequency" x-model="importFrequency">
            <input type="hidden" name="time" x-model="importTime">
            <input type="hidden" name="mode" x-model="importMode">
            <div class="relative flex-1">
              <input placeholder="Kitsu user ID"
                     name="user"
                     class="w-full py-2 px-3 bg-[#2a2f35] rounded-l-md text-white text-sm border border-gray-600 focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                     type="text">
              <div class="group absolute right-2 top-1/2 -translate-y-1/2">
                {% include "app/icons/info.svg" with classes="w-4 h-4 text-gray-400" %}
                <div class="absolute bottom-full mb-2 w-60 p-2 bg-[#2a2f35] rounded-md text-xs text-gray-300 shadow-lg border border-gray-600  invisible group-hover:visible">
                  Find it on your Kitsu profile URL:
                  <br>
                  kitsu.app/users/<span class="text-indigo-400">1234567</span>
                </div>
              </div>
            </div>
            <button type="submit"
                    class="px-3 py-2 bg-indigo-600 text-white rounded-r-md hover:bg-indigo-700 transition-colors text-sm border border-indigo-600 cursor-pointer">
              Import
            </button>
          </form>
        </div>

        {# Yamtrack #}
        <div class="bg-[#39404b] p-4 rounded-lg">
          <div class="flex items-center justify-between mb-3">
            <div class="flex items-center">{% source_display "yamtrack" %}</div>
            <a href="https://github.com/FuzzyGrim/Yamtrack/wiki/Media-Import-Configuration#yamtrack-csv-format"
               target="_blank"
               class="text-gray-400 hover:text-indigo-400 transition-colors p-1 rounded-md hover:bg-gray-600/50"
               title="View CSV format documentation">{% include "app/icons/info.svg" with classes="w-4 h-4" %}</a>
          </div>
          <p class="text-sm text-gray-400 mb-3"
             x-text="importFrequency === 'once' ? 'Import from YamTrack backup' : 'File uploads are not available for periodic imports'">
          </p>
          <form method="post"
                action="{% url 'import_yamtrack' %}"
                enctype="multipart/form-data">
            {% csrf_token %}
            <input type="hidden" name="frequency" x-model="importFrequency">
            <input type="hidden" name="time" x-model="importTime">
            <input type="hidden" name="mode" x-model="importMode">
            <label class="flex items-center justify-center w-full px-4 py-2 text-sm rounded-md transition-colors"
                   :class="importFrequency === 'once' ? 'bg-indigo-600 text-white hover:bg-indigo-700 cursor-pointer' : 'bg-gray-600 text-gray-400 cursor-not-allowed'"
                   :disabled="importFrequency !== 'once'">
              <input name="yamtrack_csv"
                     accept=".csv"
                     class="hidden"
                     type="file"
                     :disabled="importFrequency !== 'once'"
                     @change="importFrequency === 'once' && $el.form.submit()">
              Select CSV File
            </label>
          </form>
        </div>

        {# HowLongToBeat #}
        <div class="bg-[#39404b] p-4 rounded-lg">
          <div class="flex items-center mb-3">{% source_display "hltb" %}</div>
          <p class="text-sm text-gray-400 mb-3"
             x-text="importFrequency === 'once' ? 'Import games' : 'File uploads are not available for periodic imports'">
          </p>
          <form method="post"
                action="{% url 'import_hltb' %}"
                enctype="multipart/form-data">
            {% csrf_token %}
            <input type="hidden" name="frequency" x-model="importFrequency">
            <input type="hidden" name="time" x-model="importTime">
            <input type="hidden" name="mode" x-model="importMode">
            <label class="flex items-center justify-center w-full px-4 py-2 text-sm rounded-md transition-colors"
                   :class="importFrequency === 'once' ? 'bg-indigo-600 text-white hover:bg-indigo-700 cursor-pointer' : 'bg-gray-600 text-gray-400 cursor-not-allowed'"
                   :disabled="importFrequency !== 'once'">
              <input name="hltb_csv"
                     accept=".csv"
                     class="hidden"
                     type="file"
                     :disabled="importFrequency !== 'once'"
                     @change="importFrequency === 'once' && $el.form.submit()">
              Select CSV File
            </label>
          </form>
        </div>

        {# Steam #}
        <div class="bg-[#39404b] p-4 rounded-lg">
          <div class="flex items-center mb-3">{% source_display "steam" %}</div>
          <p class="text-sm text-gray-400 mb-3">Import games from your Steam library</p>
          <form class="flex items-center"
                method="post"
                action="{% url 'import_steam' %}">
            {% csrf_token %}
            <input type="hidden" name="frequency" x-model="importFrequency">
            <input type="hidden" name="time" x-model="importTime">
            <input type="hidden" name="mode" x-model="importMode">
            <div class="relative flex-1">
              <input placeholder="Steam 64-bit ID"
                     name="user"
                     class="w-full py-2 px-3 bg-[#2a2f35] rounded-l-md text-white text-sm border border-gray-600 focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                     type="text">
              <div class="group absolute right-2 top-1/2 -translate-y-1/2">
                {% include "app/icons/info.svg" with classes="w-4 h-4 text-gray-400" %}
                <div class="absolute bottom-full mb-2 w-60 p-2 bg-[#2a2f35] rounded-md text-xs text-gray-300 shadow-lg border border-gray-600  invisible group-hover:visible">
                  Find it on your Steam account details page under your username.
                  <br>
                  <br>
                  Your profile must be public if the API key you are using is not linked to the steamid you are requesting.
                </div>
              </div>
            </div>
            <button type="submit"
                    class="px-3 py-2 bg-indigo-600 text-white rounded-r-md hover:bg-indigo-700 transition-colors text-sm border border-indigo-600 cursor-pointer">
              Import
            </button>
          </form>
        </div>

        {# IMDB #}
        <div class="bg-[#39404b] p-4 rounded-lg">
          <div class="flex items-center justify-between mb-3">
            <div class="flex items-center">{% source_display "imdb" %}</div>
          </div>
          <p class="text-sm text-gray-400 mb-3"
             x-text="importFrequency === 'once' ? 'Import movies and TV shows from your ratings' : 'File uploads are not available for periodic imports'">
          </p>
          <form method="post"
                action="{% url 'import_imdb' %}"
                enctype="multipart/form-data">
            {% csrf_token %}
            <input type="hidden" name="frequency" x-model="importFrequency">
            <input type="hidden" name="time" x-model="importTime">
            <input type="hidden" name="mode" x-model="importMode">
            <label class="flex items-center justify-center w-full px-4 py-2 text-sm rounded-md transition-colors"
                   :class="importFrequency === 'once' ? 'bg-indigo-600 text-white hover:bg-indigo-700 cursor-pointer' : 'bg-gray-600 text-gray-400 cursor-not-allowed'"
                   :disabled="importFrequency !== 'once'">
              <input name="imdb_csv"
                     accept=".csv"
                     class="hidden"
                     type="file"
                     :disabled="importFrequency !== 'once'"
                     @change="importFrequency === 'once' && $el.form.submit()">
              Select CSV File
            </label>
          </form>
        </div>

        {# GoodReads #}
        <div class="bg-[#39404b] p-4 rounded-lg">
          <div class="flex items-center mb-3">{% source_display "goodreads" %}</div>
          <p class="text-sm text-gray-400 mb-3"
             x-text="importFrequency === 'once' ? 'Import from GoodReads backup' : 'File uploads are not available for periodic imports'">
          </p>
          <form method="post"
                action="{% url 'import_goodreads' %}"
                enctype="multipart/form-data">
            {% csrf_token %}
            <input type="hidden" name="frequency" x-model="importFrequency">
            <input type="hidden" name="time" x-model="importTime">
            <input type="hidden" name="mode" x-model="importMode">
            <label class="flex items-center justify-center w-full px-4 py-2 text-sm rounded-md transition-colors"
                   :class="importFrequency === 'once' ? 'bg-indigo-600 text-white hover:bg-indigo-700 cursor-pointer' : 'bg-gray-600 text-gray-400 cursor-not-allowed'"
                   :disabled="importFrequency !== 'once'">
              <input name="goodreads_csv"
                     accept=".csv"
                     class="hidden"
                     type="file"
                     :disabled="importFrequency !== 'once'"
                     @change="importFrequency === 'once' && $el.form.submit()">
              Select CSV File
            </label>
          </form>
        </div>

      </div>
    </div>

    {# Active Periodic Imports #}
    <div class="bg-[#2a2f35] rounded-lg p-6">
      <div class="flex items-center mb-4">
        {% include "app/icons/clock.svg" with classes="w-6 h-6 text-indigo-400 mr-3" %}
        <h2 class="text-xl font-semibold">Active Periodic Imports</h2>
      </div>
      <p class="text-gray-400 mb-5 text-sm">
        Automated imports that run on a schedule. These will continue to sync your media until disabled.
      </p>
      <div class="space-y-3">
        {% for periodic_import in import_tasks.schedules %}
          <div class="bg-[#39404b] rounded-lg p-4">
            <div class="flex items-center justify-between mb-2">
              <div class="flex items-center gap-3">
                {% source_display periodic_import.source %}
                <span class="text-sm text-gray-400">{{ periodic_import.schedule }}</span>
              </div>
              <form action="{% url 'delete_import_schedule' %}" method="post">
                {% csrf_token %}
                <input type="hidden"
                       name="task_name"
                       value="{{ periodic_import.task.name }}">
                <button class="text-red-400 hover:text-white p-2 rounded-md transition-all duration-200 hover:bg-red-500 cursor-pointer">
                  {% include "app/icons/trashcan.svg" with classes="w-4 h-4" %}
                </button>
              </form>
            </div>
            <div class="text-sm text-gray-400 space-y-1">
              <div>Username: {{ periodic_import.username }}</div>
              <div>Mode: {{ periodic_import.mode }}</div>
              <div>Last Import: {{ periodic_import.last_run|datetime_format:user }}</div>
              <div>Next Import: {{ periodic_import.next_run|datetime_format:user }}</div>
            </div>
          </div>
        {% empty %}
          <div class="bg-[#39404b] rounded-lg p-6 text-center">
            <p class="text-gray-400 text-sm">No periodic imports configured</p>
            <p class="text-gray-500 text-xs mt-1">Set up an import with a daily or 2-day frequency to see it here</p>
          </div>
        {% endfor %}
      </div>
    </div>

    {# Import History #}
    <div class="bg-[#2a2f35] rounded-lg p-6">
      <div class="flex items-center mb-4">
        {% include "app/icons/clock-reversing.svg" with classes="w-6 h-6 text-indigo-400 mr-3" %}
        <h2 class="text-xl font-semibold">Import History</h2>
      </div>

      <p class="text-gray-400 mb-5 text-sm">Showing import activity from the last 7 days.</p>

      <div class="space-y-3">
        {% for result in import_tasks.results %}
          <div class="bg-[#39404b] rounded-lg p-4">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-4">
              <div class="flex items-center gap-3">
                {% if result.status == "SUCCESS" %}
                  {% if result.errors %}
                    <span class="px-2 py-1 rounded text-xs font-medium text-emerald-400 bg-emerald-400/10">Finished</span>
                  {% else %}
                    <span class="px-2 py-1 rounded text-xs font-medium text-green-400 bg-green-400/10">Success</span>

                  {% endif %}
                {% elif result.status == "STARTED" %}
                  <span class="px-2 py-1 rounded text-xs font-medium text-blue-400 bg-blue-400/10">Started</span>
                {% elif result.status == "FAILURE" %}
                  <span class="px-2 py-1 rounded text-xs font-medium text-red-400 bg-red-400/10">Failed</span>
                {% else %}
                  <span class="px-2 py-1 rounded text-xs font-medium text-yellow-400 bg-yellow-400/10">Pending</span>
                {% endif %}

                {% source_display result.source %}
              </div>
              <span class="text-xs text-gray-400">{{ result.date|datetime_format:user }}</span>
            </div>

            {% if result.status %}
              {% if result.summary %}<div class="text-sm text-gray-200">{{ result.summary }}</div>{% endif %}

              <div class="mt-2" x-data="{ showDetails: false }" x-cloak>
                {% if result.errors %}
                  {% if result.status == "SUCCESS" %}
                    <button @click="showDetails = !showDetails"
                            class="text-xs text-indigo-400 hover:text-indigo-300 transition-colors cursor-pointer"
                            x-text="showDetails ? 'Hide failed items' : 'Show failed items'">Show failed items</button>

                  {% elif result.status == "FAILURE" %}
                    <button @click="showDetails = !showDetails"
                            class="text-xs text-indigo-400 hover:text-indigo-300 transition-colors cursor-pointer"
                            x-text="showDetails ? 'Hide traceback' : 'Show traceback'">Show traceback</button>
                  {% endif %}

                  <div class="mt-2 space-y-1 text-sm bg-[#2a2f35] p-3 rounded overflow-x-auto wrap-break-word"
                       x-show="showDetails">
                    <div class="text-xs space-y-1 text-red-400">
                      {% for error in result.errors.splitlines %}<div>{{ error }}</div>{% endfor %}
                    </div>
                  </div>
                {% endif %}
              </div>
            {% endif %}
          </div>
        {% empty %}
          <div class="bg-[#39404b] rounded-lg p-6 text-center">
            <p class="text-gray-400 text-sm">No imports in the last 7 days</p>
            <p class="text-gray-500 text-xs mt-1">Import your media from any source to see the history here</p>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
{% endblock settings_content %}