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

{% block title %}{{ assignment.agency.name }} - {{ assignment.job.title }} - ATS{% endblock %}

{% block customCSS %}
<style>
    /* KAAT-S UI Variables */
    :root {
        --kaauh-teal: #00636e;
        --kaauh-teal-dark: #004a53;
        --kaauh-border: #e9ecef;
        --kaauh-primary-text: #212529;
        --kaauh-success: #198754;
        --kaauh-info: #0dcaf0;
        --kaauh-danger: #dc3545;
        --kaauh-warning: #ffc107;
        --kaauh-bg-light: #f8f9fa;
    }

    .text-primary-teal {
        color: var(--kaauh-teal) !important;
    }

    .kaauh-card {
        border: none;
        border-radius: 0.75rem;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
        background-color: white;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .kaauh-card:hover {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }

    .btn-main-action {
        background-color: var(--kaauh-teal);
        border-color: var(--kaauh-teal);
        color: white;
        font-weight: 500;
        padding: 0.5rem 1.2rem;
        transition: all 0.2s ease;
    }

    .btn-main-action:hover {
        background-color: var(--kaauh-teal-dark);
        border-color: var(--kaauh-teal-dark);
        color: white;
        transform: translateY(-1px);
    }

    .btn-white {
        background-color: white;
        border-color: var(--kaauh-border);
        color: var(--kaauh-primary-text);
    }

    .btn-white:hover {
        background-color: var(--kaauh-bg-light);
        border-color: #dee2e6;
    }

    .status-badge {
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .status-ACTIVE {
        background-color: #d1e7dd;
        color: #0f5132;
    }

    .status-EXPIRED {
        background-color: #f8d7da;
        color: #842029;
    }

    .status-COMPLETED {
        background-color: #cff4fc;
        color: #055160;
    }

    .status-CANCELLED {
        background-color: #fff3cd;
        color: #664d03;
    }

    .bg-soft-primary {
        background-color: rgba(13, 110, 253, 0.1);
    }

    .bg-soft-info {
        background-color: rgba(13, 202, 240, 0.1);
    }

    .bg-soft-success {
        background-color: rgba(25, 135, 84, 0.1);
    }

    .avatar-circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    .w-20 {
        width: 20px;
        text-align: center;
    }

    .progress-ring {
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
    }

    .progress-ring-circle {
        transition: stroke-dashoffset 0.5s ease-in-out;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-5 bg-light">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                    <nav aria-label="breadcrumb" class="mb-2">
                        <ol class="breadcrumb mb-0 small">
                            <li class="breadcrumb-item"><a href="{% url 'agency_assignment_list' %}"
                                    class="text-decoration-none text-muted">{% trans "Assignments" %}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ assignment.job.title }}</li>
                        </ol>
                    </nav>
                    <h1 class="h2 fw-bold text-dark mb-2">
                        {{ assignment.job.title }}
                    </h1>
                    <div class="d-flex align-items-center text-muted">
                        <span class="me-3"><i class="fas fa-building me-1"></i> {{ assignment.agency.name }}</span>
                        <span class="badge status-{{ assignment.status }} rounded-pill px-3">{{
                            assignment.get_status_display }}</span>
                    </div>
                </div>
                <div class="d-flex gap-2">
                    <a href="{% url 'agency_assignment_list' %}" class="btn btn-white border shadow-sm">
                        <i class="fas fa-arrow-left me-1"></i> {% trans "Back" %}
                    </a>
                    <a href="{% url 'agency_assignment_update' assignment.slug %}"
                        class="btn btn-main-action shadow-sm">
                        <i class="fas fa-edit me-1"></i> {% trans "Edit" %}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Left Column: Details & Candidates -->
        <div class="col-lg-8 col-md-12">
            <!-- Assignment Details Card -->
            <div class="kaauh-card mb-4">
                <div class="card-header bg-transparent border-bottom py-3 px-4">
                    <h5 class="mb-0 fw-bold text-dark">
                        <i class="fas fa-info-circle me-2 text-primary-teal"></i>
                        {% trans "Assignment Details" %}
                    </h5>
                </div>
                <div class="card-body p-4">
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="detail-group">
                                <label class="text-uppercase text-muted small fw-bold mb-1">{% trans "Agency" %}</label>
                                <div class="fs-6 fw-medium text-dark">{{ assignment.agency.name }}</div>
                                <div class="text-muted small">{{ assignment.agency.contact_person }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="detail-group">
                                <label class="text-uppercase text-muted small fw-bold mb-1">{% trans "Department"
                                    %}</label>
                                <div class="fs-6 fw-medium text-dark">{{ assignment.job.department }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="detail-group">
                                <label class="text-uppercase text-muted small fw-bold mb-1">{% trans "Deadline"
                                    %}</label>
                                <div
                                    class="fs-6 fw-medium {% if assignment.is_expired %}text-danger{% else %}text-dark{% endif %}">
                                    {{ assignment.deadline_date|date:"M d, Y - H:i" }}
                                </div>
                                {% if assignment.is_expired %}
                                <small class="text-danger fw-bold">
                                    <i class="fas fa-exclamation-triangle me-1"></i>{% trans "Expired" %}
                                </small>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="detail-group">
                                <label class="text-uppercase text-muted small fw-bold mb-1">{% trans "Created At"
                                    %}</label>
                                <div class="fs-6 fw-medium text-dark">{{ assignment.created_at|date:"M d, Y" }}</div>
                            </div>
                        </div>
                    </div>

                    {% if assignment.admin_notes %}
                    <div class="mt-4 pt-4 border-top">
                        <label class="text-uppercase text-muted small fw-bold mb-2">{% trans "Admin Notes" %}</label>
                        <div class="p-3 bg-light rounded border-start border-4 border-info text-muted">
                            {{ assignment.admin_notes }}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Candidates Card -->
            <div class="kaauh-card">
                <div
                    class="card-header bg-transparent border-bottom py-3 px-4 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 fw-bold text-dark">
                        <i class="fas fa-users me-2 text-primary-teal"></i>
                        {% trans "Submitted Candidates" %}
                        <span class="badge bg-light text-dark border ms-2">{{ total_candidates }}</span>
                    </h5>
                    {% if access_link %}
                    <a href="{% url 'agency_portal_login' %}" target="_blank" class="btn btn-sm btn-outline-info">
                        <i class="fas fa-external-link-alt me-1"></i> {% trans "Portal Preview" %}
                    </a>
                    {% endif %}
                </div>
                <div class="card-body p-0">
                    {% if candidates %}
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th class="px-4 py-3 text-uppercase small fw-bold text-muted">{% trans "Candidate"
                                        %}</th>
                                    <th class="px-4 py-3 text-uppercase small fw-bold text-muted">{% trans "Contact" %}
                                    </th>
                                    <th class="px-4 py-3 text-uppercase small fw-bold text-muted">{% trans "Stage" %}
                                    </th>
                                    <th class="px-4 py-3 text-uppercase small fw-bold text-muted">{% trans "Submitted"
                                        %}</th>
                                    <th class="px-4 py-3 text-uppercase small fw-bold text-muted text-end">{% trans
                                        "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for candidate in candidates %}
                                <tr>
                                    <td class="px-4">
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-circle me-3 bg-soft-primary text-primary fw-bold">
                                                {{ candidate.name|slice:":2"|upper }}
                                            </div>
                                            <div>
                                                <div class="fw-bold text-dark">{{ candidate.name }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-4">
                                        <div class="small text-muted">
                                            <div class="mb-1"><i class="fas fa-envelope me-2 w-20"></i>{{
                                                candidate.email }}</div>
                                            <div><i class="fas fa-phone me-2 w-20"></i>{{ candidate.phone }}</div>
                                        </div>
                                    </td>
                                    <td class="px-4">
                                        <span class="badge bg-soft-info text-info rounded-pill px-3">{{
                                            candidate.get_stage_display }}</span>
                                    </td>
                                    <td class="px-4">
                                        <span class="small text-muted">{{ candidate.created_at|date:"M d, Y" }}</span>
                                    </td>
                                    <td class="px-4 text-end">
                                        <a href="{% url 'candidate_detail' candidate.slug %}"
                                            class="btn btn-sm btn-white border shadow-sm text-primary"
                                            title="{% trans 'View Details' %}">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-5">
                        <div class="mb-3">
                            <div class="avatar-circle bg-light text-muted mx-auto"
                                style="width: 64px; height: 64px; font-size: 24px;">
                                <i class="fas fa-user-plus"></i>
                            </div>
                        </div>
                        <h6 class="fw-bold text-dark">{% trans "No candidates yet" %}</h6>
                        <p class="text-muted small mb-0">
                            {% trans "Candidates submitted by the agency will appear here." %}
                        </p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Right Column: Sidebar -->
        <div class="col-lg-4 col-md-12">
            <!-- Progress Card -->
            <div class="kaauh-card mb-4">
                <div class="card-body p-4 text-center">
                    <h6 class="text-uppercase text-muted small fw-bold mb-4">{% trans "Submission Goal" %}</h6>

                    <div class="position-relative d-inline-block mb-3">
                        <svg class="progress-ring" width="140" height="140">
                            <circle class="progress-ring-bg" stroke="#f1f3f5" stroke-width="10" fill="transparent"
                                r="60" cx="70" cy="70" />
                            <circle class="progress-ring-circle" stroke="var(--kaauh-teal)" stroke-width="10"
                                fill="transparent" r="60" cx="70" cy="70"
                                style="stroke-dasharray: 376.99; stroke-dashoffset: {{ stroke_dashoffset }};" />
                        </svg>
                        <div class="position-absolute top-50 start-50 translate-middle text-center">
                            <div class="h3 fw-bold mb-0 text-dark">{{ total_candidates }}</div>
                            <div class="small text-muted text-uppercase">{% trans "of" %} {{ assignment.max_candidates
                                }}</div>
                        </div>
                    </div>

                    <p class="text-muted small mb-0">
                        {% trans "Candidates submitted" %}
                    </p>
                </div>
            </div>

            <!-- Actions Card -->
            <div class="kaauh-card mb-4">
                <div class="card-header bg-transparent border-bottom py-3 px-4">
                    <h6 class="mb-0 fw-bold text-dark">{% trans "Quick Actions" %}</h6>
                </div>
                <div class="card-body p-4">
                    <div class="d-grid gap-3">
                        <a href="" class="btn btn-outline-primary">
                            <i class="fas fa-envelope me-2"></i> {% trans "Send Message" %}
                        </a>

                        {% if assignment.is_active and not assignment.is_expired %}
                        <button type="button" class="btn btn-outline-warning" data-bs-toggle="modal"
                            data-bs-target="#extendDeadlineModal">
                            <i class="fas fa-clock me-2"></i> {% trans "Extend Deadline" %}
                        </button>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Recent Messages -->
            {% if messages_ %}
            <div class="kaauh-card">
                <div
                    class="card-header bg-transparent border-bottom py-3 px-4 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 fw-bold text-dark">{% trans "Recent Messages" %}</h6>
                    {% if messages_.count > 3 %}
                    <a href="#" class="small text-decoration-none">{% trans "View All" %}</a>
                    {% endif %}
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        {% for message in messages_|slice:":3" %}
                        <div
                            class="list-group-item p-3 border-bottom-0 {% if not message.is_read %}bg-soft-info{% endif %}">
                            <div class="d-flex justify-content-between mb-1">
                                <span class="fw-bold text-dark small">{{ message.sender.get_full_name }}</span>
                                <small class="text-muted" style="font-size: 0.7rem;">{{ message.created_at|date:"M d"
                                    }}</small>
                            </div>
                            <div class="fw-medium small text-dark mb-1">{{ message.subject }}</div>
                            <div class="text-muted small text-truncate">{{ message.message }}</div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Extend Deadline Modal -->
<div class="modal fade" id="extendDeadlineModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-clock me-2"></i>
                    {% trans "Extend Assignment Deadline" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" action="{% url 'agency_assignment_extend_deadline' assignment.slug %}">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="new_deadline" class="form-label">
                            {% trans "New Deadline" %} <span class="text-danger">*</span>
                        </label>
                        <input type="datetime-local" class="form-control" id="new_deadline" name="new_deadline"
                            required>
                        <small class="form-text text-muted">
                            {% trans "Current deadline:" %} {{ assignment.deadline_date|date:"Y-m-d H:i" }}
                        </small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        {% trans "Cancel" %}
                    </button>
                    <button type="submit" class="btn btn-main-action">
                        <i class="fas fa-clock me-1"></i> {% trans "Extend Deadline" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block customJS %}
<script>
    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(function () {
            // Show success message
            const toast = document.createElement('div');
            toast.className = 'position-fixed top-0 end-0 p-3';
            toast.style.zIndex = '1050';
            toast.innerHTML = `
            <div class="toast show" role="alert">
                <div class="toast-header">
                    <strong class="me-auto">{% trans "Success" %}</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
                </div>
                <div class="toast-body">
                    {% trans "Token copied to clipboard!" %}
                </div>
            </div>
        `;
            document.body.appendChild(toast);

            setTimeout(() => {
                toast.remove();
            }, 3000);
        });
    }

    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 = '';
        }
    }

    function confirmReactivate() {
        if (confirm('{% trans "Are you sure you want to reactivate this access link?" %}')) {
            // Submit form to reactivate
            window.location.href = '';
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        // Set minimum datetime for new deadline
        const deadlineInput = document.getElementById('new_deadline');
        if (deadlineInput) {
            const currentDeadline = new Date('{{ assignment.deadline_date|date:"Y-m-d\\TH:i" }}');
            const now = new Date();
            const minDateTime = new Date(Math.max(currentDeadline, now));

            const localDateTime = new Date(minDateTime.getTime() - minDateTime.getTimezoneOffset() * 60000)
                .toISOString()
                .slice(0, 16);
            deadlineInput.min = localDateTime;
            deadlineInput.value = localDateTime;
        }
    });
</script>
{% endblock %}