{% extends 'layouts/public_base.html' %}
{% load i18n %}

{% block title %}{% trans "Select Visit" %} - {{ hospital.name }} - PX360{% endblock %}

{% block extra_css %}
<style>
.type-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.025em;
}
.type-badge.ed { background: #fef3c7; color: #92400e; }
.type-badge.ip { background: #dbeafe; color: #1e40af; }
.type-badge.op { background: #d1fae5; color: #065f46; }
.type-badge.daycase { background: #f3e8ff; color: #6b21a8; }
.type-badge.appointment { background: #fce7f3; color: #9d174d; }
.vip-badge {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
</style>
{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto px-4 py-8 md:py-12">
    <!-- Breadcrumb -->
    <a href="{% url 'complaints:patient_complaint_portal' session.token %}" 
       class="inline-flex items-center gap-2 text-navy/70 hover:text-navy mb-6 transition-all font-medium group">
        <div class="p-2 rounded-full group-hover:bg-navy/5 transition-colors">
            <i data-lucide="arrow-left" class="w-5 h-5 group-hover:-translate-x-1 transition-transform"></i>
        </div>
        {% trans "Hospitals" %}
    </a>

    <!-- Header Card -->
    <div class="glass-card rounded-2xl shadow-xl overflow-hidden mb-8 animate-fade-in">
        <div class="bg-gradient-to-r from-navy to-blue p-6 text-white">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                    <i data-lucide="building-2" class="w-6 h-6"></i>
                </div>
                <div>
                    <h1 class="text-xl font-bold">{{ hospital.name }}</h1>
                    <p class="text-blue-100 text-sm">{% trans "Select the visit you want to submit a complaint about" %}</p>
                </div>
            </div>
        </div>
        <div class="p-6">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-navy/10 rounded-xl flex items-center justify-center">
                    <i data-lucide="user" class="w-5 h-5 text-navy"></i>
                </div>
                <div>
                    <p class="text-xs text-slate font-semibold uppercase tracking-wider">{% trans "Patient" %}</p>
                    <p class="font-bold text-gray-800">{{ patient.get_full_name }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Visit List -->
    <div class="space-y-3 animate-slide-up" style="animation-delay: 0.1s">
        {% if visits %}
            {% for visit in visits %}
            <a href="{% url 'complaints:patient_complaint_visit_form' session.token visit.id %}"
               class="glass-card block rounded-2xl border border-white/50 hover:border-navy hover:shadow-xl transition-all duration-300 p-5 group">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 bg-navy/10 rounded-xl flex items-center justify-center group-hover:bg-navy/20 transition-colors">
                            <i data-lucide="calendar-check" class="w-6 h-6 text-navy"></i>
                        </div>
                        <div>
                            <div class="flex items-center gap-2 mb-1.5">
                                <span class="type-badge {{ visit.patient_type|lower }}">{{ visit.patient_type }}</span>
                                <span class="font-mono text-xs text-slate bg-slate-100 px-2 py-0.5 rounded-md">{{ visit.admission_id }}</span>
                                {% if visit.is_vip %}
                                <span class="vip-badge">VIP</span>
                                {% endif %}
                            </div>
                            <div class="flex items-center gap-2 text-sm text-slate">
                                <span class="flex items-center gap-1">
                                    <i data-lucide="calendar" class="w-3.5 h-3.5"></i>
                                    {{ visit.admit_date|date:"d M Y, H:i" }}
                                </span>
                                {% if visit.primary_doctor %}
                                <span class="text-slate-300">&middot;</span>
                                <span class="flex items-center gap-1">
                                    <i data-lucide="stethoscope" class="w-3.5 h-3.5"></i>
                                    {{ visit.doctor_display }}
                                </span>
                                {% endif %}
                            </div>
                            {% if visit.discharge_date %}
                            <div class="flex items-center gap-1 mt-1 text-xs text-green-600">
                                <i data-lucide="log-out" class="w-3 h-3"></i>
                                {% trans "Discharged" %}: {{ visit.discharge_date|date:"d M Y, H:i" }}
                            </div>
                            {% else %}
                            <div class="flex items-center gap-1 mt-1 text-xs text-amber-600">
                                <i data-lucide="loader" class="w-3 h-3"></i>
                                {% trans "Visit in progress" %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="flex items-center gap-2 text-navy">
                        <i data-lucide="chevron-right" class="w-5 h-5 text-slate-300 group-hover:text-navy group-hover:translate-x-1 transition-all"></i>
                    </div>
                </div>
            </a>
            {% endfor %}
        {% else %}
            <div class="glass-card rounded-2xl p-12 text-center">
                <div class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i data-lucide="calendar-x" class="w-8 h-8 text-slate-300"></i>
                </div>
                <p class="text-slate font-medium">{% trans "No visits found for this hospital" %}</p>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    lucide.createIcons();
</script>
{% endblock %}