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

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

/* ---------------------------------------------------------
   SANITIZE INPUTS
--------------------------------------------------------- */
$ezhp_language  = sanitize_text_field($attributes['language'] ?? 'en');
$ezhp_hero_mode = sanitize_text_field($attributes['heroImageDisplayMode'] ?? 'inline');
$ezhp_hero_url  = esc_url($attributes['heroImageUrl'] ?? '');
$ezhp_hero_alt  = esc_attr($attributes['heroImageAlt'] ?? '');
$ezhp_align     = sanitize_text_field($attributes['heroImageAlignment'] ?? 'center');
$ezhp_wrap      = sanitize_text_field($attributes['heroImageTextWrap'] ?? 'none');
$ezhp_opacity   = floatval($attributes['heroImageOverlayOpacity'] ?? 50);
$ezhp_color_raw = sanitize_text_field($attributes['heroImageOverlayColor'] ?? 'black');
$ezhp_max_width = sanitize_text_field($attributes['heroImageMaxWidth'] ?? '40%');

// CTA data attributes
$ezhp_cta_placement       = sanitize_text_field($attributes['ctaPlacement'] ?? 'none');
$ezhp_cta_headline        = sanitize_text_field($attributes['ctaHeadline'] ?? '');
$ezhp_cta_heading_level   = sanitize_text_field($attributes['ctaHeadingLevel'] ?? 'h3');
$ezhp_cta_text            = sanitize_text_field($attributes['ctaText'] ?? '');
$ezhp_cta_button_text     = sanitize_text_field($attributes['ctaButtonText'] ?? '');
$ezhp_cta_button_url      = esc_url($attributes['ctaButtonUrl'] ?? '');
$ezhp_cta_image_url       = esc_url($attributes['ctaImageUrl'] ?? '');
$ezhp_cta_image_alt       = esc_attr($attributes['ctaImageAlt'] ?? '');
$ezhp_cta_image_clickable = ! empty($attributes['ctaImageClickable']) ? '1' : '0';
$ezhp_cta_image_max_width = sanitize_text_field($attributes['ctaImageMaxWidth'] ?? '100%');
$ezhp_cta_bg_color        = sanitize_hex_color($attributes['ctaBackgroundColor'] ?? '') ?: '';
$ezhp_cta_bg_transparent  = ! empty($attributes['ctaBackgroundTransparent']) ? '1' : '0';
$ezhp_cta_button_color    = sanitize_hex_color($attributes['ctaButtonColor'] ?? '') ?: '';

// RTL language detection
$ezhp_rtl_languages = ['ar', 'he', 'fa', 'ur', 'ps', 'sd', 'yi', 'ku', 'dv', 'ug'];
$ezhp_lang_base = strtolower(explode('-', $ezhp_language)[0]);
$ezhp_is_rtl = in_array($ezhp_lang_base, $ezhp_rtl_languages, true);
$ezhp_dir = $ezhp_is_rtl ? 'rtl' : 'ltr';

/* ---------------------------------------------------------
   BUILD BLOCK HTML
--------------------------------------------------------- */
$ezhp_output  = '<div
    class="wp-block ez-horoscope-block ez-zodiac-profile-block"
    dir="' . esc_attr($ezhp_dir) . '"
    data-ezhp-lang="' . esc_attr($ezhp_language) . '"
    data-hero-mode="' . esc_attr($ezhp_hero_mode) . '"
    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-align="' . esc_attr($ezhp_align) . '"
    data-hero-opacity="' . esc_attr($ezhp_opacity) . '"
    data-hero-color="' . esc_attr($ezhp_color_raw) . '"
    data-hero-max-width="' . esc_attr($ezhp_max_width) . '"
    data-hide-heading="' . ( ! empty($attributes['hideHeading']) ? '1' : '0' ) . '"
    data-cta-placement="' . esc_attr($ezhp_cta_placement) . '"
    data-cta-headline="' . esc_attr($ezhp_cta_headline) . '"
    data-cta-heading-level="' . esc_attr($ezhp_cta_heading_level) . '"
    data-cta-text="' . esc_attr($ezhp_cta_text) . '"
    data-cta-button-text="' . esc_attr($ezhp_cta_button_text) . '"
    data-cta-button-url="' . esc_attr($ezhp_cta_button_url) . '"
    data-cta-image-url="' . esc_attr($ezhp_cta_image_url) . '"
    data-cta-image-alt="' . esc_attr($ezhp_cta_image_alt) . '"
    data-cta-image-clickable="' . esc_attr($ezhp_cta_image_clickable) . '"
    data-cta-image-max-width="' . esc_attr($ezhp_cta_image_max_width) . '"
    data-cta-bg-color="' . esc_attr($ezhp_cta_bg_color) . '"
    data-cta-bg-transparent="' . esc_attr($ezhp_cta_bg_transparent) . '"
    data-cta-button-color="' . esc_attr($ezhp_cta_button_color) . '"
>';

/* ---------------------------------------------------------
   FORM (date input + button)
--------------------------------------------------------- */
$ezhp_output .= '<div class="ezhp-form">';
$ezhp_output .= '<label>Enter your birthdate:</label>';
$ezhp_output .= '<input type="date" class="ezhp-date-input" value="">';
$ezhp_output .= '<button type="button" class="ezhp-fetch-button wp-element-button">Get Zodiac Sign Profile</button>';
$ezhp_output .= '</div>';

/* ---------------------------------------------------------
   RESULT CONTAINER (JS fills it)
--------------------------------------------------------- */
$ezhp_output .= '<div class="ez-zodiac-profile-result"></div>';
$ezhp_output .= '</div>';

echo wp_kses(
    $ezhp_output,
    [
        'div' => [
            'class'                     => [],
            'dir'                       => [],
            'data-ezhp-lang'            => [],
            'data-hero-mode'            => [],
            'data-hero-url'             => [],
            'data-hero-alt'             => [],
            'data-hero-wrap'            => [],
            'data-hero-align'           => [],
            'data-hero-opacity'         => [],
            'data-hero-color'           => [],
            'data-hero-max-width'       => [],
            'data-hide-heading'         => [],
            'data-cta-placement'        => [],
            'data-cta-headline'         => [],
            'data-cta-heading-level'    => [],
            'data-cta-text'             => [],
            'data-cta-button-text'      => [],
            'data-cta-button-url'       => [],
            'data-cta-image-url'        => [],
            'data-cta-image-alt'        => [],
            'data-cta-image-clickable'  => [],
            'data-cta-image-max-width'  => [],
            'data-cta-bg-color'         => [],
            'data-cta-bg-transparent'   => [],
            'data-cta-button-color'     => [],
        ],
        'input' => [
            'type'  => [],
            'class' => [],
            'value' => [],
        ],
        'label'  => [],
        'button' => [
            'type'  => [],
            'class' => [],
        ],
    ]
);