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

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

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

        $sel   = ".jalpi-column.jalpi-{$id}";
        $width = sanitize_text_field( $settings['width']     ?? '50%' );
        $align = sanitize_text_field( $settings['alignSelf'] ?? '' );

        // flex-shrink:1 lets the column absorb the container gap.
        // width:{$width} explicitly overrides the width:100% from frontend.css.
        $css  = "{$sel}{width:{$width};flex:0 1 {$width};min-width:0;max-width:{$width};box-sizing:border-box;";
        if ( $align ) { $css .= "align-self:{$align};"; }

        // Columns render as plain blocks by default, so their children stack to
        // whatever height the content needs. In an equal-height card row
        // (container flexAlign:stretch) that leaves trailing elements — social
        // icons, buttons — sitting at different heights when one card's copy
        // wraps to an extra line. Opting a column into flex lets those be
        // pinned to a common baseline. Mirrors the container's own settings.
        $col_layout = sanitize_text_field( $settings['layoutMode'] ?? '' );
        if ( 'flex' === $col_layout ) {
            $dir_raw   = sanitize_text_field( $settings['flexDirection'] ?? 'column' );
            $col_dir   = in_array( $dir_raw, [ 'row', 'column', 'row-reverse', 'column-reverse' ], true ) ? $dir_raw : 'column';
            $ali_raw   = sanitize_text_field( $settings['flexAlign'] ?? '' );
            $jus_raw   = sanitize_text_field( $settings['flexJustify'] ?? '' );
            $allow_ali = [ 'flex-start', 'flex-end', 'center', 'stretch', 'baseline' ];
            $allow_jus = [ 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly' ];
            $css .= "display:flex;flex-direction:{$col_dir};";
            if ( in_array( $ali_raw, $allow_ali, true ) ) { $css .= "align-items:{$ali_raw};"; }
            if ( in_array( $jus_raw, $allow_jus, true ) ) { $css .= "justify-content:{$jus_raw};"; }
            $col_gap = Jalpi_Sanitizer::sanitize_dimension( (string) ( $settings['flexGap'] ?? '' ) );
            if ( $col_gap ) { $css .= "gap:{$col_gap};"; }
        }

        $css .= $renderer->bg_data_to_css( $settings['bgNormal'] ?? [] );
        $css .= $renderer->border_data_to_css( $settings['borderNormal'] ?? [] );

        $ov = $settings['overlayNormal'] ?? [];
        if ( ! empty( $ov['color'] ) || ! empty( $ov['imageUrl'] ) || ! empty( $ov['gradient'] ) ) {
            $css .= 'position:relative;';
        }

        $css .= $renderer->styles_to_css( $styles );
        $css .= '}';

        $hover_css = $renderer->bg_data_to_css( $settings['bgHover'] ?? [] )
                   . $renderer->border_data_to_css( $settings['borderHover'] ?? [] );
        if ( $hover_css ) { $css .= "{$sel}:hover{{$hover_css}}"; }

        if ( ! empty( $ov['color'] ) || ! empty( $ov['imageUrl'] ) || ! empty( $ov['gradient'] ) ) {
            $css .= "{$sel} .jalpi-column-overlay{position:absolute;inset:0;pointer-events:none;z-index:0;"
                  . $renderer->bg_data_to_css( $ov )
                  . 'opacity:' . floatval( $ov['opacity'] ?? 0.5 ) . ';}';
            // Lift column children above the overlay so content remains visible
            $css .= "{$sel}>:not(.jalpi-column-overlay){position:relative;z-index:1;}";
        }

        $renderer->add_css( $css );

        // Also resolves any attached reusable classes (Class-Based Styling System).
        $attrs     = $renderer->get_css_attrs( $node );
        $class     = 'jalpi-column jalpi-' . $id . $attrs['extra_cls'];
        $id_attr   = $attrs['id_attr'];

        // Inline flex sizing — beats any theme CSS that sets width:100% on divs
        $inline_style = ' style="width:' . esc_attr( $width ) . ';flex:0 1 ' . esc_attr( $width )
                      . ';min-width:0;max-width:' . esc_attr( $width ) . ';box-sizing:border-box;"';

        $overlay_html = ( ! empty( $ov['color'] ) || ! empty( $ov['imageUrl'] ) || ! empty( $ov['gradient'] ) )
            ? '<div class="jalpi-column-overlay" aria-hidden="true"></div>' : '';

        return '<div class="' . esc_attr( $class ) . '"' . $id_attr . $inline_style . '>'
             . $overlay_html
             . $renderer->render_children( $node )
             . '</div>';
    }
}
