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

{% block title %}{% trans "Settings" %}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Page Header -->
    <div class="hh-page-header mb-8">
        <h1 class="text-2xl font-bold flex items-center gap-2">
            <i data-lucide="settings" class="w-7 h-7"></i>
            {% trans "Settings" %}
        </h1>
        <p>{% trans "Manage your account preferences and configurations" %}</p>
    </div>

    <!-- Settings Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        <!-- Tab Navigation -->
        <div class="border-b border-slate-200 overflow-x-auto">
            <div class="flex gap-1 p-2 min-w-max" role="tablist">
                <button class="settings-tab px-6 py-3 rounded-xl font-medium text-sm transition flex items-center gap-2 active" data-tab="profile">
                    <i data-lucide="user-circle" class="w-4 h-4"></i>
                    {% trans "Profile" %}
                </button>
                <button class="settings-tab px-6 py-3 rounded-xl font-medium text-sm transition flex items-center gap-2" data-tab="notifications">
                    <i data-lucide="bell" class="w-4 h-4"></i>
                    {% trans "Notifications" %}
                </button>
                <button class="settings-tab px-6 py-3 rounded-xl font-medium text-sm transition flex items-center gap-2" data-tab="security">
                    <i data-lucide="shield" class="w-4 h-4"></i>
                    {% trans "Security" %}
                </button>
                <button class="settings-tab px-6 py-3 rounded-xl font-medium text-sm transition flex items-center gap-2" data-tab="account">
                    <i data-lucide="info" class="w-4 h-4"></i>
                    {% trans "Account" %}
                </button>
                <button class="settings-tab px-6 py-3 rounded-xl font-medium text-sm transition flex items-center gap-2" data-tab="activity">
                    <i data-lucide="activity" class="w-4 h-4"></i>
                    {% trans "Activity" %}
                </button>

            </div>
        </div>

        <!-- Tab Content -->
        <div class="p-6">
            
            <!-- Profile Tab -->
            <div class="settings-content" id="profile-content">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <div class="lg:col-span-2">
                        <h5 class="text-xl font-bold text-navy mb-6 flex items-center gap-2">
                            <i data-lucide="user-circle" class="w-5 h-5 text-blue"></i>
                            {% trans "Profile Settings" %}
                        </h5>
                        
                        <form method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            <input type="hidden" name="form_type" value="profile">
                            
                            <!-- Avatar -->
                            <div class="text-center mb-8">
                                {% if user.avatar %}
                                    <img src="{{ user.avatar.url }}" alt="{{ user.get_full_name }}" class="w-32 h-32 rounded-full mx-auto mb-4 border-4 border-gray-100 object-cover">
                                {% else %}
                                    <div class="w-32 h-32 rounded-full bg-light mx-auto mb-4 border-4 border-slate-100 flex items-center justify-center">
                                        <i data-lucide="user" class="w-16 h-16 text-slate-300"></i>
                                    </div>
                                {% endif %}
                                <div class="mt-3">
                                    <label for="avatar" class="inline-flex items-center gap-2 px-4 py-2 text-navy bg-light rounded-xl hover:bg-light transition cursor-pointer">
                                        <i data-lucide="camera" class="w-4 h-4"></i>
                                        {% trans "Change Avatar" %}
                                    </label>
                                    <input type="file" id="avatar" name="avatar" class="hidden" accept="image/*">
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="first_name" class="block text-sm font-bold text-slate mb-2">
                                        {% trans "First Name" %}
                                    </label>
                                    <input type="text" class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="first_name" name="first_name" value="{{ user.first_name }}" required>
                                </div>

                                <div>
                                    <label for="last_name" class="block text-sm font-bold text-slate mb-2">
                                        {% trans "Last Name" %}
                                    </label>
                                    <input type="text" class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="last_name" name="last_name" value="{{ user.last_name }}" required>
                                </div>

                                <div class="md:col-span-2">
                                    <label for="email" class="block text-sm font-bold text-slate mb-2">
                                        {% trans "Email" %}
                                    </label>
                                    <input type="email" class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 bg-slate-50" id="email" value="{{ user.email }}" readonly>
                                    <p class="text-sm text-slate mt-1">{% trans "Contact administrator to change email" %}</p>
                                </div>

                                <div>
                                    <label for="phone" class="block text-sm font-bold text-slate mb-2">
                                        {% trans "Phone Number" %}
                                    </label>
                                    <input type="tel" class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="phone" name="phone" value="{{ user.phone|default:'' }}">
                                    <p class="text-sm text-slate mt-1">{% trans "Required for SMS notifications" %}</p>
                                </div>

                                <div>
                                    <label for="language" class="block text-sm font-bold text-slate mb-2">
                                        {% trans "Language" %}
                                    </label>
                                    <select class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="language" name="language">
                                        {% for lang_code, lang_name in languages %}
                                            <option value="{{ lang_code }}" {% if user.language == lang_code %}selected{% endif %}>
                                                {{ lang_name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <div class="md:col-span-2">
                                    <label for="bio" class="block text-sm font-bold text-slate mb-2">
                                        {% trans "Bio" %}
                                    </label>
                                    <textarea class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="bio" name="bio" rows="4">{{ user.bio|default:'' }}</textarea>
                                </div>

                                <div class="md:col-span-2">
                                    <button type="submit" class="bg-navy text-white px-6 py-3 rounded-xl font-bold hover:bg-blue transition flex items-center gap-2">
                                        <i data-lucide="save" class="w-4 h-4"></i>
                                        {% trans "Save Profile" %}
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    
                    <div class="space-y-6">
                        <!-- My Performance -->
                        <div class="bg-navy rounded-2xl p-6 text-white">
                            <h6 class="font-bold mb-2 flex items-center gap-2">
                                <i data-lucide="bar-chart-2" class="w-4 h-4 text-blue-200"></i>
                                {% trans "My Performance" %}
                            </h6>
                            <p class="text-sm text-slate-200 mb-4">{% trans "View your performance metrics and evaluations" %}</p>
                            <a href="{% url 'dashboard:my_performance' %}" class="inline-flex items-center gap-2 px-4 py-2 bg-white text-navy rounded-xl font-bold text-sm hover:bg-blue-50 transition">
                                <i data-lucide="bar-chart-2" class="w-4 h-4"></i>
                                {% trans "View Performance" %}
                            </a>
                        </div>

                        <div class="bg-light rounded-2xl p-6">
                            <h6 class="font-bold text-navy mb-4 flex items-center gap-2">
                                <i data-lucide="lightbulb" class="w-4 h-4 text-blue"></i>
                                {% trans "Profile Tips" %}
                            </h6>
                            <ul class="space-y-3 text-sm text-slate">
                                <li class="flex gap-2">
                                    <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                    <span>{% trans "Add a professional photo to help others recognize you" %}</span>
                                </li>
                                <li class="flex gap-2">
                                    <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                    <span>{% trans "Keep your phone number updated for SMS notifications" %}</span>
                                </li>
                                <li class="flex gap-2">
                                    <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                    <span>{% trans "Add a bio to share your role and expertise" %}</span>
                                </li>
                                <li class="flex gap-2">
                                    <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                    <span>{% trans "Choose your preferred language for the interface" %}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Notifications Tab -->
            <div class="settings-content hidden" id="notifications-content">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <div class="lg:col-span-2">
                        <h5 class="text-xl font-bold text-navy mb-6 flex items-center gap-2">
                            <i data-lucide="bell" class="w-5 h-5 text-blue"></i>
                            {% trans "Notification Preferences" %}
                        </h5>
                        
                        <form method="post">
                            {% csrf_token %}
                            <input type="hidden" name="form_type" value="preferences">

                            <!-- Email Notifications -->
                            <div class="bg-light rounded-2xl p-6 mb-6">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <strong class="text-navy">{% trans "Email Notifications" %}</strong>
                                        <p class="text-sm text-slate mt-1">{% trans "Receive notifications via email for complaint assignments, updates, and escalations" %}</p>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" id="notification_email_enabled" name="notification_email_enabled" class="sr-only peer" {% if user.notification_email_enabled %}checked{% endif %}>
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-navy/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-navy"></div>
                                    </label>
                                </div>
                            </div>

                            <!-- SMS Notifications -->
                            <div class="bg-light rounded-2xl p-6 mb-6">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <strong class="text-navy">{% trans "SMS Notifications" %}</strong>
                                        <p class="text-sm text-slate mt-1">{% trans "Receive critical notifications via SMS (requires phone number)" %}</p>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" id="notification_sms_enabled" name="notification_sms_enabled" class="sr-only peer" {% if user.notification_sms_enabled %}checked{% endif %}>
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-navy/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-navy"></div>
                                    </label>
                                </div>
                            </div>

                            <div class="space-y-6">
                                <div>
                                    <label for="preferred_notification_channel" class="block text-sm font-bold text-slate mb-2">
                                        {% trans "Preferred Notification Channel" %}
                                    </label>
                                    <select class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="preferred_notification_channel" name="preferred_notification_channel">
                                        {% for channel_code, channel_name in notification_channels %}
                                            <option value="{{ channel_code }}" {% if user.preferred_notification_channel == channel_code %}selected{% endif %}>
                                                {{ channel_name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                    <p class="text-sm text-slate mt-1">{% trans "Default channel for general notifications" %}</p>
                                </div>

                                <div>
                                    <label for="explanation_notification_channel" class="block text-sm font-bold text-slate mb-2">
                                        {% trans "Explanation Request Channel" %}
                                    </label>
                                    <select class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="explanation_notification_channel" name="explanation_notification_channel">
                                        {% for channel_code, channel_name in notification_channels %}
                                            <option value="{{ channel_code }}" {% if user.explanation_notification_channel == channel_code %}selected{% endif %}>
                                                {{ channel_name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                    <p class="text-sm text-slate mt-1">{% trans "Default channel when requesting complaint explanations" %}</p>
                                </div>

                                <div>
                                    <label for="phone" class="block text-sm font-bold text-slate mb-2">
                                        {% trans "Phone Number for SMS" %}
                                    </label>
                                    <input type="tel" class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="phone" name="phone" value="{{ user.phone|default:'' }}" placeholder="+966 5X XXX XXXX">
                                    <p class="text-sm text-slate mt-1">{% trans "Required to receive SMS notifications" %}</p>
                                </div>

                                <button type="submit" class="bg-navy text-white px-6 py-3 rounded-xl font-bold hover:bg-blue transition flex items-center gap-2">
                                    <i data-lucide="save" class="w-4 h-4"></i>
                                    {% trans "Save Preferences" %}
                                </button>
                            </div>
                        </form>
                    </div>
                    
                    <div>
                        <div class="bg-light rounded-2xl p-6">
                            <h6 class="font-bold text-navy mb-4 flex items-center gap-2">
                                <i data-lucide="lightbulb" class="w-4 h-4 text-blue"></i>
                                {% trans "Notification Tips" %}
                            </h6>
                            <p class="text-sm text-slate mb-4">
                                {% trans "Configure how you receive notifications to stay informed without being overwhelmed." %}
                            </p>
                            <ul class="space-y-3 text-sm text-slate">
                                <li class="flex gap-2">
                                    <i data-lucide="mail" class="w-4 h-4 text-blue-500 flex-shrink-0"></i>
                                    <span>{% trans "Email is best for detailed information" %}</span>
                                </li>
                                <li class="flex gap-2">
                                    <i data-lucide="smartphone" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                    <span>{% trans "SMS is best for urgent alerts" %}</span>
                                </li>
                                <li class="flex gap-2">
                                    <i data-lucide="bell" class="w-4 h-4 text-orange-500 flex-shrink-0"></i>
                                    <span>{% trans "In-app notifications are always enabled" %}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Security Tab -->
            <div class="settings-content hidden" id="security-content">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <div class="lg:col-span-2">
                        <h5 class="text-xl font-bold text-navy mb-6 flex items-center gap-2">
                            <i data-lucide="shield" class="w-5 h-5 text-blue"></i>
                            {% trans "Security Settings" %}
                        </h5>
                        
                        <form method="post">
                            {% csrf_token %}
                            <input type="hidden" name="form_type" value="password">

                            <div class="bg-light rounded-2xl p-6">
                                <div class="space-y-6">
                                    <div>
                                        <label for="current_password" class="block text-sm font-bold text-slate mb-2">{% trans "Current Password" %}</label>
                                        <input type="password" class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="current_password" name="current_password" required>
                                    </div>

                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                        <div>
                                            <label for="new_password" class="block text-sm font-bold text-slate mb-2">{% trans "New Password" %}</label>
                                            <input type="password" class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="new_password" name="new_password" required minlength="8">
                                            <p class="text-sm text-slate mt-1">{% trans "Minimum 8 characters" %}</p>
                                        </div>

                                        <div>
                                            <label for="confirm_password" class="block text-sm font-bold text-slate mb-2">{% trans "Confirm New Password" %}</label>
                                            <input type="password" class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl text-slate-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="confirm_password" name="confirm_password" required minlength="8">
                                        </div>
                                    </div>

                                    <button type="submit" class="bg-orange-500 text-white px-6 py-3 rounded-xl font-bold hover:bg-orange-600 transition flex items-center gap-2">
                                        <i data-lucide="key" class="w-4 h-4"></i>
                                        {% trans "Change Password" %}
                                    </button>
                                </div>
                            </div>
                        </form>

                        <div class="bg-light rounded-2xl p-6 mt-6">
                            <h6 class="font-bold text-navy mb-4 flex items-center gap-2">
                                <i data-lucide="clock" class="w-4 h-4 text-slate"></i>
                                {% trans "Password History" %}
                            </h6>
                            <p class="text-sm text-slate">
                                <i data-lucide="clock" class="w-4 h-4 inline mr-1"></i>
                                {% trans "Last password change:" %} {% if user.password %}{% trans "Recently" %}{% else %}{% trans "Never" %}{% endif %}
                            </p>
                        </div>
                    </div>
                    
                    <div>
                        <div class="bg-light rounded-2xl p-6">
                            <h6 class="font-bold text-navy mb-4 flex items-center gap-2">
                                <i data-lucide="lightbulb" class="w-4 h-4 text-blue"></i>
                                {% trans "Security Tips" %}
                            </h6>
                            <ul class="space-y-3 text-sm text-slate">
                                <li class="flex gap-2">
                                    <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                    <span>{% trans "Use strong passwords with letters, numbers, and symbols" %}</span>
                                </li>
                                <li class="flex gap-2">
                                    <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                    <span>{% trans "Don't reuse passwords from other sites" %}</span>
                                </li>
                                <li class="flex gap-2">
                                    <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                    <span>{% trans "Change your password regularly" %}</span>
                                </li>
                                <li class="flex gap-2">
                                    <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
                                    <span>{% trans "Never share your password with anyone" %}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Account Tab -->
            <div class="settings-content hidden" id="account-content">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <div class="lg:col-span-2">
                        <h5 class="text-xl font-bold text-navy mb-6 flex items-center gap-2">
                            <i data-lucide="info" class="w-5 h-5 text-blue"></i>
                            {% trans "Account Information" %}
                        </h5>
                        
                        <div class="bg-light rounded-2xl p-6">
                            <div class="space-y-4">
                                <div class="flex justify-between items-center py-3 border-b border-slate-200">
                                    <div class="flex items-center gap-3">
                                        <i data-lucide="user" class="w-5 h-5 text-slate"></i>
                                        <span class="text-slate">{% trans "Full Name" %}</span>
                                    </div>
                                    <span class="font-bold text-navy">{{ user.get_full_name }}</span>
                                </div>
                                <div class="flex justify-between items-center py-3 border-b border-slate-200">
                                    <div class="flex items-center gap-3">
                                        <i data-lucide="mail" class="w-5 h-5 text-slate"></i>
                                        <span class="text-slate">{% trans "Email" %}</span>
                                    </div>
                                    <span class="font-bold text-navy">{{ user.email }}</span>
                                </div>
                                <div class="flex justify-between items-center py-3 border-b border-slate-200">
                                    <div class="flex items-center gap-3">
                                        <i data-lucide="calendar" class="w-5 h-5 text-slate"></i>
                                        <span class="text-slate">{% trans "Member Since" %}</span>
                                    </div>
                                    <span class="font-bold text-navy">{{ user.date_joined|date:"F d, Y" }}</span>
                                </div>
                                <div class="flex justify-between items-center py-3 border-b border-slate-200">
                                    <div class="flex items-center gap-3">
                                        <i data-lucide="building-2" class="w-5 h-5 text-slate"></i>
                                        <span class="text-slate">{% trans "Hospital" %}</span>
                                    </div>
                                    <span class="font-bold text-navy">{% if user.hospital %}{{ user.hospital.name }}{% else %}{% trans "Not assigned" %}{% endif %}</span>
                                </div>
                                <div class="flex justify-between items-center py-3 border-b border-slate-200">
                                    <div class="flex items-center gap-3">
                                        <i data-lucide="building" class="w-5 h-5 text-slate"></i>
                                        <span class="text-slate">{% trans "Department" %}</span>
                                    </div>
                                    <span class="font-bold text-navy">{% if user.department %}{{ user.department.name }}{% else %}{% trans "Not assigned" %}{% endif %}</span>
                                </div>
                                <div class="flex justify-between items-center py-3 border-b border-slate-200">
                                    <div class="flex items-center gap-3">
                                        <i data-lucide="badge" class="w-5 h-5 text-slate"></i>
                                        <span class="text-slate">{% trans "Employee ID" %}</span>
                                    </div>
                                    <span class="font-bold text-navy">{{ user.employee_id|default:"N/A" }}</span>
                                </div>
                                <div class="flex justify-between items-center py-3">
                                    <div class="flex items-center gap-3">
                                        <i data-lucide="user-tie" class="w-5 h-5 text-slate"></i>
                                        <span class="text-slate">{% trans "Role" %}</span>
                                    </div>
                                    <div>
                                        {% if user.is_px_admin %}
                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-light text-navy">{% trans "PX Admin" %}</span>
                                        {% elif user.is_hospital_admin %}
                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-green-100 text-green-700">{% trans "Hospital Admin" %}</span>
                                        {% elif user.is_department_head %}
                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-blue-100 text-blue-700">{% trans "Department Head" %}</span>
                                        {% else %}
                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-gray-100 text-gray-700">{% trans "Staff" %}</span>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <div class="bg-light rounded-2xl p-6">
                            <h6 class="font-bold text-navy mb-4 flex items-center gap-2">
                                <i data-lucide="lightbulb" class="w-4 h-4 text-blue"></i>
                                {% trans "Account Info" %}
                            </h6>
                            <p class="text-sm text-slate">
                                {% trans "This information is managed by your organization's administrators. Contact them if you need to update your hospital, department, or employee ID." %}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Activity Tab -->
            <div class="settings-content hidden" id="activity-content">
                <div class="flex items-center justify-between mb-6">
                    <h5 class="text-xl font-bold text-navy flex items-center gap-2">
                        <i data-lucide="activity" class="w-5 h-5 text-blue"></i>
                        {% trans "My Activity" %}
                    </h5>
                    <a href="{% url 'accounts:staff-activity-log' %}?user={{ user.id }}" class="text-sm font-semibold text-blue hover:text-navy transition flex items-center gap-1">
                        <i data-lucide="external-link" class="w-4 h-4"></i> {% trans "View Full Log" %}
                    </a>
                </div>

                <!-- Stats -->
                <div class="grid grid-cols-3 gap-4 mb-6">
                    <div class="bg-light rounded-xl p-4 text-center">
                        <div class="text-2xl font-black text-navy">{{ recent_activities|length }}</div>
                        <div class="text-xs font-bold text-slate uppercase tracking-wider mt-1">{% trans "Recent" %}</div>
                    </div>
                    <div class="bg-light rounded-xl p-4 text-center">
                        <div class="text-2xl font-black text-navy">{{ login_count }}</div>
                        <div class="text-xs font-bold text-slate uppercase tracking-wider mt-1">{% trans "Logins" %}</div>
                    </div>
                    <div class="bg-light rounded-xl p-4 text-center">
                        <div class="text-2xl font-black text-navy">{{ action_count }}</div>
                        <div class="text-xs font-bold text-slate uppercase tracking-wider mt-1">{% trans "Actions" %}</div>
                    </div>
                </div>

                <!-- Filter -->
                <div class="flex gap-2 mb-6">
                    <a href="{% url 'accounts:settings' %}" class="px-4 py-2 rounded-xl text-sm font-bold transition {% if not activity_filter %}bg-navy text-white{% else %}bg-slate-100 text-slate hover:bg-slate-200{% endif %}">
                        {% trans "All" %}
                    </a>
                    <a href="{% url 'accounts:settings' %}?activity_type=login" class="px-4 py-2 rounded-xl text-sm font-bold transition {% if activity_filter == 'login' %}bg-navy text-white{% else %}bg-slate-100 text-slate hover:bg-slate-200{% endif %}">
                        {% trans "Login History" %}
                    </a>
                    <a href="{% url 'accounts:settings' %}?activity_type=actions" class="px-4 py-2 rounded-xl text-sm font-bold transition {% if activity_filter == 'actions' %}bg-navy text-white{% else %}bg-slate-100 text-slate hover:bg-slate-200{% endif %}">
                        {% trans "Actions" %}
                    </a>
                </div>

                <!-- Activity Timeline -->
                {% if recent_activities %}
                <div class="space-y-0">
                    {% for activity in recent_activities %}
                    <div class="flex gap-4 py-3 {% if not forloop.last %}border-b border-slate-100{% endif %} hover:bg-slate-50 transition rounded-lg px-2">
                        <div class="flex-shrink-0 mt-1">
                            <div class="w-8 h-8 rounded-lg flex items-center justify-center text-xs
                                {% if activity.activity_type == 'login' %}bg-green-100 text-green-600
                                {% elif activity.activity_type == 'logout' %}bg-slate-100 text-slate-500
                                {% elif activity.activity_type == 'create' %}bg-emerald-100 text-emerald-600
                                {% elif activity.activity_type == 'update' %}bg-blue-100 text-blue-600
                                {% elif activity.activity_type == 'delete' %}bg-red-100 text-red-600
                                {% elif activity.activity_type == 'resolve' %}bg-teal-100 text-teal-600
                                {% elif activity.activity_type == 'assign' or activity.activity_type == 'transfer' %}bg-purple-100 text-purple-600
                                {% elif activity.activity_type == 'export' %}bg-indigo-100 text-indigo-600
                                {% else %}bg-slate-100 text-slate-600{% endif %}">
                                {% if activity.activity_type == 'login' %}<i data-lucide="log-in" class="w-4 h-4"></i>
                                {% elif activity.activity_type == 'logout' %}<i data-lucide="log-out" class="w-4 h-4"></i>
                                {% elif activity.activity_type == 'create' %}<i data-lucide="plus" class="w-4 h-4"></i>
                                {% elif activity.activity_type == 'update' %}<i data-lucide="edit" class="w-4 h-4"></i>
                                {% elif activity.activity_type == 'delete' %}<i data-lucide="trash" class="w-4 h-4"></i>
                                {% elif activity.activity_type == 'resolve' %}<i data-lucide="check-circle" class="w-4 h-4"></i>
                                {% elif activity.activity_type == 'assign' %}<i data-lucide="user-plus" class="w-4 h-4"></i>
                                {% elif activity.activity_type == 'export' %}<i data-lucide="download" class="w-4 h-4"></i>
                                {% else %}<i data-lucide="circle" class="w-4 h-4"></i>{% endif %}
                            </div>
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center justify-between gap-2">
                                <div class="flex items-center gap-2">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold uppercase
                                        {% if activity.activity_type == 'login' or activity.activity_type == 'logout' %}bg-slate-100 text-slate-700
                                        {% elif activity.activity_type == 'create' %}bg-green-100 text-green-700
                                        {% elif activity.activity_type == 'update' %}bg-blue-100 text-blue-700
                                        {% elif activity.activity_type == 'delete' %}bg-red-100 text-red-700
                                        {% elif activity.activity_type == 'resolve' %}bg-teal-100 text-teal-700
                                        {% elif activity.activity_type == 'assign' or activity.activity_type == 'transfer' %}bg-purple-100 text-purple-700
                                        {% elif activity.activity_type == 'export' %}bg-indigo-100 text-indigo-700
                                        {% else %}bg-slate-100 text-slate-700{% endif %}">
                                        {{ activity.get_activity_type_display }}
                                    </span>
                                    {% if activity.module %}
                                    <span class="text-[10px] font-bold text-slate uppercase">{{ activity.module }}</span>
                                    {% endif %}
                                </div>
                                <div class="text-xs text-slate flex-shrink-0">
                                    {{ activity.created_at|date:"M d, Y" }} {{ activity.created_at|time:"H:i" }}
                                </div>
                            </div>
                            <p class="text-sm text-slate-700 mt-0.5 truncate">{{ activity.description|default:"-" }}</p>
                            {% if activity.ip_address %}
                            <p class="text-xs text-slate mt-0.5">{% trans "IP" %}: {{ activity.ip_address }}</p>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-12">
                    <div class="w-16 h-16 bg-slate-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                        <i data-lucide="inbox" class="w-8 h-8 text-slate-300"></i>
                    </div>
                    <h3 class="text-lg font-bold text-navy mb-1">{% trans "No activity yet" %}</h3>
                    <p class="text-slate text-sm">{% trans "Your activity will appear here as you use the system." %}</p>
                </div>
                {% endif %}
            </div>


        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
    
    // Tab switching
    const tabs = document.querySelectorAll('.settings-tab');
    const contents = document.querySelectorAll('.settings-content');
    
    // Load saved tab
    const savedTab = localStorage.getItem('activeSettingsTab') || 'profile';
    
    function activateTab(tabName) {
        tabs.forEach(tab => {
            const isActive = tab.dataset.tab === tabName;
            if (isActive) {
                tab.classList.add('bg-light', 'text-navy');
                tab.classList.remove('text-slate', 'hover:bg-light');
            } else {
                tab.classList.remove('bg-light', 'text-navy');
                tab.classList.add('text-slate', 'hover:bg-light');
            }
        });
        
        contents.forEach(content => {
            if (content.id === `${tabName}-content`) {
                content.classList.remove('hidden');
            } else {
                content.classList.add('hidden');
            }
        });
        
        localStorage.setItem('activeSettingsTab', tabName);
        lucide.createIcons();
    }
    
    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            const tabName = this.dataset.tab;
            activateTab(tabName);
        });
    });
    
    // Initialize with saved tab
    activateTab(savedTab);
    
    // Password confirmation validation
    const passwordForm = document.querySelector('form input[name="form_type"][value="password"]')?.closest('form');
    if (passwordForm) {
        passwordForm.addEventListener('submit', function(e) {
            const newPassword = this.querySelector('#new_password').value;
            const confirmPassword = this.querySelector('#confirm_password').value;
            
            if (newPassword !== confirmPassword) {
                e.preventDefault();
                alert('{% trans "Passwords do not match!" %}');
            }
        });
    }
});
</script>
{% endblock %}