<?php
declare(strict_types=1);

namespace ROITheme\Admin\Navbar\Infrastructure\Ui;

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

final class NavbarFormBuilder
{
    public function __construct(
        private AdminDashboardRenderer $renderer
    ) {}

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

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

        // Layout 2 columnas
        $html .= '<div class="row g-3">';
        $html .= '    <div class="col-lg-6">';
        $html .= $this->buildVisibilityGroup($componentId);
        $html .= $this->buildLayoutGroup($componentId);
        $html .= $this->buildBehaviorGroup($componentId);
        $html .= $this->buildMediaGroup($componentId);
        $html .= '    </div>';
        $html .= '    <div class="col-lg-6">';
        $html .= $this->buildLinksGroup($componentId);
        $html .= $this->buildVisualEffectsGroup($componentId);
        $html .= $this->buildColorsGroup($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-menu-button-wide me-2" style="color: #FF8600;"></i>';
        $html .= '                Configuración de Navbar';
        $html .= '            </h3>';
        $html .= '            <p class="mb-0 small" style="opacity: 0.85;">';
        $html .= '                Personaliza el menú de navegación principal del sitio';
        $html .= '            </p>';
        $html .= '        </div>';
        $html .= '        <button type="button" class="btn btn-sm btn-outline-light btn-reset-defaults" data-component="navbar">';
        $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 .= '            Activación y Visibilidad';
        $html .= '        </h5>';

        // Switch: Enabled
        $enabled = $this->renderer->getFieldValue($componentId, 'visibility', 'is_enabled', true);
        $html .= '        <div class="mb-2">';
        $html .= '            <div class="form-check form-switch">';
        $html .= '                <input class="form-check-input" type="checkbox" id="navbarEnabled" name="visibility[is_enabled]" ';
        $html .= checked($enabled, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="navbarEnabled">';
        $html .= '                    <strong>Activar Navbar</strong>';
        $html .= '                </label>';
        $html .= '            </div>';
        $html .= '        </div>';

        // Switch: Show on Mobile
        $showMobile = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_mobile', true);
        $html .= '        <div class="mb-2">';
        $html .= '            <div class="form-check form-switch">';
        $html .= '                <input class="form-check-input" type="checkbox" id="navbarShowMobile" name="visibility[show_on_mobile]" ';
        $html .= checked($showMobile, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="navbarShowMobile">';
        $html .= '                    <strong>Mostrar en Mobile</strong>';
        $html .= '                </label>';
        $html .= '            </div>';
        $html .= '        </div>';

        // Switch: Show on Desktop
        $showDesktop = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_desktop', true);
        $html .= '        <div class="mb-2">';
        $html .= '            <div class="form-check form-switch">';
        $html .= '                <input class="form-check-input" type="checkbox" id="navbarShowDesktop" name="visibility[show_on_desktop]" ';
        $html .= checked($showDesktop, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="navbarShowDesktop">';
        $html .= '                    <strong>Mostrar en Desktop</strong>';
        $html .= '                </label>';
        $html .= '            </div>';
        $html .= '        </div>';

        // =============================================
        // 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', true);
        $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', true);
        $showOnSearch = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_search', true);

        $html .= '        <div class="row g-2">';
        $html .= '            <div class="col-md-4">';
        $html .= $this->buildPageVisibilityCheckbox('navbarVisibilityHome', 'Home', 'bi-house', $showOnHome);
        $html .= '            </div>';
        $html .= '            <div class="col-md-4">';
        $html .= $this->buildPageVisibilityCheckbox('navbarVisibilityPosts', 'Posts', 'bi-file-earmark-text', $showOnPosts);
        $html .= '            </div>';
        $html .= '            <div class="col-md-4">';
        $html .= $this->buildPageVisibilityCheckbox('navbarVisibilityPages', 'Paginas', 'bi-file-earmark', $showOnPages);
        $html .= '            </div>';
        $html .= '            <div class="col-md-4">';
        $html .= $this->buildPageVisibilityCheckbox('navbarVisibilityArchives', 'Archivos', 'bi-archive', $showOnArchives);
        $html .= '            </div>';
        $html .= '            <div class="col-md-4">';
        $html .= $this->buildPageVisibilityCheckbox('navbarVisibilitySearch', '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, 'navbar');

        // Switch: Sticky
        $sticky = $this->renderer->getFieldValue($componentId, 'visibility', 'sticky_enabled', true);
        $html .= '        <div class="mb-2">';
        $html .= '            <div class="form-check form-switch">';
        $html .= '                <input class="form-check-input" type="checkbox" id="navbarSticky" name="visibility[sticky_enabled]" ';
        $html .= checked($sticky, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="navbarSticky">';
        $html .= '                    <strong>Navbar fijo (sticky)</strong>';
        $html .= '                </label>';
        $html .= '            </div>';
        $html .= '        </div>';

        // Switch: CSS Crítico
        $isCritical = $this->renderer->getFieldValue($componentId, 'visibility', 'is_critical', true);
        $html .= '        <div class="mb-0">';
        $html .= '            <div class="form-check form-switch">';
        $html .= '                <input class="form-check-input" type="checkbox" id="navbarIsCritical" name="visibility[is_critical]" ';
        $html .= checked($isCritical, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="navbarIsCritical">';
        $html .= '                    <strong>CSS Crítico</strong>';
        $html .= '                    <small class="text-muted d-block">Inyectar CSS en &lt;head&gt; para optimizar LCP</small>';
        $html .= '                </label>';
        $html .= '            </div>';
        $html .= '        </div>';

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

        return $html;
    }

    private function buildLayoutGroup(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-layout-sidebar me-2" style="color: #FF8600;"></i>';
        $html .= '            Layout y Estructura';
        $html .= '        </h5>';

        // Container Type
        $containerType = $this->renderer->getFieldValue($componentId, 'layout', 'container_type', 'container');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="navbarContainerType" class="form-label small mb-1 fw-semibold">Tipo de contenedor</label>';
        $html .= '            <select id="navbarContainerType" name="layout[container_type]" class="form-select form-select-sm">';
        $html .= '                <option value="container" ' . selected($containerType, 'container', false) . '>Container (ancho fijo)</option>';
        $html .= '                <option value="container-fluid" ' . selected($containerType, 'container-fluid', false) . '>Container Fluid (ancho completo)</option>';
        $html .= '            </select>';
        $html .= '        </div>';

        // Padding Vertical
        $paddingVertical = $this->renderer->getFieldValue($componentId, 'layout', 'padding_vertical', '0.75rem 0');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="navbarPaddingVertical" class="form-label small mb-1 fw-semibold">Padding vertical</label>';
        $html .= '            <input type="text" id="navbarPaddingVertical" name="layout[padding_vertical]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($paddingVertical) . '" placeholder="0.75rem 0">';
        $html .= '        </div>';

        // Z-index
        $zIndex = $this->renderer->getFieldValue($componentId, 'layout', 'z_index', '1030');
        $html .= '        <div class="mb-0">';
        $html .= '            <label for="navbarZIndex" class="form-label small mb-1 fw-semibold">Z-index</label>';
        $html .= '            <input type="text" id="navbarZIndex" name="layout[z_index]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($zIndex) . '" placeholder="1030">';
        $html .= '        </div>';

        $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-list me-2" style="color: #FF8600;"></i>';
        $html .= '            Configuración del Menú';
        $html .= '        </h5>';

        // Menu Location
        $menuLocation = $this->renderer->getFieldValue($componentId, 'behavior', 'menu_location', 'primary');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="navbarMenuLocation" class="form-label small mb-1 fw-semibold">Ubicación del menú</label>';
        $html .= '            <select id="navbarMenuLocation" name="behavior[menu_location]" class="form-select form-select-sm">';
        $html .= '                <option value="primary" ' . selected($menuLocation, 'primary', false) . '>Menú Principal</option>';
        $html .= '                <option value="secondary" ' . selected($menuLocation, 'secondary', false) . '>Menú Secundario</option>';
        $html .= '                <option value="custom" ' . selected($menuLocation, 'custom', false) . '>Menú personalizado</option>';
        $html .= '            </select>';
        $html .= '        </div>';

        // Custom Menu ID
        $customMenuId = $this->renderer->getFieldValue($componentId, 'behavior', 'custom_menu_id', '0');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="navbarCustomMenuId" class="form-label small mb-1 fw-semibold">ID del menú personalizado</label>';
        $html .= '            <input type="text" id="navbarCustomMenuId" name="behavior[custom_menu_id]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($customMenuId) . '" placeholder="0">';
        $html .= '        </div>';

        // Enable Dropdowns
        $enableDropdowns = $this->renderer->getFieldValue($componentId, 'behavior', 'enable_dropdowns', true);
        $html .= '        <div class="mb-2">';
        $html .= '            <div class="form-check form-switch">';
        $html .= '                <input class="form-check-input" type="checkbox" id="navbarEnableDropdowns" name="behavior[enable_dropdowns]" ';
        $html .= checked($enableDropdowns, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="navbarEnableDropdowns">';
        $html .= '                    <strong>Habilitar submenús desplegables</strong>';
        $html .= '                </label>';
        $html .= '            </div>';
        $html .= '        </div>';

        // Mobile Breakpoint
        $mobileBreakpoint = $this->renderer->getFieldValue($componentId, 'behavior', 'mobile_breakpoint', 'lg');
        $html .= '        <div class="mb-0">';
        $html .= '            <label for="navbarMobileBreakpoint" class="form-label small mb-1 fw-semibold">Breakpoint para menú móvil</label>';
        $html .= '            <select id="navbarMobileBreakpoint" name="behavior[mobile_breakpoint]" class="form-select form-select-sm">';
        $html .= '                <option value="sm" ' . selected($mobileBreakpoint, 'sm', false) . '>Small (576px)</option>';
        $html .= '                <option value="md" ' . selected($mobileBreakpoint, 'md', false) . '>Medium (768px)</option>';
        $html .= '                <option value="lg" ' . selected($mobileBreakpoint, 'lg', false) . '>Large (992px)</option>';
        $html .= '                <option value="xl" ' . selected($mobileBreakpoint, 'xl', false) . '>Extra Large (1200px)</option>';
        $html .= '            </select>';
        $html .= '        </div>';

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

        return $html;
    }

    private function buildMediaGroup(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-image me-2" style="color: #FF8600;"></i>';
        $html .= '            Logo/Marca';
        $html .= '        </h5>';

        // Show Brand
        $showBrand = $this->renderer->getFieldValue($componentId, 'media', 'show_brand', false);
        $html .= '        <div class="mb-2">';
        $html .= '            <div class="form-check form-switch">';
        $html .= '                <input class="form-check-input" type="checkbox" id="navbarShowBrand" name="media[show_brand]" ';
        $html .= checked($showBrand, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="navbarShowBrand">';
        $html .= '                    <strong>Mostrar logo/marca</strong>';
        $html .= '                </label>';
        $html .= '            </div>';
        $html .= '        </div>';

        // Use Logo
        $useLogo = $this->renderer->getFieldValue($componentId, 'media', 'use_logo', false);
        $html .= '        <div class="mb-2">';
        $html .= '            <div class="form-check form-switch">';
        $html .= '                <input class="form-check-input" type="checkbox" id="navbarUseLogo" name="media[use_logo]" ';
        $html .= checked($useLogo, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="navbarUseLogo">';
        $html .= '                    <strong>Usar logo (imagen)</strong>';
        $html .= '                </label>';
        $html .= '            </div>';
        $html .= '        </div>';

        // Logo URL
        $logoUrl = $this->renderer->getFieldValue($componentId, 'media', 'logo_url', '');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="navbarLogoUrl" class="form-label small mb-1 fw-semibold">URL del logo</label>';
        $html .= '            <input type="text" id="navbarLogoUrl" name="media[logo_url]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($logoUrl) . '" placeholder="https://...">';
        $html .= '        </div>';

        // Logo Height
        $logoHeight = $this->renderer->getFieldValue($componentId, 'media', 'logo_height', '40px');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="navbarLogoHeight" class="form-label small mb-1 fw-semibold">Altura del logo</label>';
        $html .= '            <input type="text" id="navbarLogoHeight" name="media[logo_height]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($logoHeight) . '" placeholder="40px">';
        $html .= '        </div>';

        // Brand Text
        $brandText = $this->renderer->getFieldValue($componentId, 'media', 'brand_text', 'Mi Sitio');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="navbarBrandText" class="form-label small mb-1 fw-semibold">Texto de la marca</label>';
        $html .= '            <input type="text" id="navbarBrandText" name="media[brand_text]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($brandText) . '" maxlength="50">';
        $html .= '        </div>';

        // Brand Font Size
        $brandFontSize = $this->renderer->getFieldValue($componentId, 'media', 'brand_font_size', '1.5rem');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="navbarBrandFontSize" class="form-label small mb-1 fw-semibold">Tamaño de fuente</label>';
        $html .= '            <input type="text" id="navbarBrandFontSize" name="media[brand_font_size]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($brandFontSize) . '" placeholder="1.5rem">';
        $html .= '        </div>';

        // Brand Color
        $brandColor = $this->renderer->getFieldValue($componentId, 'media', 'brand_color', '#FFFFFF');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="navbarBrandColor" class="form-label small mb-1 fw-semibold">Color de la marca</label>';
        $html .= '            <input type="color" id="navbarBrandColor" name="media[brand_color]" class="form-control form-control-color w-100" ';
        $html .= '                   value="' . esc_attr($brandColor) . '">';
        $html .= '        </div>';

        // Brand Hover Color
        $brandHoverColor = $this->renderer->getFieldValue($componentId, 'media', 'brand_hover_color', '#FF8600');
        $html .= '        <div class="mb-0">';
        $html .= '            <label for="navbarBrandHoverColor" class="form-label small mb-1 fw-semibold">Color hover de la marca</label>';
        $html .= '            <input type="color" id="navbarBrandHoverColor" name="media[brand_hover_color]" class="form-control form-control-color w-100" ';
        $html .= '                   value="' . esc_attr($brandHoverColor) . '">';
        $html .= '        </div>';

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

        return $html;
    }

    private function buildLinksGroup(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-link-45deg me-2" style="color: #FF8600;"></i>';
        $html .= '            Estilos de Enlaces';
        $html .= '        </h5>';

        // Text Color
        $textColor = $this->renderer->getFieldValue($componentId, 'links', 'text_color', '#FFFFFF');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="linksTextColor" class="form-label small mb-1 fw-semibold">Color del texto</label>';
        $html .= '            <input type="color" id="linksTextColor" name="links[text_color]" class="form-control form-control-color w-100" ';
        $html .= '                   value="' . esc_attr($textColor) . '">';
        $html .= '        </div>';

        // Hover Color
        $hoverColor = $this->renderer->getFieldValue($componentId, 'links', 'hover_color', '#FF8600');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="linksHoverColor" class="form-label small mb-1 fw-semibold">Color hover</label>';
        $html .= '            <input type="color" id="linksHoverColor" name="links[hover_color]" class="form-control form-control-color w-100" ';
        $html .= '                   value="' . esc_attr($hoverColor) . '">';
        $html .= '        </div>';

        // Active Color
        $activeColor = $this->renderer->getFieldValue($componentId, 'links', 'active_color', '#FF8600');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="linksActiveColor" class="form-label small mb-1 fw-semibold">Color del item activo</label>';
        $html .= '            <input type="color" id="linksActiveColor" name="links[active_color]" class="form-control form-control-color w-100" ';
        $html .= '                   value="' . esc_attr($activeColor) . '">';
        $html .= '        </div>';

        // Font Size
        $fontSize = $this->renderer->getFieldValue($componentId, 'links', 'font_size', '0.9rem');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="linksFontSize" class="form-label small mb-1 fw-semibold">Tamaño de fuente</label>';
        $html .= '            <input type="text" id="linksFontSize" name="links[font_size]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($fontSize) . '" placeholder="0.9rem">';
        $html .= '        </div>';

        // Font Weight
        $fontWeight = $this->renderer->getFieldValue($componentId, 'links', 'font_weight', '500');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="linksFontWeight" class="form-label small mb-1 fw-semibold">Grosor de fuente</label>';
        $html .= '            <input type="text" id="linksFontWeight" name="links[font_weight]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($fontWeight) . '" placeholder="500">';
        $html .= '        </div>';

        // Padding
        $padding = $this->renderer->getFieldValue($componentId, 'links', 'padding', '0.5rem 0.65rem');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="linksPadding" class="form-label small mb-1 fw-semibold">Padding de enlaces</label>';
        $html .= '            <input type="text" id="linksPadding" name="links[padding]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($padding) . '" placeholder="0.5rem 0.65rem">';
        $html .= '        </div>';

        // Border Radius
        $borderRadius = $this->renderer->getFieldValue($componentId, 'links', 'border_radius', '4px');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="linksBorderRadius" class="form-label small mb-1 fw-semibold">Border radius hover</label>';
        $html .= '            <input type="text" id="linksBorderRadius" name="links[border_radius]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($borderRadius) . '" placeholder="4px">';
        $html .= '        </div>';

        // Show Underline Effect
        $showUnderline = $this->renderer->getFieldValue($componentId, 'links', 'show_underline_effect', true);
        $html .= '        <div class="mb-2">';
        $html .= '            <div class="form-check form-switch">';
        $html .= '                <input class="form-check-input" type="checkbox" id="linksShowUnderline" name="links[show_underline_effect]" ';
        $html .= checked($showUnderline, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="linksShowUnderline">';
        $html .= '                    <strong>Mostrar efecto de subrayado</strong>';
        $html .= '                </label>';
        $html .= '            </div>';
        $html .= '        </div>';

        // Underline Color
        $underlineColor = $this->renderer->getFieldValue($componentId, 'links', 'underline_color', '#FF8600');
        $html .= '        <div class="mb-0">';
        $html .= '            <label for="linksUnderlineColor" class="form-label small mb-1 fw-semibold">Color del subrayado</label>';
        $html .= '            <input type="color" id="linksUnderlineColor" name="links[underline_color]" class="form-control form-control-color w-100" ';
        $html .= '                   value="' . esc_attr($underlineColor) . '">';
        $html .= '        </div>';

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

        return $html;
    }

    private function buildVisualEffectsGroup(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-chevron-down me-2" style="color: #FF8600;"></i>';
        $html .= '            Estilos de Dropdown';
        $html .= '        </h5>';

        // Background Color
        $bgColor = $this->renderer->getFieldValue($componentId, 'visual_effects', 'background_color', '#FFFFFF');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="dropdownBgColor" class="form-label small mb-1 fw-semibold">Fondo de dropdown</label>';
        $html .= '            <input type="color" id="dropdownBgColor" name="visual_effects[background_color]" class="form-control form-control-color w-100" ';
        $html .= '                   value="' . esc_attr($bgColor) . '">';
        $html .= '        </div>';

        // Border Radius
        $borderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'border_radius', '8px');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="dropdownBorderRadius" class="form-label small mb-1 fw-semibold">Border radius</label>';
        $html .= '            <input type="text" id="dropdownBorderRadius" name="visual_effects[border_radius]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($borderRadius) . '" placeholder="8px">';
        $html .= '        </div>';

        // Shadow
        $shadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'shadow', '0 8px 24px rgba(0, 0, 0, 0.12)');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="dropdownShadow" class="form-label small mb-1 fw-semibold">Sombra del dropdown</label>';
        $html .= '            <input type="text" id="dropdownShadow" name="visual_effects[shadow]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($shadow) . '">';
        $html .= '        </div>';

        // Item Color
        $itemColor = $this->renderer->getFieldValue($componentId, 'visual_effects', 'item_color', '#495057');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="dropdownItemColor" class="form-label small mb-1 fw-semibold">Color de items</label>';
        $html .= '            <input type="color" id="dropdownItemColor" name="visual_effects[item_color]" class="form-control form-control-color w-100" ';
        $html .= '                   value="' . esc_attr($itemColor) . '">';
        $html .= '        </div>';

        // Item Hover Background
        $itemHoverBg = $this->renderer->getFieldValue($componentId, 'visual_effects', 'item_hover_background', 'rgba(255, 133, 0, 0.1)');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="dropdownItemHoverBg" class="form-label small mb-1 fw-semibold">Fondo hover de items</label>';
        $html .= '            <input type="text" id="dropdownItemHoverBg" name="visual_effects[item_hover_background]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($itemHoverBg) . '">';
        $html .= '        </div>';

        // Item Padding
        $itemPadding = $this->renderer->getFieldValue($componentId, 'visual_effects', 'item_padding', '0.625rem 1.25rem');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="dropdownItemPadding" class="form-label small mb-1 fw-semibold">Padding de items</label>';
        $html .= '            <input type="text" id="dropdownItemPadding" name="visual_effects[item_padding]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($itemPadding) . '" placeholder="0.625rem 1.25rem">';
        $html .= '        </div>';

        // Dropdown Max Height
        $dropdownMaxHeight = $this->renderer->getFieldValue($componentId, 'visual_effects', 'dropdown_max_height', '300px');
        $html .= '        <div class="mb-0">';
        $html .= '            <label for="dropdownMaxHeight" class="form-label small mb-1 fw-semibold">Altura máxima del dropdown</label>';
        $html .= '            <input type="text" id="dropdownMaxHeight" name="visual_effects[dropdown_max_height]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($dropdownMaxHeight) . '" placeholder="300px">';
        $html .= '            <small class="text-muted">Si se excede, aparece scroll vertical</small>';
        $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 .= '            Estilos del Navbar';
        $html .= '        </h5>';

        // Background Color
        $navbarBgColor = $this->renderer->getFieldValue($componentId, 'colors', 'background_color', '#1e3a5f');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="navbarBgColor" class="form-label small mb-1 fw-semibold">Color de fondo</label>';
        $html .= '            <input type="color" id="navbarBgColor" name="colors[background_color]" class="form-control form-control-color w-100" ';
        $html .= '                   value="' . esc_attr($navbarBgColor) . '">';
        $html .= '        </div>';

        // Box Shadow
        $boxShadow = $this->renderer->getFieldValue($componentId, 'colors', 'box_shadow', '0 4px 12px rgba(30, 58, 95, 0.15)');
        $html .= '        <div class="mb-0">';
        $html .= '            <label for="navbarBoxShadow" class="form-label small mb-1 fw-semibold">Sombra del navbar</label>';
        $html .= '            <input type="text" id="navbarBoxShadow" name="colors[box_shadow]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($boxShadow) . '">';
        $html .= '        </div>';

        $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;
    }
}
