<?php
defined('ABSPATH') || exit;

// Track block usage (first render only)
if (function_exists('ezhp_track_block_usage')) {
    ezhp_track_block_usage('zodiac-compatibility', $attributes);
}

/* ---------------------------------------------------------
   HELPER: ZODIAC OPTIONS (12 SIGNS)
   (Must be defined BEFORE it is called)
--------------------------------------------------------- */
if (! function_exists('ezhp_render_zodiac_options')) {
    function ezhp_render_zodiac_options()
    {

        $ezhp_signs = [
            'aries' => 'Aries',
            'taurus' => 'Taurus',
            'gemini' => 'Gemini',
            'cancer' => 'Cancer',
            'leo' => 'Leo',
            'virgo' => 'Virgo',
            'libra' => 'Libra',
            'scorpio' => 'Scorpio',
            'sagittarius' => 'Sagittarius',
            'capricorn' => 'Capricorn',
            'aquarius' => 'Aquarius',
            'pisces' => 'Pisces'
        ];

        $ezhp_html = '';
        foreach ($ezhp_signs as $ezhp_value => $ezhp_label) {
            $ezhp_html .= '<option value="' . esc_attr($ezhp_value) . '">' . esc_html($ezhp_label) . '</option>';
        }

        return $ezhp_html;
    }
}

/* ---------------------------------------------------------
   SANITIZE INPUTS (Inline image only)
--------------------------------------------------------- */
$ezhp_language      = sanitize_text_field($attributes['language'] ?? 'en');
$ezhp_hero_url      = esc_url($attributes['heroImageUrl'] ?? '');
$ezhp_hero_alt      = esc_attr($attributes['heroImageAlt'] ?? '');
$ezhp_wrap          = sanitize_text_field($attributes['heroImageTextWrap'] ?? 'none');
$ezhp_max_width     = sanitize_text_field($attributes['heroImageMaxWidth'] ?? '40%');

// RTL language support
$ezhp_rtl_languages = ['ar', 'fa', 'he', 'ur'];
$ezhp_is_rtl        = in_array($ezhp_language, $ezhp_rtl_languages, true);
$ezhp_dir           = $ezhp_is_rtl ? 'rtl' : 'ltr';

/* ---------------------------------------------------------
   BUILD OUTPUT WRAPPER
--------------------------------------------------------- */
$ezhp_output  = '<div 
    class="wp-block ez-horoscope-block ezhp-compatibility-block"
    dir="' . esc_attr($ezhp_dir) . '"
    data-ezhp-lang="' . esc_attr($ezhp_language) . '"
    data-hero-url="' . esc_url($ezhp_hero_url) . '"
    data-hero-alt="' . esc_attr($ezhp_hero_alt) . '"
    data-hero-wrap="' . esc_attr($ezhp_wrap) . '"
    data-hero-max-width="' . esc_attr($ezhp_max_width) . '"
>';

/* ---------------------------------------------------------
   FRONTEND UI — SIGN SELECTORS + BUTTON
--------------------------------------------------------- */
$ezhp_output .= '<div class="ezhp-form">';

$ezhp_output .= '<label class="ezhp-label-your"></label>';
$ezhp_output .= '<select class="ezhp-your-sign">';
$ezhp_output .= '<option value="">--</option>';
$ezhp_output .= ezhp_render_zodiac_options();
$ezhp_output .= '</select>';

$ezhp_output .= '<label class="ezhp-label-their"></label>';
$ezhp_output .= '<select class="ezhp-their-sign">';
$ezhp_output .= '<option value="">--</option>';
$ezhp_output .= ezhp_render_zodiac_options();
$ezhp_output .= '</select>';

$ezhp_output .= '<button type="button" class="ezhp-fetch-button wp-element-button ezhp-button-compat"></button>';


$ezhp_output .= '</div>'; // .ezhp-form

/* ---------------------------------------------------------
   RESULT CONTAINER (filled by JS)
--------------------------------------------------------- */
$ezhp_output .= '<div class="ezhp-compatibility-result"></div>';

$ezhp_output .= '</div>'; // wrapper

/* ---------------------------------------------------------
   ECHO WITH KSES ALLOWANCE
--------------------------------------------------------- */
echo wp_kses(
    $ezhp_output,
    [
        'div' => [
            'class' => [],
            'dir' => [],
            'data-ezhp-lang' => [],
            'data-hero-url' => [],
            'data-hero-alt' => [],
            'data-hero-wrap' => [],
            'data-hero-max-width' => []
        ],
        'label' => [
            'class' => []
        ],
        'select' => [
            'class' => []
        ],
        'option' => [
            'value' => []
        ],
        'button' => [
            'type' => [],
            'class' => []
        ]
    ]
);