{{--
    Frontend Renderer for Page Builder V2 Pages
    This file renders pages created with the React + Craft.js builder
--}}

<!-- RENDER-V2 LOADED -->

{{-- Styles for WYSIWYG Content (Quill Editor) --}}
<style>
    /* Paragraph component with Quill content */
    .builder-content p {
        margin-bottom: 1em;
    }

    .builder-content ul,
    .builder-content ol {
        margin-bottom: 1em;
        padding-left: 2em;
    }

    .builder-content ul {
        list-style-type: disc;
    }

    .builder-content ol {
        list-style-type: decimal;
    }

    .builder-content li {
        margin-bottom: 0.5em;
    }

    .builder-content h1,
    .builder-content h2,
    .builder-content h3,
    .builder-content h4,
    .builder-content h5,
    .builder-content h6 {
        margin-bottom: 0.75em;
        margin-top: 0.5em;
        font-weight: 600;
    }

    .builder-content h1 { font-size: 2em; }
    .builder-content h2 { font-size: 1.75em; }
    .builder-content h3 { font-size: 1.5em; }
    .builder-content h4 { font-size: 1.25em; }
    .builder-content h5 { font-size: 1.1em; }
    .builder-content h6 { font-size: 1em; }

    .builder-content blockquote {
        border-left: 4px solid #ddd;
        padding-left: 1em;
        margin-left: 0;
        margin-bottom: 1em;
        color: #666;
    }

    .builder-content pre {
        background-color: #f5f5f5;
        padding: 1em;
        border-radius: 4px;
        overflow-x: auto;
        margin-bottom: 1em;
    }

    .builder-content code {
        background-color: #f5f5f5;
        padding: 0.2em 0.4em;
        border-radius: 3px;
        font-family: monospace;
    }

    .builder-content a {
        color: #007bff;
        text-decoration: underline;
    }

    .builder-content a:hover {
        color: #0056b3;
    }
</style>

@php
    \Log::info('==================== PAGES RENDER-V2 START ====================');
    \Log::info('FILE CHECK: This is definitely pages/render-v2.blade.php');

    // Load shared render functions
    require_once app_path('Helpers/builder_v2_helpers.php');

    // Get the builder data
    $builderData = $page->builder_v2_data ?? [];

    // Extract components from Craft.js format
    $rootNode = $builderData['ROOT'] ?? null;

    // Debug: Log ROOT structure
    if ($rootNode) {
        \Log::info('ROOT Node', ['type' => $rootNode['type']['resolvedName'] ?? 'unknown', 'childNodes' => $rootNode['nodes'] ?? []]);
    }

    // Get website and its settings
    $currentWebsite = $page->website ?? null;
    $currentWebsiteId = $page->website_id ?? null;
    $currencySymbol = $currentWebsite ? $currentWebsite->getCurrencySymbol() : 'RM';
    $websiteSubdomain = $currentWebsite ? $currentWebsite->subdomain : null;

    // Get theme's default preset for font scheme
    $themeFonts = ['heading' => 'Inter', 'body' => 'Inter']; // Default fallback
    if ($currentWebsite) {
        $activeTheme = $currentWebsite->activeTheme;
        if ($activeTheme && $activeTheme->theme) {
            $defaultPreset = $activeTheme->theme->presets()->where('is_default', true)->first();
            if ($defaultPreset && isset($defaultPreset->font_scheme)) {
                $themeFonts = [
                    'heading' => $defaultPreset->font_scheme['heading'] ?? 'Inter',
                    'body' => $defaultPreset->font_scheme['body'] ?? 'Inter',
                ];
                \Log::info('Theme fonts loaded', $themeFonts);
            }
        }
    }
@endphp

@if($rootNode && isset($builderData))
    {{-- Render the page content from Craft.js data --}}
    @php
        // Check if ROOT is a Container component
        $rootType = $rootNode['type']['resolvedName'] ?? null;
        $rootProps = $rootNode['props'] ?? [];
        $rootChildren = $rootNode['nodes'] ?? [];
    @endphp

    @if($rootType === 'Container')
        {{-- Render ROOT Container with its props --}}
        @php
            $width = $rootProps['width'] ?? 'fluid';
            $customWidth = $rootProps['customWidth'] ?? '1140px';
            $padding = $rootProps['padding'] ?? '20px';
            $margin = $rootProps['margin'] ?? '0px';
            $backgroundColor = $rootProps['backgroundColor'] ?? 'transparent';

            $containerClass = $width === 'fluid' ? 'container-fluid' : 'container';

            // Generate unique ID for responsive CSS targeting
            $containerId = 'root-container-' . uniqid();

            // Extract desktop values for inline styles
            $desktopPadding = getResponsiveValue($padding, 'desktop');
            $desktopMargin = getResponsiveValue($margin, 'desktop');

            // Build inline styles using desktop values
            $styles = [];
            $styles[] = 'padding: ' . htmlspecialchars($desktopPadding);

            // Add margin
            if ($width === 'fixed') {
                // For fixed width, handle margin specially to preserve centering
                $margins = explode(' ', trim($desktopMargin));
                if (count($margins) === 1) {
                    $styles[] = 'margin: ' . htmlspecialchars($margins[0]) . ' auto';
                } else if (count($margins) === 2) {
                    $styles[] = 'margin: ' . htmlspecialchars($margins[0]) . ' auto';
                } else if (count($margins) === 4) {
                    $styles[] = 'margin: ' . htmlspecialchars($margins[0]) . ' auto ' . htmlspecialchars($margins[2]) . ' auto';
                } else {
                    $styles[] = 'margin-left: auto';
                    $styles[] = 'margin-right: auto';
                }
                $styles[] = 'max-width: ' . htmlspecialchars($customWidth);
            } else {
                // Fluid width, use margin as-is
                $styles[] = 'margin: ' . htmlspecialchars($desktopMargin);
            }

            // Only add background color if not transparent
            if ($backgroundColor && $backgroundColor !== 'transparent') {
                $styles[] = 'background-color: ' . htmlspecialchars($backgroundColor);
            }

            $styleAttr = implode('; ', $styles);

            // Generate responsive CSS for tablet and mobile
            $responsiveCSS = '';

            // Tablet padding and margin
            if (isResponsiveValue($padding)) {
                $tabletPadding = getResponsiveValue($padding, 'tablet');
                if ($tabletPadding && $tabletPadding !== $desktopPadding) {
                    $responsiveCSS .= "@media (max-width: 1023px) and (min-width: 768px) { #$containerId { padding: " . htmlspecialchars($tabletPadding) . " !important; } } ";
                }
            }

            if (isResponsiveValue($margin)) {
                $tabletMargin = getResponsiveValue($margin, 'tablet');
                if ($tabletMargin && $tabletMargin !== $desktopMargin) {
                    if ($width === 'fixed') {
                        $margins = explode(' ', trim($tabletMargin));
                        if (count($margins) === 1) {
                            $responsiveCSS .= "@media (max-width: 1023px) and (min-width: 768px) { #$containerId { margin: " . htmlspecialchars($margins[0]) . " auto !important; } } ";
                        } else {
                            $responsiveCSS .= "@media (max-width: 1023px) and (min-width: 768px) { #$containerId { margin-top: " . htmlspecialchars($margins[0]) . " !important; margin-bottom: " . htmlspecialchars($margins[2] ?? $margins[0]) . " !important; } } ";
                        }
                    } else {
                        $responsiveCSS .= "@media (max-width: 1023px) and (min-width: 768px) { #$containerId { margin: " . htmlspecialchars($tabletMargin) . " !important; } } ";
                    }
                }
            }

            // Mobile padding and margin
            if (isResponsiveValue($padding)) {
                $mobilePadding = getResponsiveValue($padding, 'mobile');
                if ($mobilePadding && $mobilePadding !== $desktopPadding) {
                    $responsiveCSS .= "@media (max-width: 767px) { #$containerId { padding: " . htmlspecialchars($mobilePadding) . " !important; } } ";
                }
            }

            if (isResponsiveValue($margin)) {
                $mobileMargin = getResponsiveValue($margin, 'mobile');
                if ($mobileMargin && $mobileMargin !== $desktopMargin) {
                    if ($width === 'fixed') {
                        $margins = explode(' ', trim($mobileMargin));
                        if (count($margins) === 1) {
                            $responsiveCSS .= "@media (max-width: 767px) { #$containerId { margin: " . htmlspecialchars($margins[0]) . " auto !important; } } ";
                        } else {
                            $responsiveCSS .= "@media (max-width: 767px) { #$containerId { margin-top: " . htmlspecialchars($margins[0]) . " !important; margin-bottom: " . htmlspecialchars($margins[2] ?? $margins[0]) . " !important; } } ";
                        }
                    } else {
                        $responsiveCSS .= "@media (max-width: 767px) { #$containerId { margin: " . htmlspecialchars($mobileMargin) . " !important; } } ";
                    }
                }
            }

            // Output responsive CSS if generated
            $mediaQueries = $responsiveCSS ? "<style>$responsiveCSS</style>" : '';
        @endphp

        {!! $mediaQueries !!}
        <div id="{{ $containerId }}" class="{{ $containerClass }}" style="{{ $styleAttr }}">
            @foreach($rootChildren as $nodeId)
                @php
                    \Log::info('Rendering child', ['nodeId' => $nodeId, 'type' => $builderData[$nodeId]['type']['resolvedName'] ?? 'unknown']);
                    \Log::info('About to call renderNode function...', ['function_exists' => function_exists('renderNode')]);
                    $output = renderNode($nodeId, $builderData, $currentWebsiteId, $currencySymbol, $websiteSubdomain, $themeFonts);
                    \Log::info('renderNode returned', ['output_length' => strlen($output), 'output_preview' => substr($output, 0, 100)]);
                @endphp
                {!! $output !!}
            @endforeach
        </div>
    @else
        {{-- ROOT is not a Container, render children directly --}}
        @foreach($rootChildren as $nodeId)
            {!! renderNode($nodeId, $builderData, $currentWebsiteId, $currencySymbol, $websiteSubdomain, $themeFonts) !!}
        @endforeach
    @endif
@else
    {{-- Fallback if no builder data --}}
    <div class="container py-5">
        <div class="alert alert-info">
            <i class="bi bi-info-circle"></i>
            This page is empty. Please edit it using the Page Builder V2 to add content.
        </div>
    </div>
@endif