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

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

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

        // ── Helpers ───────────────────────────────────────────────────
        $dim = fn( $v, $d = '' ) => ( $v && $v !== '' ) ? (string) $v : $d;
        $col = fn( $v, $d = '' ) => ( $v && $v !== '' ) ? (string) $v : $d;

        // ── Layout & container ────────────────────────────────────────
        $layout     = $settings['faq_layout']        ?? 'boxed';
        $item_gap   = $dim( $settings['faq_item_gap'] ?? '' );
        $multi_open = ! empty( $settings['faq_multiple_open'] );
        $anim_dur   = $dim( $settings['faq_anim_dur']  ?? '', '0.3s' );
        $anim_ease  = $settings['faq_anim_ease'] ?? 'ease';

        // ── Icon ──────────────────────────────────────────────────────
        $icon          = $settings['faq_icon']             ?? 'chevron';
        $icon_pos      = $settings['faq_icon_pos']         ?? 'right';
        $icon_size     = $dim( $settings['faq_icon_size']       ?? '', '20px' );
        $icon_color    = $col( $settings['faq_icon_color']      ?? '' );
        $icon_act_col  = $col( $settings['faq_icon_active_color'] ?? '' );

        // ── Question typography ───────────────────────────────────────
        $q_color    = $col( $settings['faq_q_color']        ?? '' );
        $q_act_col  = $col( $settings['faq_q_active_color'] ?? '' );
        $q_hov_col  = $col( $settings['faq_q_hover_color']  ?? '' );
        $q_family   = sanitize_text_field( $settings['faq_q_fontFamily']    ?? '' );
        $q_size     = $dim( $settings['faq_q_fontSize']     ?? '' );
        $q_weight   = $settings['faq_q_fontWeight']  ?? '';
        $q_style    = $settings['faq_q_fontStyle']   ?? '';
        $q_transform = $settings['faq_q_textTransform'] ?? '';
        $q_decor    = $settings['faq_q_textDecoration'] ?? '';
        $q_lh       = $dim( $settings['faq_q_lineHeight']    ?? '' );
        $q_ls       = $dim( $settings['faq_q_letterSpacing'] ?? '' );
        $q_pad_v    = $dim( $settings['faq_q_pad_v'] ?? '' );
        $q_pad_h    = $dim( $settings['faq_q_pad_h'] ?? '' );

        // ── Answer typography ─────────────────────────────────────────
        $a_color    = $col( $settings['faq_a_color']       ?? '' );
        $a_family   = sanitize_text_field( $settings['faq_a_fontFamily']   ?? '' );
        $a_size     = $dim( $settings['faq_a_fontSize']    ?? '' );
        $a_weight   = $settings['faq_a_fontWeight'] ?? '';
        $a_style    = $settings['faq_a_fontStyle']  ?? '';
        $a_transform = $settings['faq_a_textTransform'] ?? '';
        $a_decor    = $settings['faq_a_textDecoration'] ?? '';
        $a_lh       = $dim( $settings['faq_a_lineHeight']    ?? '' );
        $a_ls       = $dim( $settings['faq_a_letterSpacing'] ?? '' );
        $a_pad_v    = $dim( $settings['faq_a_pad_v'] ?? '' );
        $a_pad_h    = $dim( $settings['faq_a_pad_h'] ?? '' );

        // ── Item styling ──────────────────────────────────────────────
        $item_bg      = $col( $settings['faq_item_bg']              ?? '' );
        $item_act_bg  = $col( $settings['faq_item_active_bg']       ?? '' );
        $item_hov_bg  = $col( $settings['faq_item_hover_bg']        ?? '' );
        $item_bd_type = $settings['faq_item_bd_type']               ?? '';
        $item_bd_col  = $col( $settings['faq_item_bd_color']        ?? '' );
        $item_act_bd  = $col( $settings['faq_item_active_bd_color'] ?? '' );
        $item_bd_w    = $dim( $settings['faq_item_bd_width']        ?? '', '1px' );
        $item_br      = $dim( $settings['faq_item_br']              ?? '' );
        $item_pad_v   = $dim( $settings['faq_item_pad_v'] ?? '' );
        $item_pad_h   = $dim( $settings['faq_item_pad_h'] ?? '' );
        $item_shadow  = $settings['faq_item_shadow']        ?? '';
        $item_act_shd = $settings['faq_item_active_shadow'] ?? '';
        $item_hov_shd = $settings['faq_item_hover_shadow']  ?? '';

        // ── CSS Generation ────────────────────────────────────────────

        // Container
        $cont_css = 'display:flex;flex-direction:column;';
        if ( $item_gap && in_array( $layout, ['boxed','separated','minimal'], true ) ) {
            $cont_css .= 'gap:' . esc_attr( $item_gap ) . ';';
        }
        $cont_css .= $renderer->styles_to_css( $styles );
        $renderer->add_css( $prefix . '{' . $cont_css . '}' );

        // Animation timing
        $renderer->add_css( $prefix . ' .jalpi-faq__body{transition-duration:'
            . esc_attr( $anim_dur ) . ';transition-timing-function:' . esc_attr( $anim_ease ) . ';}' );

        // Item base
        $item_css = '';
        if ( $item_bg     ) $item_css .= 'background:' . esc_attr( $item_bg ) . ';';
        if ( $item_bd_type && $item_bd_type !== 'none' ) {
            $item_css .= 'border:' . esc_attr( $item_bd_w ) . ' ' . esc_attr( $item_bd_type )
                       . ' ' . esc_attr( $item_bd_col ?: '#e5e7eb' ) . ';';
        }
        if ( $item_br     ) $item_css .= 'border-radius:' . esc_attr( $item_br ) . ';';
        if ( $item_shadow ) $item_css .= 'box-shadow:' . esc_attr( $item_shadow ) . ';';
        if ( $item_pad_v || $item_pad_h ) {
            $pv = $item_pad_v ?: '0'; $ph = $item_pad_h ?: '0';
            $item_css .= 'padding:' . esc_attr($pv) . ' ' . esc_attr($ph) . ';';
        }
        if ( $item_css ) $renderer->add_css( $prefix . ' .jalpi-faq__item{' . $item_css . '}' );

        // Item hover
        $hov_css = '';
        if ( $item_hov_bg  ) $hov_css .= 'background:' . esc_attr( $item_hov_bg ) . ';';
        if ( $item_hov_shd ) $hov_css .= 'box-shadow:' . esc_attr( $item_hov_shd ) . ';';
        if ( $hov_css ) $renderer->add_css( $prefix . ' .jalpi-faq__item:hover{' . $hov_css . '}' );

        // Item active (open)
        $act_css = '';
        if ( $item_act_bg  ) $act_css .= 'background:' . esc_attr( $item_act_bg ) . ';';
        if ( $item_act_bd  ) $act_css .= 'border-color:' . esc_attr( $item_act_bd ) . ';';
        if ( $item_act_shd ) $act_css .= 'box-shadow:' . esc_attr( $item_act_shd ) . ';';
        if ( $act_css ) $renderer->add_css( $prefix . ' .jalpi-faq__item.is-open{' . $act_css . '}' );

        // Question
        $q_css = '';
        if ( $q_color     ) $q_css .= 'color:' . esc_attr( $q_color ) . ';';
        if ( $q_family    ) $q_css .= 'font-family:' . esc_attr( $q_family ) . ';';
        if ( $q_size      ) $q_css .= 'font-size:' . esc_attr( $q_size ) . ';';
        if ( $q_weight    ) $q_css .= 'font-weight:' . esc_attr( $q_weight ) . ';';
        if ( $q_style && $q_style !== 'normal' ) $q_css .= 'font-style:' . esc_attr( $q_style ) . ';';
        if ( $q_transform && $q_transform !== 'none' ) $q_css .= 'text-transform:' . esc_attr( $q_transform ) . ';';
        if ( $q_decor && $q_decor !== 'none' ) $q_css .= 'text-decoration:' . esc_attr( $q_decor ) . ';';
        if ( $q_lh        ) $q_css .= 'line-height:' . esc_attr( $q_lh ) . ';';
        if ( $q_ls        ) $q_css .= 'letter-spacing:' . esc_attr( $q_ls ) . ';';
        if ( $q_pad_v || $q_pad_h ) {
            $pv = $q_pad_v ?: '18px'; $ph = $q_pad_h ?: '20px';
            $q_css .= 'padding:' . esc_attr($pv) . ' ' . esc_attr($ph) . ';';
        }
        if ( $q_css ) $renderer->add_css( $prefix . ' .jalpi-faq__q{' . $q_css . '}' );

        // Question: active color
        if ( $q_act_col ) $renderer->add_css( $prefix . ' .jalpi-faq__item.is-open .jalpi-faq__q{color:' . esc_attr( $q_act_col ) . ';}' );

        // Question: hover color
        if ( $q_hov_col ) $renderer->add_css( $prefix . ' .jalpi-faq__q:hover{color:' . esc_attr( $q_hov_col ) . ';}' );

        // Answer
        $a_css = '';
        if ( $a_color    ) $a_css .= 'color:' . esc_attr( $a_color ) . ';';
        if ( $a_family   ) $a_css .= 'font-family:' . esc_attr( $a_family ) . ';';
        if ( $a_size     ) $a_css .= 'font-size:' . esc_attr( $a_size ) . ';';
        if ( $a_weight   ) $a_css .= 'font-weight:' . esc_attr( $a_weight ) . ';';
        if ( $a_style && $a_style !== 'normal' ) $a_css .= 'font-style:' . esc_attr( $a_style ) . ';';
        if ( $a_transform && $a_transform !== 'none' ) $a_css .= 'text-transform:' . esc_attr( $a_transform ) . ';';
        if ( $a_decor && $a_decor !== 'none' ) $a_css .= 'text-decoration:' . esc_attr( $a_decor ) . ';';
        if ( $a_lh       ) $a_css .= 'line-height:' . esc_attr( $a_lh ) . ';';
        if ( $a_ls       ) $a_css .= 'letter-spacing:' . esc_attr( $a_ls ) . ';';
        if ( $a_pad_v || $a_pad_h ) {
            $pv = $a_pad_v ?: ''; $ph = $a_pad_h ?: '20px';
            $a_css .= 'padding:0 ' . esc_attr($ph) . ' ' . esc_attr( $pv ?: '20px' ) . ';';
        }
        if ( $a_css ) $renderer->add_css( $prefix . ' .jalpi-faq__a{' . $a_css . '}' );

        // Icon
        $icon_css = '';
        if ( $icon_size !== '20px' ) $icon_css .= 'width:' . esc_attr($icon_size) . ';height:' . esc_attr($icon_size) . ';';
        if ( $icon_color ) $icon_css .= 'color:' . esc_attr( $icon_color ) . ';';
        if ( $icon_css ) $renderer->add_css( $prefix . ' .jalpi-faq__icon{' . $icon_css . '}' );

        if ( $icon_act_col ) $renderer->add_css( $prefix . ' .jalpi-faq__item.is-open .jalpi-faq__icon{color:' . esc_attr( $icon_act_col ) . ';}' );

        // ── Icon SVGs ─────────────────────────────────────────────────
        $svgs = [
            'chevron' => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>',
            'arrow'   => '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
        ];

        // ── HTML Generation ───────────────────────────────────────────
        $layout_cls  = 'jalpi-faq--' . esc_attr( $layout );
        $pos_cls     = $icon_pos === 'left' ? ' jalpi-faq--icon-left' : '';
        $multi_attr  = $multi_open ? ' data-faq-multi="1"' : '';

        $html = '';
        foreach ( $items as $item ) {
            $question   = esc_html( $item['question'] ?? '' );
            $answer     = wp_kses_post( $item['answer'] ?? '' );
            $open_cls   = ! empty( $item['defaultOpen'] ) ? ' is-open' : '';
            $aria_exp   = ! empty( $item['defaultOpen'] ) ? 'true' : 'false';

            // Icon HTML
            $icon_html = '';
            if ( $icon !== 'none' ) {
                if ( isset( $svgs[ $icon ] ) ) {
                    $icon_html = '<span class="jalpi-faq__icon jalpi-faq__icon--' . esc_attr($icon) . '" aria-hidden="true">' . $svgs[$icon] . '</span>';
                } else {
                    $icon_html = '<span class="jalpi-faq__icon jalpi-faq__icon--' . esc_attr($icon) . '" aria-hidden="true"></span>';
                }
            }

            $html .= '<div class="jalpi-faq__item' . $open_cls . '">'
                   .   '<button class="jalpi-faq__q" aria-expanded="' . $aria_exp . '" type="button">'
                   .     '<span class="jalpi-faq__q-text">' . $question . '</span>'
                   .     $icon_html
                   .   '</button>'
                   .   '<div class="jalpi-faq__body"><div class="jalpi-faq__inner">'
                   .     '<div class="jalpi-faq__a">' . $answer . '</div>'
                   .   '</div></div>'
                   . '</div>';
        }

        $renderer->set_needs_js( 'faq' );

        return '<div class="jalpi-el jalpi-faq jalpi-' . esc_attr($id) . ' ' . $layout_cls . $pos_cls
             . $a['extra_cls'] . '"' . $a['id_attr'] . $multi_attr . '>' . $html . '</div>';
    }
}
