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

{% block title %}{% trans "System Configuration" %} - PX360{% endblock %}

{% block content %}
<!-- Header -->
<header class="mb-8">
    <div class="flex justify-between items-start">
        <div>
            <h1 class="text-2xl font-bold text-navy">
                <i data-lucide="settings" class="w-6 h-6 inline-block mr-2"></i>
                {% trans "System Configuration" %}
            </h1>
            <p class="text-sm text-slate mt-1">{% trans "Manage system-wide settings and configurations" %}</p>
        </div>
    </div>
</header>

<!-- Complaints Management Section -->
<section class="mb-8">
    <h2 class="text-lg font-bold text-navy mb-4 flex items-center gap-2">
        <i data-lucide="message-square-warning" class="w-5 h-5 text-orange-500"></i>
        {% trans "Complaints Management" %}
    </h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Complaint SLA -->
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 text-center card-hover">
            <div class="w-16 h-16 mx-auto mb-4 bg-blue-100 rounded-2xl flex items-center justify-center">
                <i data-lucide="file-clock" class="w-8 h-8 text-blue-600"></i>
            </div>
            <h3 class="font-bold text-navy text-lg mb-2">{% trans "Complaint SLA" %}</h3>
            <p class="text-sm text-slate mb-4">{% trans "Manage complaint SLA settings" %}</p>
            <a href="{% url 'complaints:sla_management' %}" class="inline-flex items-center gap-2 bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue transition">
                <i data-lucide="settings-2" class="w-4 h-4"></i>
                {% trans "Configure SLA" %}
            </a>
        </div>

        <!-- Escalation Rules -->
        {% comment %} <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 text-center card-hover">
            <div class="w-16 h-16 mx-auto mb-4 bg-orange-100 rounded-2xl flex items-center justify-center">
                <i data-lucide="trending-up" class="w-8 h-8 text-orange-600"></i>
            </div>
            <h3 class="font-bold text-navy text-lg mb-2">{% trans "Escalation Rules" %}</h3>
            <p class="text-sm text-slate mb-4">{% trans "Configure automatic escalation when deadlines are exceeded" %}</p>
            <a href="{% url 'complaints:escalation_rule_list' %}" class="inline-flex items-center gap-2 bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue transition">
                <i data-lucide="settings-2" class="w-4 h-4"></i>
                {% trans "Manage Rules" %}
            </a>
        </div>

        <!-- Complaint Thresholds -->
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 text-center card-hover">
            <div class="w-16 h-16 mx-auto mb-4 bg-purple-100 rounded-2xl flex items-center justify-center">
                <i data-lucide="bar-chart" class="w-8 h-8 text-purple-600"></i>
            </div>
            <h3 class="font-bold text-navy text-lg mb-2">{% trans "Complaint Thresholds" %}</h3>
            <p class="text-sm text-slate mb-4">{% trans "Set alert thresholds for complaint volume monitoring" %}</p>
            <a href="{% url 'complaints:complaint_threshold_list' %}" class="inline-flex items-center gap-2 bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue transition">
                <i data-lucide="settings-2" class="w-4 h-4"></i>
                {% trans "Manage Thresholds" %}
            </a>
        </div> {% endcomment %}

        <!-- On-Call Schedules -->
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 text-center card-hover">
            <div class="w-16 h-16 mx-auto mb-4 bg-indigo-100 rounded-2xl flex items-center justify-center">
                <i data-lucide="moon" class="w-8 h-8 text-indigo-600"></i>
            </div>
            <h3 class="font-bold text-navy text-lg mb-2">{% trans "On-Call Schedules" %}</h3>
            <p class="text-sm text-slate mb-4">{{ oncall_schedules_count }} {% trans "active schedules" %}</p>
            <a href="{% url 'complaints:oncall_dashboard' %}" class="inline-flex items-center gap-2 bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue transition">
                <i data-lucide="users" class="w-4 h-4"></i>
                {% trans "Manage On-Call" %}
            </a>
        </div>
    </div>
</section>

<!-- PX Actions Section -->
{% comment %} <section class="mb-8">
    <h2 class="text-lg font-bold text-navy mb-4 flex items-center gap-2">
        <i data-lucide="zap" class="w-5 h-5 text-yellow-500"></i>
        {% trans "PX Actions" %}
    </h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- General SLA -->
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 text-center card-hover">
            <div class="w-16 h-16 mx-auto mb-4 bg-yellow-100 rounded-2xl flex items-center justify-center">
                <i data-lucide="clock" class="w-8 h-8 text-yellow-600"></i>
            </div>
            <h3 class="font-bold text-navy text-lg mb-2">{% trans "General SLA" %}</h3>
            <p class="text-sm text-slate mb-4">{{ sla_configs_count }} {% trans "active configs" %}</p>
            <a href="{% url 'config:sla_config_list' %}" class="inline-flex items-center gap-2 bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue transition">
                <i data-lucide="settings-2" class="w-4 h-4"></i>
                {% trans "Manage SLA" %}
            </a>
        </div>

        <!-- Routing Rules -->
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 text-center card-hover">
            <div class="w-16 h-16 mx-auto mb-4 bg-blue-100 rounded-2xl flex items-center justify-center">
                <i data-lucide="git-branch" class="w-8 h-8 text-blue-600"></i>
            </div>
            <h3 class="font-bold text-navy text-lg mb-2">{% trans "Routing Rules" %}</h3>
            <p class="text-sm text-slate mb-4">{{ routing_rules_count }} {% trans "active rules" %}</p>
            <a href="{% url 'config:routing_rules_list' %}" class="inline-flex items-center gap-2 bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue transition">
                <i data-lucide="route" class="w-4 h-4"></i>
                {% trans "Manage Routing" %}
            </a>
        </div>
    </div>
</section> {% endcomment %}

<!-- User Management Section -->
<section class="mb-8">
    <h2 class="text-lg font-bold text-navy mb-4 flex items-center gap-2">
        <i data-lucide="users" class="w-5 h-5 text-green-500"></i>
        {% trans "User Management" %}
    </h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- User Management -->
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 text-center card-hover">
            <div class="w-16 h-16 mx-auto mb-4 bg-green-100 rounded-2xl flex items-center justify-center">
                <i data-lucide="users" class="w-8 h-8 text-green-600"></i>
            </div>
            <h3 class="font-bold text-navy text-lg mb-2">{% trans "Users" %}</h3>
            <p class="text-sm text-slate mb-4">{{ active_users_count }} {% trans "active users" %}</p>
            <a href="{% url 'config:hospital_users_list' %}" class="inline-flex items-center gap-2 bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue transition">
                <i data-lucide="user-cog" class="w-4 h-4"></i>
                {% trans "Manage Users" %}
            </a>
        </div>

        <!-- Onboarding -->
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 text-center card-hover">
            <div class="w-16 h-16 mx-auto mb-4 bg-teal-100 rounded-2xl flex items-center justify-center">
                <i data-lucide="user-plus" class="w-8 h-8 text-teal-600"></i>
            </div>
            <h3 class="font-bold text-navy text-lg mb-2">{% trans "Onboarding" %}</h3>
            <p class="text-sm text-slate mb-4">{{ provisional_users_count }} {% trans "pending users" %}</p>
            <a href="{% url 'accounts:onboarding-dashboard' %}" class="inline-flex items-center gap-2 bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue transition">
                <i data-lucide="users" class="w-4 h-4"></i>
                {% trans "Manage Onboarding" %}
            </a>
        </div>
    </div>
</section>

<!-- System Settings Section -->
<section class="mb-8">
    <h2 class="text-lg font-bold text-navy mb-4 flex items-center gap-2">
        <i data-lucide="server" class="w-5 h-5 text-slate-500"></i>
        {% trans "System Settings" %}
    </h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Hospitals -->
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 text-center card-hover">
            <div class="w-16 h-16 mx-auto mb-4 bg-emerald-100 rounded-2xl flex items-center justify-center">
                <i data-lucide="building-2" class="w-8 h-8 text-emerald-600"></i>
            </div>
            <h3 class="font-bold text-navy text-lg mb-2">{% trans "Hospitals" %}</h3>
            <p class="text-sm text-slate mb-4">{{ hospitals_count }} {% trans "active hospitals" %}</p>
            <a href="/admin/organizations/hospital/" class="inline-flex items-center gap-2 bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue transition">
                <i data-lucide="hospital" class="w-4 h-4"></i>
                {% trans "Manage Hospitals" %}
            </a>
        </div>

        <!-- Hospital Notifications -->
        {% comment %} <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 text-center card-hover">
            <div class="w-16 h-16 mx-auto mb-4 bg-pink-100 rounded-2xl flex items-center justify-center">
                <i data-lucide="bell-ring" class="w-8 h-8 text-pink-600"></i>
            </div>
            <h3 class="font-bold text-navy text-lg mb-2">{% trans "Notifications" %}</h3>
            <p class="text-sm text-slate mb-4">{% trans "Configure hospital notification settings" %}</p>
            <a href="{% url 'notifications:settings' %}" class="inline-flex items-center gap-2 bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue transition">
                <i data-lucide="bell" class="w-4 h-4"></i>
                {% trans "Configure" %}
            </a>
        </div> {% endcomment %}

        <!-- Send SMS -->
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 text-center card-hover">
            <div class="w-16 h-16 mx-auto mb-4 bg-green-100 rounded-2xl flex items-center justify-center">
                <i data-lucide="message-square" class="w-8 h-8 text-green-600"></i>
            </div>
            <h3 class="font-bold text-navy text-lg mb-2">{% trans "Send SMS" %}</h3>
            <p class="text-sm text-slate mb-4">{% trans "Send text messages directly to any phone number" %}</p>
            <a href="{% url 'notifications:send_sms_direct' %}" class="inline-flex items-center gap-2 bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue transition">
                <i data-lucide="send" class="w-4 h-4"></i>
                {% trans "Send SMS" %}
            </a>
        </div>

        <!-- Call Records -->
        <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 text-center card-hover">
            <div class="w-16 h-16 mx-auto mb-4 bg-cyan-100 rounded-2xl flex items-center justify-center">
                <i data-lucide="phone-call" class="w-8 h-8 text-cyan-600"></i>
            </div>
            <h3 class="font-bold text-navy text-lg mb-2">{% trans "Call Records" %}</h3>
            <p class="text-sm text-slate mb-4">{{ call_records_count }} {% trans "records" %}</p>
            <a href="{% url 'callcenter:call_records_list' %}" class="inline-flex items-center gap-2 bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue transition">
                <i data-lucide="headphones" class="w-4 h-4"></i>
                {% trans "View Records" %}
            </a>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
    // Re-initialize Lucide icons after page load
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });
</script>
{% endblock %}