<?php
declare(strict_types=1);

namespace ROITheme\Admin\TableOfContents\Infrastructure\Ui;

use ROITheme\Admin\Infrastructure\Ui\AdminDashboardRenderer;
use ROITheme\Admin\Shared\Infrastructure\Ui\ExclusionFormPartial;

/**
 * FormBuilder para la Tabla de Contenido
 *
 * Responsabilidad:
 * - Generar HTML del formulario de configuracion
 * - Usar Design System (Bootstrap 5)
 * - Cargar valores desde BD via AdminDashboardRenderer
 *
 * @package ROITheme\Admin\TableOfContents\Infrastructure\Ui
 */
final class TableOfContentsFormBuilder
{
    public function __construct(
        private AdminDashboardRenderer $renderer
    ) {}

    public function buildForm(string $componentId): string
    {
        $html = '';

        $html .= $this->buildHeader($componentId);

        $html .= '<div class="row g-3">';

        // Columna izquierda
        $html .= '<div class="col-lg-6">';
        $html .= $this->buildVisibilityGroup($componentId);
        $html .= $this->buildContentGroup($componentId);
        $html .= $this->buildBehaviorGroup($componentId);
        $html .= $this->buildEffectsGroup($componentId);
        $html .= '</div>';

        // Columna derecha
        $html .= '<div class="col-lg-6">';
        $html .= $this->buildTypographyGroup($componentId);
        $html .= $this->buildColorsGroup($componentId);
        $html .= $this->buildSpacingGroup($componentId);
        $html .= '</div>';

        $html .= '</div>';

        return $html;
    }

    private function buildHeader(string $componentId): string
    {
        $html = '<div class="rounded p-4 mb-4 shadow text-white" ';
        $html .= 'style="background: linear-gradient(135deg, #0E2337 0%, #1e3a5f 100%); border-left: 4px solid #FF8600;">';
        $html .= '    <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">';
        $html .= '        <div>';
        $html .= '            <h3 class="h4 mb-1 fw-bold">';
        $html .= '                <i class="bi bi-list-nested me-2" style="color: #FF8600;"></i>';
        $html .= '                Configuracion de Tabla de Contenido';
        $html .= '            </h3>';
        $html .= '            <p class="mb-0 small" style="opacity: 0.85;">';
        $html .= '                Navegacion automatica con ScrollSpy';
        $html .= '            </p>';
        $html .= '        </div>';
        $html .= '        <button type="button" class="btn btn-sm btn-outline-light btn-reset-defaults" data-component="table-of-contents">';
        $html .= '            <i class="bi bi-arrow-counterclockwise me-1"></i>';
        $html .= '            Restaurar valores por defecto';
        $html .= '        </button>';
        $html .= '    </div>';
        $html .= '</div>';

        return $html;
    }

    private function buildVisibilityGroup(string $componentId): string
    {
        $html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
        $html .= '    <div class="card-body">';
        $html .= '        <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
        $html .= '            <i class="bi bi-toggle-on me-2" style="color: #FF8600;"></i>';
        $html .= '            Visibilidad';
        $html .= '        </h5>';

        // is_enabled
        $enabled = $this->renderer->getFieldValue($componentId, 'visibility', 'is_enabled', true);
        $html .= $this->buildSwitch('tocEnabled', 'Activar tabla de contenido', 'bi-power', $enabled);

        // show_on_desktop
        $showOnDesktop = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_desktop', true);
        $html .= $this->buildSwitch('tocShowOnDesktop', 'Mostrar en escritorio', 'bi-display', $showOnDesktop);

        // show_on_mobile
        $showOnMobile = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_mobile', false);
        $html .= $this->buildSwitch('tocShowOnMobile', 'Mostrar en movil', 'bi-phone', $showOnMobile);

        // =============================================
        // Checkboxes de visibilidad por tipo de página
        // Grupo especial: _page_visibility
        // =============================================
        $html .= '        <hr class="my-3">';
        $html .= '        <p class="small fw-semibold mb-2">';
        $html .= '            <i class="bi bi-eye me-1" style="color: #FF8600;"></i>';
        $html .= '            Mostrar en tipos de pagina';
        $html .= '        </p>';

        $showOnHome = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_home', false);
        $showOnPosts = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_posts', true);
        $showOnPages = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_pages', true);
        $showOnArchives = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_archives', false);
        $showOnSearch = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_search', false);

        $html .= '        <div class="row g-2">';
        $html .= '            <div class="col-md-4">';
        $html .= $this->buildPageVisibilityCheckbox('tocVisibilityHome', 'Home', 'bi-house', $showOnHome);
        $html .= '            </div>';
        $html .= '            <div class="col-md-4">';
        $html .= $this->buildPageVisibilityCheckbox('tocVisibilityPosts', 'Posts', 'bi-file-earmark-text', $showOnPosts);
        $html .= '            </div>';
        $html .= '            <div class="col-md-4">';
        $html .= $this->buildPageVisibilityCheckbox('tocVisibilityPages', 'Paginas', 'bi-file-earmark', $showOnPages);
        $html .= '            </div>';
        $html .= '            <div class="col-md-4">';
        $html .= $this->buildPageVisibilityCheckbox('tocVisibilityArchives', 'Archivos', 'bi-archive', $showOnArchives);
        $html .= '            </div>';
        $html .= '            <div class="col-md-4">';
        $html .= $this->buildPageVisibilityCheckbox('tocVisibilitySearch', 'Busqueda', 'bi-search', $showOnSearch);
        $html .= '            </div>';
        $html .= '        </div>';

        // =============================================
        // Reglas de exclusion avanzadas
        // Grupo especial: _exclusions (Plan 99.11)
        // =============================================
        $exclusionPartial = new ExclusionFormPartial($this->renderer);
        $html .= $exclusionPartial->render($componentId, 'toc');

        $html .= '    </div>';
        $html .= '</div>';

        return $html;
    }

    private function buildContentGroup(string $componentId): string
    {
        $html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
        $html .= '    <div class="card-body">';
        $html .= '        <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
        $html .= '            <i class="bi bi-card-text me-2" style="color: #FF8600;"></i>';
        $html .= '            Contenido';
        $html .= '        </h5>';

        // title
        $title = $this->renderer->getFieldValue($componentId, 'content', 'title', 'Tabla de Contenido');
        $html .= '        <div class="mb-3">';
        $html .= '            <label for="tocTitle" class="form-label small mb-1 fw-semibold">';
        $html .= '                <i class="bi bi-type me-1" style="color: #FF8600;"></i>';
        $html .= '                Titulo';
        $html .= '            </label>';
        $html .= '            <input type="text" id="tocTitle" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($title) . '" placeholder="Tabla de Contenido">';
        $html .= '        </div>';

        // auto_generate
        $autoGenerate = $this->renderer->getFieldValue($componentId, 'content', 'auto_generate', true);
        $html .= $this->buildSwitch('tocAutoGenerate', 'Generar automaticamente', 'bi-magic', $autoGenerate);
        $html .= '        <small class="text-muted d-block mb-3">Genera TOC desde los encabezados del contenido</small>';

        // heading_levels
        $headingLevels = $this->renderer->getFieldValue($componentId, 'content', 'heading_levels', 'h2,h3');
        $html .= '        <div class="mb-3">';
        $html .= '            <label for="tocHeadingLevels" class="form-label small mb-1 fw-semibold">';
        $html .= '                <i class="bi bi-list-ol me-1" style="color: #FF8600;"></i>';
        $html .= '                Niveles de encabezados';
        $html .= '            </label>';
        $html .= '            <input type="text" id="tocHeadingLevels" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($headingLevels) . '" placeholder="h2,h3">';
        $html .= '            <small class="text-muted">Separados por coma: h2,h3,h4</small>';
        $html .= '        </div>';

        // smooth_scroll
        $smoothScroll = $this->renderer->getFieldValue($componentId, 'content', 'smooth_scroll', true);
        $html .= $this->buildSwitch('tocSmoothScroll', 'Scroll suave', 'bi-arrow-down-circle', $smoothScroll);

        $html .= '    </div>';
        $html .= '</div>';

        return $html;
    }

    private function buildBehaviorGroup(string $componentId): string
    {
        $html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
        $html .= '    <div class="card-body">';
        $html .= '        <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
        $html .= '            <i class="bi bi-gear me-2" style="color: #FF8600;"></i>';
        $html .= '            Comportamiento';
        $html .= '        </h5>';

        // is_sticky
        $isSticky = $this->renderer->getFieldValue($componentId, 'behavior', 'is_sticky', true);
        $html .= $this->buildSwitch('tocIsSticky', 'Sticky (fijo al scroll)', 'bi-pin', $isSticky);

        // scroll_offset
        $scrollOffset = $this->renderer->getFieldValue($componentId, 'behavior', 'scroll_offset', '100');
        $html .= '        <div class="mb-3">';
        $html .= '            <label for="tocScrollOffset" class="form-label small mb-1 fw-semibold">';
        $html .= '                <i class="bi bi-arrows-vertical me-1" style="color: #FF8600;"></i>';
        $html .= '                Offset de scroll (px)';
        $html .= '            </label>';
        $html .= '            <input type="text" id="tocScrollOffset" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($scrollOffset) . '" placeholder="100">';
        $html .= '        </div>';

        // max_height
        $maxHeight = $this->renderer->getFieldValue($componentId, 'behavior', 'max_height', 'calc(100vh - 71px - 10px - 250px - 15px - 15px)');
        $html .= '        <div class="mb-0">';
        $html .= '            <label for="tocMaxHeight" class="form-label small mb-1 fw-semibold">';
        $html .= '                <i class="bi bi-arrows-expand me-1" style="color: #FF8600;"></i>';
        $html .= '                Altura maxima';
        $html .= '            </label>';
        $html .= '            <input type="text" id="tocMaxHeight" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($maxHeight) . '">';
        $html .= '        </div>';

        $html .= '    </div>';
        $html .= '</div>';

        return $html;
    }

    private function buildTypographyGroup(string $componentId): string
    {
        $html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
        $html .= '    <div class="card-body">';
        $html .= '        <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
        $html .= '            <i class="bi bi-fonts me-2" style="color: #FF8600;"></i>';
        $html .= '            Tipografia';
        $html .= '        </h5>';

        $html .= '        <div class="row g-2 mb-3">';

        // title_font_size
        $titleFontSize = $this->renderer->getFieldValue($componentId, 'typography', 'title_font_size', '1rem');
        $html .= '            <div class="col-6">';
        $html .= '                <label for="tocTitleFontSize" class="form-label small mb-1 fw-semibold">Tamano titulo</label>';
        $html .= '                <input type="text" id="tocTitleFontSize" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($titleFontSize) . '" placeholder="1rem">';
        $html .= '            </div>';

        // title_font_weight
        $titleFontWeight = $this->renderer->getFieldValue($componentId, 'typography', 'title_font_weight', '600');
        $html .= '            <div class="col-6">';
        $html .= '                <label for="tocTitleFontWeight" class="form-label small mb-1 fw-semibold">Peso titulo</label>';
        $html .= '                <input type="text" id="tocTitleFontWeight" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($titleFontWeight) . '" placeholder="600">';
        $html .= '            </div>';

        $html .= '        </div>';

        $html .= '        <div class="row g-2 mb-3">';

        // link_font_size
        $linkFontSize = $this->renderer->getFieldValue($componentId, 'typography', 'link_font_size', '0.9rem');
        $html .= '            <div class="col-6">';
        $html .= '                <label for="tocLinkFontSize" class="form-label small mb-1 fw-semibold">Tamano enlaces</label>';
        $html .= '                <input type="text" id="tocLinkFontSize" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($linkFontSize) . '" placeholder="0.9rem">';
        $html .= '            </div>';

        // link_line_height
        $linkLineHeight = $this->renderer->getFieldValue($componentId, 'typography', 'link_line_height', '1.3');
        $html .= '            <div class="col-6">';
        $html .= '                <label for="tocLinkLineHeight" class="form-label small mb-1 fw-semibold">Altura linea</label>';
        $html .= '                <input type="text" id="tocLinkLineHeight" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($linkLineHeight) . '" placeholder="1.3">';
        $html .= '            </div>';

        $html .= '        </div>';

        $html .= '        <div class="row g-2 mb-0">';

        // level_three_font_size
        $level3FontSize = $this->renderer->getFieldValue($componentId, 'typography', 'level_three_font_size', '0.85rem');
        $html .= '            <div class="col-6">';
        $html .= '                <label for="tocLevelThreeFontSize" class="form-label small mb-1 fw-semibold">Tamano H3</label>';
        $html .= '                <input type="text" id="tocLevelThreeFontSize" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($level3FontSize) . '" placeholder="0.85rem">';
        $html .= '            </div>';

        // level_four_font_size
        $level4FontSize = $this->renderer->getFieldValue($componentId, 'typography', 'level_four_font_size', '0.8rem');
        $html .= '            <div class="col-6">';
        $html .= '                <label for="tocLevelFourFontSize" class="form-label small mb-1 fw-semibold">Tamano H4</label>';
        $html .= '                <input type="text" id="tocLevelFourFontSize" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($level4FontSize) . '" placeholder="0.8rem">';
        $html .= '            </div>';

        $html .= '        </div>';

        $html .= '    </div>';
        $html .= '</div>';

        return $html;
    }

    private function buildColorsGroup(string $componentId): string
    {
        $html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
        $html .= '    <div class="card-body">';
        $html .= '        <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
        $html .= '            <i class="bi bi-palette me-2" style="color: #FF8600;"></i>';
        $html .= '            Colores';
        $html .= '        </h5>';

        // Colores principales
        $html .= '        <p class="small fw-semibold mb-2">Contenedor</p>';
        $html .= '        <div class="row g-2 mb-3">';

        $bgColor = $this->renderer->getFieldValue($componentId, 'colors', 'background_color', '#ffffff');
        $html .= $this->buildColorPicker('tocBackgroundColor', 'Fondo', $bgColor);

        $borderColor = $this->renderer->getFieldValue($componentId, 'colors', 'border_color', '#E6E9ED');
        $html .= $this->buildColorPicker('tocBorderColor', 'Borde', $borderColor);

        $html .= '        </div>';

        // Colores del titulo
        $html .= '        <p class="small fw-semibold mb-2">Titulo</p>';
        $html .= '        <div class="row g-2 mb-3">';

        $titleColor = $this->renderer->getFieldValue($componentId, 'colors', 'title_color', '#0E2337');
        $html .= $this->buildColorPicker('tocTitleColor', 'Color', $titleColor);

        $titleBorderColor = $this->renderer->getFieldValue($componentId, 'colors', 'title_border_color', '#E6E9ED');
        $html .= $this->buildColorPicker('tocTitleBorderColor', 'Borde', $titleBorderColor);

        $html .= '        </div>';

        // Colores de enlaces
        $html .= '        <p class="small fw-semibold mb-2">Enlaces</p>';
        $html .= '        <div class="row g-2 mb-3">';

        $linkColor = $this->renderer->getFieldValue($componentId, 'colors', 'link_color', '#6B7280');
        $html .= $this->buildColorPicker('tocLinkColor', 'Normal', $linkColor);

        $linkHoverColor = $this->renderer->getFieldValue($componentId, 'colors', 'link_hover_color', '#0E2337');
        $html .= $this->buildColorPicker('tocLinkHoverColor', 'Hover', $linkHoverColor);

        $html .= '        </div>';

        $html .= '        <div class="row g-2 mb-3">';

        $linkHoverBg = $this->renderer->getFieldValue($componentId, 'colors', 'link_hover_background', '#F9FAFB');
        $html .= $this->buildColorPicker('tocLinkHoverBackground', 'Fondo hover', $linkHoverBg);

        $activeBorderColor = $this->renderer->getFieldValue($componentId, 'colors', 'active_border_color', '#0E2337');
        $html .= $this->buildColorPicker('tocActiveBorderColor', 'Borde activo', $activeBorderColor);

        $html .= '        </div>';

        // Colores de activo
        $html .= '        <p class="small fw-semibold mb-2">Estado Activo</p>';
        $html .= '        <div class="row g-2 mb-3">';

        $activeBgColor = $this->renderer->getFieldValue($componentId, 'colors', 'active_background_color', '#F9FAFB');
        $html .= $this->buildColorPicker('tocActiveBackgroundColor', 'Fondo', $activeBgColor);

        $activeTextColor = $this->renderer->getFieldValue($componentId, 'colors', 'active_text_color', '#0E2337');
        $html .= $this->buildColorPicker('tocActiveTextColor', 'Texto', $activeTextColor);

        $html .= '        </div>';

        // Colores de scrollbar
        $html .= '        <p class="small fw-semibold mb-2">Scrollbar</p>';
        $html .= '        <div class="row g-2 mb-0">';

        $scrollbarTrack = $this->renderer->getFieldValue($componentId, 'colors', 'scrollbar_track_color', '#F9FAFB');
        $html .= $this->buildColorPicker('tocScrollbarTrackColor', 'Pista', $scrollbarTrack);

        $scrollbarThumb = $this->renderer->getFieldValue($componentId, 'colors', 'scrollbar_thumb_color', '#6B7280');
        $html .= $this->buildColorPicker('tocScrollbarThumbColor', 'Thumb', $scrollbarThumb);

        $html .= '        </div>';

        $html .= '    </div>';
        $html .= '</div>';

        return $html;
    }

    private function buildSpacingGroup(string $componentId): string
    {
        $html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
        $html .= '    <div class="card-body">';
        $html .= '        <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
        $html .= '            <i class="bi bi-arrows-move me-2" style="color: #FF8600;"></i>';
        $html .= '            Espaciado';
        $html .= '        </h5>';

        $html .= '        <div class="row g-2 mb-3">';

        // container_padding
        $containerPadding = $this->renderer->getFieldValue($componentId, 'spacing', 'container_padding', '12px 16px');
        $html .= '            <div class="col-6">';
        $html .= '                <label for="tocContainerPadding" class="form-label small mb-1 fw-semibold">Padding contenedor</label>';
        $html .= '                <input type="text" id="tocContainerPadding" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($containerPadding) . '">';
        $html .= '            </div>';

        // margin_bottom
        $marginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'margin_bottom', '13px');
        $html .= '            <div class="col-6">';
        $html .= '                <label for="tocMarginBottom" class="form-label small mb-1 fw-semibold">Margen inferior</label>';
        $html .= '                <input type="text" id="tocMarginBottom" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($marginBottom) . '">';
        $html .= '            </div>';

        $html .= '        </div>';

        $html .= '        <div class="row g-2 mb-3">';

        // title_padding_bottom
        $titlePaddingBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'title_padding_bottom', '8px');
        $html .= '            <div class="col-6">';
        $html .= '                <label for="tocTitlePaddingBottom" class="form-label small mb-1 fw-semibold">Padding titulo</label>';
        $html .= '                <input type="text" id="tocTitlePaddingBottom" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($titlePaddingBottom) . '">';
        $html .= '            </div>';

        // title_margin_bottom
        $titleMarginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'title_margin_bottom', '0.75rem');
        $html .= '            <div class="col-6">';
        $html .= '                <label for="tocTitleMarginBottom" class="form-label small mb-1 fw-semibold">Margen titulo</label>';
        $html .= '                <input type="text" id="tocTitleMarginBottom" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($titleMarginBottom) . '">';
        $html .= '            </div>';

        $html .= '        </div>';

        $html .= '        <div class="row g-2 mb-3">';

        // item_margin_bottom
        $itemMarginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'item_margin_bottom', '0.15rem');
        $html .= '            <div class="col-6">';
        $html .= '                <label for="tocItemMarginBottom" class="form-label small mb-1 fw-semibold">Margen items</label>';
        $html .= '                <input type="text" id="tocItemMarginBottom" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($itemMarginBottom) . '">';
        $html .= '            </div>';

        // link_padding
        $linkPadding = $this->renderer->getFieldValue($componentId, 'spacing', 'link_padding', '0.3rem 0.85rem');
        $html .= '            <div class="col-6">';
        $html .= '                <label for="tocLinkPadding" class="form-label small mb-1 fw-semibold">Padding enlaces</label>';
        $html .= '                <input type="text" id="tocLinkPadding" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($linkPadding) . '">';
        $html .= '            </div>';

        $html .= '        </div>';

        $html .= '        <div class="row g-2 mb-0">';

        // level_three_padding_left
        $level3PaddingLeft = $this->renderer->getFieldValue($componentId, 'spacing', 'level_three_padding_left', '1.5rem');
        $html .= '            <div class="col-6">';
        $html .= '                <label for="tocLevelThreePaddingLeft" class="form-label small mb-1 fw-semibold">Padding H3</label>';
        $html .= '                <input type="text" id="tocLevelThreePaddingLeft" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($level3PaddingLeft) . '">';
        $html .= '            </div>';

        // level_four_padding_left
        $level4PaddingLeft = $this->renderer->getFieldValue($componentId, 'spacing', 'level_four_padding_left', '2rem');
        $html .= '            <div class="col-6">';
        $html .= '                <label for="tocLevelFourPaddingLeft" class="form-label small mb-1 fw-semibold">Padding H4</label>';
        $html .= '                <input type="text" id="tocLevelFourPaddingLeft" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($level4PaddingLeft) . '">';
        $html .= '            </div>';

        $html .= '        </div>';

        $html .= '    </div>';
        $html .= '</div>';

        return $html;
    }

    private function buildEffectsGroup(string $componentId): string
    {
        $html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
        $html .= '    <div class="card-body">';
        $html .= '        <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
        $html .= '            <i class="bi bi-magic me-2" style="color: #FF8600;"></i>';
        $html .= '            Efectos Visuales';
        $html .= '        </h5>';

        $html .= '        <div class="row g-2 mb-3">';

        // border_radius
        $borderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'border_radius', '8px');
        $html .= '            <div class="col-6">';
        $html .= '                <label for="tocBorderRadius" class="form-label small mb-1 fw-semibold">Radio borde</label>';
        $html .= '                <input type="text" id="tocBorderRadius" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($borderRadius) . '">';
        $html .= '            </div>';

        // border_width
        $borderWidth = $this->renderer->getFieldValue($componentId, 'visual_effects', 'border_width', '1px');
        $html .= '            <div class="col-6">';
        $html .= '                <label for="tocBorderWidth" class="form-label small mb-1 fw-semibold">Grosor borde</label>';
        $html .= '                <input type="text" id="tocBorderWidth" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($borderWidth) . '">';
        $html .= '            </div>';

        $html .= '        </div>';

        // box_shadow
        $boxShadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'box_shadow', '0 2px 8px rgba(0, 0, 0, 0.08)');
        $html .= '        <div class="mb-3">';
        $html .= '            <label for="tocBoxShadow" class="form-label small mb-1 fw-semibold">Sombra</label>';
        $html .= '            <input type="text" id="tocBoxShadow" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($boxShadow) . '">';
        $html .= '        </div>';

        $html .= '        <div class="row g-2 mb-3">';

        // link_border_radius
        $linkBorderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'link_border_radius', '4px');
        $html .= '            <div class="col-6">';
        $html .= '                <label for="tocLinkBorderRadius" class="form-label small mb-1 fw-semibold">Radio enlaces</label>';
        $html .= '                <input type="text" id="tocLinkBorderRadius" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($linkBorderRadius) . '">';
        $html .= '            </div>';

        // active_border_left_width
        $activeBorderLeftWidth = $this->renderer->getFieldValue($componentId, 'visual_effects', 'active_border_left_width', '3px');
        $html .= '            <div class="col-6">';
        $html .= '                <label for="tocActiveBorderLeftWidth" class="form-label small mb-1 fw-semibold">Borde activo</label>';
        $html .= '                <input type="text" id="tocActiveBorderLeftWidth" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($activeBorderLeftWidth) . '">';
        $html .= '            </div>';

        $html .= '        </div>';

        $html .= '        <div class="row g-2 mb-0">';

        // transition_duration
        $transitionDuration = $this->renderer->getFieldValue($componentId, 'visual_effects', 'transition_duration', '0.3s');
        $html .= '            <div class="col-6">';
        $html .= '                <label for="tocTransitionDuration" class="form-label small mb-1 fw-semibold">Transicion</label>';
        $html .= '                <input type="text" id="tocTransitionDuration" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($transitionDuration) . '">';
        $html .= '            </div>';

        // scrollbar_border_radius
        $scrollbarBorderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'scrollbar_border_radius', '3px');
        $html .= '            <div class="col-6">';
        $html .= '                <label for="tocScrollbarBorderRadius" class="form-label small mb-1 fw-semibold">Radio scrollbar</label>';
        $html .= '                <input type="text" id="tocScrollbarBorderRadius" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($scrollbarBorderRadius) . '">';
        $html .= '            </div>';

        $html .= '        </div>';

        $html .= '    </div>';
        $html .= '</div>';

        return $html;
    }

    private function buildSwitch(string $id, string $label, string $icon, bool $checked): string
    {
        $html = '        <div class="mb-2">';
        $html .= '            <div class="form-check form-switch">';
        $html .= sprintf(
            '                <input class="form-check-input" type="checkbox" id="%s" %s>',
            esc_attr($id),
            $checked ? 'checked' : ''
        );
        $html .= sprintf(
            '                <label class="form-check-label small" for="%s">',
            esc_attr($id)
        );
        $html .= sprintf('                    <i class="bi %s me-1" style="color: #FF8600;"></i>', esc_attr($icon));
        $html .= sprintf('                    <strong>%s</strong>', esc_html($label));
        $html .= '                </label>';
        $html .= '            </div>';
        $html .= '        </div>';

        return $html;
    }

    private function buildColorPicker(string $id, string $label, string $value): string
    {
        $html = '            <div class="col-6">';
        $html .= sprintf(
            '                <label class="form-label small fw-semibold">%s</label>',
            esc_html($label)
        );
        $html .= '                <div class="input-group input-group-sm">';
        $html .= sprintf(
            '                    <input type="color" class="form-control form-control-color" id="%s" value="%s">',
            esc_attr($id),
            esc_attr($value)
        );
        $html .= sprintf(
            '                    <span class="input-group-text" id="%sValue">%s</span>',
            esc_attr($id),
            esc_html(strtoupper($value))
        );
        $html .= '                </div>';
        $html .= '            </div>';

        return $html;
    }

    private function buildPageVisibilityCheckbox(string $id, string $label, string $icon, mixed $checked): string
    {
        $checked = $checked === true || $checked === '1' || $checked === 1;

        $html = '                <div class="form-check form-check-checkbox mb-2">';
        $html .= sprintf(
            '                    <input class="form-check-input" type="checkbox" id="%s" %s>',
            esc_attr($id),
            $checked ? 'checked' : ''
        );
        $html .= sprintf(
            '                    <label class="form-check-label small" for="%s">',
            esc_attr($id)
        );
        $html .= sprintf('                        <i class="bi %s me-1" style="color: #FF8600;"></i>', esc_attr($icon));
        $html .= sprintf('                        %s', esc_html($label));
        $html .= '                    </label>';
        $html .= '                </div>';

        return $html;
    }
}
