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

{% block title %}{% trans "Generate Presentation" %} — PX360{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto">
    <nav class="flex items-center gap-2 text-sm text-gray-400 mb-6">
        <a href="{% url 'presentations:list' %}" class="hover:text-navy transition">{% trans "Presentations" %}</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span class="text-gray-700">{% trans "Generate" %}</span>
    </nav>

    <div class="bg-white rounded-2xl border-2 border-gray-200 p-8">
        <div class="flex items-center gap-3 mb-2">
            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-navy to-teal flex items-center justify-center">
                <i data-lucide="sparkles" class="w-5 h-5 text-white"></i>
            </div>
            <h1 class="text-xl font-bold text-gray-800">{% trans "AI-Powered Presentation" %}</h1>
        </div>
        <p class="text-sm text-gray-500 mb-6 ml-[52px]">
            {% trans "Select a hospital and period to automatically generate a complaints report presentation with AI-enhanced insights." %}
        </p>

        <form method="post">
            {% csrf_token %}

            <div class="space-y-5">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Report Type" %} *</label>
                    <select name="report_type" id="id_report_type"
                            class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 text-sm focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition">
                        <option value="complaints" {% if selected_report_type == "complaints" %}selected{% endif %}>{% trans "Complaints Report" %}</option>
                        <option value="doctor_ratings" {% if selected_report_type == "doctor_ratings" %}selected{% endif %}>{% trans "Doctor Ratings Report" %}</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Hospital" %} *</label>
                    <select name="hospital" required
                            class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 text-sm focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition">
                        <option value="">— {% trans "Select a hospital" %} —</option>
                        {% for h in hospitals %}
                        <option value="{{ h.pk }}" {% if selected_hospital == h.pk|stringformat:"s" %}selected{% endif %}>{{ h.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="grid grid-cols-2 gap-5">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Year" %} *</label>
                        <select name="year" required
                                class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 text-sm focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition">
                            {% for y in years %}
                            <option value="{{ y }}" {% if y == selected_year %}selected{% endif %}>{{ y }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">{% trans "Quarter" %}</label>
                        <select name="quarter"
                                class="w-full border-2 border-gray-200 rounded-xl px-4 py-3 text-sm focus:border-navy focus:ring-2 focus:ring-navy/20 outline-none transition">
                            <option value="">— {% trans "Full Year" %} —</option>
                            <option value="1" {% if selected_quarter == "1" %}selected{% endif %}>{% trans "Q1 (Jan–Mar)" %}</option>
                            <option value="2" {% if selected_quarter == "2" %}selected{% endif %}>{% trans "Q2 (Apr–Jun)" %}</option>
                            <option value="3" {% if selected_quarter == "3" %}selected{% endif %}>{% trans "Q3 (Jul–Sep)" %}</option>
                            <option value="4" {% if selected_quarter == "4" %}selected{% endif %}>{% trans "Q4 (Oct–Dec)" %}</option>
                        </select>
                    </div>
                </div>

                <div class="bg-gray-50 rounded-xl p-4 border border-gray-100">
                    <div class="flex items-start gap-3">
                        <i data-lucide="info" class="w-5 h-5 text-teal mt-0.5 shrink-0"></i>
                        <div class="text-sm text-gray-600 space-y-1" id="report-info-complaints">
                            <p>{% trans "The presentation will include:" %}</p>
                            <ul class="list-disc list-inside space-y-0.5 text-gray-500">
                                <li>{% trans "Cover page with hospital branding" %}</li>
                                <li>{% trans "KPI dashboard with key metrics" %}</li>
                                <li>{% trans "Complaint source & location breakdowns" %}</li>
                                <li>{% trans "Department & escalation analysis" %}</li>
                                <li>{% trans "Response time analytics" %}</li>
                                <li>{% trans "AI-generated insights & recommendations" %}</li>
                            </ul>
                        </div>
                        <div class="text-sm text-gray-600 space-y-1 hidden" id="report-info-ratings">
                            <p>{% trans "The presentation will include:" %}</p>
                            <ul class="list-disc list-inside space-y-0.5 text-gray-500">
                                <li>{% trans "Cover page with hospital branding" %}</li>
                                <li>{% trans "KPI dashboard — avg rating, positive/negative %" %}</li>
                                <li>{% trans "Rating distribution chart (1–5 stars)" %}</li>
                                <li>{% trans "Monthly rating trend" %}</li>
                                <li>{% trans "Per-department physician rating tables (color-coded)" %}</li>
                                <li>{% trans "Top 10 performers + AI-generated insights" %}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-end gap-3 mt-8 pt-6 border-t border-gray-100">
            <a href="{% url 'presentations:template_list' %}" class="px-5 py-2.5 text-sm font-medium text-teal hover:text-teal-700 transition flex items-center gap-1">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                {% trans "Use Template Builder" %}
            </a>
            <a href="{% url 'presentations:list' %}" class="px-5 py-2.5 text-sm font-medium text-gray-600 hover:text-gray-800 transition">{% trans "Cancel" %}</a>
                <button type="submit" class="bg-gradient-to-r from-navy to-teal text-white px-6 py-2.5 rounded-xl hover:opacity-90 transition font-medium text-sm flex items-center gap-2">
                    <i data-lucide="sparkles" class="w-4 h-4"></i>
                    {% trans "Generate Presentation" %}
                </button>
            </div>
        </form>
    </div>
</div>
<script>
document.getElementById('id_report_type').addEventListener('change', function() {
    var isRatings = this.value === 'doctor_ratings';
    document.getElementById('report-info-complaints').classList.toggle('hidden', isRatings);
    document.getElementById('report-info-ratings').classList.toggle('hidden', !isRatings);
});
</script>
{% endblock %}