<?php

namespace GriffinForms\Admin\Html\Modals;

class PreviewForm extends \GriffinForms\Admin\Html\Modals\Format
{
    protected function headerText()
    {
        return __('Preview Form', 'griffinforms-form-builder');
    }

    protected function modalContent()
    {
        echo '<div class="gf-preview-form-modal" data-gf-preview-form-modal="true">';
        echo '<input type="hidden" id="griffinforms-preview-form-id" value="">';
        echo '<input type="hidden" id="griffinforms-preview-form-size" value="xl">';
        echo '<div id="griffinforms-preview-form-status" class="gf-notice gf-notice-info mb-3" role="alert"><div>' . esc_html__('Loading preview...', 'griffinforms-form-builder') . '</div></div>';
        echo '<div class="border rounded-3 overflow-hidden bg-white" style="min-height:70vh;">';
        echo '<iframe id="griffinforms-preview-form-iframe" title="' . esc_attr__('Form preview', 'griffinforms-form-builder') . '" style="width:100%;height:70vh;border:0;display:block;background:#fff;" loading="lazy"></iframe>';
        echo '</div>';
        echo '</div>';
    }

    protected function modalHeader()
    {
        echo '<div class="modal-header border-bottom-0">';
        echo '<h6 class="modal-title">' . esc_html($this->headerText()) . '</h6>';
        echo '<div class="d-flex align-items-center gap-2 ms-auto me-2">';
        echo '<button type="button" class="button gf-preview-form-toggle-size" id="griffinforms-preview-form-toggle-size" aria-pressed="false">' . esc_html__('Expand', 'griffinforms-form-builder') . '</button>';
        echo '</div>';
        echo '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>';
        echo '</div>';
    }

    protected function modalFooter()
    {
        echo '<div class="modal-footer border-top-0 d-flex flex-wrap justify-content-end gap-2">';
        echo '<button type="button" class="button" data-bs-dismiss="modal">' . esc_html__('Close', 'griffinforms-form-builder') . '</button>';
        echo '<a href="#" class="button button-primary d-none gf-preview-form-open" id="griffinforms-preview-form-open" target="_blank" rel="noopener noreferrer">' . esc_html__('Open in new tab', 'griffinforms-form-builder') . '</a>';
        echo '</div>';
    }

    public function modalJs()
    {
        $js  = 'jQuery(document).ready(function($){' . PHP_EOL;
        $js .= 'const previewNonce = "' . esc_js(wp_create_nonce('griffinforms_get_form_preview_url')) . '";' . PHP_EOL;
        $js .= 'const modalId = "' . esc_js($this->id) . '";' . PHP_EOL;
        $js .= 'const $modal = $("#" + modalId);' . PHP_EOL;
        $js .= 'const $status = $("#griffinforms-preview-form-status");' . PHP_EOL;
        $js .= 'const $iframe = $("#griffinforms-preview-form-iframe");' . PHP_EOL;
        $js .= 'const $openBtn = $("#griffinforms-preview-form-open");' . PHP_EOL;
        $js .= 'const $formId = $("#griffinforms-preview-form-id");' . PHP_EOL;
        $js .= 'const $size = $("#griffinforms-preview-form-size");' . PHP_EOL;
        $js .= 'const $toggleSize = $("#griffinforms-preview-form-toggle-size");' . PHP_EOL;
        $js .= 'const $dialog = $modal.find(".modal-dialog");' . PHP_EOL;
        $js .= 'function setStatus(type, message) {' . PHP_EOL;
        $js .= '  $status.removeClass("gf-notice-info gf-notice-success gf-notice-warning gf-notice-danger").addClass("gf-notice-" + type);' . PHP_EOL;
        $js .= '  $status.html("<div>" + message + "</div>").show();' . PHP_EOL;
        $js .= '}' . PHP_EOL;
        $js .= 'const $iframeWrapper = $iframe.parent();' . PHP_EOL;
        $js .= 'const $modalBody = $modal.find(".modal-body");' . PHP_EOL;
        $js .= 'const $previewWrap = $modal.find(".gf-preview-form-modal");' . PHP_EOL;
        $js .= 'function setModalSize(mode) {' . PHP_EOL;
        $js .= '  const fullscreen = mode === "fullscreen";' . PHP_EOL;
        $js .= '  $dialog.removeClass("modal-xl modal-fullscreen").addClass(fullscreen ? "modal-fullscreen" : "modal-xl");' . PHP_EOL;
        $js .= '  $size.val(fullscreen ? "fullscreen" : "xl");' . PHP_EOL;
        $js .= '  $toggleSize.text(fullscreen ? "' . esc_js(__('Contract', 'griffinforms-form-builder')) . '" : "' . esc_js(__('Expand', 'griffinforms-form-builder')) . '");' . PHP_EOL;
        $js .= '  $toggleSize.attr("aria-pressed", fullscreen ? "true" : "false");' . PHP_EOL;
        $js .= '  if (fullscreen) {' . PHP_EOL;
        $js .= '    $dialog.removeClass("modal-dialog-scrollable");' . PHP_EOL;
        $js .= '    $modalBody.css({"display":"flex","flex-direction":"column","overflow":"hidden","padding":"0","height":"100%"});' . PHP_EOL;
        $js .= '    $previewWrap.css({"display":"flex","flex-direction":"column","flex":"1 1 auto","min-height":"0","height":"100%"});' . PHP_EOL;
        $js .= '    $iframeWrapper.css({"flex":"1 1 auto","min-height":"0","height":"100%","border-radius":"0"});' . PHP_EOL;
        $js .= '    $iframe.css({"height":"100%"});' . PHP_EOL;
        $js .= '  } else {' . PHP_EOL;
        $js .= '    $dialog.addClass("modal-dialog-scrollable");' . PHP_EOL;
        $js .= '    $modalBody.css({"display":"","flex-direction":"","overflow":"","padding":"","height":""});' . PHP_EOL;
        $js .= '    $previewWrap.css({"display":"","flex-direction":"","flex":"","min-height":"","height":""});' . PHP_EOL;
        $js .= '    $iframeWrapper.css({"flex":"","min-height":"70vh","height":"","border-radius":""});' . PHP_EOL;
        $js .= '    $iframe.css({"height":"70vh"});' . PHP_EOL;
        $js .= '  }' . PHP_EOL;
        $js .= '}' . PHP_EOL;
        $js .= 'function resetPreviewState() {' . PHP_EOL;
        $js .= '  $iframe.attr("src", "about:blank");' . PHP_EOL;
        $js .= '  $openBtn.addClass("d-none").attr("href", "#");' . PHP_EOL;
        $js .= '  setModalSize("xl");' . PHP_EOL;
        $js .= '  setStatus("info", "' . esc_js(__('Loading preview...', 'griffinforms-form-builder')) . '");' . PHP_EOL;
        $js .= '}' . PHP_EOL;
        $js .= '$modal.on("show.bs.modal", function(event) {' . PHP_EOL;
        $js .= '  const trigger = event.relatedTarget ? $(event.relatedTarget) : $();' . PHP_EOL;
        $js .= '  const formId = parseInt(trigger.data("gfFormId") || trigger.attr("data-gf-form-id") || 0, 10) || 0;' . PHP_EOL;
        $js .= '  $formId.val(formId);' . PHP_EOL;
        $js .= '  resetPreviewState();' . PHP_EOL;
        $js .= '  if (!formId) {' . PHP_EOL;
        $js .= '    setStatus("danger", "' . esc_js(__('Unable to resolve the selected form.', 'griffinforms-form-builder')) . '");' . PHP_EOL;
        $js .= '    return;' . PHP_EOL;
        $js .= '  }' . PHP_EOL;
        $js .= '  $.post(ajaxurl, {' . PHP_EOL;
        $js .= '    action: "griffinforms_get_form_preview_url",' . PHP_EOL;
        $js .= '    form_id: formId,' . PHP_EOL;
        $js .= '    nonce: previewNonce' . PHP_EOL;
        $js .= '  }, function(response) {' . PHP_EOL;
        $js .= '    if (response && response.success && response.data && response.data.preview_url) {' . PHP_EOL;
        $js .= '      const previewUrl = response.data.preview_url;' . PHP_EOL;
        $js .= '      $iframe.attr("src", previewUrl);' . PHP_EOL;
        $js .= '      $openBtn.attr("href", previewUrl).removeClass("d-none");' . PHP_EOL;
        $js .= '      $status.hide();' . PHP_EOL;
        $js .= '      return;' . PHP_EOL;
        $js .= '    }' . PHP_EOL;
        $js .= '    const message = response && response.data && response.data.message ? response.data.message : "' . esc_js(__('Preview could not be loaded.', 'griffinforms-form-builder')) . '";' . PHP_EOL;
        $js .= '    setStatus("danger", message);' . PHP_EOL;
        $js .= '  }).fail(function() {' . PHP_EOL;
        $js .= '    setStatus("danger", "' . esc_js(__('Network request failed. Try again later.', 'griffinforms-form-builder')) . '");' . PHP_EOL;
        $js .= '  });' . PHP_EOL;
        $js .= '});' . PHP_EOL;
        $js .= '$modal.on("hidden.bs.modal", function() {' . PHP_EOL;
        $js .= '  resetPreviewState();' . PHP_EOL;
        $js .= '});' . PHP_EOL;
        $js .= '$toggleSize.on("click", function() {' . PHP_EOL;
        $js .= '  setModalSize($size.val() === "fullscreen" ? "xl" : "fullscreen");' . PHP_EOL;
        $js .= '});' . PHP_EOL;
        $js .= '});';

        wp_add_inline_script('griffinforms-global-js', $js);
    }
}
