{% extends "base.html" %}

{% block title %}Applicants for {{ job.title }}{% endblock %}

{% block content %}
<!-- TOP BUTTONS (Extended) -->
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap">
    <h2>Applicants for: {{ job.title }}</h2>
    <div class="mt-2 mt-sm-0">
        <!-- Shortlist Button -->
        <a href="{{ url_for('shortlist', job_id=job.id) }}" class="btn btn-outline-primary me-2">
            <i class="fas fa-list"></i> 
            {% if shortlist_exists %}View Shortlist{% else %}Create Shortlist{% endif %}
        </a>

        <!-- Metrics Button -->
        <button class="btn btn-info me-2" data-bs-toggle="modal" data-bs-target="#metricsModal">
            <i class="fas fa-chart-bar"></i> View Metrics
        </button>

        <!-- Rejections Button -->
        <button class="btn btn-danger me-2" data-bs-toggle="modal" data-bs-target="#rejectModal">
            <i class="fas fa-envelope"></i> Send Rejections
        </button>

        <!-- Export Buttons -->
        <a href="{{ url_for('export_applicants_excel', job_id=job.id) }}" class="btn btn-success me-2">
            <i class="fas fa-file-excel"></i> Generate Excel List
        </a>
        <a href="{{ url_for('job_analytics_report', job_id=job.id) }}" class="btn btn-danger">
            <i class="fas fa-chart-pie"></i> Generate PDF Report
        </a>
    </div>
</div>

<!-- FILTER BAR (unchanged) -->
<div class="card shadow-sm mb-4">
    <div class="card-header bg-light">
        <h5 class="mb-0"><i class="fas fa-filter"></i> Filter Applicants</h5>
    </div>
    <div class="card-body">
        <div class="row g-3">
            <!-- Position -->
            <div class="col-md-3">
                <label class="form-label">Position / Job Title</label>
                <select id="filterPositions" multiple></select>
                <div id="positionChips" class="mt-2 d-flex flex-wrap gap-1"></div>
            </div>
            <!-- Former Employer -->
            <div class="col-md-3">
                <label class="form-label">Former Employer</label>
                <select id="filterEmployers" multiple></select>
                <div id="employerChips" class="mt-2 d-flex flex-wrap gap-1"></div>
            </div>
            <!-- University -->
            <div class="col-md-3">
                <label class="form-label">University / Institution</label>
                <select id="filterUniversities" multiple></select>
                <div id="universityChips" class="mt-2 d-flex flex-wrap gap-1"></div>
            </div>
            <!-- Address -->
            <div class="col-md-3">
                <label class="form-label">Address / Location</label>
                <select id="filterAddresses" multiple></select>
                <div id="addressChips" class="mt-2 d-flex flex-wrap gap-1"></div>
            </div>
            <!-- Minimum Match Score -->
            <div class="col-md-3">
                <label class="form-label">Minimum Match Score (%)</label>
                <input type="number" id="minMatchScore" class="form-control" value="0" min="0" max="100" step="5">
            </div>
        </div>
        <div class="mt-3">
            <button id="applyFiltersBtn" class="btn btn-primary me-2">Apply Filters</button>
            <button id="clearFiltersBtn" class="btn btn-outline-secondary">Clear All</button>
        </div>
    </div>
</div>

<!-- APPLICANTS TABLE (with Hire button in Actions) -->
<div class="table-responsive">
    <table class="table table-striped" id="applicantsTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Profile %</th>
                <th>Match Score</th>
                <th>Cover Letter</th>
                <th>Applied On</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<a href="{{ url_for('employer_dashboard') }}" class="btn btn-secondary">Back to Dashboard</a>

<!-- ==================== METRICS MODAL ==================== -->
<div class="modal fade" id="metricsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Job Metrics – {{ job.title }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="metricsContent">
                <p class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading metrics...</p>
            </div>
            <div class="modal-footer">
                <a href="{{ url_for('export_job_metrics_excel', job_id=job.id) }}" class="btn btn-success">
                    <i class="fas fa-file-excel"></i> Download Excel
                </a>
                <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- ==================== REJECTION EMAILS MODAL ==================== -->
<div class="modal fade" id="rejectModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="POST" action="{{ url_for('send_rejection_emails', job_id=job.id) }}">
                <div class="modal-header">
                    <h5 class="modal-title">Send Rejection Emails</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Emails will be sent in the background. You can continue using the app.</p>
                    <hr>
                    <h6>For applicants <strong>not shortlisted</strong></h6>
                    <div class="mb-3">
                        <label>Subject</label>
                        <input type="text" name="subject_not_shortlisted" class="form-control" value="Application Update – {{ job.title }}">
                    </div>
                    <div class="mb-3">
                        <label>Email Template</label>
                        <textarea name="not_shortlisted_template" id="notShortlistedEditor" class="form-control" rows="6">
&lt;p&gt;Dear {name},&lt;/p&gt;
&lt;p&gt;Thank you for applying for the position of &lt;strong&gt;{job_title}&lt;/strong&gt; at &lt;strong&gt;{company}&lt;/strong&gt;. We have received many high-quality applications, and unfortunately, you were not shortlisted for this round.&lt;/p&gt;
&lt;p&gt;We wish you the best in your job search.&lt;/p&gt;
&lt;p&gt;Sincerely,&lt;br&gt;{company} HR Team&lt;/p&gt;
                        </textarea>
                        <small class="text-muted">Placeholders: {name}, {job_title}, {company}</small>
                    </div>
                    <hr>
                    <h6>For applicants <strong>shortlisted but not hired</strong></h6>
                    <div class="mb-3">
                        <label>Subject</label>
                        <input type="text" name="subject_shortlisted" class="form-control" value="Application Status – {{ job.title }}">
                    </div>
                    <div class="mb-3">
                        <label>Email Template</label>
                        <textarea name="shortlisted_template" id="shortlistedEditor" class="form-control" rows="6">
&lt;p&gt;Dear {name},&lt;/p&gt;
&lt;p&gt;We appreciate your time and effort during the interview process for &lt;strong&gt;{job_title}&lt;/strong&gt; at &lt;strong&gt;{company}&lt;/strong&gt;. After careful consideration, we have decided to proceed with another candidate.&lt;/p&gt;
&lt;p&gt;We wish you success in your future endeavors.&lt;/p&gt;
&lt;p&gt;Sincerely,&lt;br&gt;{company} HR Team&lt;/p&gt;
                        </textarea>
                        <small class="text-muted">Placeholders: {name}, {job_title}, {company}</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Send Rejections</button>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<link href="https://cdn.jsdelivr.net/npm/tom-select/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>

<script>
// ======== GLOBAL VARIABLES ========
const jobId = {{ job.id }};
let filterOptions = { positions: [], employers: [], universities: [], addresses: [] };
let selectedFilters = { 
    positions: [], 
    employers: [], 
    universities: [], 
    addresses: [], 
    minMatchScore: 0 
};
let table;

$(document).ready(function() {
    // ======== DATATABLE ========
    table = $('#applicantsTable').DataTable({
        pageLength: 10,
        searching: true,
        ordering: true,
        responsive: true,
        dom: '<"top"lf>rt<"bottom"ip>',
        language: {
            search: "Filter:",
            lengthMenu: "Show _MENU_ applicants",
            info: "Showing _START_ to _END_ of _TOTAL_ applicants",
            paginate: {
                first: "First",
                last: "Last",
                next: "→",
                previous: "←"
            }
        }
    });

    // ======== LOAD FILTER OPTIONS ========
    $.get('/employer/job/' + jobId + '/filter-options', function(data) {
        filterOptions = data;
        initTomSelect('filterPositions', 'positions', 'positionChips');
        initTomSelect('filterEmployers', 'employers', 'employerChips');
        initTomSelect('filterUniversities', 'universities', 'universityChips');
        initTomSelect('filterAddresses', 'addresses', 'addressChips');
    });

    // ======== TOM SELECT INIT ========
    function initTomSelect(inputId, key, chipsId) {
        new TomSelect('#' + inputId, {
            valueField: 'normalized',
            labelField: 'display',
            searchField: ['display'],
            options: filterOptions[key],
            maxItems: null,
            placeholder: "Start typing...",
            load: function(query, callback) {
                if (!query.length) return callback();
                let res = filterOptions[key].filter(item =>
                    item.display.toLowerCase().includes(query.toLowerCase())
                );
                callback(res);
            },
            onChange: function(values) {
                selectedFilters[key] = values;
                renderChips(key, values, chipsId, inputId);
            }
        });
    }

    // ======== CHIPS RENDERING ========
    function renderChips(type, values, containerId, inputId) {
        let container = $('#' + containerId);
        container.empty();
        values.forEach(val => {
            let item = filterOptions[type].find(i => i.normalized === val);
            let label = item ? item.display : val;
            container.append(`
                <span class="badge bg-secondary p-2">
                    ${escapeHtml(label)}
                    <i class="fas fa-times ms-1" style="cursor:pointer"
                       data-type="${type}" data-val="${val}" data-input="${inputId}"></i>
                </span>
            `);
        });
    }

    // ======== REMOVE CHIP ========
    $(document).on('click', '.badge i', function() {
        let val = $(this).data('val');
        let inputId = $(this).data('input');
        let control = document.querySelector('#' + inputId);
        if (control && control.tomselect) control.tomselect.removeItem(val);
        applyFilters();
    });

    // ======== FILTER BUTTONS ========
    $('#applyFiltersBtn').click(applyFilters);
    $('#clearFiltersBtn').click(function() {
        ['filterPositions','filterEmployers','filterUniversities','filterAddresses'].forEach(id => {
            let control = document.querySelector('#' + id);
            if (control && control.tomselect) control.tomselect.clear();
        });
        $('#minMatchScore').val(0);
        selectedFilters = { positions: [], employers: [], universities: [], addresses: [], minMatchScore: 0 };
        applyFilters();
    });

    // ======== APPLY FILTERS ========
    function applyFilters() {
        selectedFilters.minMatchScore = parseInt($('#minMatchScore').val()) || 0;
        table.clear().draw();
        $.get('/employer/job/' + jobId + '/filtered-applicants', {
            'positions[]': selectedFilters.positions,
            'employers[]': selectedFilters.employers,
            'universities[]': selectedFilters.universities,
            'addresses[]': selectedFilters.addresses,
            min_match_score: selectedFilters.minMatchScore
        }, function(data) {
            renderTable(data);
        }).fail(function() { alert('Error loading applicants. Please refresh.'); });
    }

    // ======== RENDER TABLE (with Hire button) ========
    function renderTable(applicants) {
        table.clear();
        applicants.forEach(app => {
            let badge = 'bg-secondary';
            if (app.match_score >= 70) badge = 'bg-success';
            else if (app.match_score >= 40) badge = 'bg-warning';

            let cover = app.cover_letter_path ?
                `<a href="${app.download_cover_url}" class="btn btn-sm btn-info">Download</a>` :
                '<span class="text-muted">Not provided</span>';

            let progress = `
                <div class="progress" style="height:20px;">
                    <div class="progress-bar" style="width:${app.completeness}%">
                        ${app.completeness}%
                    </div>
                </div>`;

            // ======== HIRE BUTTON ========
            let hireButton = `
                <form method="POST" action="/employer/job/${jobId}/hire/${app.id}" style="display:inline;">
                    <button type="submit" class="btn btn-sm btn-success" onclick="return confirm('Mark ${escapeHtml(app.name)} as hired?')">
                        <i class="fas fa-user-check"></i>
                    </button>
                </form>
            `;

            table.row.add([
                escapeHtml(app.name),
                escapeHtml(app.email),
                escapeHtml(app.phone),
                progress,
                `<span class="badge ${badge}">${app.match_score}%</span>`,
                cover,
                app.applied_at,
                `<a href="${app.view_url}" class="btn btn-sm btn-primary">View</a> ${hireButton}`
            ]);
        });
        table.draw();
    }

    // ======== ESCAPE HTML ========
    function escapeHtml(str) {
        if (!str) return '';
        return str.replace(/[&<>]/g, function(m) {
            if (m === '&') return '&amp;';
            if (m === '<') return '&lt;';
            if (m === '>') return '&gt;';
            return m;
        });
    }

    // ======== INITIAL LOAD ========
    applyFilters();

    // ======== METRICS MODAL ========
    $('#metricsModal').on('show.bs.modal', function() {
        $('#metricsContent').html('<p class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading metrics...</p>');
        $.get('/employer/job/' + jobId + '/metrics', function(data) {
            let html = `
                <ul class="list-group">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Total Applications
                        <span class="badge bg-primary rounded-pill">${data.total_applications}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Shortlisted
                        <span class="badge bg-info rounded-pill">${data.total_shortlisted}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Interviewed
                        <span class="badge bg-warning rounded-pill">${data.total_interviewed}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Hired
                        <span class="badge bg-success rounded-pill">${data.total_hired}</span>
                    </li>
                </ul>
            `;
            $('#metricsContent').html(html);
        }).fail(function() {
            $('#metricsContent').html('<p class="text-danger">Error loading metrics.</p>');
        });
    });

    // ======== REJECTION MODAL CKEDITOR ========
    $('#rejectModal').on('shown.bs.modal', function() {
        if (!window.notShortlistedEditor) {
            ClassicEditor
                .create(document.querySelector('#notShortlistedEditor'), {
                    toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'],
                    height: 200
                })
                .then(editor => window.notShortlistedEditor = editor)
                .catch(error => console.error(error));
        }
        if (!window.shortlistedEditor) {
            ClassicEditor
                .create(document.querySelector('#shortlistedEditor'), {
                    toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'],
                    height: 200
                })
                .then(editor => window.shortlistedEditor = editor)
                .catch(error => console.error(error));
        }
    });

    // Save editor content before form submit
    $('#rejectModal form').on('submit', function() {
        if (window.notShortlistedEditor) {
            document.querySelector('#notShortlistedEditor').value = window.notShortlistedEditor.getData();
        }
        if (window.shortlistedEditor) {
            document.querySelector('#shortlistedEditor').value = window.shortlistedEditor.getData();
        }
    });
});
</script>
{% endblock %}