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

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

{% block settings_content %}
  <div class="bg-[#2a2f35] rounded-lg p-6">
    <div class="flex items-center mb-4">
      <svg xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="24"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
           class="w-6 h-6 text-indigo-400 mr-3">
        <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
        <path d="M3 5V19A9 3 0 0 0 21 19V5"></path>
        <path d="M3 12A9 3 0 0 0 21 12"></path>
      </svg>
      <h2 class="text-xl font-semibold">Integrations</h2>
    </div>
    <p class="text-gray-400 mb-5 text-sm">Connect your media servers to automatically track your watching progress.</p>
    <div class="bg-[#39404b] p-5 rounded-lg mb-6">
      <div class="flex items-center mb-3">
        <svg xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
             class="w-5 h-5 text-indigo-400 mr-2">
          <rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect>
          <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
        </svg>
        <h3 class="text-base font-medium">API Token</h3>
      </div>
      <p class="text-gray-400 mb-4 text-sm">This token is used to authenticate webhook requests from your media servers.</p>
      <div class="bg-[#262a2f] p-3 rounded-md mb-4">
        <div class="flex items-center gap-2">
          <input readonly=""
                 id="token"
                 class="flex-1 py-2 pr-2 pl-3 bg-[#262a2f] rounded-md text-gray-300 text-sm border-0 focus:ring-0 outline-none font-mono"
                 type="text"
                 value="{{ user.token|default_if_none:"" }}">
          <span class="flex items-center cursor-pointer group pr-3"
                title="Copy"
                data-copy-target="#token">
            <svg xmlns="http://www.w3.org/2000/svg"
                 width="20"
                 height="20"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 class="w-5 h-5 text-gray-400 group-hover:text-indigo-400 transition-colors">
              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
              <path d="M5 15V5a2 2 0 0 1 2-2h10"></path>
            </svg>
          </span>
        </div>
      </div>
      <div class="flex justify-between items-center">
        <div class="flex items-center text-amber-400 text-sm">
          <svg xmlns="http://www.w3.org/2000/svg"
               width="24"
               height="24"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
               stroke-width="2"
               stroke-linecap="round"
               stroke-linejoin="round"
               class="w-4 h-4 mr-2 flex-shrink-0">
            <circle cx="12" cy="12" r="10"></circle><line x1="12" x2="12" y1="8" y2="12"></line><line x1="12" x2="12.01" y1="16" y2="16"></line>
          </svg>
          <p>Regenerating will invalidate the previous token</p>
        </div>
        <div class="flex space-x-3">
          <form method="post" action="{% url 'regenerate_token' %}">
            {% csrf_token %}
            <button type="submit"
                    class="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors text-sm cursor-pointer">
              <svg xmlns="http://www.w3.org/2000/svg"
                   width="24"
                   height="24"
                   viewBox="0 0 24 24"
                   fill="none"
                   stroke="currentColor"
                   stroke-width="2"
                   stroke-linecap="round"
                   stroke-linejoin="round"
                   class="w-4 h-4 mr-2">
                <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
                <path d="M3 3v5h5"></path>
                <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path>
                <path d="M16 16h5v5"></path>
              </svg>
              Regenerate
            </button>
          </form>
        </div>
      </div>
    </div>
    <div class="bg-[#39404b] p-5 rounded-lg mb-6">
      <div class="flex items-center mb-3">
        <svg xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
             class="w-5 h-5 text-indigo-400 mr-2">
          <rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect><rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect><line x1="6" x2="6.01" y1="6" y2="6"></line><line x1="6" x2="6.01" y1="18" y2="18"></line>
        </svg>
        <h3 class="text-base font-medium">Jellyfin Integration</h3>
      </div>
      <p class="text-gray-400 mb-4 text-sm">Connect Jellyfin to automatically track your watching progress.</p>
      <div class="bg-[#262a2f] p-4 rounded-md">
        <h4 class="text-sm font-medium mb-3">Setup Instructions</h4>
        <ol class="list-decimal list-inside space-y-2 text-sm text-gray-300">
          <li>You will need to have TMDB and TVDB as metadata providers in Jellyfin.</li>
          <li>
            Add this repository
            <a href="https://raw.githubusercontent.com/shemanaev/jellyfin-plugin-repo/master/manifest.json"
               target="_blank"
               rel="noopener noreferrer"
               class="text-indigo-400 hover:underline">link</a>
            to your "Plugins Catalog" in Jellyfin settings.
          </li>
          <li>
            In Jellyfin settings, go to "My Plugins" and install the
            <a href="https://github.com/shemanaev/jellyfin-plugin-webhooks"
               target="_blank"
               rel="noopener noreferrer"
               class="text-indigo-400 hover:underline">Unofficial Webhooks plugin</a>.
          </li>
          <li>
            In the Webhooks plugin settings:
            <ul class="list-disc list-inside ml-6 mt-2 space-y-1 text-gray-400">
              {# djlint:off #}
              <li>
                <div class="inline-flex items-center gap-2 w-[calc(100%-30px)]">URL: 
                  <input readonly
                         id="jellyfin-webhook-url"
                         class="w-full bg-[#262a2f] rounded-md text-gray-400 text-sm border-0 focus:ring-0 outline-none font-mono"
                         type="text"
                         value="{{ request.scheme }}://{{ request.get_host }}/webhook/jellyfin/{{ request.user.token|default_if_none:"&lttoken&gt" }}">
                  <span class="flex items-center cursor-pointer group"
                        title="Copy"
                        data-copy-target="#jellyfin-webhook-url">
                    <svg xmlns="http://www.w3.org/2000/svg"
                         width="20"
                         height="20"
                         viewBox="0 0 24 24"
                         fill="none"
                         stroke="currentColor"
                         stroke-width="2"
                         stroke-linecap="round"
                         stroke-linejoin="round"
                         class="w-5 h-5 text-gray-400 group-hover:text-indigo-400 transition-colors">
                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                      <path d="M5 15V5a2 2 0 0 1 2-2h10"></path>
                    </svg>
                  </span>
                </div>
              </li>
              {# djlint:on #}
              <li>Payload format: Default</li>
              <li>Listen to events only for: Your Jellyfin User</li>
              <li>Events: Play and Stop</li>
            </ul>
          </li>
        </ol>
      </div>
    </div>

    <div class="bg-[#39404b] p-5 rounded-lg mb-6">
      <div class="flex items-center mb-3">
        <svg xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
             class="w-5 h-5 text-indigo-400 mr-2">
          <rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect><rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect><line x1="6" x2="6.01" y1="6" y2="6"></line><line x1="6" x2="6.01" y1="18" y2="18"></line>
        </svg>
        <h3 class="text-base font-medium">Plex Integration</h3>
      </div>
      <p class="text-gray-400 mb-4 text-sm">Connect Plex to automatically track your watching progress.</p>
      <div class="bg-[#262a2f] p-3 rounded-md mb-4">
        <h4 class="text-sm font-medium mb-3">Plex Usernames</h4>
        <form method="post"
              action="{% url 'update_plex_usernames' %}"
              class="space-y-2">
          {% csrf_token %}

          <div>
            <p class="text-gray-400 mb-4 text-sm">
              This username (or several, comma separated) will be used to filter which events are sent to your webhook.
            </p>
            <input name="plex_usernames"
                   class="w-full py-2 px-3 bg-[#39404b] rounded-md text-white text-sm border {% if user.plex_usernames.errors %}border-red-500{% else %}border-gray-600{% endif %} focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                   type="text"
                   placeholder="username1, username2, username3"
                   value="{{ request.user.plex_usernames }}">
          </div>
          <div class="pt-2">
            <button type="submit"
                    class="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors text-sm cursor-pointer">
              <svg xmlns="http://www.w3.org/2000/svg"
                   width="24"
                   height="24"
                   viewBox="0 0 24 24"
                   fill="none"
                   stroke="currentColor"
                   stroke-width="2"
                   stroke-linecap="round"
                   stroke-linejoin="round"
                   class="w-4 h-4 mr-2">
                <path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"></path>
                <path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"></path>
                <path d="M7 3v4a1 1 0 0 0 1 1h7"></path>
              </svg>
              Save Changes
            </button>
          </div>
        </form>
      </div>
      <div class="bg-[#262a2f] p-4 rounded-md">
        <h4 class="text-sm font-medium mb-3">Setup Instructions</h4>
        <ol class="list-decimal list-inside space-y-2 text-sm text-gray-300">
          <li>You will need to have a PlexPass in order to have webhooks enabled</li>
          <li>Go to Settings > Server > Network and enable Webhooks</li>
          <li>
            In Plex settings, go to <a href="https://app.plex.tv/desktop/#!/settings/webhooks"
    target="_blank"
    rel="noopener noreferrer"
    class="text-indigo-400 hover:underline">Webhooks</a>.
          </li>
          <li>
            In the Webhooks section, click on "Add Webhook" and enter the following URL:
            <ul class="list-disc list-inside ml-6 mt-2 space-y-1 text-gray-400">
              <li>
                <div class="inline-flex items-center gap-2 w-[calc(100%-30px)]">
                  <input readonly
                         id="plex-webhook-url"
                         class="w-full bg-[#262a2f] rounded-md text-gray-400 text-sm border-0 focus:ring-0 outline-none font-mono"
                         type="text"
                         value="{{ request.scheme }}://{{ request.get_host }}/webhook/plex/{{ request.user.token|default_if_none:"&lttoken&gt" }}">
                  <span class="flex items-center cursor-pointer group"
                        title="Copy"
                        data-copy-target="#plex-webhook-url">
                    <svg xmlns="http://www.w3.org/2000/svg"
                         width="20"
                         height="20"
                         viewBox="0 0 24 24"
                         fill="none"
                         stroke="currentColor"
                         stroke-width="2"
                         stroke-linecap="round"
                         stroke-linejoin="round"
                         class="w-5 h-5 text-gray-400 group-hover:text-indigo-400 transition-colors">
                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                      <path d="M5 15V5a2 2 0 0 1 2-2h10"></path>
                    </svg>
                  </span>
                </div>
              </li>
            </ul>
          </li>
        </ol>
      </div>
    </div>

    <div class="bg-[#39404b] p-5 rounded-lg mb-6">
      <div class="flex items-center mb-3">
        <svg xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
             class="w-5 h-5 text-indigo-400 mr-2">
          <rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect><rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect><line x1="6" x2="6.01" y1="6" y2="6"></line><line x1="6" x2="6.01" y1="18" y2="18"></line>
        </svg>
        <h3 class="text-base font-medium">Emby Integration</h3>
      </div>
      <p class="text-gray-400 mb-4 text-sm">Connect Emby to automatically track your watching progress.</p>
      <div class="bg-[#262a2f] p-4 rounded-md">
        <h4 class="text-sm font-medium mb-3">Setup Instructions</h4>
        <ol class="list-decimal list-inside space-y-2 text-sm text-gray-300">
          <li>In Emby, go to Settings > Notifications</li>
          <li>In the Notifications section, click on "Add Notification"</li>
          <li>
            In the Notification settings:
            <ul class="list-disc list-inside ml-6 mt-2 space-y-2 text-gray-400">
              {# djlint:off #}
              <li>
                <div class="inline-flex items-center gap-2 w-[calc(100%-30px)]">URL: 
                  <input readonly
                         id="emby-webhook-url"
                         class="w-full bg-[#262a2f] rounded-md text-gray-400 text-sm border-0 focus:ring-0 outline-none font-mono"
                         type="text"
                         value="{{ request.scheme }}://{{ request.get_host }}/webhook/emby/{{ request.user.token|default_if_none:"&lttoken&gt" }}">
                  <span class="flex items-center cursor-pointer group"
                        title="Copy"
                        data-copy-target="#emby-webhook-url">
                    <svg xmlns="http://www.w3.org/2000/svg"
                         width="20"
                         height="20"
                         viewBox="0 0 24 24"
                         fill="none"
                         stroke="currentColor"
                         stroke-width="2"
                         stroke-linecap="round"
                         stroke-linejoin="round"
                         class="w-5 h-5 text-gray-400 group-hover:text-indigo-400 transition-colors">
                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                      <path d="M5 15V5a2 2 0 0 1 2-2h10"></path>
                    </svg>
                  </span>
                </div>
              </li>
              {# djlint:on #}
              <li>Request content type: multipart/form-data</li>
              <li>Events: Play and Stop</li>
              <li>Limit user events to: Your Emby User</li>
              <li>"Limit library events to" and "Limit devices events to" are optional</li>
            </ul>
          </li>
        </ol>
      </div>
    </div>
  </div>
{% endblock settings_content %}

{% block js %}
  <script src="{% static 'js/copy-item.js' %}{% get_static_file_mtime 'js/copy-item.js' %}"></script>
{% endblock js %}
