<?php
declare(strict_types=1);

namespace ROITheme\Admin\TopNotificationBar\Infrastructure\Ui;

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

final class TopNotificationBarFormBuilder
{
    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->buildContentGroup($componentId);
        $html .= '    </div>';
        $html .= '    <div class="col-lg-6">';
        $html .= $this->buildColorsGroup($componentId);
        $html .= $this->buildTypographyAndSpacingGroup($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-megaphone-fill me-2" style="color: #FF8600;"></i>';
        $html .= '                Configuración de TopBar';
        $html .= '            </h3>';
        $html .= '            <p class="mb-0 small" style="opacity: 0.85;">';
        $html .= '                Personaliza la barra de notificación superior del sitio';
        $html .= '            </p>';
        $html .= '        </div>';
        $html .= '        <button type="button" class="btn btn-sm btn-outline-light btn-reset-defaults" data-component="top-notification-bar">';
        $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="topBarEnabled" ';
        $html .= checked($enabled, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="topBarEnabled" style="color: #495057;">';
        $html .= '                    <i class="bi bi-power me-1" style="color: #FF8600;"></i>';
        $html .= '                    <strong>Activar TopBar</strong>';
        $html .= '                </label>';
        $html .= '            </div>';
        $html .= '        </div>';

        // Switch: Show on Mobile
        $showOnMobile = $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="topBarShowOnMobile" ';
        $html .= checked($showOnMobile, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="topBarShowOnMobile" style="color: #495057;">';
        $html .= '                    <i class="bi bi-phone me-1" style="color: #FF8600;"></i>';
        $html .= '                    <strong>Mostrar en Mobile</strong> <span class="text-muted">(&lt;768px)</span>';
        $html .= '                </label>';
        $html .= '            </div>';
        $html .= '        </div>';

        // Switch: Show on Desktop
        $showOnDesktop = $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="topBarShowOnDesktop" ';
        $html .= checked($showOnDesktop, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="topBarShowOnDesktop" style="color: #495057;">';
        $html .= '                    <i class="bi bi-display me-1" style="color: #FF8600;"></i>';
        $html .= '                    <strong>Mostrar en Desktop</strong> <span class="text-muted">(≥768px)</span>';
        $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', 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('topBarVisibilityHome', 'Home', 'bi-house', $showOnHome);
        $html .= '            </div>';
        $html .= '            <div class="col-md-4">';
        $html .= $this->buildPageVisibilityCheckbox('topBarVisibilityPosts', 'Posts', 'bi-file-earmark-text', $showOnPosts);
        $html .= '            </div>';
        $html .= '            <div class="col-md-4">';
        $html .= $this->buildPageVisibilityCheckbox('topBarVisibilityPages', 'Paginas', 'bi-file-earmark', $showOnPages);
        $html .= '            </div>';
        $html .= '            <div class="col-md-4">';
        $html .= $this->buildPageVisibilityCheckbox('topBarVisibilityArchives', 'Archivos', 'bi-archive', $showOnArchives);
        $html .= '            </div>';
        $html .= '            <div class="col-md-4">';
        $html .= $this->buildPageVisibilityCheckbox('topBarVisibilitySearch', '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, 'topBar');

        // Switch: CSS Crítico
        $isCritical = $this->renderer->getFieldValue($componentId, 'visibility', 'is_critical', true);
        $html .= '        <div class="mb-2 mt-3">';
        $html .= '            <div class="form-check form-switch">';
        $html .= '                <input class="form-check-input" type="checkbox" id="topBarIsCritical" ';
        $html .= checked($isCritical, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="topBarIsCritical" style="color: #495057;">';
        $html .= '                    <i class="bi bi-lightning-charge me-1" style="color: #FF8600;"></i>';
        $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>';

        // Switch: Ocultar para usuarios logueados (Plan 99.16)
        $hideForLoggedIn = $this->renderer->getFieldValue($componentId, 'visibility', 'hide_for_logged_in', false);
        $html .= '        <div class="mb-0">';
        $html .= '            <div class="form-check form-switch">';
        $html .= '                <input class="form-check-input" type="checkbox" id="topBarHideForLoggedIn" ';
        $html .= checked($hideForLoggedIn, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="topBarHideForLoggedIn" style="color: #495057;">';
        $html .= '                    <i class="bi bi-person-lock me-1" style="color: #FF8600;"></i>';
        $html .= '                    <strong>Ocultar para usuarios logueados</strong>';
        $html .= '                    <small class="text-muted d-block">No mostrar a usuarios con sesión iniciada</small>';
        $html .= '                </label>';
        $html .= '            </div>';
        $html .= '        </div>';

        $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-chat-text me-2" style="color: #FF8600;"></i>';
        $html .= '            Contenido';
        $html .= '        </h5>';

        // icon_class + label_text (row)
        $html .= '        <div class="row g-2 mb-2">';
        $html .= '            <div class="col-6">';
        $html .= '                <label for="topBarIconClass" class="form-label small mb-1 fw-semibold">';
        $html .= '                    <i class="bi bi-star-fill me-1" style="color: #FF8600;"></i>';
        $html .= '                    Clase del ícono';
        $html .= '                </label>';
        $iconClass = $this->renderer->getFieldValue($componentId, 'content', 'icon_class', 'bi-megaphone-fill');
        $html .= '                <input type="text" id="topBarIconClass" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($iconClass) . '" placeholder="bi-...">';
        $html .= '            </div>';
        $html .= '            <div class="col-6">';
        $html .= '                <label for="topBarLabelText" class="form-label small mb-1 fw-semibold">';
        $html .= '                    <i class="bi bi-tag me-1" style="color: #FF8600;"></i>';
        $html .= '                    Etiqueta';
        $html .= '                </label>';
        $labelText = $this->renderer->getFieldValue($componentId, 'content', 'label_text', 'Nuevo:');
        $html .= '                <input type="text" id="topBarLabelText" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($labelText) . '" maxlength="30">';
        $html .= '            </div>';
        $html .= '        </div>';

        // message_text (textarea)
        $messageText = $this->renderer->getFieldValue($componentId, 'content', 'message_text',
            'Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025.');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="topBarMessageText" class="form-label small mb-1 fw-semibold">';
        $html .= '                <i class="bi bi-chat-dots me-1" style="color: #FF8600;"></i>';
        $html .= '                Mensaje';
        $html .= '            </label>';
        $html .= '            <textarea id="topBarMessageText" class="form-control form-control-sm" rows="3" maxlength="200">';
        $html .= esc_textarea($messageText);
        $html .= '            </textarea>';
        $html .= '            <small class="text-muted">Máximo 200 caracteres</small>';
        $html .= '        </div>';

        // link_text + link_url (row)
        $html .= '        <div class="row g-2 mb-0">';
        $html .= '            <div class="col-6">';
        $html .= '                <label for="topBarLinkText" class="form-label small mb-1 fw-semibold">';
        $html .= '                    <i class="bi bi-link-45deg me-1" style="color: #FF8600;"></i>';
        $html .= '                    Texto del enlace';
        $html .= '                </label>';
        $linkText = $this->renderer->getFieldValue($componentId, 'content', 'link_text', 'Ver Catálogo');
        $html .= '                <input type="text" id="topBarLinkText" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($linkText) . '" maxlength="50">';
        $html .= '            </div>';
        $html .= '            <div class="col-6">';
        $html .= '                <label for="topBarLinkUrl" class="form-label small mb-1 fw-semibold">';
        $html .= '                    <i class="bi bi-box-arrow-up-right me-1" style="color: #FF8600;"></i>';
        $html .= '                    URL';
        $html .= '                </label>';
        $linkUrl = $this->renderer->getFieldValue($componentId, 'content', 'link_url', '#');
        $html .= '                <input type="url" id="topBarLinkUrl" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_url($linkUrl) . '" placeholder="https://...">';
        $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>';

        // Grid 2x3 de color pickers
        $html .= '        <div class="row g-2 mb-2">';

        // Background Color
        $bgColor = $this->renderer->getFieldValue($componentId, 'colors', 'background_color', '#0E2337');
        $html .= $this->buildColorPicker('topBarBackgroundColor', 'Color de fondo', 'paint-bucket', $bgColor);

        // Text Color
        $textColor = $this->renderer->getFieldValue($componentId, 'colors', 'text_color', '#FFFFFF');
        $html .= $this->buildColorPicker('topBarTextColor', 'Color de texto', 'fonts', $textColor);

        // Label Color
        $labelColor = $this->renderer->getFieldValue($componentId, 'colors', 'label_color', '#FF8600');
        $html .= $this->buildColorPicker('topBarLabelColor', 'Color etiqueta', 'tag-fill', $labelColor);

        // Icon Color
        $iconColor = $this->renderer->getFieldValue($componentId, 'colors', 'icon_color', '#FF8600');
        $html .= $this->buildColorPicker('topBarIconColor', 'Color ícono', 'star', $iconColor);

        $html .= '        </div>';

        // Row 2 de color pickers
        $html .= '        <div class="row g-2 mb-0">';

        // Link Color
        $linkColor = $this->renderer->getFieldValue($componentId, 'colors', 'link_color', '#FFFFFF');
        $html .= $this->buildColorPicker('topBarLinkColor', 'Color enlace', 'link', $linkColor);

        // Link Hover Color
        $linkHoverColor = $this->renderer->getFieldValue($componentId, 'colors', 'link_hover_color', '#FF8600');
        $html .= $this->buildColorPicker('topBarLinkHoverColor', 'Color enlace (hover)', 'hand-index', $linkHoverColor);

        $html .= '        </div>';

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

        return $html;
    }

    private function buildTypographyAndSpacingGroup(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-fullscreen me-2" style="color: #FF8600;"></i>';
        $html .= '            Tipografía y Espaciado';
        $html .= '        </h5>';

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

        // Font Size
        $html .= '            <div class="col-6">';
        $html .= '                <label for="topBarFontSize" class="form-label small mb-1 fw-semibold">';
        $html .= '                    <i class="bi bi-type me-1" style="color: #FF8600;"></i>';
        $html .= '                    Tamaño de fuente';
        $html .= '                </label>';
        $fontSize = $this->renderer->getFieldValue($componentId, 'spacing', 'font_size', '0.9rem');
        $html .= '                <input type="text" id="topBarFontSize" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($fontSize) . '">';
        $html .= '                <small class="text-muted">Ej: 0.9rem, 14px</small>';
        $html .= '            </div>';

        // Padding
        $html .= '            <div class="col-6">';
        $html .= '                <label for="topBarPadding" class="form-label small mb-1 fw-semibold">';
        $html .= '                    <i class="bi bi-bounding-box me-1" style="color: #FF8600;"></i>';
        $html .= '                    Padding vertical';
        $html .= '                </label>';
        $padding = $this->renderer->getFieldValue($componentId, 'spacing', 'padding', '0.5rem 0');
        $html .= '                <input type="text" id="topBarPadding" class="form-control form-control-sm" ';
        $html .= '                       value="' . esc_attr($padding) . '">';
        $html .= '                <small class="text-muted">Ej: 0.5rem 0</small>';
        $html .= '            </div>';

        $html .= '        </div>';

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

        return $html;
    }

    private function buildColorPicker(string $id, string $label, string $icon, string $value): string
    {
        $html = '            <div class="col-6">';
        $html .= '                <label for="' . $id . '" class="form-label small mb-1 fw-semibold" style="color: #495057;">';
        $html .= '                    <i class="bi bi-' . $icon . ' me-1" style="color: #FF8600;"></i>';
        $html .= '                    ' . $label;
        $html .= '                </label>';
        $html .= '                <input type="color" id="' . $id . '" class="form-control form-control-color w-100" ';
        $html .= '                       value="' . esc_attr($value) . '" title="' . esc_attr($label) . '">';
        $html .= '                <small class="text-muted d-block mt-1" id="' . $id . 'Value">' . esc_html(strtoupper($value)) . '</small>';
        $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;
    }
}
