/**
 * Jobus - Frontend AJAX Controller
 *
 * Handles all public-facing AJAX actions used across the Jobus plugin.
 * This script manages the following user interactions via AJAX:
 *
 * It ensures secure data transmission using nonce verification and utilizes
 * WordPress's built-in admin-ajax.php endpoint.
 *
 * @summary   Modular JS controller for handling public AJAX actions
 * @author    spider-themes
 * @since     1.0.0
 * @package   Jobus
 * @license   GPL-2.0+ https://www.gnu.org/licenses/gpl-2.0.html
 * @link      https://developer.wordpress.org/plugins/javascript/ajax/
 */

; (function ($) {
    'use strict';

    const JobusEmployerDashboard = {

        init: function () {
            this.Testimonials();
            this.CompanyWebsiteToggle();
            this.JobLogoUpload();
            this.ExternalApplicationUrlToggle();
            this.SubmitJobForm();
        },


        /**
         * Manages the education section repeater in the candidate dashboard.
         * Handles adding, removing, validating, and auto-saving education items.
         *
         * @function Testimonials
         * @returns {void}
         */
        Testimonials: function () {
            const repeater = $('#company-testimonial-repeater');
            const addBtn = $('#add-company-testimonial');
            let index = repeater.children('.company-testimonial-item').length;

            // Handle image upload button click for testimonials
            repeater.on('click', '.testimonial-image-upload-btn', function (e) {
                e.preventDefault();
                const $btn = $(this);
                const dataIndex = $btn.data('index');
                const $fileInput = $(`#company-testimonial-${dataIndex}-file-input`);
                $fileInput.click();
            });

            // Handle file input change
            repeater.on('change', '.testimonial-file-input', function (e) {
                const file = this.files[0];
                if (!file) return;

                // Validate file type
                const validImageTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
                if (!validImageTypes.includes(file.type)) {
                    alert('Please upload a valid image file (JPEG, PNG, GIF, or WebP)');
                    return;
                }

                // Read file as data URL
                const reader = new FileReader();
                reader.onload = function (event) {
                    const dataUrl = event.target.result;
                    const $container = $(this).closest('.dash-input-wrapper');
                    const $hiddenData = $container.find('.testimonial-image-data');
                    const $preview = $container.find('.testimonial-image-preview');

                    // Store base64 data URL
                    $hiddenData.val(dataUrl);
                    // Display preview
                    $preview.html('<img src="' + dataUrl + '" alt="Author Image" style="max-width:100px;max-height:100px;">');
                }.bind(this);
                reader.readAsDataURL(file);
            });

            addBtn.on('click', function (e) {
                e.preventDefault();
                const testimonialId = `company-testimonial-${index}`;
                const newItem = $(`
                    <div class="jbs-accordion-item company-testimonial-item">
                        <div class="jbs-accordion-header" id="company-testimonial-heading-${index}">
                            <button class="jbs-accordion-button jbs-collapsed" type="button"
                                    data-jbs-toggle="collapse"
                                    data-jbs-target="#${testimonialId}"
                                    data-jbs-parent="#company-testimonial-repeater"
                                    aria-expanded="false"
                                    aria-controls="${testimonialId}">
                                Testimonial #${index + 1}
                            </button>
                        </div>
                        <div id="${testimonialId}" class="jbs-accordion-collapse jbs-collapse"
                             aria-labelledby="company-testimonial-heading-${index}"
                             data-jbs-parent="#company-testimonial-repeater">
                            <div class="jbs-accordion-body">
                                <div class="jbs-row mb-3">
                                    <div class="jbs-col-lg-2">
                                        <div class="dash-input-wrapper jbs-mb-10">
                                            <label for="company-testimonial-${index}-author-name">Author Name</label>
                                        </div>
                                    </div>
                                    <div class="jbs-col-lg-10">
                                        <div class="dash-input-wrapper jbs-mb-10">
                                            <input type="text" name="company_testimonials[${index}][author_name]"
                                                   id="company-testimonial-${index}-author-name" class="jbs-form-control" value="">
                                        </div>
                                    </div>
                                </div>
                                <div class="jbs-row jbs-mb-3">
                                    <div class="jbs-col-lg-2">
                                        <div class="dash-input-wrapper jbs-mb-10">
                                            <label for="company-testimonial-${index}-location">Location</label>
                                        </div>
                                    </div>
                                    <div class="jbs-col-lg-10">
                                        <div class="dash-input-wrapper jbs-mb-10">
                                            <input type="text" name="company_testimonials[${index}][location]"
                                                   id="company-testimonial-${index}-location" class="jbs-form-control" value="">
                                        </div>
                                    </div>
                                </div>
                                <div class="jbs-row jbs-mb-3">
                                    <div class="jbs-col-lg-2">
                                        <div class="dash-input-wrapper jbs-mb-10">
                                            <label for="company-testimonial-${index}-review-content">Review</label>
                                        </div>
                                    </div>
                                    <div class="jbs-col-lg-10">
                                        <div class="dash-input-wrapper jbs-mb-10">
                                            <textarea name="company_testimonials[${index}][review_content]"
                                                      id="company-testimonial-${index}-review-content" class="jbs-form-control" rows="3"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="jbs-row jbs-mb-3">
                                    <div class="jbs-col-lg-2">
                                        <div class="dash-input-wrapper jbs-mb-10">
                                            <label for="company-testimonial-${index}-rating">Rating</label>
                                        </div>
                                    </div>
                                    <div class="jbs-col-lg-10">
                                        <div class="dash-input-wrapper jbs-mb-10">
                                            <select name="company_testimonials[${index}][rating]"
                                                    id="company-testimonial-${index}-rating" class="jbs-form-control">
                                                <option value="">--</option>
                                                <option value="1">1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="jbs-row jbs-mb-3">
                                    <div class="jbs-col-lg-2">
                                        <div class="dash-input-wrapper jbs-mb-10">
                                            <label for="company-testimonial-${index}-image">Author Image</label>
                                        </div>
                                    </div>
                                    <div class="jbs-col-lg-10">
                                        <div class="dash-input-wrapper jbs-mb-10">
                                            <!-- Hidden field for image data URL -->
                                            <input type="hidden" name="company_testimonials[${index}][image]"
                                                   id="company-testimonial-${index}-image" class="testimonial-image-data" value="">
                                            <!-- Hidden file input -->
                                            <input type="file" id="company-testimonial-${index}-file-input"
                                                   class="testimonial-file-input" accept="image/jpeg,image/jpg,image/png,image/gif,image/webp"
                                                   style="display: none;">
                                            <!-- Upload button -->
                                            <button type="button" class="jbs-btn jbs-btn-secondary testimonial-image-upload-btn" data-index="${index}">
                                                Upload Image
                                            </button>
                                            <!-- Preview area (always present) -->
                                            <div class="testimonial-image-preview jbs-mt-2 jbs-mb-2" id="testimonial-image-preview-${index}"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="jbs-text-end">
                                    <button type="button" class="jbs-btn jbs-btn-danger jbs-btn-sm remove-company-testimonial jbs-mt-2 jbs-mb-2" title="Remove Item">
                                        <i class="bi bi-x"></i> Remove
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                `);
                repeater.append(newItem);
                index++;
            });

            repeater.on('click', '.remove-company-testimonial', function () {
                $(this).closest('.company-testimonial-item').remove();
                // Re-index all fields
                repeater.children('.company-testimonial-item').each(function (i, el) {
                    const testimonialId = `company-testimonial-${i}`;
                    const $el = $(el);
                    $el.find('.jbs-accordion-header').attr('id', `company-testimonial-heading-${i}`);
                    $el.find('.jbs-accordion-button')
                        .attr('data-jbs-target', `#${testimonialId}`)
                        .attr('aria-controls', testimonialId)
                        .text(`Testimonial #${i + 1}`);
                    $el.find('.jbs-accordion-collapse')
                        .attr('id', testimonialId)
                        .attr('aria-labelledby', `company-testimonial-heading-${i}`);
                    $el.find('input[name^="company_testimonials"]').each(function () {
                        let name = $(this).attr('name');
                        let id = $(this).attr('id');
                        if (name) {
                            name = name.replace(/company_testimonials\[\d+]/, `company_testimonials[${i}]`);
                            $(this).attr('name', name);
                        }
                        if (id) {
                            id = id.replace(/company-testimonial-\d+(-[a-z-]+)/, `company-testimonial-${i}$1`);
                            $(this).attr('id', id);
                        }
                    });
                    $el.find('textarea[name^="company_testimonials"]').each(function () {
                        let name = $(this).attr('name');
                        let id = $(this).attr('id');
                        if (name) {
                            name = name.replace(/company_testimonials\[\d+]/, `company_testimonials[${i}]`);
                            $(this).attr('name', name);
                        }
                        if (id) {
                            id = id.replace(/company-testimonial-\d+(-[a-z-]+)/, `company-testimonial-${i}$1`);
                            $(this).attr('id', id);
                        }
                    });
                    $el.find('select[name^="company_testimonials"]').each(function () {
                        let name = $(this).attr('name');
                        let id = $(this).attr('id');
                        if (name) {
                            name = name.replace(/company_testimonials\[\d+]/, `company_testimonials[${i}]`);
                            $(this).attr('name', name);
                        }
                        if (id) {
                            id = id.replace(/company-testimonial-\d+(-[a-z-]+)/, `company-testimonial-${i}$1`);
                            $(this).attr('id', id);
                        }
                    });
                    $el.find('label[for^="company-testimonial-"]').each(function () {
                        let htmlFor = $(this).attr('for');
                        if (htmlFor) {
                            htmlFor = htmlFor.replace(/company-testimonial-\d+(-[a-z-]+)/, `company-testimonial-${i}$1`);
                            $(this).attr('for', htmlFor);
                        }
                    });
                });
                index = repeater.children('.company-testimonial-item').length;
            });
        },


        /**
         * Handles toggling the company website fields based on radio selection.
         */
        CompanyWebsiteToggle: function () {
            const $select = $('#is_company_website');
            const $fields = $('#company-website-fields');
            $select.on('change', function () {
                if ($(this).val() === 'custom') {
                    $fields.show();
                } else {
                    $fields.hide();
                }
            });
            // Initial state (in case of dynamic content)
            if ($select.val() === 'custom') {
                $fields.show();
            } else {
                $fields.hide();
            }
        },

        /**
         * Handles job company logo upload using WordPress media uploader.
         * Allows users to upload, preview, and remove company logos.
         */
        JobLogoUpload: function () {
            let mediaUploader;

            // Upload button click
            $('#upload_logo_button').on('click', function (e) {
                e.preventDefault();

                // If the uploader object has already been created, reopen the dialog
                if (mediaUploader) {
                    mediaUploader.open();
                    return;
                }

                // Extend the wp.media object
                mediaUploader = wp.media({
                    title: 'Choose Company Logo',
                    button: {
                        text: 'Use this logo'
                    },
                    multiple: false,
                    library: {
                        type: 'image'
                    }
                });

                // When an image is selected, run a callback
                mediaUploader.on('select', function () {
                    const attachment = mediaUploader.state().get('selection').first().toJSON();

                    // Set the hidden input value to the attachment ID
                    $('#job_company_logo_id').val(attachment.id);

                    // Display the preview image
                    $('.logo-preview').attr('src', attachment.url).show();

                    // Update button text
                    $('#upload_logo_button').html('<i class="bi bi-upload"></i> Change Logo');

                    // Show remove button
                    $('#remove_logo_button').show();
                });

                // Open the uploader dialog
                mediaUploader.open();
            });

            // Remove button click
            $('#remove_logo_button').on('click', function (e) {
                e.preventDefault();

                // Clear the hidden input
                $('#job_company_logo_id').val('');

                // Hide the preview image
                $('.logo-preview').attr('src', '').hide();

                // Update button text
                $('#upload_logo_button').html('<i class="bi bi-upload"></i> Upload Logo');

                // Hide remove button
                $(this).hide();
            });
        },

        /**
         * Handles toggling the external application URL fields based on selection.
         */
        ExternalApplicationUrlToggle: function () {
            const $select = $('#is_apply_btn');
            const $fields = $('#application-url-fields');
            const $input = $('#apply-form-url');

            const updateState = function (value) {
                if (value === 'external') {
                    $input.prop('disabled', false);
                    $fields.hide().removeClass('jbs-d-none').slideDown(200);
                } else {
                    $input.prop('disabled', true).val('');
                    $fields.slideUp(200, function() {
                        $(this).addClass('jbs-d-none').show();
                    });
                }
            };

            $select.on('change', function () {
                updateState($(this).val());
            });

            // Initial state (in case of editing)
            const initialValue = $select.val();
            if (initialValue === 'external') {
                $input.prop('disabled', false);
                $fields.removeClass('jbs-d-none').show();
            } else {
                $input.prop('disabled', true);
                $fields.addClass('jbs-d-none');
            }
        },

        /**
         * Handles AJAX job submission from the employer dashboard.
         */
        SubmitJobForm: function () {
            const $form = $('#employer-submit-job-form');
            if (!$form.length) {
                return;
            }

            const self = this;

            $form.on('submit', function (e) {
                e.preventDefault();

                if (typeof window.tinyMCE !== 'undefined') {
                    window.tinyMCE.triggerSave();
                }

                const $submitButton = $form.find('button[type="submit"]').first();
                const originalHtml = $submitButton.html();
                const formData = new FormData($form[0]);

                self.clearSubmitNotice($form);

                $submitButton.prop('disabled', true).html(
                    '<span class="jbs-spinner-border jbs-spinner-border-sm jbs-me-2" role="status" aria-hidden="true"></span>' +
                    originalHtml
                );

                formData.append('action', 'jobus_submit_job');

                $.ajax({
                    url: jobus_dashboard_obj.ajax_url,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        if (response.success) {
                            const message = response.data && response.data.message ? response.data.message : 'Job posted successfully.';
                            self.renderSubmitNotice($form, 'success', message);

                            if (typeof Swal !== 'undefined') {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Success',
                                    text: message,
                                    timer: 1800,
                                    showConfirmButton: false
                                });
                            }

                            if (response.data && response.data.redirect_url) {
                                window.setTimeout(function () {
                                    window.location.href = response.data.redirect_url;
                                }, 1200);
                            }
                        } else {
                            const message = response.data && response.data.message ? response.data.message : 'Submission failed. Please try again.';
                            self.renderSubmitNotice($form, 'danger', message);

                            if (typeof Swal !== 'undefined') {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: message
                                });
                            }
                        }
                    },
                    error: function () {
                        const message = 'Submission failed. Please try again.';
                        self.renderSubmitNotice($form, 'danger', message);

                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: message
                            });
                        }
                    },
                    complete: function () {
                        $submitButton.prop('disabled', false).html(originalHtml);
                    }
                });
            });
        },

        renderSubmitNotice: function ($form, type, message) {
            const $notice = $(
                '<div class="jbs-alert jbs-alert-' + type + ' jbs-alert-dismissible jbs-fade jbs-show jbs-mb-20" role="alert">' +
                    $('<div>').text(message).html() +
                    '<button type="button" class="jbs-btn-close" data-jbs-dismiss="alert" aria-label="Close"></button>' +
                '</div>'
            );

            $form.before($notice);
            $('html, body').animate({ scrollTop: $notice.offset().top - 40 }, 250);
        },

        clearSubmitNotice: function ($form) {
            $form.prev('.jbs-alert').remove();
        }

    };

    $(document).ready(function () {
        JobusEmployerDashboard.init();
    });

})(jQuery);
