<?php
if (!defined('ABSPATH')) exit;

function ioh_render_popup(string $html, array $popup = []): string {
    $html = wp_kses(ioh_strip_wrappers($html), ioh_allowed_editor_html());
    $title = sanitize_text_field((string)($popup['title'] ?? 'ATTENTION'));
    $has_title = trim($title) !== '';
    $banner_color = ioh_sanitize_color_value($popup['banner_color'] ?? ioh_default_popup_banner_color(), ioh_default_popup_banner_color());
    $banner_text_color = ioh_sanitize_color_value($popup['banner_text_color'] ?? '#ffffff', '#ffffff');
    $text_size = ioh_sanitize_size_value($popup['text_size'] ?? '26px', '26px');
    $shell_padding = $has_title ? '0 5px 5px' : '5px';

    $out = '<style>
      #ioh-popup-backdrop .ioh-popup-content p{margin:0 0 10px;}
      #ioh-popup-backdrop .ioh-popup-content img{display:block; max-width:58%; height:auto; margin:10px auto 0;}
      #ioh-popup-backdrop .ioh-popup-content iframe{display:block; max-width:100%; margin:10px auto 0;}
      #ioh-popup-backdrop .ioh-popup-scroll{max-height:none; overflow:visible;}
      @media (max-width:640px){
        #ioh-popup-backdrop .ioh-popup-shell{max-width:92vw !important;}
        #ioh-popup-backdrop .ioh-popup-banner{font-size:22px !important;}
        #ioh-popup-backdrop .ioh-popup{padding:24px 16px 20px !important;}
        #ioh-popup-backdrop .ioh-popup-content{font-size:20px !important;}
        #ioh-popup-backdrop .ioh-popup-content img{max-width:78%;}
      }
    </style>';
    $out .= '<div class="ioh-popup-backdrop" id="ioh-popup-backdrop" style="position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99998; display:flex; align-items:flex-start; justify-content:center; padding:36px 20px 20px; overflow-y:auto;">';
    $out .= '<div class="ioh-popup-shell" role="dialog" aria-modal="true" aria-labelledby="ioh-popup-title" style="position:relative; max-width:625px; width:100%; background:' . esc_attr($banner_color) . '; padding:' . esc_attr($shell_padding) . '; box-shadow:0 10px 30px rgba(0,0,0,.35);">';
    $out .= '<button type="button" aria-label="Close" id="ioh-popup-close" style="position:absolute; top:-23px; right:-13px; width:28px; height:28px; border:0; background:transparent; color:#fff; font-size:38px; font-weight:800; line-height:28px; cursor:pointer; z-index:2; text-shadow:0 1px 3px rgba(0,0,0,.35);">&times;</button>';
    $out .= '<div class="ioh-popup-scroll" style="max-height:none; overflow:visible;">';
    if ($has_title) {
        $out .= '<div id="ioh-popup-title" class="ioh-popup-banner" style="background:' . esc_attr($banner_color) . '; color:' . esc_attr($banner_text_color) . '; font-family:Arial,Helvetica,sans-serif; font-size:28px; line-height:1.25; font-weight:800; text-align:center; padding:10px 12px 11px; letter-spacing:.01em;">' . esc_html($title) . '</div>';
    }
    $out .= '<div class="ioh-popup" style="background:#fff; color:#444; width:100%; padding:34px 24px 28px; position:relative;">';
    $out .= '<div class="ioh-popup-content" style="font-family:Arial,Helvetica,sans-serif; font-size:' . esc_attr($text_size) . '; font-weight:400; line-height:1.45; text-align:center;">' . $html . '</div>';
    $out .= '</div></div></div></div>';

    $out .= "<script>
      (function(){
        var b=document.getElementById('ioh-popup-backdrop');
        var c=document.getElementById('ioh-popup-close');
        function closePopup(){
          if(!b) return;
          b.style.display='none';
          b.querySelectorAll('iframe').forEach(function(frame){
            frame.src='about:blank';
          });
        }
        if(c){c.addEventListener('click', closePopup);}
        if(b){b.addEventListener('click', function(event){ if(event.target === b) closePopup(); });}
      })();
    </script>";

    return $out;
}
