{% extends 'agency_base.html' %}
{% load static i18n %}

{% block title %}{% trans "Access Link Details" %} - ATS{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4 px-3 py-3">
        <div>
            <h1 class="h3 mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
                <i class="fas fa-link me-2"></i>
                {% trans "Access Link Details" %}
            </h1>
            <p class="text-muted mb-0">{% trans "Secure access link for agency candidate submissions" %}</p>
        </div>
        <a href="{% url 'agency_assignment_detail' access_link.assignment.slug %}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i> {% trans "Back to Assignment" %}
        </a>
    </div>

    <div class="row">
        <div class="col-md-8">
            <div class="kaauh-card shadow-sm mb-4 px-3 py-3">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-shield-alt me-2 text-primary"></i>
                            {% trans "Access Information" %}
                        </h5>
                        <span class="badge {% if access_link.is_active %}bg-success{% else %}bg-danger{% endif %}">
                            {% if access_link.is_active %}{% trans "Active" %}{% else %}{% trans "Inactive" %}{% endif %}
                        </span>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted small">{% trans "Assignment" %}</label>
                            <div class="fw-semibold">
                                <a href="{% url 'agency_assignment_detail' access_link.assignment.slug %}" class="text-decoration-none">
                                    {{ access_link.assignment.agency.name }} - {{ access_link.assignment.job.title }}
                                </a>
                            </div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted small">{% trans "Agency" %}</label>
                            <div class="fw-semibold">{{ access_link.assignment.agency.name }}</div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted small">{% trans "Created At" %}</label>
                            <div class="fw-semibold">{{ access_link.created_at|date:"Y-m-d H:i" }}</div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted small">{% trans "Expires At" %}</label>
                            <div class="fw-semibold {% if access_link.is_expired %}text-danger{% endif %}">
                                {{ access_link.expires_at|date:"Y-m-d H:i" }}
                                {% if access_link.is_expired %}
                                    <span class="badge bg-danger ms-2">{% trans "Expired" %}</span>
                                {% endif %}
                            </div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted small">{% trans "Max Candidates" %}</label>
                            <div class="fw-semibold">{{ access_link.assignment.max_candidates }}</div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label text-muted small">{% trans "Candidates Submitted" %}</label>
                            <div class="fw-semibold">{{ access_link.assignment.candidates_submitted }}</div>
                        </div>

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

            <div class="kaauh-card shadow-sm">
                <div class="card-body px-3 py-3">
                    <h5 class="card-title mb-3">
                        <i class="fas fa-key me-2 text-warning"></i>
                        {% trans "Access Credentials" %}
                    </h5>

                    <div class="mb-3">
                        <label class="form-label text-muted small">{% trans "Login URL" %}</label>
                        <div class="input-group">
                            <input type="text" readonly value="{{ request.scheme }}://{{ request.get_host }}{% url 'agency_portal_login' %}"
                                   class="form-control font-monospace" id="loginUrl">
                            <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('loginUrl')">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-muted small">{% trans "Access Token" %}</label>
                        <div class="input-group">
                            <input type="text" readonly value="{{ access_link.unique_token }}"
                                   class="form-control font-monospace" id="accessToken">
                            <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('accessToken')">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-muted small">{% trans "Password" %}</label>
                        <div class="input-group">
                            <input type="text" readonly value="{{ access_link.access_password }}"
                                   class="form-control font-monospace" id="accessPassword">
                            <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('accessPassword')">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>

                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        {% trans "Share these credentials securely with the agency. They can use this information to log in and submit candidates." %}
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="kaauh-card shadow-sm mb-4 px-3 py-3">
                <div class="card-body">
                    <h5 class="card-title mb-3">
                        <i class="fas fa-chart-line me-2 text-info"></i>
                        {% trans "Usage Statistics" %}
                    </h5>

                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted">{% trans "Total Accesses" %}</span>
                            <span class="fw-semibold">{{ access_link.access_count }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted">{% trans "Last Accessed" %}</span>
                            <span class="fw-semibold">
                                {% if access_link.last_accessed %}
                                    {{ access_link.last_accessed|date:"Y-m-d H:i" }}
                                {% else %}
                                    <span class="text-muted">{% trans "Never" %}</span>
                                {% endif %}
                            </span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted">{% trans "Submissions" %}</span>
                            <span class="fw-semibold">{{ access_link.assignment.candidates_submitted }}/{{ access_link.assignment.max_candidates }}</span>
                        </div>
                    </div>

                    <div class="progress" style="height: 8px;">
                        {% widthratio access_link.assignment.candidates_submitted access_link.assignment.max_candidates 100 as progress_percent %}
                        <div class="progress-bar {% if progress_percent >= 80 %}bg-danger{% elif progress_percent >= 60 %}bg-warning{% else %}bg-success{% endif %}"
                             style="width: {{ progress_percent }}%"></div>
                    </div>
                </div>
            </div>

            <div class="kaauh-card shadow-sm px-3 py-3">
                <div class="card-body">
                    <h5 class="card-title mb-3">
                        <i class="fas fa-cog me-2 text-secondary"></i>
                        {% trans "Actions" %}
                    </h5>

                    <div class="d-grid gap-2">
                        <a href="{% url 'agency_assignment_detail' access_link.assignment.slug %}" class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-eye me-1"></i> {% trans "View Assignment" %}
                        </a>

                        {% if access_link.is_active and not access_link.is_expired %}
                        <button class="btn btn-warning btn-sm" onclick="confirmDeactivate()">
                            <i class="fas fa-pause me-1"></i> {% trans "Deactivate" %}
                        </button>
                        {% endif %}

                        {% if access_link.is_expired or not access_link.is_active %}
                        <button class="btn btn-success btn-sm" onclick="confirmReactivate()">
                            <i class="fas fa-play me-1"></i> {% trans "Reactivate" %}
                        </button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block customJS %}
<script>
function copyToClipboard(elementId) {
    const element = document.getElementById(elementId);
    element.select();
    document.execCommand('copy');

    // Show feedback
    const button = element.nextElementSibling;
    const originalHTML = button.innerHTML;
    button.innerHTML = '<i class="fas fa-check"></i>';
    button.classList.add('btn-success');
    button.classList.remove('btn-outline-secondary');

    setTimeout(() => {
        button.innerHTML = originalHTML;
        button.classList.remove('btn-success');
        button.classList.add('btn-outline-secondary');
    }, 2000);
}

function confirmDeactivate() {
    if (confirm('{% trans "Are you sure you want to deactivate this access link? Agencies will no longer be able to use it." %}')) {
        // Submit form to deactivate
        window.location.href = '{% url "agency_access_link_deactivate" access_link.slug %}';
    }
}

function confirmReactivate() {
    if (confirm('{% trans "Are you sure you want to reactivate this access link?" %}')) {
        // Submit form to reactivate
        window.location.href = '{% url "agency_access_link_reactivate" access_link.slug %}';
    }
}
</script>
{% endblock %}