<?php

namespace GriffinForms\Admin\App\Html\Containers;

final class StatusBar extends \GriffinForms\Admin\App\Html\Containers\Format
{
    public function getHtml()
    {
        echo '<div id="' . esc_attr($this->getHtmlId()) . '" class="d-flex flex-shrink-0 p-2 bg-white position-relative bottom-0 border-top w-100">';
        echo '<div class="gf-statusbar-left d-flex align-items-center">';
        $this->appVersion();
        echo '</div>';
        echo '<div class="gf-statusbar-middle d-flex flex-fill justify-content-center align-items-center">';
        $this->alertMsgs();
        echo '</div>';
        echo '<div class="gf-statusbar-right d-flex align-items-center justify-content-end">';
        echo '<div class="gf-statusbar-icons d-flex align-items-center justify-content-end"></div>';
        echo '</div>';
        $this->overlayPanel();
        echo '</div>';
    }

    private function appVersion()
    {
        echo '<div class="small">';
        echo esc_html(__('v', 'griffinforms-form-builder'));
        echo esc_html($this->config::VERSION);
        echo '</div>';
    }

    private function alertMsgs()
    {
        echo '<div id="' . esc_attr($this->getHtmlId('alert_msg')) . '" class="d-flex flex-fill justify-content-center align-items-center">';
        // Updated calls to match the new parameter order: $icon first, then $icon_class.
        $this->alertMsg('waiting', 'loading', 'text-secondary');
        $this->alertMsg('warning', 'warning', 'text-warning');
        $this->alertMsg('failure', 'error', 'text-danger');
        $this->alertMsg('success', 'check', 'text-success');
        echo '</div>';
    }

    private function alertMsg($status, $icon, $icon_class = 'text-secondary')
    {
        $spin_class = ($status === 'waiting') ? ' gf-icon-spin' : '';
        echo '<div id="' . esc_attr($this->getHtmlId($status)) . '" style="display:none;" data-gf-alert="' . esc_attr($status) . '">';
        echo '<span class="' . esc_attr($icon_class . ' ' . $status . '-icon' . $spin_class) . ' position-relative me-1" style="vertical-align: text-bottom; top: 0px;">';
        $this->statusIcon($icon);
        echo '</span>';
        echo '<span data-gf-msg="' . esc_attr($status) . '">';
        echo '';
        echo '</span>';
        echo '</div>';
    }

    /**
     * Outputs SVG icon from admin/images/statusbar-icons/.
     *
     * @param string $icon_name The icon file name without .svg extension.
     */
    private function statusIcon($icon_name)
    {
        $icon_url = $this->config->getRootUrl() . 'admin/images/statusbar-icons/' . $icon_name . '.svg';
        echo '<img src="' . esc_url($icon_url) . '" alt="" width="18" height="18" class="gf-status-icon" />';
    }

    private function overlayPanel()
    {
        echo '<div id="' . esc_attr($this->getHtmlId('overlay')) . '" class="gf-statusbar-overlay" data-gf-open="0" aria-hidden="true">';
        echo '<div class="gf-statusbar-overlay-inner" role="dialog" aria-modal="false">';
        echo '<div class="gf-statusbar-overlay-header">';
        echo '<span class="gf-statusbar-overlay-title"></span>';
        echo '<button type="button" class="gf-statusbar-overlay-close" aria-label="' . esc_attr__('Close', 'griffinforms-form-builder') . '">&times;</button>';
        echo '</div>';
        echo '<div class="gf-statusbar-overlay-body"></div>';
        echo '</div>';
        echo '</div>';
    }

    public function getJs()
    {
        $default_msg = __('Working...', 'griffinforms-form-builder');
        echo 'function statusbarMsg(status = "waiting", msg = "' . esc_js($default_msg) . '") {
            // If no status provided, just clear and exit
            if (!status) {
                $("*[data-gf-alert]").hide();
                return;
            }

            $("*[data-gf-alert]").hide();
            const container = $("[data-gf-alert=\'" + status + "\']");
            const target = container.find("[data-gf-msg=\'" + status + "\']");
            const icon = container.find("span." + status + "-icon");

            target.html(""); // Clear previous content
            icon.css({ opacity: 0, visibility: "hidden" }); // Keep layout stable

            if (status === "waiting") {
                target.text(msg);
                icon.css({ visibility: "visible" }).animate({ opacity: 1 }, 200);
                container.show();
                return;
            }

            let spanElements = msg.split("").map(char => {
                const safeChar = (char === " ") ? "&nbsp;" : char;
                return $("<span style=\'opacity:0; display:inline-block;\'>" + safeChar + "</span>");
            });

            spanElements.forEach(span => target.append(span));

            let index = 0;
            function revealChar() {
                if (index < spanElements.length) {
                    spanElements[index].animate({ opacity: 1 }, 500);
                    index++;
                    setTimeout(revealChar, 30);
                } else {
                    icon.css({ visibility: "visible" }).animate({ opacity: 1 }, 500); // Fade-in without shifting
                }
            }

            revealChar();
            container.show();
        }' . PHP_EOL;
    }
}
