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

{% block title %}{{ agency.name }} - {% trans "Agency Details" %} - {{ block.super }}{% endblock %}

{% block content %}
<div class="space-y-6">
    
    <!-- Header Breadcrumb -->
    <nav class="mb-4" aria-label="breadcrumb">
        <ol class="flex items-center gap-2 text-sm flex-wrap">
            <li><a href="{% url 'dashboard' %}" class="text-gray-500 hover:text-temple-red transition flex items-center gap-1">
                <i data-lucide="home" class="w-4 h-4"></i> {% trans "Home" %}
            </a></li>
            <li class="text-gray-400">/</li>
            <li><a href="{% url 'agency_list' %}" class="text-gray-500 hover:text-temple-red transition">
                {% trans "Agencies" %}
            </a></li>
            <li class="text-gray-400">/</li>
            <li class="text-temple-red font-semibold">{{ agency.name }}</li>
        </ol>
    </nav>

    <!-- Page Header -->
    <div class="flex flex-col md:flex-row md:justify-between md:items-start gap-4">
        <div class="flex-1">
            <h1 class="text-2xl md:text-3xl font-bold text-gray-900 flex items-center gap-3 mb-2">
                <div class="bg-temple-red/10 p-3 rounded-xl">
                    <i data-lucide="building" class="w-8 h-8 text-temple-red"></i>
                </div>
                {{ agency.name }}
            </h1>
            <p class="text-gray-500">
                {% trans "Hiring Agency Details and Application Management" %}
            </p>
        </div>
        <div class="flex flex-wrap gap-2">
            <a href="{% url 'agency_assignment_list' %}" 
               class="inline-flex items-center gap-2 border border-temple-red text-temple-red hover:bg-temple-red hover:text-white font-medium px-4 py-2.5 rounded-xl text-sm transition">
                <i data-lucide="list-todo" class="w-4 h-4"></i>
                {% trans "Assignments" %}
            </a>
            <a href="{% url 'agency_assignment_create_with_agency' agency.slug %}" 
               class="inline-flex items-center gap-2 border border-temple-red text-temple-red hover:bg-temple-red hover:text-white font-medium px-4 py-2.5 rounded-xl text-sm transition">
                <i data-lucide="briefcase" class="w-4 h-4"></i>
                {% trans "Assign Job" %}
            </a>
            <a href="{% url 'agency_update' agency.slug %}" 
               class="inline-flex items-center gap-2 bg-temple-red hover:bg-[#7a1a29] text-white font-medium px-4 py-2.5 rounded-xl text-sm transition">
                <i data-lucide="edit-2" class="w-4 h-4"></i>
                {% trans "Edit" %}
            </a>
            <a href="{% url 'agency_list' %}" 
               class="inline-flex items-center gap-2 border border-gray-300 text-gray-600 hover:bg-gray-50 font-medium px-4 py-2.5 rounded-xl text-sm transition">
                <i data-lucide="arrow-left" class="w-4 h-4"></i>
                {% trans "Back" %}
            </a>
        </div>
    </div>

    <!-- Agency Info Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="bg-gradient-to-r from-temple-red to-[#7a1a29] text-white p-6 md:p-8">
            <div class="flex flex-col md:flex-row md:justify-between md:items-start gap-4">
                <div class="flex-1">
                    <h2 class="text-xl md:text-2xl font-bold mb-3">{{ agency.name }}</h2>
                    {% if agency.contact_person %}
                        <p class="mb-2 flex items-center gap-2">
                            <i data-lucide="user" class="w-5 h-5"></i>
                            {% trans "Contact" %}: {{ agency.contact_person }}
                        </p>
                    {% endif %}
                    {% if agency.email %}
                        <p class="flex items-center gap-2">
                            <i data-lucide="mail" class="w-5 h-5"></i>
                            {{ agency.email }}
                        </p>
                    {% endif %}
                </div>
                <div class="flex gap-2">
                    {% if agency.website %}
                        <a href="{{ agency.website }}" target="_blank" 
                           class="inline-flex items-center gap-2 bg-white/10 hover:bg-white/20 text-white px-4 py-2 rounded-lg text-sm transition">
                            <i data-lucide="external-link" class="w-4 h-4"></i>
                            {% trans "Website" %}
                        </a>
                    {% endif %}
                    {% if agency.email %}
                        <a href="mailto:{{ agency.email }}" 
                           class="inline-flex items-center gap-2 bg-white/10 hover:bg-white/20 text-white px-4 py-2 rounded-lg text-sm transition">
                            <i data-lucide="mail" class="w-4 h-4"></i>
                            {% trans "Email" %}
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="p-6 md:p-8">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Contact Information -->
                <div>
                    <div class="bg-temple-cream rounded-xl p-5 border-l-4 border-temple-red">
                        <h5 class="text-temple-dark font-bold mb-4 flex items-center gap-2">
                            <i data-lucide="address-book" class="w-5 h-5 text-temple-red"></i>
                            {% trans "Contact Information" %}
                        </h5>
                        {% if agency.phone %}
                        <div class="flex items-start gap-3 mb-4 pb-4 border-b border-gray-200">
                            <div class="bg-temple-red text-white p-2 rounded-lg shrink-0">
                                <i data-lucide="phone" class="w-4 h-4"></i>
                            </div>
                            <div class="flex-1">
                                <div class="text-xs font-semibold text-gray-600 mb-1">{% trans "Phone" %}</div>
                                <div class="text-gray-800">{{ agency.phone }}</div>
                            </div>
                        </div>
                        {% endif %}
                        {% if agency.email %}
                        <div class="flex items-start gap-3 mb-4 pb-4 border-b border-gray-200">
                            <div class="bg-temple-red text-white p-2 rounded-lg shrink-0">
                                <i data-lucide="mail" class="w-4 h-4"></i>
                            </div>
                            <div class="flex-1">
                                <div class="text-xs font-semibold text-gray-600 mb-1">{% trans "Email" %}</div>
                                <div class="text-gray-800">{{ agency.email }}</div>
                            </div>
                        </div>
                        {% endif %}
                        {% if agency.website %}
                        <div class="flex items-start gap-3">
                            <div class="bg-temple-red text-white p-2 rounded-lg shrink-0">
                                <i data-lucide="globe" class="w-4 h-4"></i>
                            </div>
                            <div class="flex-1">
                                <div class="text-xs font-semibold text-gray-600 mb-1">{% trans "Website" %}</div>
                                <a href="{{ agency.website }}" target="_blank" 
                                   class="text-temple-red hover:text-[#7a1a29] transition">
                                    {{ agency.website }}
                                    <i data-lucide="external-link" class="w-3 h-3 inline ml-1"></i>
                                </a>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Location Information -->
                <div>
                    <div class="bg-temple-cream rounded-xl p-5 border-l-4 border-temple-red">
                        <h5 class="text-temple-dark font-bold mb-4 flex items-center gap-2">
                            <i data-lucide="map-pin" class="w-5 h-5 text-temple-red"></i>
                            {% trans "Location Information" %}
                        </h5>
                        {% if agency.address %}
                        <div class="flex items-start gap-3 mb-4 pb-4 border-b border-gray-200">
                            <div class="bg-temple-red text-white p-2 rounded-lg shrink-0">
                                <i data-lucide="home" class="w-4 h-4"></i>
                            </div>
                            <div class="flex-1">
                                <div class="text-xs font-semibold text-gray-600 mb-1">{% trans "Address" %}</div>
                                <div class="text-gray-800">{{ agency.address }}</div>
                            </div>
                        </div>
                        {% endif %}
                        {% if agency.city %}
                        <div class="flex items-start gap-3 mb-4 pb-4 border-b border-gray-200">
                            <div class="bg-temple-red text-white p-2 rounded-lg shrink-0">
                                <i data-lucide="building-2" class="w-4 h-4"></i>
                            </div>
                            <div class="flex-1">
                                <div class="text-xs font-semibold text-gray-600 mb-1">{% trans "City" %}</div>
                                <div class="text-gray-800">{{ agency.city }}</div>
                            </div>
                        </div>
                        {% endif %}
                        {% if agency.country %}
                        <div class="flex items-start gap-3">
                            <div class="bg-temple-red text-white p-2 rounded-lg shrink-0">
                                <i data-lucide="flag" class="w-4 h-4"></i>
                            </div>
                            <div class="flex-1">
                                <div class="text-xs font-semibold text-gray-600 mb-1">{% trans "Country" %}</div>
                                <div class="text-gray-800">{{ agency.get_country_display }}</div>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            {% if agency.description %}
            <div class="mt-6 bg-temple-cream rounded-xl p-5 border-l-4 border-temple-red">
                <h5 class="text-temple-dark font-bold mb-3 flex items-center gap-2">
                    <i data-lucide="message-circle" class="w-5 h-5 text-temple-red"></i>
                    {% trans "Description" %}
                </h5>
                <p class="text-gray-700">{{ agency.description|linebreaks }}</p>
            </div>
            {% endif %}
            
            {% if generated_password and request.user.is_staff %}
            <div class="mt-6 bg-temple-cream rounded-xl p-5 border-l-4 border-temple-red">
                <h5 class="text-temple-dark font-bold mb-4 flex items-center gap-2">
                    <i data-lucide="key" class="w-5 h-5 text-temple-red"></i>
                    {% trans "Agency Login Information" %}
                </h5>
                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
                    <h6 class="text-yellow-800 font-semibold mb-2 flex items-center gap-2">
                        <i data-lucide="alert-circle" class="w-4 h-4"></i>
                        {% trans "Important Security Notice" %}
                    </h6>
                    <p class="text-yellow-700 text-sm">
                        {% trans "This password provides access to the agency portal. Share it securely with the agency contact person." %}
                    </p>
                </div>
                <div class="space-y-3">
                    <div class="flex items-start gap-3">
                        <div class="bg-temple-red text-white p-2 rounded-lg shrink-0">
                            <i data-lucide="user" class="w-4 h-4"></i>
                        </div>
                        <div class="flex-1">
                            <div class="text-xs font-semibold text-gray-600 mb-1">{% trans "Username" %}</div>
                            <div class="bg-white px-3 py-2 rounded-lg border border-gray-300 text-gray-800 font-mono">{{ agency.user.username }}</div>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="bg-temple-red text-white p-2 rounded-lg shrink-0">
                            <i data-lucide="lock" class="w-4 h-4"></i>
                        </div>
                        <div class="flex-1">
                            <div class="text-xs font-semibold text-gray-600 mb-1">{% trans "Generated Password" %}</div>
                            <div class="flex gap-2">
                                <div id="password-value" class="flex-1 bg-white px-3 py-2 rounded-lg border border-gray-300 text-gray-800 font-mono">{{ generated_password }}</div>
                                <button type="button" onclick="copyPassword()" 
                                        class="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 hover:bg-gray-50 text-gray-600 rounded-lg text-sm transition">
                                    <i data-lucide="copy" class="w-4 h-4"></i>
                                    {% trans "Copy" %}
                                </button>
                            </div>
                        </div>
                    </div>
                    <a href="{% url 'regenerate_agency_password' agency.slug %}" 
                       class="inline-flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white px-4 py-2.5 rounded-lg text-sm transition"
                       onclick="return confirm('{% trans "Are you sure you want to regenerate the password for this agency? This cannot be undone." %}');">
                        <i data-lucide="key" class="w-4 h-4"></i>
                        {% trans "Regenerate Agency Password" %}
                    </a>
                </div>
            </div>
            {% endif %}
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Content (2/3 width) -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Tabs Card -->
            <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                <!-- Tabs Navigation -->
                <div class="border-b border-gray-200 bg-gray-50 px-4">
                    <div class="flex space-x-0">
                        <button onclick="switchTab('candidates')" id="tab-candidates"
                                class="tab-btn active inline-flex items-center gap-2 px-4 py-3 text-sm font-medium transition border-b-3 border-transparent">
                            <i data-lucide="users" class="w-4 h-4"></i>
                            <span class="text-xs bg-temple-red text-white px-2 py-0.5 rounded-full">{{ total_applications }}</span>
                            {% trans "Recent Applications" %}
                        </button>
                        <button onclick="switchTab('jobs')" id="tab-jobs"
                                class="tab-btn inline-flex items-center gap-2 px-4 py-3 text-sm font-medium transition border-b-3 border-transparent text-gray-500 hover:text-gray-700">
                            <i data-lucide="briefcase" class="w-4 h-4"></i>
                            <span class="text-xs bg-gray-200 text-gray-600 px-2 py-0.5 rounded-full">{{ total_job_assignments }}</span>
                            {% trans "Assigned Jobs" %}
                        </button>
                    </div>
                </div>

                <!-- Tab Content -->
                <div class="p-6">
                    <!-- Candidates Tab -->
                    <div id="content-candidates" class="tab-content">
                        {% if applications %}
                            <div class="space-y-3">
                                {% for application in applications %}
                                    <div class="bg-white border border-gray-200 rounded-xl p-4 hover:border-temple-red transition">
                                        <div class="flex justify-between items-start">
                                            <div class="flex-1">
                                                <h5 class="font-semibold text-gray-900 mb-1">{{ application.name }}</h5>
                                                <div class="text-sm text-gray-600 space-y-1">
                                                    <p class="flex items-center gap-2">
                                                        <i data-lucide="mail" class="w-3 h-3 text-temple-red"></i>
                                                        {{ application.email }}
                                                    </p>
                                                    {% if application.phone %}
                                                        <p class="flex items-center gap-2">
                                                            <i data-lucide="phone" class="w-3 h-3 text-temple-red"></i>
                                                            {{ application.phone }}
                                                        </p>
                                                    {% endif %}
                                                    <p class="flex items-center gap-2">
                                                        <i data-lucide="briefcase" class="w-3 h-3 text-temple-red"></i>
                                                        {{ application.job.title }}
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="text-right shrink-0">
                                                <span class="inline-block px-3 py-1 text-xs font-semibold rounded-lg stage-badge stage-{{ application.stage }}">
                                                    {{ application.get_stage_display }}
                                                </span>
                                                <p class="text-xs text-gray-500 mt-1">{{ application.created_at|date:"M d, Y" }}</p>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-center py-12">
                                <i data-lucide="user-x" class="w-16 h-16 text-gray-300 mx-auto mb-4"></i>
                                <h5 class="text-lg font-semibold text-gray-900 mb-2">{% trans "No applications yet" %}</h5>
                                <p class="text-gray-500">{% trans "This agency hasn't submitted any applications yet." %}</p>
                            </div>
                        {% endif %}
                    </div>

                    <!-- Jobs Tab -->
                    <div id="content-jobs" class="tab-content hidden">
                        {% if job_assignments %}
                            <div class="space-y-3">
                                {% for assignment in job_assignments %}
                                    <div class="bg-white border border-gray-200 rounded-xl p-4 hover:border-temple-red transition">
                                        <div class="flex justify-between items-start">
                                            <div class="flex-1">
                                                <h5 class="font-semibold text-gray-900 mb-1">
                                                    <a href="{% url 'job_detail' assignment.job.slug %}" 
                                                       class="text-temple-red hover:text-[#7a1a29] transition">
                                                        {{ assignment.job.title }}
                                                    </a>
                                                </h5>
                                                <div class="text-sm text-gray-600 space-y-1">
                                                    <p class="flex items-center gap-2">
                                                        <i data-lucide="map-pin" class="w-3 h-3 text-temple-red"></i>
                                                        {{ assignment.job.get_location_display }}
                                                    </p>
                                                    {% if assignment.job.department %}
                                                        <p class="flex items-center gap-2">
                                                            <i data-lucide="building-2" class="w-3 h-3 text-temple-red"></i>
                                                            {{ assignment.job.department|default:"" }}
                                                        </p>
                                                    {% endif %}
                                                </div>
                                            </div>
                                            <div class="text-right shrink-0">
                                                <span class="inline-block px-3 py-1 text-xs font-semibold rounded-lg bg-gray-100 text-gray-600">
                                                    {% trans "Assigned" %}
                                                </span>
                                                <p class="text-xs text-gray-500 mt-1">
                                                    {% trans "Assigned On:" %} {{ assignment.created_at|date:"M d, Y" }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-center py-12">
                                <i data-lucide="briefcase" class="w-16 h-16 text-gray-300 mx-auto mb-4"></i>
                                <h5 class="text-lg font-semibold text-gray-900 mb-2">{% trans "No jobs assigned" %}</h5>
                                <p class="text-gray-500 mb-4">{% trans "There are no open job assignments for this agency." %}</p>
                                <a href="{% url 'agency_assignment_create_with_agency' agency.slug %}" 
                                   class="inline-flex items-center gap-2 bg-temple-red hover:bg-[#7a1a29] text-white px-4 py-2.5 rounded-lg text-sm transition">
                                    <i data-lucide="plus" class="w-4 h-4"></i>
                                    {% trans "Assign New Job" %}
                                </a>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar (1/3 width) -->
        <div class="space-y-6">
            <!-- Statistics Card -->
            <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="border-b border-gray-200 p-4">
                    <h5 class="text-temple-red font-bold flex items-center gap-2">
                        <i data-lucide="bar-chart-2" class="w-5 h-5"></i>
                        {% trans "Application Statistics" %}
                    </h5>
                </div>
                <div class="p-4 grid grid-cols-2 gap-3">
                    <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-4 text-center border border-gray-200 hover:shadow-md transition">
                        <div class="text-2xl font-bold text-temple-red">{{ total_applications }}</div>
                        <div class="text-xs font-semibold text-gray-600 uppercase tracking-wide mt-1">{% trans "Total" %}</div>
                    </div>
                    <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-4 text-center border border-gray-200 hover:shadow-md transition">
                        <div class="text-2xl font-bold text-temple-red">{{ active_applications }}</div>
                        <div class="text-xs font-semibold text-gray-600 uppercase tracking-wide mt-1">{% trans "Active" %}</div>
                    </div>
                    <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-4 text-center border border-gray-200 hover:shadow-md transition">
                        <div class="text-2xl font-bold text-green-600">{{ hired_applications }}</div>
                        <div class="text-xs font-semibold text-gray-600 uppercase tracking-wide mt-1">{% trans "Hired" %}</div>
                    </div>
                    <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-4 text-center border border-gray-200 hover:shadow-md transition">
                        <div class="text-2xl font-bold text-red-600">{{ rejected_applications }}</div>
                        <div class="text-xs font-semibold text-gray-600 uppercase tracking-wide mt-1">{% trans "Rejected" %}</div>
                    </div>
                </div>
            </div>

            <!-- Agency Information Card -->
            <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="border-b border-gray-200 p-4">
                    <h5 class="text-temple-red font-bold flex items-center gap-2">
                        <i data-lucide="info" class="w-5 h-5"></i>
                        {% trans "Agency Information" %}
                    </h5>
                </div>
                <div class="p-4 space-y-4">
                    <div>
                        <div class="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-1">{% trans "Created" %}</div>
                        <div class="text-gray-800">{{ agency.created_at|date:"F d, Y" }}</div>
                    </div>
                    <div>
                        <div class="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-1">{% trans "Last Updated" %}</div>
                        <div class="text-gray-800">{{ agency.updated_at|date:"F d, Y" }}</div>
                    </div>
                    <div>
                        <div class="text-xs font-semibold text-gray-600 uppercase tracking-wide mb-1">{% trans "Agency ID" %}</div>
                        <code class="bg-gray-100 px-2 py-1 rounded text-sm text-gray-600">{{ agency.slug }}</code>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Tab button styles */
.tab-btn {
    border-bottom-color: transparent;
}

.tab-btn.active {
    color: #1a1a1a;
    border-bottom-color: #9d2235;
}

.tab-btn:hover:not(.active) {
    color: #374151;
}

/* Stage badge colors */
.stage-Applied { background-color: #e9ecef; color: #495057; }
.stage-Screening { background-color: #17a2b8; color: white; }
.stage-Exam { background-color: #ffc107; color: #856404; }
.stage-Interview { background-color: #17a2b8; color: white; }
.stage-Offer { background-color: #28a745; color: white; }
.stage-Hired { background-color: #28a745; color: white; }
.stage-Rejected { background-color: #dc3545; color: white; }
</style>

<script>
lucide.createIcons();

function switchTab(tabName) {
    // Hide all tab content
    document.querySelectorAll('.tab-content').forEach(content => {
        content.classList.add('hidden');
    });
    
    // Remove active state from all tabs
    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.classList.remove('active');
        btn.classList.add('text-gray-500');
    });
    
    // Show selected tab content
    document.getElementById('content-' + tabName).classList.remove('hidden');
    
    // Add active state to selected tab
    document.getElementById('tab-' + tabName).classList.add('active');
    document.getElementById('tab-' + tabName).classList.remove('text-gray-500');
}

function copyPassword() {
    const passwordTextEl = document.getElementById('password-value');
    if (!passwordTextEl) return;
    const passwordText = passwordTextEl.textContent;

    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(passwordText).then(function() {
            showToast('{% trans "Password copied to clipboard!" %}');
        }).catch(function(err) {
            console.error('Failed to copy password: ', err);
            fallbackCopy(passwordText);
        });
    } else {
        fallbackCopy(passwordText);
    }
}

function fallbackCopy(text) {
    const ta = document.createElement('textarea');
    ta.value = text;
    document.body.appendChild(ta);
    ta.select();
    try { 
        document.execCommand('copy'); 
        showToast('{% trans "Password copied to clipboard!" %}');
    } catch (e) { 
        console.error('execCommand fallback failed', e); 
    }
    document.body.removeChild(ta);
}

function showToast(message) {
    const toast = document.createElement('div');
    toast.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-6 py-3 rounded-lg shadow-lg z-50 animate-pulse';
    toast.textContent = message;
    document.body.appendChild(toast);
    setTimeout(() => {
        toast.remove();
    }, 2000);
}
</script>
{% endblock %}