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

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

/* ---------------------------------------------------------
   SANITIZE INPUTS
--------------------------------------------------------- */
$ezhp_language = sanitize_text_field($attributes['language'] ?? 'en');
$ezhp_house_system = sanitize_text_field($attributes['houseSystem'] ?? 'placidus');
$ezhp_default_name_a = sanitize_text_field($attributes['defaultNameA'] ?? '');
$ezhp_default_name_b = sanitize_text_field($attributes['defaultNameB'] ?? '');

// Transparent background toggle
$ezhp_transparent_background = ! empty($attributes['transparentBackground']) ? 'true' : 'false';

// Chart Colors
$ezhp_background_color = sanitize_hex_color($attributes['backgroundColor'] ?? '#ffffff');
$ezhp_circle_color = sanitize_hex_color($attributes['circleColor'] ?? '#333333');
$ezhp_points_color = sanitize_hex_color($attributes['pointsColor'] ?? '#000000');
$ezhp_signs_color = sanitize_hex_color($attributes['signsColor'] ?? '#000000');
$ezhp_cusps_color = sanitize_hex_color($attributes['cuspsColor'] ?? '#000000');
$ezhp_line_color = sanitize_hex_color($attributes['lineColor'] ?? '#333333');
$ezhp_axis_font_color = sanitize_hex_color($attributes['axisFontColor'] ?? '#333333');
$ezhp_legend_font_color = sanitize_hex_color($attributes['legendFontColor'] ?? '#333333');
$ezhp_legend_border_color = sanitize_hex_color($attributes['legendBorderColor'] ?? '#333333');

// Zodiac Colors
$ezhp_color_aries = sanitize_hex_color($attributes['colorAries'] ?? '#FF4500');
$ezhp_color_taurus = sanitize_hex_color($attributes['colorTaurus'] ?? '#8B4513');
$ezhp_color_gemini = sanitize_hex_color($attributes['colorGemini'] ?? '#87CEEB');
$ezhp_color_cancer = sanitize_hex_color($attributes['colorCancer'] ?? '#27AE60');
$ezhp_color_leo = sanitize_hex_color($attributes['colorLeo'] ?? '#FF4500');
$ezhp_color_virgo = sanitize_hex_color($attributes['colorVirgo'] ?? '#8B4513');
$ezhp_color_libra = sanitize_hex_color($attributes['colorLibra'] ?? '#87CEEB');
$ezhp_color_scorpio = sanitize_hex_color($attributes['colorScorpio'] ?? '#27AE60');
$ezhp_color_sagittarius = sanitize_hex_color($attributes['colorSagittarius'] ?? '#FF4500');
$ezhp_color_capricorn = sanitize_hex_color($attributes['colorCapricorn'] ?? '#8B4513');
$ezhp_color_aquarius = sanitize_hex_color($attributes['colorAquarius'] ?? '#87CEEB');
$ezhp_color_pisces = sanitize_hex_color($attributes['colorPisces'] ?? '#27AE60');

// Aspect Colors
$ezhp_aspect_color_conjunction = sanitize_hex_color($attributes['aspectColorConjunction'] ?? '#FFD700');
$ezhp_aspect_color_opposition = sanitize_hex_color($attributes['aspectColorOpposition'] ?? '#FF0000');
$ezhp_aspect_color_trine = sanitize_hex_color($attributes['aspectColorTrine'] ?? '#00FF00');
$ezhp_aspect_color_square = sanitize_hex_color($attributes['aspectColorSquare'] ?? '#FF4500');
$ezhp_aspect_color_sextile = sanitize_hex_color($attributes['aspectColorSextile'] ?? '#0000FF');
$ezhp_aspect_color_quincunx = sanitize_hex_color($attributes['aspectColorQuincunx'] ?? '#800080');

// Aspect Orbits
$ezhp_aspect_orbit_conjunction = floatval($attributes['aspectOrbitConjunction'] ?? 10);
$ezhp_aspect_orbit_opposition = floatval($attributes['aspectOrbitOpposition'] ?? 10);
$ezhp_aspect_orbit_trine = floatval($attributes['aspectOrbitTrine'] ?? 8);
$ezhp_aspect_orbit_square = floatval($attributes['aspectOrbitSquare'] ?? 8);
$ezhp_aspect_orbit_sextile = floatval($attributes['aspectOrbitSextile'] ?? 6);
$ezhp_aspect_orbit_quincunx = floatval($attributes['aspectOrbitQuincunx'] ?? 5);

// Sizing & Strokes
$ezhp_symbol_scale = floatval($attributes['symbolScale'] ?? 1);
$ezhp_points_text_size = intval($attributes['pointsTextSize'] ?? 8);
$ezhp_points_stroke = floatval($attributes['pointsStroke'] ?? 1.8);
$ezhp_signs_stroke = floatval($attributes['signsStroke'] ?? 1.5);
$ezhp_circle_stroke = floatval($attributes['circleStroke'] ?? 2);
$ezhp_cusps_stroke = floatval($attributes['cuspsStroke'] ?? 1);
$ezhp_axis_stroke = floatval($attributes['axisStroke'] ?? 1.6);

// Layout
$ezhp_margin = intval($attributes['margin'] ?? 80);
$ezhp_padding = intval($attributes['padding'] ?? 18);
$ezhp_collision_radius = intval($attributes['collisionRadius'] ?? 10);
$ezhp_indoor_circle_radius_ratio = floatval($attributes['indoorCircleRadiusRatio'] ?? 2);
$ezhp_inner_circle_radius_ratio = floatval($attributes['innerCircleRadiusRatio'] ?? 8);
$ezhp_ruler_radius = floatval($attributes['rulerRadius'] ?? 4);
$ezhp_shift_in_degrees = intval($attributes['shiftInDegrees'] ?? 180);

// Toggles
$ezhp_stroke_only = ! empty($attributes['strokeOnly']) ? 'true' : 'false';
$ezhp_add_click_area = ! empty($attributes['addClickArea']) ? 'true' : 'false';
$ezhp_show_dignities_text = ! empty($attributes['showDignitiesText']) ? 'true' : 'false';
$ezhp_debug = ! empty($attributes['debug']) ? 'true' : 'false';

/* ---------------------------------------------------------
   BUILD OUTPUT
--------------------------------------------------------- */
$ezhp_output = '<div 
    class="wp-block ez-horoscope-block synastry-chart-block"
    data-ezhp-lang="' . esc_attr($ezhp_language) . '"
    data-house-system="' . esc_attr($ezhp_house_system) . '"
    data-default-name-a="' . esc_attr($ezhp_default_name_a) . '"
    data-default-name-b="' . esc_attr($ezhp_default_name_b) . '"
    data-transparent-background="' . esc_attr($ezhp_transparent_background) . '"
    data-background-color="' . esc_attr($ezhp_background_color) . '"
    data-circle-color="' . esc_attr($ezhp_circle_color) . '"
    data-points-color="' . esc_attr($ezhp_points_color) . '"
    data-signs-color="' . esc_attr($ezhp_signs_color) . '"
    data-cusps-color="' . esc_attr($ezhp_cusps_color) . '"
    data-line-color="' . esc_attr($ezhp_line_color) . '"
    data-axis-font-color="' . esc_attr($ezhp_axis_font_color) . '"
    data-legend-font-color="' . esc_attr($ezhp_legend_font_color) . '"
    data-legend-border-color="' . esc_attr($ezhp_legend_border_color) . '"
    data-color-aries="' . esc_attr($ezhp_color_aries) . '"
    data-color-taurus="' . esc_attr($ezhp_color_taurus) . '"
    data-color-gemini="' . esc_attr($ezhp_color_gemini) . '"
    data-color-cancer="' . esc_attr($ezhp_color_cancer) . '"
    data-color-leo="' . esc_attr($ezhp_color_leo) . '"
    data-color-virgo="' . esc_attr($ezhp_color_virgo) . '"
    data-color-libra="' . esc_attr($ezhp_color_libra) . '"
    data-color-scorpio="' . esc_attr($ezhp_color_scorpio) . '"
    data-color-sagittarius="' . esc_attr($ezhp_color_sagittarius) . '"
    data-color-capricorn="' . esc_attr($ezhp_color_capricorn) . '"
    data-color-aquarius="' . esc_attr($ezhp_color_aquarius) . '"
    data-color-pisces="' . esc_attr($ezhp_color_pisces) . '"
    data-aspect-color-conjunction="' . esc_attr($ezhp_aspect_color_conjunction) . '"
    data-aspect-color-opposition="' . esc_attr($ezhp_aspect_color_opposition) . '"
    data-aspect-color-trine="' . esc_attr($ezhp_aspect_color_trine) . '"
    data-aspect-color-square="' . esc_attr($ezhp_aspect_color_square) . '"
    data-aspect-color-sextile="' . esc_attr($ezhp_aspect_color_sextile) . '"
    data-aspect-color-quincunx="' . esc_attr($ezhp_aspect_color_quincunx) . '"
    data-aspect-orbit-conjunction="' . esc_attr($ezhp_aspect_orbit_conjunction) . '"
    data-aspect-orbit-opposition="' . esc_attr($ezhp_aspect_orbit_opposition) . '"
    data-aspect-orbit-trine="' . esc_attr($ezhp_aspect_orbit_trine) . '"
    data-aspect-orbit-square="' . esc_attr($ezhp_aspect_orbit_square) . '"
    data-aspect-orbit-sextile="' . esc_attr($ezhp_aspect_orbit_sextile) . '"
    data-aspect-orbit-quincunx="' . esc_attr($ezhp_aspect_orbit_quincunx) . '"
    data-symbol-scale="' . esc_attr($ezhp_symbol_scale) . '"
    data-points-text-size="' . esc_attr($ezhp_points_text_size) . '"
    data-points-stroke="' . esc_attr($ezhp_points_stroke) . '"
    data-signs-stroke="' . esc_attr($ezhp_signs_stroke) . '"
    data-circle-stroke="' . esc_attr($ezhp_circle_stroke) . '"
    data-cusps-stroke="' . esc_attr($ezhp_cusps_stroke) . '"
    data-axis-stroke="' . esc_attr($ezhp_axis_stroke) . '"
    data-margin="' . esc_attr($ezhp_margin) . '"
    data-padding="' . esc_attr($ezhp_padding) . '"
    data-collision-radius="' . esc_attr($ezhp_collision_radius) . '"
    data-indoor-circle-radius-ratio="' . esc_attr($ezhp_indoor_circle_radius_ratio) . '"
    data-inner-circle-radius-ratio="' . esc_attr($ezhp_inner_circle_radius_ratio) . '"
    data-ruler-radius="' . esc_attr($ezhp_ruler_radius) . '"
    data-shift-in-degrees="' . esc_attr($ezhp_shift_in_degrees) . '"
    data-stroke-only="' . esc_attr($ezhp_stroke_only) . '"
    data-add-click-area="' . esc_attr($ezhp_add_click_area) . '"
    data-show-dignities-text="' . esc_attr($ezhp_show_dignities_text) . '"
    data-debug="' . esc_attr($ezhp_debug) . '"
>';

$ezhp_output .= '<div class="ezhp-form ezhp-synastry-form">';

/* ---------------------------------------------------------
   PERSON A SECTION
--------------------------------------------------------- */
$ezhp_output .= '<div class="ezhp-person-section ezhp-person-a-section">';
$ezhp_output .= '<h4 class="ezhp-person-heading ezhp-person-a-heading"><span class="ezhp-person-label-a"></span> (<span class="ezhp-inner-wheel-label"></span>)</h4>';

$ezhp_output .= '<div class="ezhp-form-row">';
$ezhp_output .= '<label class="ezhp-label ezhp-name-label-a"></label>';
$ezhp_output .= '<input type="text" class="ezhp-name-input-a" placeholder="" value="' . esc_attr($ezhp_default_name_a) . '">';
$ezhp_output .= '</div>';

$ezhp_output .= '<div class="ezhp-form-row">';
$ezhp_output .= '<label class="ezhp-label ezhp-location-label-a"></label>';
$ezhp_output .= '<input type="text" class="ezhp-location-input-a" placeholder="e.g., New York, NY" value="">';
$ezhp_output .= '</div>';

$ezhp_output .= '<div class="ezhp-form-row">';
$ezhp_output .= '<label class="ezhp-label ezhp-datetime-label-a"></label>';
$ezhp_output .= '<input type="datetime-local" class="ezhp-datetime-input-a" value="">';
$ezhp_output .= '</div>';

$ezhp_output .= '</div>'; // End Person A section

/* ---------------------------------------------------------
   PERSON B SECTION
--------------------------------------------------------- */
$ezhp_output .= '<div class="ezhp-person-section ezhp-person-b-section">';
$ezhp_output .= '<h4 class="ezhp-person-heading ezhp-person-b-heading"><span class="ezhp-person-label-b"></span> (<span class="ezhp-outer-wheel-label"></span>)</h4>';

$ezhp_output .= '<div class="ezhp-form-row">';
$ezhp_output .= '<label class="ezhp-label ezhp-name-label-b"></label>';
$ezhp_output .= '<input type="text" class="ezhp-name-input-b" placeholder="" value="' . esc_attr($ezhp_default_name_b) . '">';
$ezhp_output .= '</div>';

$ezhp_output .= '<div class="ezhp-form-row">';
$ezhp_output .= '<label class="ezhp-label ezhp-location-label-b"></label>';
$ezhp_output .= '<input type="text" class="ezhp-location-input-b" placeholder="e.g., Los Angeles, CA" value="">';
$ezhp_output .= '</div>';

$ezhp_output .= '<div class="ezhp-form-row">';
$ezhp_output .= '<label class="ezhp-label ezhp-datetime-label-b"></label>';
$ezhp_output .= '<input type="datetime-local" class="ezhp-datetime-input-b" value="">';
$ezhp_output .= '</div>';

$ezhp_output .= '</div>'; // End Person B section

/* ---------------------------------------------------------
   HOUSE SYSTEM SELECTOR
--------------------------------------------------------- */
$ezhp_output .= '<div class="ezhp-form-row">';
$ezhp_output .= '<label class="ezhp-label ezhp-house-system-label"></label>';
$ezhp_output .= '<select class="ezhp-house-system-select">';
$ezhp_output .= '<option value="placidus">Placidus</option>';
$ezhp_output .= '<option value="koch">Koch</option>';
$ezhp_output .= '<option value="porphyrius">Porphyrius</option>';
$ezhp_output .= '<option value="regiomontanus">Regiomontanus</option>';
$ezhp_output .= '<option value="campanus">Campanus</option>';
$ezhp_output .= '<option value="equal">Equal House</option>';
$ezhp_output .= '<option value="wholesign">Whole Sign</option>';
$ezhp_output .= '<option value="meridian">Meridian</option>';
$ezhp_output .= '<option value="alcabitus">Alcabitus</option>';
$ezhp_output .= '<option value="morinus">Morinus</option>';
$ezhp_output .= '<option value="topocentric">Topocentric</option>';
$ezhp_output .= '</select>';
$ezhp_output .= '</div>';

/* ---------------------------------------------------------
   GENERATE BUTTON
--------------------------------------------------------- */
$ezhp_output .= '<button type="button" class="ezhp-fetch-button wp-element-button"></button>';
$ezhp_output .= '</div>'; // End form

/* ---------------------------------------------------------
   RESULT CONTAINER
--------------------------------------------------------- */
$ezhp_output .= '<div class="synastry-chart-result"></div>';
$ezhp_output .= '</div>'; // End main container

echo wp_kses(
    $ezhp_output,
    [
        'div' => [
            'class' => [],
            'data-ezhp-lang' => [],
            'data-house-system' => [],
            'data-default-name-a' => [],
            'data-default-name-b' => [],
            'data-transparent-background' => [],
            'data-background-color' => [],
            'data-circle-color' => [],
            'data-points-color' => [],
            'data-signs-color' => [],
            'data-cusps-color' => [],
            'data-line-color' => [],
            'data-axis-font-color' => [],
            'data-legend-font-color' => [],
            'data-legend-border-color' => [],
            'data-color-aries' => [],
            'data-color-taurus' => [],
            'data-color-gemini' => [],
            'data-color-cancer' => [],
            'data-color-leo' => [],
            'data-color-virgo' => [],
            'data-color-libra' => [],
            'data-color-scorpio' => [],
            'data-color-sagittarius' => [],
            'data-color-capricorn' => [],
            'data-color-aquarius' => [],
            'data-color-pisces' => [],
            'data-aspect-color-conjunction' => [],
            'data-aspect-color-opposition' => [],
            'data-aspect-color-trine' => [],
            'data-aspect-color-square' => [],
            'data-aspect-color-sextile' => [],
            'data-aspect-color-quincunx' => [],
            'data-aspect-orbit-conjunction' => [],
            'data-aspect-orbit-opposition' => [],
            'data-aspect-orbit-trine' => [],
            'data-aspect-orbit-square' => [],
            'data-aspect-orbit-sextile' => [],
            'data-aspect-orbit-quincunx' => [],
            'data-symbol-scale' => [],
            'data-points-text-size' => [],
            'data-points-stroke' => [],
            'data-signs-stroke' => [],
            'data-circle-stroke' => [],
            'data-cusps-stroke' => [],
            'data-axis-stroke' => [],
            'data-margin' => [],
            'data-padding' => [],
            'data-collision-radius' => [],
            'data-indoor-circle-radius-ratio' => [],
            'data-inner-circle-radius-ratio' => [],
            'data-ruler-radius' => [],
            'data-shift-in-degrees' => [],
            'data-stroke-only' => [],
            'data-add-click-area' => [],
            'data-show-dignities-text' => [],
            'data-debug' => [],
        ],
        'h4' => [
            'class' => [],
        ],
        'span' => [
            'class' => [],
        ],
        'input' => [
            'type' => [],
            'class' => [],
            'value' => [],
            'placeholder' => [],
        ],
        'label' => [
            'class' => [],
        ],
        'button' => [
            'type' => [],
            'class' => [],
        ],
        'select' => [
            'class' => [],
        ],
        'option' => [
            'value' => [],
            'selected' => [],
        ],
    ]
);