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

class Jalpi_Element_Icon_List extends Jalpi_Element {
    public static function type(): string { return 'icon-list'; }

    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'] ?? [] );
        $layout       = sanitize_key( $content['layout']      ?? 'list' );
        $default_icon = $content['defaultIcon'] ?? $content['icon'] ?? 'check';
        $apply_link   = sanitize_key( $content['applyLinkOn'] ?? 'full' );
        $a            = $renderer->get_css_attrs( $node );
        $prefix       = '.jalpi-el.jalpi-' . $id;

        $dim = fn( $v ) => preg_match( '/^\d+(\.\d+)?(px|em|rem|%|vw|vh)$/', (string) $v ) ? $v : '';
        $col = fn( $v ) => preg_match( '/^#[0-9a-fA-F]{3,8}$|^rgba?\(/', (string) $v ) ? $v : '';

        // Wrapper CSS (layout + gap + node styles)
        $il_gap    = $dim( $settings['il_gap'] ?? '' ) ?: '8px';
        $flex_dir  = $layout === 'inline' ? 'row' : 'column';
        $flex_wrap = $layout === 'inline' ? 'wrap' : 'nowrap';
        $renderer->add_css( $prefix . '{list-style:none;margin:0;padding:0;display:flex;flex-direction:' . $flex_dir . ';flex-wrap:' . $flex_wrap . ';gap:' . esc_attr( $il_gap ) . ';' . $renderer->styles_to_css( $styles ) . '}' );

        // Icon CSS
        $icon_color   = $col( $settings['il_icon_color']   ?? '' ) ?: '#6366f1';
        $icon_bg      = $col( $settings['il_icon_bg']      ?? '' ) ?: 'transparent';
        $icon_size    = $dim( $settings['il_icon_size']    ?? '' ) ?: '14px';
        $icon_br      = $dim( $settings['il_icon_br']      ?? '' ) ?: '0px';
        $icon_spacing = $dim( $settings['il_icon_spacing'] ?? '' ) ?: '8px';
        $renderer->add_css( $prefix . ' .jalpi-icon-list__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:' . esc_attr( $icon_size ) . ';height:' . esc_attr( $icon_size ) . ';font-size:' . esc_attr( $icon_size ) . ';color:' . esc_attr( $icon_color ) . ';background:' . esc_attr( $icon_bg ) . ';border-radius:' . esc_attr( $icon_br ) . ';}' );
        $renderer->add_css( $prefix . ' .jalpi-icon-list__item{display:flex;align-items:center;gap:' . esc_attr( $icon_spacing ) . ';}' );

        // Text CSS
        $text_color   = $col( $settings['il_text_color']      ?? '' ) ?: '#374151';
        $text_family  = sanitize_text_field( $settings['il_text_fontFamily']     ?? '' );
        $text_size    = $dim( $settings['il_text_fontSize']    ?? '' ) ?: '14px';
        $text_weight  = sanitize_text_field( $settings['il_text_fontWeight']     ?? '' );
        $text_fstyle  = sanitize_text_field( $settings['il_text_fontStyle']      ?? '' );
        $text_tt      = sanitize_text_field( $settings['il_text_textTransform']  ?? '' );
        $text_td      = sanitize_text_field( $settings['il_text_textDecoration'] ?? '' );
        $text_lh      = $dim( $settings['il_text_lineHeight']    ?? '' );
        $text_ls      = $dim( $settings['il_text_letterSpacing'] ?? '' );
        $text_css     = 'color:' . esc_attr( $text_color ) . ';font-size:' . esc_attr( $text_size ) . ';';
        if ( $text_family  ) $text_css .= 'font-family:'      . esc_attr( $text_family )  . ';';
        if ( $text_weight  ) $text_css .= 'font-weight:'      . esc_attr( $text_weight )  . ';';
        if ( $text_fstyle && $text_fstyle !== 'normal' )  $text_css .= 'font-style:'  . esc_attr( $text_fstyle ) . ';';
        if ( $text_tt     && $text_tt     !== 'none'   )  $text_css .= 'text-transform:'  . esc_attr( $text_tt )     . ';';
        if ( $text_td     && $text_td     !== 'none'   )  $text_css .= 'text-decoration:' . esc_attr( $text_td )     . ';';
        if ( $text_lh     ) $text_css .= 'line-height:'     . esc_attr( $text_lh )     . ';';
        if ( $text_ls     ) $text_css .= 'letter-spacing:'  . esc_attr( $text_ls )     . ';';
        $renderer->add_css( $prefix . ' .jalpi-icon-list__text{' . $text_css . '}' );

        // Divider CSS
        if ( ! empty( $settings['il_divider'] ) ) {
            $div_color  = $col( $settings['il_div_color']  ?? '' ) ?: '#e5e7eb';
            $div_weight = $dim( $settings['il_div_weight'] ?? '' ) ?: '1px';
            $div_style  = in_array( $settings['il_div_style'] ?? 'solid', [ 'solid', 'dashed', 'dotted' ], true ) ? $settings['il_div_style'] : 'solid';
            $renderer->add_css( $prefix . ' .jalpi-icon-list__item:not(:last-child){border-bottom:' . esc_attr( $div_weight ) . ' ' . $div_style . ' ' . esc_attr( $div_color ) . ';padding-bottom:' . esc_attr( $il_gap ) . ';}' );
        }

        // Build list items
        $li_html = '';
        foreach ( $items as $item ) {
            if ( is_string( $item ) ) {
                $item = [ 'text' => $item, 'icon' => '', 'link' => '', 'newTab' => false ];
            }
            $item_text   = esc_html( $item['text'] ?? '' );
            $item_icon_v = ( isset( $item['icon'] ) && $item['icon'] !== '' ) ? $item['icon'] : $default_icon;
            $item_icon   = $renderer->render_icon_value( $item_icon_v );
            $item_link   = esc_url( $item['link'] ?? '' );
            $item_newtab = ! empty( $item['newTab'] );
            $target_attr = $item_newtab ? ' target="_blank" rel="noopener noreferrer"' : '';

            $icon_span = '<span class="jalpi-icon-list__icon" aria-hidden="true">' . $item_icon . '</span>';
            $text_span = '<span class="jalpi-icon-list__text">' . $item_text . '</span>';

            if ( $item_link ) {
                if ( $apply_link === 'icon' ) {
                    $inner = '<a href="' . $item_link . '"' . $target_attr . ' class="jalpi-icon-list__link">' . $icon_span . '</a>' . $text_span;
                } elseif ( $apply_link === 'text' ) {
                    $inner = $icon_span . '<a href="' . $item_link . '"' . $target_attr . ' class="jalpi-icon-list__link">' . $text_span . '</a>';
                } else {
                    $inner = '<a href="' . $item_link . '"' . $target_attr . ' class="jalpi-icon-list__link jalpi-icon-list__link--full">' . $icon_span . $text_span . '</a>';
                }
            } else {
                $inner = $icon_span . $text_span;
            }

            $li_html .= '<li class="jalpi-icon-list__item">' . $inner . '</li>';
        }

        return '<ul class="jalpi-el jalpi-icon-list jalpi-' . esc_attr( $id ) . $a['extra_cls'] . '"' . $a['id_attr'] . '>' . $li_html . '</ul>';
    }
}
