{% extends "partials/base.html" %}
{% block css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
{% endblock css %}
{% block content %}
<h1 class="text-2xl font-bold mt-4">Currently Watching</h1>
<section class="flex flex-col lg:flex-row flex-wrap my-4 gap-4 justify-center items-start">
    {% for history in watchlist %}
    <a href="{% url "watch:watch_episode" history.anime history.episode %}" class="group rounded-lg aspect-video h-48 relative flex-shrink-0 overflow-hidden">
        <div class="absolute inset-0 bg-center bg-cover transition-transform group-hover:scale-110" style="background-image: url('{{ history.anime_cover_image }}')"></div>
        <div class="absolute inset-0 bg-{{ user.preferences.accent_colour }}-600 opacity-0 group-hover:opacity-30 transition-opacity"></div>
        <div class="absolute inset-0" style="background: linear-gradient(45deg, rgb(8, 8, 8) 15%, transparent 60%), linear-gradient(0deg, rgb(8, 8, 8) 0%, transparent 60%);"></div>
        <div class="flex flex-col justify-end h-full p-2 relative z-10">
            <button class="absolute top-2 right-2 bg-white p-1 rounded-full text-gray-700 hover:text-red-600 focus:outline-none" onclick="event.preventDefault(); removeAnime({{ history.anime }});">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
                    <path fill-rule="evenodd" d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z" clip-rule="evenodd" />
                </svg>
            </button>
            <h1 class="text-xl font-bold truncate max-w-full overflow-hidden text-ellipsis whitespace-nowrap">
                {% if user.preferences.title_language == "english" and history.anime_title_english %}
                {{ history.anime_title_english }}
                {% elif user.preferences.title_language == "native" and history.anime_title_native %}
                {{ history.anime_title_native }}
                {% else %}
                {{ history.anime_title_romaji }}
                {% endif %}
            </h1>
            <h2 class="font-bold truncate max-w-full overflow-hidden text-ellipsis whitespace-nowrap">{{ history.episode_title }}</h2>
            <p>Episode {{ history.episode }}</p>
        </div>
    </a>
    {% endfor %}
</section>
<div id="toastContainer" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50 flex flex-col space-y-2"></div>
{% endblock content %}
{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const toastMessage = sessionStorage.getItem('toastMessage');
        if (toastMessage) {
            showToast(toastMessage, true);
            sessionStorage.removeItem('toastMessage');
        }
    });

    function showToast(message, isSuccess) {
        const toast = document.createElement('div');
        toast.className = `flex items-center p-4 rounded-md shadow-lg transition-opacity duration-500 ease-in-out animate__animated ${
            isSuccess ? 'bg-green-100 text-green-700 animate__fadeInUp' : 'bg-red-100 text-red-700 animate__fadeInUp'
        }`;

        const checkSVG = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>`

        const errorSVG = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" /></svg>`

        toast.innerHTML = `
            <div class="flex items-center">
                ${isSuccess ? checkSVG : errorSVG}
                <span class="ml-2">${message}</span>
            </div>
        `;

        // Append the toast to the container
        toastContainer.appendChild(toast);

        // Remove the toast after 3 seconds
        setTimeout(() => {
            toast.classList.add('animate__fadeOutDown');
            setTimeout(() => {
                toastContainer.removeChild(toast);
            }, 500);
        }, 3000);
    }

    function removeAnime(animeId) {
        fetch("{% url "watch:remove_anime_from_watchlist" %}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": "{{ csrf_token }}"
            },
            body: JSON.stringify({
                "anime_id": animeId
            })
        }).then(response => {
            if (response.ok) {
                sessionStorage.setItem('toastMessage', 'Anime removed from watchlist');
                location.reload();
            } else {
                showToast('Failed to remove anime from watchlist', false);
            }
        });
    }
</script>
{% endblock scripts %}