<?php

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

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

class AppError extends BaseView implements IView
{
    public function render(): void
    {
        $routes = FrontendData::getInstance()->getDefaultSettings(FrontendDataType::ARRAY)['routes'] ?? [];

        $back_to_signup = LanguagesHelper::getInstance()->getLangLabel('back_to_signup');
        $general_error_title = LanguagesHelper::getInstance()->getLangLabel('general_error_title');
        $invalid_activation_token = LanguagesHelper::getInstance()->getLangLabel('invalid_activation_token');
        $email_placeholder = LanguagesHelper::getInstance()->getLangLabel('email_placeholder');
        $resend_activation_code_btn = LanguagesHelper::getInstance()->getLangLabel('resend_activation_code_btn');
        $account_acctivated_info = LanguagesHelper::getInstance()->getLangLabel('account_acctivated_info');
        $back_to_login = LanguagesHelper::getInstance()->getLangLabel('back_to_login');

        ?>
        <div class="absolute inset-0 w-full h-full top-0 left-0 z-10 flex items-center justify-center p-4 white-popup hidden error-ui">
            <div class="absolute inset-0 w-full h-full top-0 left-0 z-10 bg-black/20 flex items-center justify-center p-4 white-popup pupup-background-ui">
            </div>
            
            <div class="bg-white z-20 rounded-2xl w-full max-w-md md:max-w-lg lg:max-w-md xl:max-w-sm max-h-full shadow-lg flex flex-col opacity-0 transition-opacity duration-150 popup-content">
                <div class="relative flex items-center justify-center px-4 py-3 border-b">
                    <h2 class="text-xl font-semibold text-gray-600"><?php echo esc_html($general_error_title) ?></h2>
                    
                    <a href="#" class="text-gray-600 absolute right-6 text-clack text-xl leading-none close-btn">
                        <img class="w-[20px]" src="<?php echo esc_url(OXYLEAF_APP_PUBLIC_URL . '/app/Views/Frontend/assets/img/close-black.svg'); ?>" alt="">
                    </a>
                </div>
                
                <div class="overflow-y-auto px-6 py-4 text-gray-600" style="max-height: 70vh;">

                    <div class="app-error missing_activation">
                        <div class="p-4 mb-4 text-sm text-red-800 border border-red-300 main-error rounded-lg bg-red-50" role="alert">
                            <?php echo esc_html($invalid_activation_token) ?>
                        </div>
                        <div class="my-6 flex justify-center items-center text-sm back-to-signup">
                            <strong><a class="app-default-link" href="#<?php echo esc_attr($routes['signup']['hash'] ?? '') ?>"><?php echo esc_html($back_to_signup) ?></a></strong>
                        </div>

                        <div class="my-6 flex justify-center items-center text-sm back-to-login">
                            <strong><a class="app-default-link" href="#<?php echo esc_attr($routes['login']['hash'] ?? '') ?>"><?php echo esc_html($back_to_login) ?></a></strong>
                        </div>

                        <div class="my-4 text-sm text-green-800 form-success"><?php echo esc_html($account_acctivated_info) ?></div>
                        <form class="oxygenapp-form resendactivation-form" action="">
                            <div class="flex w-full my-4">
                                <input type="email" name="email" value="" required class="white-input flex-1 border rounded-full px-4 py-2 focus:outline-none focus:ring-2" placeholder="<?php echo esc_attr($email_placeholder) ?>">
                            </div>

                            <div class="my-4 text-sm text-red-400 form-error hidden"></div>

                            <div class="flex w-full my-4">
                                <input type="submit" value="<?php echo esc_attr($resend_activation_code_btn); ?>" 
                                class="flex-1 colored-bg-button font-semibold text-sm rounded-full px-4 py-2 text-center form-submit cursor-pointer">
                            </div>
                        </form>
                    </div>

                </div>
            </div>

        </div>


        <?php
    }
}