<?php
/**
 * Vista Home: Grupos de componentes con mini-cards (Improved Version)
 *
 * @var AdminDashboardRenderer $this
 * @var array<string, array<string, mixed>> $groups Grupos de componentes
 * @var array<string, array<string, string>> $components Componentes disponibles
 */

declare(strict_types=1);

if (!defined('ABSPATH')) {
    exit;
}
?>

<div id="roi-home-view">
    <!-- Header Mejorado -->
    <div class="roi-home-header">
        <div class="roi-home-header__pattern"></div>
        <div class="roi-home-header__content">
            <div class="roi-home-header__icon-wrapper">
                <i class="bi bi-grid-3x3-gap-fill roi-home-header__icon"></i>
            </div>
            <div class="roi-home-header__text">
                <h1 class="roi-home-header__title">
                    <?php echo esc_html__('Panel de Administración ROI Theme', 'roi-theme'); ?>
                </h1>
                <p class="roi-home-header__subtitle">
                    <?php echo esc_html__('Selecciona un componente para configurarlo y personalizarlo', 'roi-theme'); ?>
                </p>
            </div>
        </div>
    </div>

    <!-- Grid de Grupos Mejorado -->
    <div class="roi-groups-grid">
        <?php
        $delay = 0;
        foreach ($groups as $groupId => $group):
        ?>
            <div class="roi-group-card"
                 data-group-id="<?php echo esc_attr($groupId); ?>"
                 style="animation-delay: <?php echo esc_attr($delay . 's'); ?>">
                <div class="roi-group-card__glow"></div>

                <div class="roi-group-card__header">
                    <div class="roi-group-card__icon-wrapper">
                        <i class="bi <?php echo esc_attr($group['icon']); ?> roi-group-card__icon"></i>
                    </div>
                    <div class="roi-group-card__header-text">
                        <h3 class="roi-group-card__title">
                            <?php echo esc_html($group['label']); ?>
                        </h3>
                        <p class="roi-group-card__description">
                            <?php echo esc_html($group['description']); ?>
                        </p>
                    </div>
                </div>

                <div class="roi-components-grid">
                    <?php foreach ($group['components'] as $componentId): ?>
                        <?php if (isset($components[$componentId])): ?>
                            <?php $component = $components[$componentId]; ?>
                            <button type="button"
                                    class="roi-component-minicard"
                                    data-component-id="<?php echo esc_attr($componentId); ?>"
                                    aria-label="<?php echo esc_attr(
                                        sprintf(
                                            /* translators: %s: component label */
                                            __('Configurar %s', 'roi-theme'),
                                            $component['label']
                                        )
                                    ); ?>">
                                <div class="roi-component-minicard__icon-bg">
                                    <i class="bi <?php echo esc_attr($component['icon']); ?> roi-component-minicard__icon"></i>
                                </div>
                                <span class="roi-component-minicard__label">
                                    <?php echo esc_html($component['label']); ?>
                                </span>
                            </button>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </div>

            </div>
        <?php
        $delay += 0.1;
        endforeach;
        ?>
    </div>
</div>
