<?php
$id = $attributes['id'] !== '' ? ' id="' . esc_attr( $attributes['id'] ) . '"' : '';

$sectionClass = 'section category-link-panel';
if ( $attributes['background'] !== 'none' ) {
	$sectionClass .= ' has-' . $attributes['background'] . '-background';
}
if ( $attributes['paddingTop'] !== '' ) {
	$sectionClass .= ' ' . $attributes['paddingTop'];
}
if ( $attributes['paddingBottom'] !== '' ) {
	$sectionClass .= ' ' . $attributes['paddingBottom'];
}
if ( $attributes['className'] !== '' ) {
	$sectionClass .= ' ' . $attributes['className'];
}

$columns     = max( 1, intval( $attributes['columns'] ) );
$columnWidth = intval( 12 / $columns );
$columnClass = 'column is-' . $columnWidth . '-desktop is-6-tablet';

$headerLevel = in_array( $attributes['headerLevel'], [ 'h2', 'h3', 'h4' ], true )
	? $attributes['headerLevel']
	: 'h2';

$arrow_icon = '<svg class="clp-icon clp-icon--arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></svg>';

$plus_icon  = '<svg class="clp-icon clp-icon--plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>';

$minus_icon = '<svg class="clp-icon clp-icon--minus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M8 12h8"/></svg>';

/**
 * Render a WordPress nav menu as category-link-panel list items.
 * Top-level items with children become submenu triggers.
 * Top-level items without children become regular arrow links.
 */
if ( ! function_exists( 'clp_render_menu_links' ) ) :
function clp_render_menu_links( $menu_id, $arrow_icon, $plus_icon, $minus_icon ) {
	$items = wp_get_nav_menu_items( (int) $menu_id );
	if ( ! $items ) return '';

	$top_level = [];
	$children  = [];

	foreach ( $items as $item ) {
		if ( ! $item->menu_item_parent || '0' === $item->menu_item_parent ) {
			$top_level[] = $item;
		} else {
			$children[ $item->menu_item_parent ][] = $item;
		}
	}

	$output = '';

	$top_level = array_slice( $top_level, 0, 9 );

	foreach ( $top_level as $parent ) {
		$parent_id = $parent->ID;
		$kids      = $children[ $parent_id ] ?? [];
		$text      = esc_html( $parent->title );
		$url       = esc_url( $parent->url );

		if ( ! empty( $kids ) ) {
			$kids      = array_slice( $kids, 0, 15 );
			$submenu_id = 'clp-submenu-' . esc_attr( $parent_id );
			$output .= '<li class="category-link-panel__item has-submenu">';
			$output .= '<button class="category-link-panel__link-row category-link-panel__submenu-trigger" aria-expanded="false" aria-controls="' . $submenu_id . '">';
			$output .= '<span class="category-link-panel__link-text">' . $text . '</span>';
			$output .= '<span class="clp-icon-wrap">' . $plus_icon . $minus_icon . '</span>';
			$output .= '</button>';
			$output .= '<ul id="' . $submenu_id . '" class="category-link-panel__submenu" hidden>';
			foreach ( $kids as $child ) {
				$child_url  = esc_url( $child->url );
				$child_text = esc_html( $child->title );
				$output .= '<li class="category-link-panel__item">';
				$output .= '<a href="' . $child_url . '" class="category-link-panel__link-row category-link-panel__sublink-row">';
				$output .= '<span class="category-link-panel__link-text">' . $child_text . '</span>';
				$output .= '</a></li>';
			}
			$output .= '</ul></li>';
		} else {
			$output .= '<li class="category-link-panel__item">';
			$output .= '<a href="' . $url . '" class="category-link-panel__link-row">';
			$output .= '<span class="category-link-panel__link-text">' . $text . '</span>';
			$output .= $arrow_icon;
			$output .= '</a></li>';
		}
	}

	return $output;
}
endif;
?>
<section<?= $id; ?> class="<?= esc_attr( $sectionClass ); ?>">
	<div class="container">
		<?php if ( $attributes['header'] !== '' ) : ?>
			<div class="category-link-panel__header">
				<<?= $headerLevel; ?> class="category-link-panel__section-heading tagged-header tagged-header--gold">
					<?= esc_html( $attributes['header'] ); ?>
				</<?= $headerLevel; ?>>
			</div>
		<?php endif; ?>

		<div class="columns is-multiline category-link-panel__grid">
			<?php foreach ( $attributes['panels'] as $panel ) :
				$panelHeading = $panel['heading'] ?? '';
				$menuId       = intval( $panel['menuId'] ?? 0 );
				if ( $panelHeading === '' && $menuId === 0 ) continue;
			?>
			<div class="<?= esc_attr( $columnClass ); ?> category-link-panel__column">
				<nav class="category-link-panel__card" aria-label="<?= esc_attr( $panelHeading ); ?>">
					<?php if ( $panelHeading !== '' ) : ?>
					<h3 class="category-link-panel__card-heading">
						<?php if ( ! empty( $panel['headingURL'] ) ) : ?>
							<a href="<?= esc_url( $panel['headingURL'] ); ?>">
								<?= esc_html( $panelHeading ); ?>
								<svg class="clp-icon clp-icon--heading-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></svg>
							</a>
						<?php else : ?>
							<?= esc_html( $panelHeading ); ?>
						<?php endif; ?>
					</h3>
					<?php endif; ?>

					<?php if ( $menuId > 0 ) : ?>
					<ul class="category-link-panel__links">
						<?= clp_render_menu_links( $menuId, $arrow_icon, $plus_icon, $minus_icon ); ?>
					</ul>
					<?php endif; ?>
				</nav>
			</div>
			<?php endforeach; ?>
		</div>
	</div>
</section>
