{% extends "base.html" %}

{% block title %}Suche - AniWorld Downloader{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <h2><i class="bi bi-search"></i> Suche</h2>
    </div>
</div>

<div class="row">
    <div class="col-md-8 mb-4">
        <div class="card">
            <div class="card-body">
                <form action="{{ url_for('search') }}" method="get" class="mb-4">
                    <div class="input-group">
                        <input type="text" class="form-control" name="q" value="{{ query }}"
                               placeholder="Suche nach Anime oder Serie...">
                        <button class="btn btn-primary" type="submit">
                            <i class="bi bi-search"></i> Suchen
                        </button>
                    </div>
                </form>

                {% if query %}
                    {% if results %}
                        <h5>Suchergebnisse für "{{ query }}"</h5>
                        <div class="list-group">
                            {% for result in results %}
                                <a href="#" class="list-group-item list-group-item-action search-result"
                                   data-link="{{ result.link }}">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h6 class="mb-1">{{ result.title }}</h6>
                                        <small class="text-muted">{{ result.source }}</small>
                                    </div>
                                </a>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="alert alert-info">
                            <i class="bi bi-info-circle"></i> Keine Ergebnisse gefunden für "{{ query }}"
                        </div>
                    {% endif %}
                {% else %}
                    <div class="text-center py-5 text-muted">
                        <i class="bi bi-search display-4"></i>
                        <p class="mt-3">Gib einen Suchbegriff ein, um zu beginnen</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-lightning"></i> Schnellwahl</h5>
            </div>
            <div class="card-body">
                <div class="list-group">
                    <a href="#" class="list-group-item list-group-item-action"
                       data-link="https://aniworld.to/anime/stream/attack-on-titan">
                        Attack on Titan
                    </a>
                    <a href="#" class="list-group-item list-group-item-action"
                       data-link="https://aniworld.to/anime/stream/demon-slayer">
                        Demon Slayer
                    </a>
                    <a href="#" class="list-group-item list-group-item-action"
                       data-link="https://aniworld.to/anime/stream/one-piece">
                        One Piece
                    </a>
                    <a href="#" class="list-group-item list-group-item-action"
                       data-link="https://aniworld.to/anime/stream/jujutsu-kaisen">
                        Jujutsu Kaisen
                    </a>
                    <a href="#" class="list-group-item list-group-item-action"
                       data-link="https://s.to/serie/stream/game-of-thrones">
                        Game of Thrones
                    </a>
                </div>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-info-circle"></i> Info</h5>
            </div>
            <div class="card-body">
                <p class="mb-0">Die Suche durchsucht Titel von:</p>
                <ul>
                    <li>AniWorld.to</li>
                    <li>S.to</li>
                </ul>
                <p class="mb-0">Klicke auf ein Ergebnis, um es direkt zu analysieren.</p>
            </div>
        </div>
    </div>
</div>

<!-- Link Analyzer Modal -->
<div class="modal fade" id="linkAnalyzerModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Link analysieren</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="modalAnalysisContent">
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-3">Analysiere Link...</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
                <a href="#" class="btn btn-primary" id="goToDownloadBtn">Zum Download</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Set up link click handlers
    const linkItems = document.querySelectorAll('.search-result, .list-group-item');
    const modal = new bootstrap.Modal(document.getElementById('linkAnalyzerModal'));

    linkItems.forEach(item => {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            const link = this.getAttribute('data-link');
            document.getElementById('goToDownloadBtn').href = '/?link=' + encodeURIComponent(link);

            // Show modal and analyze link
            modal.show();
            analyzeLink(link);
        });
    });

    async function analyzeLink(link) {
        const modalContent = document.getElementById('modalAnalysisContent');
        const modalTitle = document.getElementById('modalTitle');

        try {
            const response = await fetch('/api/analyze', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    link: link,
                    content_type: 'episodes'
                })
            });

            if (!response.ok) {
                throw new Error('Fehler beim Analysieren des Links');
            }

            const data = await response.json();
            modalTitle.textContent = data.title;

            let htmlContent = `
                <div class="alert alert-success">
                    <i class="bi bi-check-circle"></i> Link erfolgreich analysiert
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <p><strong>Titel:</strong> ${data.title}</p>
                        <p><strong>Link:</strong> ${data.link}</p>
                    </div>
                    <div class="col-md-6">
            `;

            if (data.content_type === 'episodes') {
                htmlContent += `
                        <p><strong>Staffeln:</strong> ${data.seasons}</p>
                        <p><strong>Episoden:</strong> ${data.episodes.map((count, index) =>
                            `Staffel ${index + 1}: ${count}`).join(', ')}</p>
                `;
            } else {
                htmlContent += `
                        <p><strong>Filme:</strong> ${data.movies}</p>
                `;
            }

            htmlContent += `
                    </div>
                </div>

                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i> Klicke auf "Zum Download", um direkt zum Download-Bereich zu gelangen.
                </div>
            `;

            modalContent.innerHTML = htmlContent;

        } catch (error) {
            console.error('Error:', error);
            modalContent.innerHTML = `
                <div class="alert alert-danger">
                    <i class="bi bi-exclamation-triangle"></i> Fehler beim Analysieren: ${error.message}
                </div>
            `;
        }
    }
});
</script>
{% endblock %}