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

class Jalpi_Element_Cta extends Jalpi_Element {
    public static function type(): string { return 'cta'; }

    public function render( array $node, Jalpi_Renderer $renderer ): string {
        $id       = sanitize_html_class( $node['id'] ?? '' );
        $content  = $node['content']  ?? [];
        $styles   = $node['styles']   ?? [];
        $settings = $node['settings'] ?? [];
        $a        = $renderer->get_css_attrs( $node );

        $prefix = '.jalpi-el.jalpi-' . $id;
        $raw    = static fn( $k, $d = '' ) => isset( $settings[ $k ] ) && $settings[ $k ] !== '' ? (string) $settings[ $k ] : $d;
        // Normalize unitless numbers to px ("1"→"1px", "0"→"0", "12px"→"12px")
        $dpx    = static fn( $v ) => preg_match('/^-?[\d.]+$/', $v) ? ( $v === '0' ? '0' : $v . 'px' ) : $v;

        $typo_css = function( $pfx, $defaults = [] ) use ( $raw ) {
            $out = '';
            $fam = $raw( $pfx . '_fontFamily' );
            if ( $fam ) $out .= 'font-family:'    . esc_attr( $fam ) . ';';
            $fsz = $raw( $pfx . '_fontSize',   $defaults['fontSize']   ?? '' );
            if ( $fsz ) $out .= 'font-size:'      . esc_attr( $fsz ) . ';';
            $fw  = $raw( $pfx . '_fontWeight', $defaults['fontWeight'] ?? '' );
            if ( $fw  ) $out .= 'font-weight:'    . esc_attr( $fw )  . ';';
            $lh  = $raw( $pfx . '_lineHeight', $defaults['lineHeight'] ?? '' );
            if ( $lh  ) $out .= 'line-height:'    . esc_attr( $lh )  . ';';
            $ls  = $raw( $pfx . '_letterSpacing' );
            if ( $ls  ) $out .= 'letter-spacing:' . esc_attr( $ls ) . ';';
            $tt  = $raw( $pfx . '_textTransform' );
            if ( $tt  ) $out .= 'text-transform:' . esc_attr( $tt ) . ';';
            return $out;
        };

        // ── Wrapper ───────────────────────────────────────────────────────────
        $bg          = esc_attr( $raw( 'cta_bg',        '#1a1a1a' ) );
        $pad_top     = esc_attr( $dpx( $raw( 'cta_pad_top',    '40px'   ) ) );
        $pad_right   = esc_attr( $dpx( $raw( 'cta_pad_right',  '32px'   ) ) );
        $pad_bottom  = esc_attr( $dpx( $raw( 'cta_pad_bottom', '40px'   ) ) );
        $pad_left    = esc_attr( $dpx( $raw( 'cta_pad_left',   '32px'   ) ) );
        $br_top      = esc_attr( $dpx( $raw( 'cta_br_top',     '12px'   ) ) );
        $br_right    = esc_attr( $dpx( $raw( 'cta_br_right',   '12px'   ) ) );
        $br_bottom   = esc_attr( $dpx( $raw( 'cta_br_bottom',  '12px'   ) ) );
        $br_left     = esc_attr( $dpx( $raw( 'cta_br_left',    '12px'   ) ) );
        $bd_type     = $raw( 'cta_bd_type', 'none' );
        $bdw_top     = esc_attr( $dpx( $raw( 'cta_bdw_top',    '1px'    ) ) );
        $bdw_right   = esc_attr( $dpx( $raw( 'cta_bdw_right',  '1px'    ) ) );
        $bdw_bottom  = esc_attr( $dpx( $raw( 'cta_bdw_bottom', '1px'    ) ) );
        $bdw_left    = esc_attr( $dpx( $raw( 'cta_bdw_left',   '1px'    ) ) );
        $bd_color    = esc_attr( $raw( 'cta_bd_color', 'rgba(255,255,255,0.2)' ) );
        $shadow      = esc_attr( $raw( 'cta_shadow' ) );
        $align       = esc_attr( $raw( 'cta_align',     'center' ) );
        $btn_al      = $raw( 'cta_btn_align', 'center' );
        $btn_just    = $btn_al === 'right' ? 'flex-end' : ( $btn_al === 'left' ? 'flex-start' : 'center' );

        $bd_css = '';
        if ( $bd_type && $bd_type !== 'none' ) {
            $bd_css = 'border:' . $bdw_top . ' ' . esc_attr( $bd_type ) . ' ' . $bd_color . ';'
                    . 'border-width:' . $bdw_top . ' ' . $bdw_right . ' ' . $bdw_bottom . ' ' . $bdw_left . ';';
        }
        $shd_css = $shadow ? 'box-shadow:' . $shadow . ';' : '';

        $base_css = $renderer->styles_to_css( $styles );
        $wrap_css = 'background:' . $bg . ';'
                  . 'padding:' . $pad_top . ' ' . $pad_right . ' ' . $pad_bottom . ' ' . $pad_left . ';'
                  . 'border-radius:' . $br_top . ' ' . $br_right . ' ' . $br_bottom . ' ' . $br_left . ';'
                  . 'text-align:' . $align . ';' . $bd_css . $shd_css;
        $renderer->add_css( $prefix . '{display:block;' . $base_css . $wrap_css . '}' );

        $bg_h     = esc_attr( $raw( 'cta_bg_hover' ) );
        $bd_col_h = esc_attr( $raw( 'cta_bd_color_hover' ) );
        $w_hcss   = '';
        if ( $bg_h     ) $w_hcss .= 'background:' . $bg_h . ';';
        if ( $bd_col_h && $bd_type !== 'none' ) $w_hcss .= 'border-color:' . $bd_col_h . ';';
        if ( $w_hcss ) {
            $renderer->add_css( $prefix . ':hover{transition:background .25s,border-color .25s;' . $w_hcss . '}' );
        }

        // ── Actions alignment ─────────────────────────────────────────────────
        $renderer->add_css( $prefix . ' .jalpi-cta__actions{display:flex;gap:12px;justify-content:' . esc_attr( $btn_just ) . ';flex-wrap:wrap;}' );

        // ── Title ─────────────────────────────────────────────────────────────
        $title_color = esc_attr( $raw( 'cta_title_color', '#ffffff' ) );
        $title_typo  = $typo_css( 'cta_title', [ 'fontSize' => '26px', 'fontWeight' => '700', 'lineHeight' => '1.3' ] );
        $renderer->add_css( $prefix . ' .jalpi-cta__title{color:' . $title_color . ';margin:0 0 12px;' . $title_typo . '}' );

        // ── Subtitle ──────────────────────────────────────────────────────────
        $sub_color = esc_attr( $raw( 'cta_sub_color', 'rgba(255,255,255,0.8)' ) );
        $sub_typo  = $typo_css( 'cta_sub', [ 'fontSize' => '16px', 'fontWeight' => '400', 'lineHeight' => '1.6' ] );
        $renderer->add_css( $prefix . ' .jalpi-cta__subtitle{color:' . $sub_color . ';margin:0 0 28px;' . $sub_typo . '}' );

        // ── Primary Button ────────────────────────────────────────────────────
        $pb_bg          = esc_attr( $raw( 'cta_pbtn_bg',         '#ffffff'     ) );
        $pb_color       = esc_attr( $raw( 'cta_pbtn_color',      '#1a1a1a'     ) );
        $pb_pad_top     = esc_attr( $dpx( $raw( 'cta_pbtn_pad_top',    '12px'        ) ) );
        $pb_pad_right   = esc_attr( $dpx( $raw( 'cta_pbtn_pad_right',  '28px'        ) ) );
        $pb_pad_bottom  = esc_attr( $dpx( $raw( 'cta_pbtn_pad_bottom', '12px'        ) ) );
        $pb_pad_left    = esc_attr( $dpx( $raw( 'cta_pbtn_pad_left',   '28px'        ) ) );
        $pb_br_top      = esc_attr( $dpx( $raw( 'cta_pbtn_br_top',     '7px'         ) ) );
        $pb_br_right    = esc_attr( $dpx( $raw( 'cta_pbtn_br_right',   '7px'         ) ) );
        $pb_br_bottom   = esc_attr( $dpx( $raw( 'cta_pbtn_br_bottom',  '7px'         ) ) );
        $pb_br_left     = esc_attr( $dpx( $raw( 'cta_pbtn_br_left',    '7px'         ) ) );
        $pb_bd_t        = $raw( 'cta_pbtn_bd_type', 'none' );
        $pb_bdw_top     = esc_attr( $dpx( $raw( 'cta_pbtn_bdw_top',    '1px'         ) ) );
        $pb_bdw_right   = esc_attr( $dpx( $raw( 'cta_pbtn_bdw_right',  '1px'         ) ) );
        $pb_bdw_bottom  = esc_attr( $dpx( $raw( 'cta_pbtn_bdw_bottom', '1px'         ) ) );
        $pb_bdw_left    = esc_attr( $dpx( $raw( 'cta_pbtn_bdw_left',   '1px'         ) ) );
        $pb_bd_c        = esc_attr( $raw( 'cta_pbtn_bd_color',   'transparent' ) );
        $pb_shadow      = esc_attr( $raw( 'cta_pbtn_shadow' ) );
        $pb_typo        = $typo_css( 'cta_pbtn', [ 'fontSize' => '15px', 'fontWeight' => '700' ] );
        if ( $pb_bd_t && $pb_bd_t !== 'none' ) {
            $pb_bd_css = 'border:' . $pb_bdw_top . ' ' . esc_attr( $pb_bd_t ) . ' ' . $pb_bd_c . ';'
                       . 'border-width:' . $pb_bdw_top . ' ' . $pb_bdw_right . ' ' . $pb_bdw_bottom . ' ' . $pb_bdw_left . ';';
        } else {
            $pb_bd_css = 'border:none;';
        }
        $pb_shd = $pb_shadow ? 'box-shadow:' . $pb_shadow . ';' : '';
        $renderer->add_css( $prefix . ' .jalpi-cta__btn--primary{display:inline-flex;align-items:center;justify-content:center;'
            . 'background:' . $pb_bg . ';color:' . $pb_color . ';'
            . 'padding:' . $pb_pad_top . ' ' . $pb_pad_right . ' ' . $pb_pad_bottom . ' ' . $pb_pad_left . ';'
            . 'border-radius:' . $pb_br_top . ' ' . $pb_br_right . ' ' . $pb_br_bottom . ' ' . $pb_br_left . ';'
            . $pb_bd_css . $pb_shd . $pb_typo
            . 'text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,box-shadow .2s;}' );

        $pb_bg_h  = esc_attr( $raw( 'cta_pbtn_bg_hover' ) );
        $pb_col_h = esc_attr( $raw( 'cta_pbtn_color_hover' ) );
        $pb_bdc_h = esc_attr( $raw( 'cta_pbtn_bd_color_hover' ) );
        $pb_hcss  = '';
        if ( $pb_bg_h  ) $pb_hcss .= 'background:' . $pb_bg_h . ';';
        if ( $pb_col_h ) $pb_hcss .= 'color:' . $pb_col_h . ';';
        if ( $pb_bdc_h && $pb_bd_t !== 'none' ) $pb_hcss .= 'border-color:' . $pb_bdc_h . ';';
        if ( $pb_hcss ) {
            $renderer->add_css( $prefix . ' .jalpi-cta__btn--primary:hover{' . $pb_hcss . '}' );
        }

        // ── Secondary Button ──────────────────────────────────────────────────
        $sb_bg          = esc_attr( $raw( 'cta_sbtn_bg',         'rgba(255,255,255,0.12)' ) );
        $sb_color       = esc_attr( $raw( 'cta_sbtn_color',      '#ffffff'                ) );
        $sb_pad_top     = esc_attr( $dpx( $raw( 'cta_sbtn_pad_top',    '12px'                   ) ) );
        $sb_pad_right   = esc_attr( $dpx( $raw( 'cta_sbtn_pad_right',  '28px'                   ) ) );
        $sb_pad_bottom  = esc_attr( $dpx( $raw( 'cta_sbtn_pad_bottom', '12px'                   ) ) );
        $sb_pad_left    = esc_attr( $dpx( $raw( 'cta_sbtn_pad_left',   '28px'                   ) ) );
        $sb_br_top      = esc_attr( $dpx( $raw( 'cta_sbtn_br_top',     '7px'                    ) ) );
        $sb_br_right    = esc_attr( $dpx( $raw( 'cta_sbtn_br_right',   '7px'                    ) ) );
        $sb_br_bottom   = esc_attr( $dpx( $raw( 'cta_sbtn_br_bottom',  '7px'                    ) ) );
        $sb_br_left     = esc_attr( $dpx( $raw( 'cta_sbtn_br_left',    '7px'                    ) ) );
        $sb_bd_t        = $raw( 'cta_sbtn_bd_type', 'solid' );
        $sb_bdw_top     = esc_attr( $dpx( $raw( 'cta_sbtn_bdw_top',    '1px'                    ) ) );
        $sb_bdw_right   = esc_attr( $dpx( $raw( 'cta_sbtn_bdw_right',  '1px'                    ) ) );
        $sb_bdw_bottom  = esc_attr( $dpx( $raw( 'cta_sbtn_bdw_bottom', '1px'                    ) ) );
        $sb_bdw_left    = esc_attr( $dpx( $raw( 'cta_sbtn_bdw_left',   '1px'                    ) ) );
        $sb_bd_c        = esc_attr( $raw( 'cta_sbtn_bd_color',   'rgba(255,255,255,0.3)'  ) );
        // Sanitize shadow value to prevent CSS injection using strict validation
        $sb_shadow_raw  = $raw( 'cta_sbtn_shadow' );
        $sb_shadow      = $sb_shadow_raw ? Jalpi_Sanitizer::sanitize_css_value( $sb_shadow_raw ) : '';
        $sb_typo        = $typo_css( 'cta_sbtn', [ 'fontSize' => '15px', 'fontWeight' => '600' ] );
        if ( $sb_bd_t && $sb_bd_t !== 'none' ) {
            $sb_bd_css = 'border:' . $sb_bdw_top . ' ' . esc_attr( $sb_bd_t ) . ' ' . $sb_bd_c . ';'
                       . 'border-width:' . $sb_bdw_top . ' ' . $sb_bdw_right . ' ' . $sb_bdw_bottom . ' ' . $sb_bdw_left . ';';
        } else {
            $sb_bd_css = 'border:none;';
        }
        $sb_shd = $sb_shadow ? 'box-shadow:' . $sb_shadow . ';' : '';
        $renderer->add_css( $prefix . ' .jalpi-cta__btn--secondary{display:inline-flex;align-items:center;justify-content:center;'
            . 'background:' . $sb_bg . ';color:' . $sb_color . ';'
            . 'padding:' . $sb_pad_top . ' ' . $sb_pad_right . ' ' . $sb_pad_bottom . ' ' . $sb_pad_left . ';'
            . 'border-radius:' . $sb_br_top . ' ' . $sb_br_right . ' ' . $sb_br_bottom . ' ' . $sb_br_left . ';'
            . $sb_bd_css . $sb_shd . $sb_typo
            . 'text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,box-shadow .2s;}' );

        $sb_bg_h  = esc_attr( $raw( 'cta_sbtn_bg_hover' ) );
        $sb_col_h = esc_attr( $raw( 'cta_sbtn_color_hover' ) );
        $sb_bdc_h = esc_attr( $raw( 'cta_sbtn_bd_color_hover' ) );
        $sb_hcss  = '';
        if ( $sb_bg_h  ) $sb_hcss .= 'background:' . $sb_bg_h . ';';
        if ( $sb_col_h ) $sb_hcss .= 'color:' . $sb_col_h . ';';
        if ( $sb_bdc_h && $sb_bd_t !== 'none' ) $sb_hcss .= 'border-color:' . $sb_bdc_h . ';';
        if ( $sb_hcss ) {
            $renderer->add_css( $prefix . ' .jalpi-cta__btn--secondary:hover{' . $sb_hcss . '}' );
        }

        // ── HTML ──────────────────────────────────────────────────────────────
        $title        = esc_html( $content['title']         ?? '' );
        $subtitle     = wp_kses_post( $content['subtitle']  ?? '' );
        $primary_text = esc_html( $content['primaryText']   ?? __( 'Get Started', 'jalpi-page-builder' ) );
        $primary_url  = esc_url(  $content['primaryUrl']    ?? '#' );
        $sec_text     = esc_html( $content['secondaryText'] ?? '' );
        $sec_url      = esc_url(  $content['secondaryUrl']  ?? '#' );

        $sec_btn = $sec_text
            ? '<a href="' . $sec_url . '" class="jalpi-cta__btn jalpi-cta__btn--secondary">' . $sec_text . '</a>'
            : '';

        return '<div class="jalpi-el jalpi-cta jalpi-' . esc_attr( $id ) . $a['extra_cls'] . '"' . $a['id_attr'] . '>'
             . ( $title    ? '<h2 class="jalpi-cta__title">'   . $title    . '</h2>' : '' )
             . ( $subtitle ? '<p class="jalpi-cta__subtitle">' . $subtitle . '</p>'  : '' )
             . '<div class="jalpi-cta__actions">'
             .   '<a href="' . $primary_url . '" class="jalpi-cta__btn jalpi-cta__btn--primary">' . $primary_text . '</a>'
             .   $sec_btn
             . '</div>'
             . '</div>';
    }
}
