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

{% block title %}{{ report.name }} - Report Details - 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><a href="{% url 'reports:saved_reports' %}" class="text-blue hover:text-navy font-medium">Saved Reports</a></li>
            <li><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></li>
            <li class="text-navy font-semibold truncate max-w-xs">{{ report.name }}</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="file-text" class="w-8 h-8 text-white"></i>
                </div>
                <div>
                    <h1 class="text-2xl font-bold text-navy">{{ report.name }}</h1>
                    <div class="flex flex-wrap items-center gap-3 mt-1">
                        <span class="inline-flex items-center gap-1 px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium">
                            <i data-lucide="database" class="w-3 h-3"></i>
                            {{ report.get_data_source_display }}
                        </span>
                        {% if report.is_shared %}
                        <span class="inline-flex items-center gap-1 px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full text-sm font-medium">
                            <i data-lucide="users" class="w-3 h-3"></i>
                            Shared
                        </span>
                        {% endif %}
                        {% if report.last_run_at %}
                        <span class="text-sm text-slate">
                            <i data-lucide="clock" class="w-3 h-3 inline"></i>
                            Last run: {{ report.last_run_at|date:"M d, Y H:i" }}
                        </span>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="flex flex-wrap gap-2">
                <a href="{% url 'reports:saved_reports' %}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border-2 border-slate-200 text-slate-700 rounded-xl font-semibold hover:bg-slate-50 transition">
                    <i data-lucide="arrow-left" class="w-4 h-4"></i>Back
                </a>
                <a href="{% url 'reports:export_report' report.id 'csv' %}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border-2 border-green-200 text-green-700 rounded-xl font-semibold hover:bg-green-50 transition">
                    <i data-lucide="file-text" class="w-4 h-4"></i>CSV
                </a>
                <a href="{% url 'reports:export_report' report.id 'excel' %}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border-2 border-emerald-200 text-emerald-700 rounded-xl font-semibold hover:bg-emerald-50 transition">
                    <i data-lucide="file-spreadsheet" class="w-4 h-4"></i>Excel
                </a>
                <a href="{% url 'reports:export_report' report.id 'pdf' %}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border-2 border-red-200 text-red-700 rounded-xl font-semibold hover:bg-red-50 transition">
                    <i data-lucide="file-text" class="w-4 h-4"></i>PDF
                </a>
                {% if report.created_by == request.user %}
                <a href="{% url 'reports:delete_report' report.id %}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border-2 border-red-200 text-red-700 rounded-xl font-semibold hover:bg-red-50 transition" onclick="return confirm('Are you sure you want to delete this report?')">
                    <i data-lucide="trash-2" class="w-4 h-4"></i>Delete
                </a>
                {% endif %}
            </div>
        </div>
        {% if report.description %}
        <p class="mt-4 text-slate">{{ report.description }}</p>
        {% endif %}
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6 animate-in">
        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 bg-gradient-to-br from-blue to-navy rounded-xl flex items-center justify-center">
                    <i data-lucide="database" class="w-6 h-6 text-white"></i>
                </div>
                <div>
                    <div class="text-2xl font-bold text-navy">{{ summary.total_count|default:data.rows|length|default:0 }}</div>
                    <div class="text-xs text-slate uppercase font-semibold">Total Records</div>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-xl flex items-center justify-center">
                    <i data-lucide="calendar" class="w-6 h-6 text-white"></i>
                </div>
                <div>
                    <div class="text-lg font-bold text-navy">{{ report.created_at|date:"M d, Y" }}</div>
                    <div class="text-xs text-slate uppercase font-semibold">Created</div>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-xl flex items-center justify-center">
                    <i data-lucide="columns" class="w-6 h-6 text-white"></i>
                </div>
                <div>
                    <div class="text-2xl font-bold text-navy">{{ data.columns|length|default:0 }}</div>
                    <div class="text-xs text-slate uppercase font-semibold">Columns</div>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 bg-gradient-to-br from-amber-500 to-orange-500 rounded-xl flex items-center justify-center">
                    <i data-lucide="user" class="w-6 h-6 text-white"></i>
                </div>
                <div>
                    <div class="text-lg font-bold text-navy truncate">{{ report.created_by.get_full_name|default:report.created_by.username }}</div>
                    <div class="text-xs text-slate uppercase font-semibold">Created By</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Data Table -->
    <div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden animate-in">
        {% if data.rows and data.rows|length > 0 %}
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-slate-50 border-b border-slate-200">
                    <tr>
                        {% for column in data.columns %}
                        <th class="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider">{{ column }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    {% for row in data.rows %}
                    <tr class="hover:bg-blue-50 transition">
                        {% for column_key in data.column_keys %}
                        <td class="px-4 py-3 text-sm text-navy">{{ row|lookup:column_key|default:"-" }}</td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% if data.rows|length > 100 %}
        <div class="px-4 py-3 bg-slate-50 text-center text-sm text-slate-600">
            Showing 100 of {{ data.rows|length }} records
        </div>
        {% endif %}
        {% else %}
        <div class="text-center py-16">
            <div class="w-20 h-20 bg-gradient-to-br from-slate-100 to-slate-200 rounded-full flex items-center justify-center mx-auto mb-4">
                <i data-lucide="inbox" class="w-10 h-10 text-slate-400"></i>
            </div>
            <p class="text-slate font-medium text-lg">No data found</p>
            <p class="text-slate mt-2">The report filters may be too restrictive or no data exists for the selected criteria.</p>
        </div>
        {% endif %}
    </div>

    <!-- Report Configuration (Collapsible) -->
    <div class="mt-6 bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden animate-in">
        <button type="button" class="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-slate-50 transition" onclick="toggleConfig()">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-gradient-to-br from-slate-100 to-slate-200 rounded-xl flex items-center justify-center">
                    <i data-lucide="settings" class="w-5 h-5 text-slate-600"></i>
                </div>
                <span class="font-bold text-navy">Report Configuration</span>
            </div>
            <i data-lucide="chevron-down" class="w-5 h-5 text-slate transition-transform" id="configChevron"></i>
        </button>
        <div id="configPanel" class="hidden border-t border-slate-100">
            <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h4 class="text-sm font-bold text-slate mb-2">Filter Configuration</h4>
                    <pre class="bg-slate-50 rounded-xl p-4 text-xs text-slate overflow-x-auto">{{ report.filter_config|json_script:"filterConfig" }}</pre>
                    <script id="filterConfig" type="application/json">{{ report.filter_config }}</script>
                    <div class="bg-slate-50 rounded-xl p-4 text-xs text-slate">
                        {% for key, value in report.filter_config.items %}
                        <div class="flex justify-between py-1 border-b border-slate-200 last:border-0">
                            <span class="font-medium">{{ key }}</span>
                            <span>{{ value }}</span>
                        </div>
                        {% empty %}
                        <p class="text-slate-400 italic">No filters configured</p>
                        {% endfor %}
                    </div>
                </div>
                <div>
                    <h4 class="text-sm font-bold text-slate mb-2">Report Details</h4>
                    <div class="bg-slate-50 rounded-xl p-4 text-xs text-slate space-y-2">
                        <div class="flex justify-between py-1 border-b border-slate-200">
                            <span class="font-medium">Data Source</span>
                            <span>{{ report.get_data_source_display }}</span>
                        </div>
                        <div class="flex justify-between py-1 border-b border-slate-200">
                            <span class="font-medium">Created</span>
                            <span>{{ report.created_at|date:"M d, Y H:i" }}</span>
                        </div>
                        <div class="flex justify-between py-1 border-b border-slate-200">
                            <span class="font-medium">Last Updated</span>
                            <span>{{ report.updated_at|date:"M d, Y H:i" }}</span>
                        </div>
                        {% if report.last_run_at %}
                        <div class="flex justify-between py-1 border-b border-slate-200">
                            <span class="font-medium">Last Run</span>
                            <span>{{ report.last_run_at|date:"M d, Y H:i" }}</span>
                        </div>
                        {% endif %}
                        {% if report.last_run_count %}
                        <div class="flex justify-between py-1">
                            <span class="font-medium">Last Run Count</span>
                            <span>{{ report.last_run_count }} records</span>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function toggleConfig() {
    const panel = document.getElementById('configPanel');
    const chevron = document.getElementById('configChevron');
    panel.classList.toggle('hidden');
    chevron.classList.toggle('rotate-180');
}

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