<?php
/**
 * Vista de Componente Individual con Breadcrumb
 *
 * @var AdminDashboardRenderer $this
 * @var string $activeComponent ID del componente activo
 * @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;
}

$component = $components[$activeComponent] ?? null;
$groupId = $this->getGroupForComponent($activeComponent);
$group = $groupId && isset($groups[$groupId]) ? $groups[$groupId] : null;
?>

<div id="roi-component-view">
    <!-- Breadcrumb Navigation -->
    <?php include __DIR__ . '/breadcrumb.php'; ?>

    <!-- Component Form Container -->
    <!-- IMPORTANTE: El tab-pane con clase .active es necesario para que el JS
         de handleSaveSettings() pueda encontrar los campos del formulario -->
    <div class="tab-content">
        <div class="tab-pane fade show active"
             id="<?php echo esc_attr($activeComponent); ?>Tab"
             role="tabpanel">

            <div class="roi-component-form-container">
                <?php
                // Renderizar FormBuilder del componente
                $formBuilderClass = $this->getFormBuilderClass($activeComponent);
                if (class_exists($formBuilderClass)) {
                    $formBuilder = new $formBuilderClass($this);
                    echo $formBuilder->buildForm($activeComponent);
                } else {
                    ?>
                    <div class="alert alert-warning">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        <?php
                        echo esc_html(
                            sprintf(
                                /* translators: %s: FormBuilder class name */
                                __('FormBuilder no encontrado: %s', 'roi-theme'),
                                $formBuilderClass
                            )
                        );
                        ?>
                    </div>
                    <?php
                }
                ?>
            </div>

        </div>
    </div>

    <?php
    // Componentes con sistema de guardado propio (CRUD de entidades)
    $componentsWithOwnSaveSystem = ['custom-css-manager'];

    if (!in_array($activeComponent, $componentsWithOwnSaveSystem, true)):
    ?>
    <!-- Botones Globales Save/Cancel -->
    <div class="d-flex justify-content-end gap-2 p-3 rounded border mt-4" style="background-color: #f8f9fa; border-color: #e9ecef !important;">
        <button type="button" class="btn btn-outline-secondary" id="cancelChanges">
            <i class="bi bi-x-circle me-1"></i>
            <?php echo esc_html__('Cancelar', 'roi-theme'); ?>
        </button>
        <button type="button" id="saveSettings" class="btn fw-semibold text-white" style="background-color: #FF8600; border-color: #FF8600;">
            <i class="bi bi-check-circle me-1"></i>
            <?php echo esc_html__('Guardar Cambios', 'roi-theme'); ?>
        </button>
    </div>
    <?php endif; ?>
</div>
