<?php

namespace OxygenApp\Views\Frontend;

if (!defined('ABSPATH')) exit;
use OxygenApp\Views\IView;
use OxygenApp\Views\BaseView;
use OxygenApp\Config\Config;
use OxygenApp\Utils\LanguagesHelper;
use OxygenApp\Utils\FrontendData;
use OxygenApp\Enums\FrontendDataType;
use OxygenApp\Views\Frontend\Content\TopNav;
use OxygenApp\Views\Frontend\Content\LeftMenu;
use OxygenApp\Views\Frontend\Content\Signup;
use OxygenApp\Views\Frontend\Content\Success;
use OxygenApp\Views\Frontend\Content\AppError;
use OxygenApp\Views\Frontend\Content\Login;
use OxygenApp\Views\Frontend\Content\ForgotPassword;
use OxygenApp\Views\Frontend\Content\ResetPassword;
use OxygenApp\Views\Frontend\Content\UserPlaylists;
use OxygenApp\Views\Frontend\Content\NewUserPlaylist;
use OxygenApp\Views\Frontend\Content\Backgrounds;
use OxygenApp\Views\Frontend\Content\Info;
use OxygenApp\Views\Frontend\Content\FeError;
use OxygenApp\Views\Frontend\Content\Settings;
use OxygenApp\Views\Frontend\Content\DateTimeUi;
use OxygenApp\Views\Frontend\Content\SleepMode;
use OxygenApp\Views\Frontend\Content\BackgroundCredits;

class Index extends BaseView implements IView {

    public function render(): void {
        $currentLangCode = LanguagesHelper::getInstance()->getCurrentLanguageCode();
        $frontendRoutes = Config::getInstance()->getFrontendRoutes();
		$pageTitle = $frontendRoutes['root']['page_title'] ?? '';
        $dir = LanguagesHelper::getInstance()->isRtl() ? 'rtl' : 'ltr';
        $frontendData = FrontendData::getInstance()->getDefaultSettings(FrontendDataType::ARRAY);

		?>
        <!doctype html>
        <html class="no-js" lang="<?php echo esc_attr($currentLangCode) ?>" dir="<?php echo esc_attr($dir) ?>">

        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title><?php echo esc_html($pageTitle) ?></title>

            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

            <?php
            // Remove default WordPress emoji and other default styles
            remove_action('wp_print_styles', 'print_emoji_styles');

            // Enqueue styles to satisfy PluginCheck
            wp_enqueue_style('oxygen-google-fonts', 'https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap', array(), '1.0');
            wp_enqueue_style('oxyleaf-app-working-and-relaxing-app', OXYLEAF_APP_PUBLIC_URL . '/app/Views/Frontend/assets/dist/index.css', array(), '1.0');

            // Print the enqueued styles without needing wp_head()
            wp_print_styles();
            ?>

            <?php echo wp_kses_post(apply_filters('oxygen_app_page_header', '', $currentLangCode)) ?>
        </head>


        <body class="app-font h-screen overflow-hidden">
            <!-- Background -->
            <?php $this->_renderBackground($frontendData) ?>
            <!-- /Background -->

            <!-- top nav -->
             <?php (new TopNav())->render() ?>
            <!-- /top nav -->

            <!-- Render datetime -->
             <?php (new DateTimeUi())->render() ?>
            <!-- /Render datetime -->


            <!--left menu-->
            <?php (new LeftMenu())->render() ?>
            <!--/left menu-->

            <!--background credits-->
            <?php (new BackgroundCredits())->render() ?>
            <!--/background credits-->

            <!-- Signup -->
            <?php (new Signup())->render() ?>
            <!-- /Signup -->

            <!-- Success -->
            <?php (new Success())->render() ?>
            <!-- /Success -->

            <!-- AppError -->
            <?php (new AppError())->render() ?>
            <!-- /AppError -->

            <!-- Login -->
            <?php (new Login())->render() ?>
            <!-- /Login -->

            <!-- ForgotPassword -->
            <?php (new ForgotPassword())->render() ?>
            <!-- /ForgotPassword -->

            <!-- ResetPassword -->
            <?php (new ResetPassword())->render() ?>
            <!-- /ResetPassword -->

            <!-- UserPlaylists -->
            <?php (new UserPlaylists())->render() ?>
            <!-- /UserPlaylists -->

            <!-- NewUserPlaylist -->
            <?php (new NewUserPlaylist())->render() ?>
            <!-- /NewUserPlaylist -->

            <!-- Backgrounds -->
            <?php (new Backgrounds())->render() ?>
            <!-- /Backgrounds -->

            <!-- Info -->
            <?php (new Info())->render() ?>
            <!-- /Info -->

            <!-- Fe Error -->
            <?php (new FeError())->render() ?>
            <!-- /Fe Error -->

            <!-- Settings -->
            <?php (new Settings())->render() ?>
            <!-- /Settings -->

            <!-- SleepMode -->
            <?php (new SleepMode())->render() ?>
            <!-- /SleepMode -->


			<textarea id="frontend-data" class="hidden"><?php echo esc_textarea(json_encode($frontendData)) ?></textarea>
            <?php
            // Remove default WordPress emoji and other default scripts
            remove_action('wp_print_scripts', 'print_emoji_detection_script');
            wp_enqueue_script('jquery');
            wp_enqueue_script('jquery-ui-core');
            wp_enqueue_script('jquery-ui-draggable');
            wp_enqueue_script('jquery-ui-droppable');

            wp_enqueue_script('oxyleaf-app-working-and-relaxing-app', OXYLEAF_APP_PUBLIC_URL . '/app/Views/Frontend/assets/dist/index.js', array('jquery', 'jquery-ui-core', 'jquery-ui-draggable', 'jquery-ui-droppable'), '1.0', false);
            

            // Print the enqueued scripts without needing wp_head() or wp_footer()
            wp_print_scripts();
            ?>

            <?php echo wp_kses_post(apply_filters('oxygen_app_page_page_body_end', '')) ?>
        </body>

        </html>
        <?php
    }

    private function _renderBackground($frontendData): void {
        $background = null;
        if ($frontendData['user_background']) {
            $background = $frontendData['user_background'];
        } else {
            $background = $frontendData['default_background'] ?? null;
        }

        if (!$background) {
            return;
        }

        $backgroundType = $background['type'] ?? '';
        $backgroundImgUrl = '';
        $backgroundVideoUrl = '';
        if ($backgroundType === 'image') {
            $backgroundImgUrl = $background['image_url_full'] ?? '';
        }
        if ($backgroundType === 'video') {
            $backgroundVideoUrl = $background['video_url'] ?? '';
        }

        ?>
            <div class="absolute inset-0 w-full h-full top-0 left-0 z-auto background-ui">
                <?php if ($backgroundType === 'image'): ?>
                    <div id="img-background" class="absolute inset-0 w-full h-full top-0 left-0 bg-cover bg-center transform scale-105 opacity-0 transition-all duration-[1500ms] ease-out app-background" style="background-image: url('<?php echo esc_url($backgroundImgUrl) ?>'); transition-property: opacity, transform; transition-duration: 1000ms, 3500ms;"></div>
                <?php endif; ?>
                <?php if ($backgroundType === 'video'): ?>
                    <div id="video-background" class="absolute inset-0 w-full h-full top-0 left-0 opacity-0 scale-105 transition-all duration-[1500ms] ease-out app-background" style="transition-property: opacity, transform; transition-duration: 1000ms, 1500ms;">
                        <video class="w-full h-full object-cover" autoplay loop muted playsinline>
                            <source src="<?php echo esc_url($backgroundVideoUrl) ?>" type="video/mp4">
                        </video>
                    </div>
                <?php endif; ?>
            </div>
        <?php
    }
}
(new Index())->render();
?>
