<?php
namespace OxygenApp\Views\Frontend\Content;
if (!defined('ABSPATH')) exit;

use OxygenApp\Views\IView;
use OxygenApp\Views\BaseView;
use OxygenApp\Utils\FrontendData;
use OxygenApp\Utils\LanguagesHelper;
use OxygenApp\Enums\FrontendDataType;
use OxygenApp\Utils\UserUtil;
use OxygenApp\Utils\OptionUtils;

class TopNav extends BaseView implements IView
{
    public function render(): void
    {

        $routes = FrontendData::getInstance()->getDefaultSettings(FrontendDataType::ARRAY)['routes'] ?? [];
        $default_logo_text = LanguagesHelper::getInstance()->getLangLabel('default_logo_text');
        $signup_btn = LanguagesHelper::getInstance()->getLangLabel('signup_btn');
        $login_btn = LanguagesHelper::getInstance()->getLangLabel('login_btn');

        $settings_btn = LanguagesHelper::getInstance()->getLangLabel('settings_btn');
        $upgrade_to_pro_btn = LanguagesHelper::getInstance()->getLangLabel('upgrade_to_pro_btn');
        $support_btn_top = LanguagesHelper::getInstance()->getLangLabel('support_btn_top');
        $logout_btn_top = LanguagesHelper::getInstance()->getLangLabel('logout_btn_top');
        $support_url = OptionUtils::getInstance()->getOption('support_url', '');

        ob_start();
        ?>
        <div class="text-xl font-bold logo-ui">
            <a href="#"><?php echo esc_html($default_logo_text) ?></a>
        </div>
        <?php
        $logoHtml = ob_get_clean();

        $logoHtml = apply_filters('oxygen_app_filter_logo_html', $logoHtml, [
            'location' => 'main_page_nav'
        ]);

        $topMenuHtml = '';

        if (!UserUtil::isLoggedIn()) {
            $getExistingLangCodes = LanguagesHelper::getInstance()->getExistingLangCodes();
            ob_start();
            ?>
                <li>
                    <a href="#<?php echo esc_attr($routes['signup']['hash'] ?? '') ?>" class="font-semibold text-sm rounded-full no-underline px-4 py-2 white-bg-button">
                        <?php echo esc_html($signup_btn) ?>
                    </a>
                </li>
                <li>
                    <a href="#<?php echo esc_attr($routes['login']['hash'] ?? '') ?>" class="font-semibold text-sm rounded-full no-underline px-4 py-2 black-bg-button">
                        <?php echo esc_html($login_btn) ?>
                    </a>
                </li>
                <?php if (count($getExistingLangCodes) > 1): ?>
                <li>
                    <a href="#" class="font-semibold relative text-sm rounded-full no-underline px-5 py-2 white-bg-button lang-switcher-ui">
                        <div class="absolute w-full h-full top-0 flex items-center justify-center">
                            <img class="w-[20px]" src="<?php echo esc_url(LanguagesHelper::getInstance()->getFlagIconUrl()); ?>" alt="">
                        </div>
                    </a>
                </li>
                <?php endif; ?>

                <?php $this->renderLangs() ?>
            <?php
            $topMenuHtml = ob_get_clean();
            $topMenuHtml = apply_filters('oxygen_app_filter_top_menu_html', $topMenuHtml, UserUtil::isLoggedIn(), UserUtil::getInstance()->getUserFromSession(), LanguagesHelper::getInstance()->getCurrentLanguageCode());
        } else {
            $getExistingLangCodes = LanguagesHelper::getInstance()->getExistingLangCodes();
            ob_start();
            ?>
            <li class="relative">
                <div class="flex bg-white bg-opacity-20 backdrop-blur-lg rounded-full shadow-lg py-2 px-2">
                    <?php if (count($getExistingLangCodes) > 1): ?>
                        <a class="mr-2 lang-switcher-ui" href="#">
                            <div class="p-2 bg-white bg-opacity-50 rounded-full transition duration-300 ease-in-out hover:bg-opacity-80 blurred-icon login-flags-icon lang-btn">
                                <img src="<?php echo esc_url(LanguagesHelper::getInstance()->getFlagIconUrl()); ?>" alt="">
                            </div>
                        </a>
                    <?php endif; ?>

                    <a class="user-menu-icon" href="#">
                        <div class="p-2 bg-white bg-opacity-50 rounded-full transition duration-300 ease-in-out hover:bg-opacity-80 blurred-icon settings-btn">
                            <img src="<?php echo esc_url(OXYLEAF_APP_PUBLIC_URL . '/app/Views/Frontend/assets/img/menu_expand.png'); ?>" alt="">
                        </div>
                    </a>
                </div>

                <?php $this->renderLangs() ?>

                <div style="z-index: 100;" class="hidden absolute right-[20px] mt-2 w-48 bg-white shadow-lg rounded-lg p-3 border border-gray-200 user-profile-popup-menu">
                    <ul>
                        <li><a href="#<?php echo esc_attr($routes['settings']['hash'] ?? '') ?>" class="block text-sm text-gray-600 hover:bg-gray-100 rounded p-2">
                            <?php echo esc_html($settings_btn) ?>
                        </a></li>
                        <li><a href="<?php echo esc_url($support_url) ?>" target="_blank" class="block text-sm text-gray-700 hover:bg-gray-100 rounded p-2 support-btn">
                            <?php echo esc_html($support_btn_top) ?>
                        </a></li>
                        <li><hr class="my-2"></li>
                        <li><a href="#" class="block text-sm text-red-600 hover:bg-red-100 rounded p-2 logout-btn">
                            <?php echo esc_html($logout_btn_top) ?>
                        </a></li>
                    </ul>
                </div>


            </li>
            <?php
            $topMenuHtml = ob_get_clean();
            $topMenuHtml = apply_filters('oxygen_app_filter_top_menu_html', $topMenuHtml, UserUtil::isLoggedIn(), UserUtil::getInstance()->getUserFromSession(), LanguagesHelper::getInstance()->getCurrentLanguageCode());
        }
        ?>
        <header class="top-nav fixed top-0 left-0 w-full z-[8]">
            <nav class="flex items-center justify-between p-4">
                <?php echo wp_kses_post($logoHtml) ?>
                <ul class="flex space-x-3 rtl:space-x-reverse">
                    <?php echo wp_kses_post($topMenuHtml) ?>
                </ul>
            </nav>
        </header>


        <?php
    }

    private function renderLangs(): void
    {
        $isLoggedIn = UserUtil::isLoggedIn();
        $currentLangCode = LanguagesHelper::getInstance()->getCurrentLanguageCode();
        $rightPositionClass = $isLoggedIn ? 'right-[70px]' : 'right-[18px]';
        $topPositionClass = $isLoggedIn ? 'top-[50px]' : 'top-[50px]';
        ?>
        <div style="z-index: 100;" class="absolute hidden <?php echo esc_attr($rightPositionClass) ?> <?php echo esc_attr($topPositionClass) ?> mt-2 w-48 bg-white shadow-lg rounded-lg p-3 border border-gray-200 lang-choose-menu">
            <ul>
                <?php
                $existingCodes = LanguagesHelper::getInstance()->getExistingLangCodes();
                foreach ($existingCodes as $langCode) {
                    $langUrlIcon = LanguagesHelper::getInstance()->getFlagIconUrl($langCode);
                    ?>
                    <?php if ($langCode === $currentLangCode): ?>
                        <li class="mb-1">
                            <a href="#" class="block text-sm text-gray-600 bg-gray-100 rounded p-2 lang-switcher-btn" data-lang="<?php echo esc_attr($langCode) ?>">
                                <img class="inline-block mr-2 w-[20px]" src="<?php echo esc_url($langUrlIcon); ?>" alt="">
                                <?php echo esc_html(strtoupper($langCode)); ?>
                            </a>
                        </li>
                    <?php else: ?>
                        <li class="mb-1">
                            <a href="#" class="block text-sm text-gray-600 hover:bg-gray-100 rounded p-2 lang-switcher-btn" data-lang="<?php echo esc_attr($langCode) ?>">
                                <img class="inline-block mr-2 w-[20px]" src="<?php echo esc_url($langUrlIcon); ?>" alt="">
                                <?php echo esc_html(strtoupper($langCode)); ?>
                            </a>
                        </li>
                    <?php endif; ?>
                    <?php
                }
                ?>
            </ul>
        </div>
        <?php
    }
}