{% extends "base.html" %}
{% block title %}Shortlist – {{ job.title }}{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row">
        <!-- Main content: Applicants table -->
        <div class="col-lg-8">
            <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap">
                <h2>Shortlist for {{ job.title }}</h2>
                <div class="mt-2 mt-sm-0">
                    <span class="badge bg-{{ 'success' if shortlist.status == 'Final' else 'secondary' }} me-2">
                        Status: {{ shortlist.status }}
                    </span>
                    <button id="toggleStatusBtn" class="btn btn-sm btn-warning">
                        <i class="fas fa-sync-alt"></i> 
                        {% if shortlist.status == 'Draft' %}Mark as Final{% else %}Revert to Draft{% endif %}
                    </button>
                    <!-- NEW: Mark Candidate as Hired button -->
                    <button class="btn btn-sm btn-success ms-2" data-bs-toggle="modal" data-bs-target="#hireModal">
                        <i class="fas fa-user-check"></i> Mark Candidate as Hired
                    </button>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-striped" id="shortlistTable">
                    <thead>
                        <tr>
                            <th>Name</th><th>Email</th><th>Phone</th><th>Profile %</th>
                            <th>Match Score</th><th>Shortlist</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for app in applicants %}
                        <tr data-profile-id="{{ app.profile.id }}" data-in-shortlist="{{ 'true' if app.in_shortlist else 'false' }}">
                            <td>{{ app.user.full_name }}</td>
                            <td>{{ app.user.email }}</td>
                            <td>{{ app.profile.phone or 'Not provided' }}</td>
                            <td>{{ app.completeness }}%</td>
                            <td>{{ app.match_score }}%</td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary toggle-shortlist" data-action="{{ 'remove' if app.in_shortlist else 'add' }}">
                                    <i class="fas {{ 'fa-minus-circle' if app.in_shortlist else 'fa-plus-circle' }}"></i>
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Sidebar: Shortlist Pane -->
        <div class="col-lg-4">
            <div class="card shadow-sm sticky-md-top" style="top: 80px;">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-list"></i> Your Shortlist</h5>
                </div>
                <div class="card-body" id="shortlistPane">
                    <p class="text-muted" id="emptyShortlistMsg">No candidates added yet.</p>
                    <ul class="list-group list-group-flush" id="shortlistItems">
                        {% for item in shortlist.items %}
                        <li class="list-group-item d-flex justify-content-between align-items-center" data-profile-id="{{ item.job_seeker_profile_id }}">
                            {{ item.profile.user.full_name }}
                            <button class="btn btn-sm btn-danger remove-shortlist-item">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="card-footer text-muted">
                    {{ shortlist.items.count() }} candidate{{ '' if shortlist.items.count() == 1 else 's' }} in shortlist
                </div>
            </div>
        </div>
    </div>

    <!-- ==================== INTERVIEWS SECTION ==================== -->
    <div class="mt-5">
        <h3>Interviews</h3>
        <button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#createInterviewModal">
            <i class="fas fa-plus"></i> Create Interview
        </button>

        {% if interviews %}
            {% for interview in interviews %}
            <div class="card mb-3 shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <strong>{{ interview.title }}</strong>
                        <span class="badge bg-{{ 'success' if interview.status == 'Completed' else 'warning' if interview.status == 'In Progress' else 'secondary' }}">
                            {{ interview.status }}
                        </span>
                        <small class="text-muted ms-2">Ref: {{ interview.reference }}</small>
                    </div>
                    <div>
                        <span class="badge bg-info">{{ interview.candidates.count() }} candidates</span>
                        <button class="btn btn-sm btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#interview{{ interview.id }}">Expand</button>
                    </div>
                </div>
                <div class="collapse show" id="interview{{ interview.id }}">
                    <div class="card-body">
                        <p><strong>Date:</strong> {{ interview.date.strftime('%A, %B %d, %Y at %H:%M') }}</p>
                        <p><strong>Location:</strong> {{ interview.location or 'TBD' }}</p>
                        <p>{{ interview.description }}</p>

                        <!-- Action buttons -->
                        <div class="mb-3">
                            <button class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#sendEmailModal{{ interview.id }}">
                                <i class="fas fa-envelope"></i> Send Invitations
                            </button>
                            <a href="{{ url_for('export_interview_excel', interview_id=interview.id) }}" class="btn btn-sm btn-primary">
                                <i class="fas fa-file-excel"></i> Export Excel
                            </a>
                            <button class="btn btn-sm btn-warning" onclick="changeInterviewStatus({{ interview.id }}, 'In Progress')">Mark In Progress</button>
                            <button class="btn btn-sm btn-success" onclick="changeInterviewStatus({{ interview.id }}, 'Completed')">Mark Completed</button>
                        </div>

                        <!-- Candidate table with scoring -->
                        <form method="POST" action="{{ url_for('score_interview_candidates', interview_id=interview.id) }}">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Name</th><th>Email</th><th>Status</th>
                                        <th>Score (0-100)</th><th>Notes</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for candidate in interview.candidates %}
                                    <tr>
                                        <td>{{ candidate.shortlist_item.profile.user.full_name }}</td>
                                        <td>{{ candidate.shortlist_item.profile.user.email }}</td>
                                        <td>{{ candidate.status }}</td>
                                        <td>
                                            <input type="number" name="score_{{ candidate.id }}" class="form-control form-control-sm" 
                                                   value="{{ candidate.score if candidate.score is not none else '' }}" min="0" max="100" step="0.1">
                                        </td>
                                        <td>
                                            <input type="text" name="notes_{{ candidate.id }}" class="form-control form-control-sm" value="{{ candidate.notes or '' }}">
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            <button type="submit" class="btn btn-sm btn-primary">Save Scores</button>
                        </form>
                    </div>
                </div>
            </div>
            {% endfor %}
        {% else %}
            <p class="text-muted">No interviews created yet. Create one using the button above.</p>
        {% endif %}
    </div>
</div>

<!-- ==================== MODALS ==================== -->

<!-- Modal: Create Interview -->
<div class="modal fade" id="createInterviewModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="POST" action="{{ url_for('create_interview', shortlist_id=shortlist.id) }}">
                <div class="modal-header">
                    <h5 class="modal-title">Create New Interview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label>Interview Title</label>
                        <input type="text" name="title" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label>Description</label>
                        <textarea name="description" class="form-control" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label>Date & Time</label>
                        <input type="datetime-local" name="date" class="form-control" required>
                    </div>
                    <div class="mb-3">
                        <label>Location / Link</label>
                        <input type="text" name="location" class="form-control" placeholder="e.g., Zoom link or office address">
                    </div>
                    <div class="mb-3">
                        <label>Select Candidates (from Shortlist)</label>
                        <div class="row">
                            {% for item in shortlist.items %}
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="candidate_ids" value="{{ item.id }}" id="item{{ item.id }}">
                                    <label class="form-check-label" for="item{{ item.id }}">
                                        {{ item.profile.user.full_name }}
                                    </label>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </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-primary">Create Interview</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal: Send Invitations (per interview) -->
{% for interview in interviews %}
<div class="modal fade" id="sendEmailModal{{ interview.id }}" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="POST" action="{{ url_for('send_interview_invitations', interview_id=interview.id) }}">
                <div class="modal-header">
                    <h5 class="modal-title">Send Invitations for {{ interview.title }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label>Subject</label>
                        <input type="text" name="subject" class="form-control" value="Interview Invitation: {{ interview.title }}" required>
                    </div>
                    <div class="mb-3">
                        <label>Email Template (HTML)</label>
                        <textarea name="email_template" id="emailTemplate{{ interview.id }}" class="form-control" rows="10" required>
&lt;p&gt;Dear {name},&lt;/p&gt;
&lt;p&gt;You are invited to an interview for the position of &lt;strong&gt;{job_title}&lt;/strong&gt; at &lt;strong&gt;{company}&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Date:&lt;/strong&gt; {interview_date}&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Location:&lt;/strong&gt; {interview_location}&lt;/p&gt;
&lt;p&gt;Reference: {reference}&lt;/p&gt;
&lt;p&gt;Please confirm your attendance by replying to this email.&lt;/p&gt;
&lt;p&gt;Best regards,&lt;br&gt;{company} HR Team&lt;/p&gt;
                        </textarea>
                        <small>Use placeholders: {name}, {job_title}, {company}, {interview_date}, {interview_location}, {reference}</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-primary">Send Invitations</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endfor %}

<!-- ==================== NEW: HIRE CANDIDATE MODAL ==================== -->
<div class="modal fade" id="hireModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title"><i class="fas fa-user-check"></i> Mark Candidate as Hired</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>Select a Candidate (from completed interviews)</h6>
                        <input type="text" id="hireCandidateSearch" class="form-control mb-2" placeholder="Search by name or email...">
                        <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                            <table class="table table-sm table-striped" id="hireCandidatesTable">
                                <thead>
                                    <tr>
                                        <th>Select</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Interview</th>
                                    </tr>
                                </thead>
                                <tbody id="hireCandidatesList">
                                    <tr><td colspan="4" class="text-center text-muted">Loading candidates...</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h6>Email Options (Optional)</h6>
                        <div class="mb-2">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="sendHireEmail" checked>
                                <label class="form-check-label" for="sendHireEmail">Send offer email to this candidate</label>
                            </div>
                        </div>
                        <div id="hireEmailSection">
                            <div class="mb-2">
                                <label>Subject</label>
                                <input type="text" id="hireEmailSubject" class="form-control" value="Congratulations! Job Offer – {{ job.title }}">
                            </div>
                            <div class="mb-2">
                                <label>Email Body (HTML)</label>
                                <textarea id="hireEmailBody" class="form-control" rows="6">
&lt;p&gt;Dear {name},&lt;/p&gt;
&lt;p&gt;We are pleased to offer you the position of &lt;strong&gt;{job_title}&lt;/strong&gt; at &lt;strong&gt;{company}&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;Please contact us to discuss the next steps.&lt;/p&gt;
&lt;p&gt;Congratulations and welcome to the team!&lt;/p&gt;
&lt;p&gt;Sincerely,&lt;br&gt;{company} HR Team&lt;/p&gt;
                                </textarea>
                                <small>Placeholders: {name}, {job_title}, {company}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="confirmHireBtn">
                    <i class="fas fa-check"></i> Confirm Hire
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Confirmation Modal for Status Change -->
<div class="modal fade" id="statusConfirmModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Status Change</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to mark this shortlist as <strong>Final</strong>? This action cannot be undone.</p>
                <p>You will be able to send interview invitations to all shortlisted candidates.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" id="confirmStatusBtn" class="btn btn-danger">Yes, Mark as Final</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script>
let shortlistId = {{ shortlist.id }};
let hireEditor = null;
let selectedApplicationId = null;

$(document).ready(function() {
    // DataTable for applicants
    $('#shortlistTable').DataTable({
        pageLength: 10,
        searching: true,
        ordering: true,
        responsive: true
    });

    // ========== SHORTLIST TOGGLE ==========
    $(document).on('click', '.toggle-shortlist', function() {
        const $btn = $(this);
        const $row = $btn.closest('tr');
        const profileId = $row.data('profile-id');
        const currentAction = $btn.data('action'); // 'add' or 'remove'
        const action = currentAction === 'add' ? 'add' : 'remove';
        const url = '/employer/shortlist/' + shortlistId + '/toggle';
        $.ajax({
            url: url,
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ profile_id: profileId, action: action }),
            success: function(res) {
                if (res.success) {
                    if (action === 'add') {
                        $btn.data('action', 'remove');
                        $btn.html('<i class="fas fa-minus-circle"></i>');
                        $row.data('in-shortlist', 'true');
                        addShortlistItem(profileId, $row.find('td:first').text());
                    } else {
                        $btn.data('action', 'add');
                        $btn.html('<i class="fas fa-plus-circle"></i>');
                        $row.data('in-shortlist', 'false');
                        removeShortlistItem(profileId);
                    }
                    updateShortlistCount();
                } else {
                    alert(res.message || 'Error updating shortlist');
                }
            },
            error: function() { alert('Server error'); }
        });
    });

    // Remove from shortlist pane
    $(document).on('click', '.remove-shortlist-item', function() {
        const $li = $(this).closest('li');
        const profileId = $li.data('profile-id');
        const $row = $('#shortlistTable tbody tr[data-profile-id="' + profileId + '"]');
        if ($row.length) {
            $row.find('.toggle-shortlist').trigger('click');
        } else {
            $li.remove();
            updateShortlistCount();
        }
    });

    function addShortlistItem(profileId, name) {
        $('#emptyShortlistMsg').hide();
        const $list = $('#shortlistItems');
        if ($list.find('li[data-profile-id="' + profileId + '"]').length) return;
        $list.append(`
            <li class="list-group-item d-flex justify-content-between align-items-center" data-profile-id="${profileId}">
                ${escapeHtml(name)}
                <button class="btn btn-sm btn-danger remove-shortlist-item">
                    <i class="fas fa-trash-alt"></i>
                </button>
            </li>
        `);
    }

    function removeShortlistItem(profileId) {
        $('#shortlistItems li[data-profile-id="' + profileId + '"]').remove();
        updateShortlistCount();
    }

    function updateShortlistCount() {
        const count = $('#shortlistItems li').length;
        $('.card-footer').text(count + ' candidate' + (count !== 1 ? 's' : '') + ' in shortlist');
        if (count === 0) $('#emptyShortlistMsg').show();
        else $('#emptyShortlistMsg').hide();
    }

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

    // ========== SHORTLIST STATUS TOGGLE ==========
    $('#toggleStatusBtn').click(function() {
        const currentStatus = '{{ shortlist.status }}';
        if (currentStatus === 'Draft') {
            $('#statusConfirmModal').modal('show');
        } else {
            changeStatus('Draft');
        }
    });

    $('#confirmStatusBtn').click(function() {
        changeStatus('Final');
        $('#statusConfirmModal').modal('hide');
    });

    function changeStatus(newStatus) {
        $.ajax({
            url: '/employer/shortlist/' + shortlistId + '/status',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ status: newStatus }),
            success: function(res) {
                if (res.success) {
                    const badge = $('#toggleStatusBtn').closest('div').find('.badge');
                    badge.removeClass('bg-secondary bg-success')
                         .addClass(newStatus === 'Final' ? 'bg-success' : 'bg-secondary')
                         .text('Status: ' + newStatus);
                    const btnText = newStatus === 'Final' ? 'Revert to Draft' : 'Mark as Final';
                    $('#toggleStatusBtn').html('<i class="fas fa-sync-alt"></i> ' + btnText);
                    if (newStatus === 'Final') {
                        alert('Shortlist is now Final. You can now create interviews.');
                        location.reload();
                    }
                } else {
                    alert('Error updating status');
                }
            }
        });
    }

    // ========== INTERVIEW STATUS CHANGE ==========
    window.changeInterviewStatus = function(interviewId, status) {
        if (!confirm('Are you sure you want to change the status to ' + status + '?')) return;
        $.ajax({
            url: '/employer/interview/' + interviewId + '/status',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ status: status }),
            success: function(res) {
                if (res.success) {
                    location.reload();
                } else {
                    alert('Error updating status');
                }
            }
        });
    };

    // ========== CKEditor for each email template modal ==========
    {% for interview in interviews %}
    const editorElement{{ interview.id }} = document.querySelector('#emailTemplate{{ interview.id }}');
    if (editorElement{{ interview.id }}) {
        ClassicEditor
            .create(editorElement{{ interview.id }}, {
                toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'],
                height: 300
            })
            .catch(error => console.error(error));
    }
    {% endfor %}

    // ========== HIRE MODAL FUNCTIONALITY ==========
    // Load candidates when modal opens
    $('#hireModal').on('show.bs.modal', function() {
        $('#hireCandidatesList').html('<tr><td colspan="4" class="text-center text-muted">Loading...</td></tr>');
        $.get('/employer/shortlist/' + shortlistId + '/completed-candidates', function(data) {
            let html = '';
            if (data.length === 0) {
                html = '<tr><td colspan="4" class="text-center text-muted">No candidates from completed interviews.</td></tr>';
            } else {
                data.forEach(c => {
                    html += `
                        <tr>
                            <td><input type="radio" name="hire_candidate" value="${c.application_id}" data-name="${escapeHtml(c.name)}" data-email="${escapeHtml(c.email)}"></td>
                            <td>${escapeHtml(c.name)}</td>
                            <td>${escapeHtml(c.email)}</td>
                            <td>${escapeHtml(c.interview_reference)}</td>
                        </tr>
                    `;
                });
            }
            $('#hireCandidatesList').html(html);
        }).fail(function() {
            $('#hireCandidatesList').html('<tr><td colspan="4" class="text-center text-danger">Error loading candidates.</td></tr>');
        });
    });

    // Radio selection
    $(document).on('change', 'input[name="hire_candidate"]', function() {
        selectedApplicationId = $(this).val();
        // No auto-population of email body; user can customize manually.
    });

    // Search filter for candidates
    $('#hireCandidateSearch').on('keyup', function() {
        const q = $(this).val().toLowerCase();
        $('#hireCandidatesList tr').each(function() {
            const text = $(this).text().toLowerCase();
            $(this).toggle(text.indexOf(q) > -1);
        });
    });

    // CKEditor for hire email body
    ClassicEditor
        .create(document.querySelector('#hireEmailBody'), {
            toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'],
            height: 250
        })
        .then(editor => {
            hireEditor = editor;
        })
        .catch(error => console.error(error));

    // Toggle email section visibility
    $('#sendHireEmail').change(function() {
        if ($(this).is(':checked')) {
            $('#hireEmailSection').slideDown();
        } else {
            $('#hireEmailSection').slideUp();
        }
    });

    // Confirm Hire button
    $('#confirmHireBtn').click(function() {
        if (!selectedApplicationId) {
            alert('Please select a candidate first.');
            return;
        }
        if (!confirm('Are you sure you want to mark this candidate as hired?')) return;

        // Gather data
        const sendEmail = $('#sendHireEmail').is(':checked');
        let subject = '', body = '';
        if (sendEmail) {
            subject = $('#hireEmailSubject').val();
            if (hireEditor) {
                body = hireEditor.getData();
            } else {
                body = $('#hireEmailBody').val();
            }
            if (!subject.trim()) {
                alert('Please enter an email subject.');
                return;
            }
            if (!body.trim()) {
                alert('Please enter an email body.');
                return;
            }
        }

        const payload = {
            application_id: selectedApplicationId,
            send_email: sendEmail,
            email_subject: subject,
            email_body: body
        };

        $.ajax({
            url: '/employer/shortlist/' + shortlistId + '/mark-hired',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(payload),
            success: function(res) {
                if (res.success) {
                    alert('Candidate marked as hired successfully.');
                    $('#hireModal').modal('hide');
                    location.reload();
                } else {
                    alert(res.error || 'Error marking candidate as hired.');
                }
            },
            error: function() {
                alert('Server error. Please try again.');
            }
        });
    });
});
</script>
{% endblock %}