<?php

namespace EasyLinkAutomations\Views;

if (!defined('ABSPATH')) {
    exit;
}

use EasyLinkAutomations\Config;
use EasyLinkAutomations\Helpers\BrandHelper;

/**
 * Renders the root HTML container that the React SPA mounts into.
 */
final class Body
{
    public function render(): void
    {
        // The logo is inlined as a data URI so the loading screen paints before
        // any asset request resolves. Both esc_url() and wp_kses() drop the
        // "data" scheme unless it is passed explicitly.
        $protocols = ['data'];

        $assetUri = esc_url(Config::get('ASSET_URI'));
        $title    = esc_html(Config::title());
        $logo     = esc_url(BrandHelper::toDataUri(BrandHelper::gradientSvg()), $protocols);

        $html = '<noscript>You need to enable JavaScript to run this app.</noscript>';
        $html .= '<div id="easylink-automations-root">';
        $html .= '<div style="display:flex;flex-direction:column;justify-content:center;align-items:center;height:90vh;font-family:\'Inter\',sans-serif;background:#f5f5f5;">';
        $html .= '<div style="padding:40px;background:white;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1);text-align:center;">';
        $html .= '<img src="' . $logo . '" alt="" width="56" style="height:auto;margin:0 auto 16px;display:block;" />';
        $html .= '<h1 style="color:#4f46e5;margin:0 0 16px 0;">' . $title . '</h1>';
        $html .= '<p style="color:#666;margin:0 0 20px 0;">⏳ Loading the App...</p>';
        $html .= '<div style="width:40px;height:40px;border:4px solid #e0e0e0;border-top-color:#4f46e5;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto;"></div>';
        $html .= '<p style="color:#999;font-size:12px;margin-top:16px;">If this persists, check browser console for errors</p>';
        $html .= '</div></div>';
        $html .= '</div>';

        echo wp_kses($html, [
            'noscript' => [],
            'div'      => ['id' => [], 'style' => []],
            'h1'       => ['style' => []],
            'p'        => ['style' => []],
            'img'      => ['alt' => [], 'class' => [], 'width' => [], 'height' => [], 'src' => [], 'style' => []],
        ], $protocols);
    }
}
