<?php

declare(strict_types=1);

namespace ROITheme\Public\YoutubeFacade\Infrastructure\Ui;

/**
 * Renders YouTube facade HTML (thumbnail + play button)
 *
 * PageSpeed Optimization:
 * - Shows YouTube thumbnail image (lazy-loaded)
 * - Displays play button overlay
 * - Real iframe loads only on user click (via JS)
 * - Reduces TBT by ~2000ms
 *
 * @package ROITheme\Public\YoutubeFacade
 * @since 1.0.6
 */
final class YoutubeFacadeRenderer
{
    /**
     * Render facade HTML for a YouTube video
     *
     * @param string $videoId YouTube video ID
     * @return string Facade HTML
     */
    public function render(string $videoId): string
    {
        $videoId = esc_attr($videoId);

        // Use maxresdefault with fallback to hqdefault
        // YouTube provides thumbnails at: maxresdefault, sddefault, hqdefault, mqdefault, default
        $thumbnailUrl = "https://i.ytimg.com/vi/{$videoId}/maxresdefault.jpg";

        $html = <<<HTML
<div class="youtube-facade video-wrapper" data-video-id="{$videoId}">
    <img
        class="youtube-facade__thumbnail"
        src="{$thumbnailUrl}"
        alt="Video thumbnail"
        loading="lazy"
        onerror="this.src='https://i.ytimg.com/vi/{$videoId}/hqdefault.jpg'"
    />
    <button class="youtube-facade__play" aria-label="Play video">
        <svg viewBox="0 0 68 48" width="68" height="48">
            <path class="youtube-facade__play-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#212121" fill-opacity="0.8"/>
            <path class="youtube-facade__play-icon" d="M 45,24 27,14 27,34" fill="#fff"/>
        </svg>
    </button>
</div>
HTML;

        return $html;
    }
}
