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

{% block title %}{{ source.name_en }} - {% trans "PX Source" %} - PX360{% endblock %}

{% block extra_css %}
<style>
    :root {
        --hh-navy: #005696;
        --hh-blue: #007bbd;
        --hh-light: #eef6fb;
        --hh-slate: #64748b;
    }

    .info-card {
        background: white;
        border-radius: 1rem;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    .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;
    }

    .info-table th {
        padding: 1rem;
        text-align: left;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--hh-navy);
        width: 35%;
        border-bottom: 1px solid #f1f5f9;
    }

    .info-table td {
        padding: 1rem;
        color: #475569;
        border-bottom: 1px solid #f1f5f9;
    }

    .info-table tr:last-child th,
    .info-table tr:last-child td {
        border-bottom: none;
    }

    .stat-card {
        background: linear-gradient(135deg, var(--hh-navy), var(--hh-blue));
        color: white;
        padding: 1.5rem;
        border-radius: 1rem;
        text-align: center;
    }

    .stat-value {
        font-size: 2.5rem;
        font-weight: 800;
    }

    .stat-label {
        font-size: 0.875rem;
        opacity: 0.9;
    }

    @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">
    <!-- Breadcrumb -->
    <nav class="mb-4 animate-in">
        <ol class="flex items-center gap-2 text-sm text-slate">
            <li><a href="{% url 'px_sources:source_list' %}" class="text-blue hover:text-navy font-medium">{% trans "PX Sources" %}</a></li>
            <li><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></li>
            <li class="text-navy font-semibold">{{ source.name_en }}</li>
        </ol>
    </nav>

    <!-- Page Header -->
    <div class="flex flex-wrap justify-between items-start gap-4 mb-6 animate-in">
        <div>
            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
                <div class="w-10 h-10 bg-blue/10 rounded-xl flex items-center justify-center">
                    <i data-lucide="radio" class="w-6 h-6 text-blue"></i>
                </div>
                {{ source.name_en }}
            </h1>
            <div class="mt-2 flex items-center gap-3">
                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 {% if source.is_active %}bg-green-100 text-green-700{% else %}bg-slate-100 text-slate-600{% endif %} rounded-full text-xs font-bold">
                    <i data-lucide="{% if source.is_active %}check-circle{% else %}x-circle{% endif %}" class="w-3.5 h-3.5"></i>
                    {% if source.is_active %}{% trans "Active" %}{% else %}{% trans "Inactive" %}{% endif %}
                </span>
                <span class="font-mono text-xs bg-slate-100 px-2 py-1 rounded">{{ source.code }}</span>
                <span class="source-type-badge inline-flex items-center gap-1.5 px-3 py-1.5 bg-blue-100 text-blue-700 rounded-full text-xs font-bold">
                    <i data-lucide="tag" class="w-3.5 h-3.5"></i>
                    {{ source.get_source_type_display }}
                </span>
            </div>
        </div>
        <div class="flex gap-2">
            <a href="{% url 'px_sources:source_list' %}"
               class="inline-flex items-center gap-2 px-4 py-2 border border-slate-200 text-slate-700 rounded-lg hover:bg-slate-50 transition">
                <i data-lucide="arrow-left" class="w-4 h-4"></i>
                {% trans "Back" %}
            </a>
            {% if request.user.is_px_admin or request.user.is_hospital_admin %}
            <a href="{% url 'px_sources:source_edit' source.pk %}"
               class="inline-flex items-center gap-2 px-4 py-2 bg-navy text-white rounded-lg hover:bg-blue transition shadow-lg shadow-navy/20">
                <i data-lucide="edit" class="w-4 h-4"></i>
                {% trans "Edit" %}
            </a>
            {% endif %}
            {% if request.user.is_px_admin %}
            <a href="{% url 'px_sources:source_delete' source.pk %}"
               class="inline-flex items-center gap-2 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition">
                <i data-lucide="trash-2" class="w-4 h-4"></i>
                {% trans "Delete" %}
            </a>
            {% endif %}
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Source Details -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Source Information -->
            <div class="info-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="info" class="w-5 h-5"></i>
                        {% trans "Source Information" %}
                    </h2>
                </div>
                <div class="p-0">
                    <table class="w-full info-table">
                        <tbody>
                            <tr>
                                <th>{% trans "Name (English)" %}</th>
                                <td class="font-semibold">{{ source.name_en }}</td>
                            </tr>
                            <tr>
                                <th>{% trans "Name (Arabic)" %}</th>
                                <td dir="rtl">{{ source.name_ar|default:"-" }}</td>
                            </tr>
                            <tr>
                                <th>{% trans "Description" %}</th>
                                <td>{{ source.description|default:"-"|linebreaks }}</td>
                            </tr>
                            {% if source.contact_email or source.contact_phone %}
                            <tr>
                                <th>{% trans "Contact" %}</th>
                                <td>
                                    {% if source.contact_email %}
                                    <div class="flex items-center gap-2">
                                        <i data-lucide="mail" class="w-4 h-4 text-slate"></i>
                                        <a href="mailto:{{ source.contact_email }}" class="text-blue hover:underline">{{ source.contact_email }}</a>
                                    </div>
                                    {% endif %}
                                    {% if source.contact_phone %}
                                    <div class="flex items-center gap-2 mt-1">
                                        <i data-lucide="phone" class="w-4 h-4 text-slate"></i>
                                        <a href="tel:{{ source.contact_phone }}" class="text-blue hover:underline">{{ source.contact_phone }}</a>
                                    </div>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endif %}
                            <tr>
                                <th>{% trans "Created" %}</th>
                                <td class="text-sm">{{ source.created_at|date:"Y-m-d H:i" }}</td>
                            </tr>
                            <tr>
                                <th>{% trans "Last Updated" %}</th>
                                <td class="text-sm">{{ source.updated_at|date:"Y-m-d H:i" }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Usage Statistics -->
            <div class="info-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="circle-help" class="w-5 h-5"></i>
                        {% trans "Usage Statistics (Last 30 Days)" %}
                    </h2>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-3 gap-4">
                        <div class="stat-card">
                            <div class="stat-value">{{ usage_stats.total_usage }}</div>
                            <div class="stat-label">{% trans "Total Usage" %}</div>
                        </div>
                        <div class="stat-card" style="background: linear-gradient(135deg, #10b981, #34d399);">
                            <div class="stat-value">{{ usage_stats.complaints }}</div>
                            <div class="stat-label">{% trans "Complaints" %}</div>
                        </div>
                        <div class="stat-card" style="background: linear-gradient(135deg, #f59e0b, #fbbf24);">
                            <div class="stat-value">{{ usage_stats.inquiries }}</div>
                            <div class="stat-label">{% trans "Inquiries" %}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Usage Records -->
            <div class="info-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="activity" class="w-5 h-5"></i>
                        {% trans "Recent Activity" %} ({{ usage_records|length }})
                    </h2>
                </div>
                <div class="p-0">
                    {% if usage_records %}
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead>
                                <tr class="border-b-2 border-slate-200">
                                    <th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Date" %}</th>
                                    <th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Type" %}</th>
                                    <th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Reference" %}</th>
                                    <th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Hospital" %}</th>
                                    <th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "User" %}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100">
                                {% for record in usage_records %}
                                <tr class="hover:bg-slate-50 transition">
                                    <td class="py-3 px-4 text-sm text-slate">{{ record.created_at|date:"Y-m-d H:i" }}</td>
                                    <td class="py-3 px-4">
                                        <span class="inline-flex items-center gap-1.5 px-2.5 py-1 {% if record.content_type.model == 'complaint' %}bg-red-100 text-red-700{% else %}bg-blue-100 text-blue-700{% endif %} rounded-full text-xs font-bold">
                                            <i data-lucide="{% if record.content_type.model == 'complaint' %}file-text{% else %}help-circle{% endif %}" class="w-3 h-3"></i>
                                            {{ record.content_type.model|title }}
                                        </span>
                                    </td>
                                    <td class="py-3 px-4 text-sm font-mono text-slate">{{ record.object_id|truncatechars:12 }}</td>
                                    <td class="py-3 px-4 text-sm text-slate">{{ record.hospital.name|default:"-" }}</td>
                                    <td class="py-3 px-4 text-sm text-navy">{{ record.user.get_full_name|default:"-" }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% 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="activity" class="w-8 h-8 text-slate-400"></i>
                        </div>
                        <p class="text-slate font-medium">{% trans "No usage records found" %}</p>
                        <p class="text-slate text-sm mt-1">{% trans "Activity will appear here once feedback is submitted" %}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Quick Stats -->
            <div class="info-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="trending-up" class="w-5 h-5"></i>
                        {% trans "Quick Stats" %}
                    </h2>
                </div>
                <div class="p-6 space-y-4">
                    <div class="flex items-center justify-between">
                        <span class="text-slate text-sm">{% trans "Total Complaints" %}</span>
                        <span class="font-bold text-navy text-lg">{{ source.total_complaints }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-slate text-sm">{% trans "Total Inquiries" %}</span>
                        <span class="font-bold text-navy text-lg">{{ source.total_inquiries }}</span>
                    </div>
                    <div class="pt-4 border-t border-slate-200">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-slate text-sm">{% trans "Source Users" %}</span>
                            <span class="font-bold text-navy text-lg">{{ source_users.count }}</span>
                        </div>
                        {% if source_users %}
                        <div class="space-y-2 mt-3">
                            {% for su in source_users|slice:":5" %}
                            <div class="flex items-center gap-2 text-sm">
                                <div class="w-8 h-8 rounded-full bg-blue/10 flex items-center justify-center">
                                    <i data-lucide="user" class="w-4 h-4 text-blue"></i>
                                </div>
                                <div class="flex-1">
                                    <p class="font-medium text-navy">{{ su.user.get_full_name }}</p>
                                    <p class="text-xs text-slate">{{ su.user.email }}</p>
                                </div>
                                {% if su.is_active %}
                                <i data-lucide="check-circle" class="w-4 h-4 text-green-600"></i>
                                {% else %}
                                <i data-lucide="x-circle" class="w-4 h-4 text-slate-400"></i>
                                {% endif %}
                            </div>
                            {% endfor %}
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="info-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="settings" class="w-5 h-5"></i>
                        {% trans "Manage" %}
                    </h2>
                </div>
                <div class="p-4 space-y-2">
                    {% if request.user.is_px_admin or request.user.is_hospital_admin %}
                    <a href="{% url 'px_sources:source_user_create' source.pk %}"
                       class="flex items-center gap-2 p-3 rounded-lg hover:bg-slate-50 transition text-navy font-medium">
                        <i data-lucide="user-plus" class="w-4 h-4"></i>
                        {% trans "Add Source User" %}
                    </a>
                    {% endif %}
                    <a href="{% url 'px_sources:source_edit' source.pk %}"
                       class="flex items-center gap-2 p-3 rounded-lg hover:bg-slate-50 transition text-navy font-medium">
                        <i data-lucide="edit" class="w-4 h-4"></i>
                        {% trans "Edit Source" %}
                    </a>
                    {% if source.is_active %}
                    <a href="{% url 'px_sources:source_toggle_status' source.pk %}"
                       class="flex items-center gap-2 p-3 rounded-lg hover:bg-slate-50 transition text-yellow-600 font-medium">
                        <i data-lucide="pause" class="w-4 h-4"></i>
                        {% trans "Deactivate" %}
                    </a>
                    {% else %}
                    <a href="{% url 'px_sources:source_toggle_status' source.pk %}"
                       class="flex items-center gap-2 p-3 rounded-lg hover:bg-slate-50 transition text-green-600 font-medium">
                        <i data-lucide="play" class="w-4 h-4"></i>
                        {% trans "Activate" %}
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

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