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

{% block title %}{% trans "Inquiries Console" %} - PX360{% endblock %}

{% block extra_css %}
<style>
    :root {
        --hh-navy: #005696;
        --hh-blue: #007bbd;
        --hh-light: #eef6fb;
        --hh-slate: #64748b;
        --hh-success: #10b981;
        --hh-warning: #f59e0b;
        --hh-danger: #ef4444;
    }

    .page-header {
        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
        color: white;
        padding: 2rem 2.5rem;
        border-radius: 1rem;
        margin-bottom: 2rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .data-card {
        background: white;
        border-radius: 1rem;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }

    .data-card:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .card-header {
        background: linear-gradient(135deg, var(--hh-light), #e0f2fe);
        padding: 1.25rem 1.75rem;
        border-bottom: 1px solid #bae6fd;
        border-radius: 1rem 1rem 0 0;
    }

    .data-table th {
        background: linear-gradient(135deg, var(--hh-light), #e0f2fe);
        padding: 0.875rem 1rem;
        text-align: left;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--hh-navy);
        border-bottom: 2px solid #bae6fd;
    }

    .data-table td {
        padding: 1rem;
        border-bottom: 1px solid #f1f5f9;
        color: #475569;
        font-size: 0.875rem;
    }

    .data-table tbody tr {
        transition: background-color 0.2s ease;
        cursor: pointer;
    }

    .data-table tbody tr:hover {
        background-color: var(--hh-light);
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.875rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 700;
    }

    .status-badge.open { background: linear-gradient(135deg, #e3f2fd, #bbdefb); color: #1565c0; }
    .status-badge.in_progress { background: linear-gradient(135deg, #fff3e0, #ffe0b2); color: #e65100; }
    .status-badge.resolved { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); color: #2e7d32; }
    .status-badge.closed { background: linear-gradient(135deg, #f5f5f5, #e0e0e0); color: #616161; }

    .priority-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.25rem 0.625rem;
        border-radius: 9999px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .priority-badge.low { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); color: #2e7d32; }
    .priority-badge.medium { background: linear-gradient(135deg, #fff3e0, #ffe0b2); color: #e65100; }
    .priority-badge.high { background: linear-gradient(135deg, #ffebee, #ffcdd2); color: #c62828; }
    .priority-badge.urgent { background: linear-gradient(135deg, #880e4f, #ad1457); color: white; }

    .stat-card {
        background: white;
        border-radius: 1rem;
        padding: 1.5rem;
        border: 1px solid #e2e8f0;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.1);
    }

    .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
    }

    .stat-icon.blue { background: linear-gradient(135deg, #e3f2fd, #bbdefb); }
    .stat-icon.green { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); }
    .stat-icon.orange { background: linear-gradient(135deg, #fff3e0, #ffe0b2); }
    .stat-icon.slate { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); }

    @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="px-4 py-6">
    <!-- Page Header -->
    <div class="page-header animate-in">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold mb-2">
                    <i data-lucide="help-circle" class="w-7 h-7 inline-block me-2"></i>
                    {% trans "Inquiries Console" %}
                </h1>
                <p class="text-white/90">{% trans "Manage patient inquiries and requests" %}</p>
            </div>
            <a href="{% url 'complaints:inquiry_create' %}"
               class="inline-flex items-center gap-2 bg-white text-navy px-5 py-2.5 rounded-xl font-bold hover:bg-light transition shadow-lg">
                <i data-lucide="plus" class="w-4 h-4"></i>
                {% trans "New Inquiry" %}
            </a>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6 animate-in">
        <div class="stat-card">
            <div class="stat-icon blue">
                <i data-lucide="inbox" class="w-6 h-6 text-blue-600"></i>
            </div>
            <p class="text-xs font-bold text-slate uppercase tracking-wider">{% trans "Total Inquiries" %}</p>
            <p class="text-2xl font-black text-navy mt-1">{{ stats.total }}</p>
        </div>
        <div class="stat-card">
            <div class="stat-icon green">
                <i data-lucide="check-circle" class="w-6 h-6 text-green-600"></i>
            </div>
            <p class="text-xs font-bold text-slate uppercase tracking-wider">{% trans "Resolved" %}</p>
            <p class="text-2xl font-black text-navy mt-1">{{ stats.resolved }} <span class="text-sm text-green-600">({{ stats.resolved_percentage|floatformat:1 }}%)</span></p>
        </div>
        <div class="stat-card">
            <div class="stat-icon orange">
                <i data-lucide="clock" class="w-6 h-6 text-orange-600"></i>
            </div>
            <p class="text-xs font-bold text-slate uppercase tracking-wider">{% trans "In Progress" %}</p>
            <p class="text-2xl font-black text-navy mt-1">{{ stats.in_progress }}</p>
        </div>
        <div class="stat-card">
            <div class="stat-icon slate">
                <i data-lucide="alert-triangle" class="w-6 h-6 text-red-500"></i>
            </div>
            <p class="text-xs font-bold text-slate uppercase tracking-wider">{% trans "Overdue" %}</p>
            <p class="text-2xl font-black text-navy mt-1">{{ stats.overdue }}</p>
        </div>
    </div>

    <!-- Filters -->
    <div class="data-card mb-6 animate-in">
        <div class="card-header">
            <h2 class="text-lg font-bold text-navy flex items-center gap-2 m-0">
                <i data-lucide="filter" class="w-5 h-5"></i>
                {% trans "Filters" %}
            </h2>
        </div>
        <div class="p-6">
            <form method="get" class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-slate mb-1.5">{% trans "Search" %}</label>
                    <input type="text" name="search" value="{{ filters.search }}"
                           placeholder="{% trans 'Subject, contact name...' %}"
                           class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl focus:outline-none focus:border-blue focus:ring-2 focus:ring-blue/20">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-slate mb-1.5">{% trans "Status" %}</label>
                    <select name="status" class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl focus:outline-none focus:border-blue bg-white">
                        <option value="">{% trans "All Status" %}</option>
                        <option value="open" {% if filters.status == 'open' %}selected{% endif %}>{% trans "Open" %}</option>
                        <option value="in_progress" {% if filters.status == 'in_progress' %}selected{% endif %}>{% trans "In Progress" %}</option>
                        <option value="resolved" {% if filters.status == 'resolved' %}selected{% endif %}>{% trans "Resolved" %}</option>
                        <option value="closed" {% if filters.status == 'closed' %}selected{% endif %}>{% trans "Closed" %}</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-slate mb-1.5">{% trans "Category" %}</label>
                    <select name="category" class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl focus:outline-none focus:border-blue bg-white">
                        <option value="">{% trans "All Categories" %}</option>
                        <option value="general" {% if filters.category == 'general' %}selected{% endif %}>{% trans "General" %}</option>
                        <option value="services" {% if filters.category == 'services' %}selected{% endif %}>{% trans "Services" %}</option>
                        <option value="appointments" {% if filters.category == 'appointments' %}selected{% endif %}>{% trans "Appointments" %}</option>
                        <option value="billing" {% if filters.category == 'billing' %}selected{% endif %}>{% trans "Billing" %}</option>
                        <option value="medical" {% if filters.category == 'medical' %}selected{% endif %}>{% trans "Medical Records" %}</option>
                    </select>
                </div>
                <div class="flex items-end">
                    <button type="submit" class="w-full px-6 py-2.5 bg-navy text-white rounded-xl font-bold hover:bg-blue transition shadow-lg shadow-navy/25">
                        <i data-lucide="search" class="w-4 h-4 inline-block me-2"></i>
                        {% trans "Filter" %}
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Inquiries Table -->
    <div class="data-card animate-in">
        <div class="card-header">
            <h2 class="text-lg font-bold text-navy flex items-center gap-2 m-0">
                <i data-lucide="help-circle" class="w-5 h-5"></i>
                {% trans "All Inquiries" %} ({{ inquiries.paginator.count }})
            </h2>
        </div>
        <div class="p-0">
            {% if inquiries %}
            <div class="overflow-x-auto">
                <table class="w-full data-table">
                    <thead>
                        <tr>
                            <th>{% trans "Reference" %}</th>
                            <th>{% trans "Subject" %}</th>
                            <th>{% trans "Contact" %}</th>
                            <th>{% trans "Category" %}</th>
                            <th class="text-center">{% trans "Status" %}</th>
                            <th class="text-center">{% trans "Priority" %}</th>
                            <th class="text-center">{% trans "Hospital" %}</th>
                            <th>{% trans "Created" %}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        {% for inquiry in inquiries %}
                        <tr onclick="window.location='{% url 'complaints:inquiry_detail' inquiry.pk %}'">
                            <td>
                                <span class="font-mono text-xs bg-slate-100 px-2 py-1 rounded">{{ inquiry.reference_number|truncatechars:15 }}</span>
                            </td>
                            <td>
                                <a href="{% url 'complaints:inquiry_detail' inquiry.pk %}"
                                   class="font-semibold text-navy hover:text-blue transition">
                                    {{ inquiry.subject|truncatechars:40 }}
                                </a>
                            </td>
                            <td>
                                <div>
                                    <p class="font-medium text-slate-700">{{ inquiry.contact_name|default:"-" }}</p>
                                    <p class="text-xs text-slate">{{ inquiry.contact_phone|default:inquiry.contact_email|default:"-" }}</p>
                                </div>
                            </td>
                            <td>
                                <span class="text-sm text-slate">{{ inquiry.get_category_display|default:"-" }}</span>
                            </td>
                            <td class="text-center">
                                <span class="status-badge {{ inquiry.status }}">
                                    <i data-lucide="{% if inquiry.status == 'open' %}circle{% elif inquiry.status == 'in_progress' %}clock{% elif inquiry.status == 'resolved' %}check-circle{% else %}check{% endif %}" class="w-3 h-3"></i>
                                    {{ inquiry.get_status_display }}
                                </span>
                            </td>
                            <td class="text-center">
                                <span class="priority-badge {{ inquiry.priority }}">
                                    {% if inquiry.priority == 'low' %}
                                        <i data-lucide="arrow-down" class="w-3 h-3"></i>
                                    {% elif inquiry.priority == 'medium' %}
                                        <i data-lucide="minus" class="w-3 h-3"></i>
                                    {% elif inquiry.priority == 'high' %}
                                        <i data-lucide="arrow-up" class="w-3 h-3"></i>
                                    {% else %}
                                        <i data-lucide="zap" class="w-3 h-3"></i>
                                    {% endif %}
                                    {{ inquiry.get_priority_display }}
                                </span>
                            </td>
                            <td class="text-center">
                                <span class="text-sm text-slate">{{ inquiry.hospital.name|truncatechars:15 }}</span>
                            </td>
                            <td>
                                <div class="text-sm text-slate">
                                    <p>{{ inquiry.created_at|date:"Y-m-d" }}</p>
                                    <p class="text-xs">{{ inquiry.created_at|date:"H:i" }}</p>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            {% if inquiries.has_other_pages %}
            <div class="p-4 border-t border-slate-200">
                <div class="flex items-center justify-between">
                    <p class="text-sm text-slate">
                        {% blocktrans with start=inquiries.start_index end=inquiries.end_index total=inquiries.paginator.count %}
                            Showing {{ start }} to {{ end }} of {{ total }} inquiries
                        {% endblocktrans %}
                    </p>
                    <div class="flex gap-2">
                        {% if inquiries.has_previous %}
                        <a href="?page={{ inquiries.previous_page_number }}{% if filters.search %}&search={{ filters.search }}{% endif %}{% if filters.status %}&status={{ filters.status }}{% endif %}{% if filters.category %}&category={{ filters.category }}{% endif %}"
                           class="px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition text-sm font-medium">
                            {% trans "Previous" %}
                        </a>
                        {% endif %}
                        {% if inquiries.has_next %}
                        <a href="?page={{ inquiries.next_page_number }}{% if filters.search %}&search={{ filters.search }}{% endif %}{% if filters.status %}&status={{ filters.status }}{% endif %}{% if filters.category %}&category={{ filters.category }}{% endif %}"
                           class="px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition text-sm font-medium">
                            {% trans "Next" %}
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endif %}
            {% else %}
            <div class="text-center py-12">
                <div class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i data-lucide="help-circle" class="w-8 h-8 text-slate-400"></i>
                </div>
                <p class="text-slate font-medium">{% trans "No inquiries found" %}</p>
                <p class="text-slate text-sm mt-1">{% trans "Adjust your filters or create a new inquiry" %}</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>

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