{% extends 'layouts/base.html' %}
{% load static %}

{% block title %}Saved Reports - PX360{% endblock %}

{% block extra_css %}
<style>
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-in {
        animation: fadeIn 0.5s ease-out forwards;
    }
</style>
{% endblock %}

{% block content %}
<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
    <!-- Breadcrumb -->
    <nav class="mb-6 animate-in">
        <ol class="flex items-center gap-2 text-sm text-slate">
            <li><a href="{% url 'dashboard:my_dashboard' %}" class="text-blue hover:text-navy font-medium">Dashboard</a></li>
            <li><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></li>
            <li><a href="{% url 'reports:builder' %}" class="text-blue hover:text-navy font-medium">Reports</a></li>
            <li><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></li>
            <li class="text-navy font-semibold">Saved Reports</li>
        </ol>
    </nav>

    <!-- Page Header -->
    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6 mb-6 animate-in">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div class="flex items-center gap-3">
                <div class="w-14 h-14 bg-gradient-to-br from-blue to-indigo-500 rounded-2xl flex items-center justify-center shadow-lg shadow-blue-200">
                    <i data-lucide="folder-open" class="w-8 h-8 text-white"></i>
                </div>
                <div>
                    <h1 class="text-2xl font-bold text-navy">Saved Reports</h1>
                    <p class="text-slate text-sm">View and manage your saved reports</p>
                </div>
            </div>
            <a href="{% url 'reports:builder' %}" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
                <i data-lucide="plus" class="w-4 h-4"></i>Create New Report
            </a>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6 mb-6 animate-in">
        <div class="flex flex-col md:flex-row gap-4">
            <div class="flex-1">
                <div class="relative">
                    <input type="text" id="searchInput" value="{{ search }}" placeholder="Search reports..."
                        class="w-full pl-10 pr-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition">
                    <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate"></i>
                </div>
            </div>
            <div>
                <select id="sourceFilter" class="px-4 py-2.5 border-2 border-blue-100 rounded-xl text-navy focus:ring-2 focus:ring-blue focus:border-transparent transition bg-white">
                    <option value="">All Sources</option>
                    {% for value, label in data_sources %}
                    <option value="{{ value }}" {% if selected_source == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <button onclick="applyFilters()" class="inline-flex items-center gap-2 px-6 py-2.5 bg-white border-2 border-blue-200 text-blue-700 rounded-xl font-semibold hover:bg-blue-50 transition">
                <i data-lucide="filter" class="w-4 h-4"></i>Filter
            </button>
        </div>
    </div>

    <!-- Reports List -->
    <div class="animate-in">
        {% if reports %}
        <div class="space-y-4">
            {% for report in reports %}
            <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6 hover:border-blue-300 hover:shadow-md transition-all duration-200">
                <div class="flex items-start justify-between gap-4">
                    <div class="flex-1 flex items-start gap-3">
                        <div class="w-12 h-12 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-xl flex items-center justify-center flex-shrink-0">
                            <i data-lucide="file-text" class="w-6 h-6 text-blue-600"></i>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-bold text-lg text-navy">
                                <a href="{% url 'reports:report_detail' report.id %}" class="hover:text-blue-600 transition">
                                    {{ report.name }}
                                </a>
                            </h3>
                            {% if report.description %}
                            <p class="text-sm text-slate mt-1">{{ report.description }}</p>
                            {% endif %}
                            <div class="flex flex-wrap items-center gap-4 mt-3 text-sm text-slate">
                                <span class="flex items-center gap-1">
                                    <i data-lucide="database" class="w-4 h-4 text-blue-500"></i>
                                    {{ report.get_data_source_display }}
                                </span>
                                <span class="flex items-center gap-1">
                                    <i data-lucide="calendar" class="w-4 h-4 text-blue-500"></i>
                                    Created {{ report.created_at|date:"M d, Y" }}
                                </span>
                                {% if report.last_run_at %}
                                <span class="flex items-center gap-1">
                                    <i data-lucide="clock" class="w-4 h-4 text-blue-500"></i>
                                    Last run {{ report.last_run_at|date:"M d, Y H:i" }}
                                </span>
                                {% endif %}
                                {% if report.is_shared %}
                                <span class="flex items-center gap-1 text-emerald-600 font-medium">
                                    <i data-lucide="users" class="w-4 h-4"></i>
                                    Shared
                                </span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center gap-2 flex-shrink-0">
                        <a href="{% url 'reports:report_detail' report.id %}" class="inline-flex items-center justify-center w-10 h-10 bg-white border-2 border-blue-200 text-blue-700 rounded-xl hover:bg-blue-50 transition" title="View">
                            <i data-lucide="eye" class="w-4 h-4"></i>
                        </a>
                        <a href="{% url 'reports:export_report' report.id 'excel' %}" class="inline-flex items-center justify-center w-10 h-10 bg-white border-2 border-emerald-200 text-emerald-700 rounded-xl hover:bg-emerald-50 transition" title="Export Excel">
                            <i data-lucide="file-spreadsheet" class="w-4 h-4"></i>
                        </a>
                        <a href="{% url 'reports:export_report' report.id 'pdf' %}" class="inline-flex items-center justify-center w-10 h-10 bg-white border-2 border-red-200 text-red-700 rounded-xl hover:bg-red-50 transition" title="Export PDF">
                            <i data-lucide="file-text" class="w-4 h-4"></i>
                        </a>
                        {% if report.created_by == request.user %}
                        <a href="{% url 'reports:delete_report' report.id %}" class="inline-flex items-center justify-center w-10 h-10 bg-white border-2 border-red-200 text-red-700 rounded-xl hover:bg-red-50 transition" title="Delete" onclick="return confirm('Are you sure you want to delete this report?')">
                            <i data-lucide="trash-2" class="w-4 h-4"></i>
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- Pagination -->
        {% if page_obj.has_other_pages %}
        <div class="flex flex-col md:flex-row items-center justify-between gap-4 mt-6">
            <p class="text-sm text-slate">
                Showing {{ page_obj.start_index }} to {{ page_obj.end_index }} of {{ page_obj.paginator.count }} reports
            </p>
            <nav class="flex items-center gap-2">
                {% if page_obj.has_previous %}
                <a href="?page={{ page_obj.previous_page_number }}&search={{ search }}&data_source={{ selected_source }}"
                   class="inline-flex items-center gap-2 px-4 py-2 bg-white border-2 border-blue-200 text-blue-700 rounded-xl hover:bg-blue-50 transition font-semibold">
                    <i data-lucide="chevron-left" class="w-4 h-4"></i>Previous
                </a>
                {% endif %}
                {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                    <span class="px-4 py-2 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold">{{ num }}</span>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                    <a href="?page={{ num }}&search={{ search }}&data_source={{ selected_source }}"
                       class="inline-flex items-center px-4 py-2 bg-white border-2 border-blue-200 text-blue-700 rounded-xl hover:bg-blue-50 transition font-semibold">{{ num }}</a>
                    {% endif %}
                {% endfor %}
                {% if page_obj.has_next %}
                <a href="?page={{ page_obj.next_page_number }}&search={{ search }}&data_source={{ selected_source }}"
                   class="inline-flex items-center gap-2 px-4 py-2 bg-white border-2 border-blue-200 text-blue-700 rounded-xl hover:bg-blue-50 transition font-semibold">
                    Next<i data-lucide="chevron-right" class="w-4 h-4"></i>
                </a>
                {% endif %}
            </nav>
        </div>
        {% endif %}
        {% else %}
        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-12 text-center animate-in">
            <div class="w-20 h-20 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i data-lucide="folder-open" class="w-10 h-10 text-blue-500"></i>
            </div>
            <p class="text-slate font-medium text-lg">No saved reports found</p>
            <p class="text-slate mt-2">Create your first report using the Report Builder</p>
            <a href="{% url 'reports:builder' %}" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue to-navy text-white rounded-xl font-semibold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200 mt-4">
                <i data-lucide="plus" class="w-4 h-4"></i>Create Report
            </a>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function applyFilters() {
    const search = document.getElementById('searchInput').value;
    const source = document.getElementById('sourceFilter').value;
    let url = '{% url "reports:saved_reports" %}?';
    if (search) url += 'search=' + encodeURIComponent(search);
    if (source) url += '&data_source=' + source;
    window.location.href = url;
}

document.getElementById('searchInput').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') applyFilters();
});

document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
});
</script>
{% endblock %}