@inherits LayoutComponentBase
@using NexusReader.Application.Abstractions.Services
@using NexusReader.UI.Shared.Services
@using NexusReader.UI.Shared.Components.Molecules
@using NexusReader.UI.Shared.Components.Organisms
@using NexusReader.Application.Queries.Graph
@using Microsoft.Extensions.Logging
@inject IPlatformService PlatformService
@inject IFocusModeService FocusMode
@inject IQuizStateService QuizService
@inject IReaderInteractionService InteractionService
@inject IKnowledgeGraphService GraphService
@inject IJSRuntime JS
@inject IIdentityService IdentityService
@inject NavigationManager NavigationManager
@inject Microsoft.Extensions.Logging.ILogger<ReaderLayout> Logger
@implements IDisposable

<div class="app-container @_platformClass @(FocusMode.IsFocusModeActive ? "focus-mode-active" : "") @($"active-mobile-tab-{_activeMobileTab.ToString().ToLower()}")">
    <div class="reader-pane">
        <main>
            @Body
        </main>
        <AuthorizeView>
            <Authorized>
                <ReaderFooter />
            </Authorized>
        </AuthorizeView>
    </div>

    <AuthorizeView>
        <Authorized>
            @if (!_isMobile)
            {
                <div class="resizer" id="sidebar-resizer"></div>

                <div class="intelligence-sidebar">
                    <IntelligenceToolbar />
                    <div class="intelligence-content">
                        <div class="intelligence-header">
                            <div class="ai-title">
                                <NexusIcon Name="robot" Size="20"
                                    Class="@($"neon-glow {(QuizService.HasNewQuiz ? "quiz-available" : "")}")" />
                                <span>Asystent AI</span>
                            </div>
                            <button class="close-btn">×</button>
                        </div>

                        @if (_activeTab == SidebarTab.Knowledge)
                        {
                            <div class="intelligence-scroll-area stacked-layout">
                                <div class="visual-workspace">
                                    <KnowledgeGraph />
                                </div>
                                
                                <div class="contextual-intelligence-panel">
                                    <div class="panel-header">
                                        <NexusIcon Name="brain" Size="18" Class="neon-accent-icon" />
                                        <span class="panel-title">Contextual Intelligence Panel</span>
                                    </div>
                                    <div class="panel-body">
                                        @if (_selectedNode != null)
                                        {
                                            <div class="node-details">
                                                <div class="node-header-section">
                                                    <span class="node-group-badge @(_selectedNode.Group.ToLower())">@(_selectedNode.Group.ToUpper())</span>
                                                    <h3 class="node-label">@_selectedNode.Label</h3>
                                                </div>
                                                
                                                @if (!string.IsNullOrEmpty(_selectedNode.Description))
                                                {
                                                    <div class="detail-section">
                                                        <p class="node-description">@_selectedNode.Description</p>
                                                    </div>
                                                }

                                                @if (!string.IsNullOrEmpty(_selectedNode.Summary))
                                                {
                                                    <div class="detail-section summary-section">
                                                        <h4 class="section-title neon-sub-header">Podsumowanie</h4>
                                                        <p class="node-summary">@_selectedNode.Summary</p>
                                                    </div>
                                                }

                                                @if (_selectedNode.KeyTerms != null && _selectedNode.KeyTerms.Any())
                                                {
                                                    <div class="detail-section key-terms-section">
                                                        <h4 class="section-title neon-sub-header">Kluczowe Pojęcia</h4>
                                                        <ul class="key-terms-list">
                                                            @foreach (var term in _selectedNode.KeyTerms)
                                                            {
                                                                <li class="key-term-item">
                                                                    <span class="term-bullet">•</span>
                                                                    <span class="term-text">@term</span>
                                                                </li>
                                                            }
                                                        </ul>
                                                    </div>
                                                }
                                            </div>
                                        }
                                        else
                                        {
                                            <div class="no-node-selected">
                                                <div class="placeholder-glow"></div>
                                                <p class="placeholder-text">Wybierz węzeł na wykresie, aby wyświetlić szczegóły architektoniczne.</p>
                                            </div>
                                        }
                                    </div>
                                </div>
                            </div>

                            <div class="sidebar-footer">
                                <button class="open-quiz-btn neon-glow-btn @(QuizService.HasNewQuiz ? "quiz-pulse-btn" : "")" @onclick="() => SetActiveTab(SidebarTab.Quiz)">
                                    <NexusIcon Name="quiz" Size="18" />
                                    <span>OPEN KNOWLEDGE QUIZ</span>
                                </button>
                            </div>
                        }
                        else
                        {
                            <div class="intelligence-scroll-area quiz-layout">
                                <div class="quiz-nav">
                                    <button class="back-to-graph-btn" @onclick="() => SetActiveTab(SidebarTab.Knowledge)">
                                        <NexusIcon Name="arrow-left" Size="16" />
                                        <span>← Powrót do wykresu</span>
                                    </button>
                                </div>
                                <KnowledgeCheck />
                            </div>
                        }
                    </div>
                </div>
            }
            else
            {
                <!-- Mobile full-bleed containers mapped to bottom tab navigation -->
                <div class="nexus-mobile-reader-tabs">
                    <!-- Tab 2: Graph -->
                    <div class="nexus-mobile-tab-content graph-tab @(_activeMobileTab == MobileReaderTab.Graph ? "active" : "")">
                        <KnowledgeGraph />
                    </div>

                    <!-- Tab 3: Insight (Contextual Intelligence AND Knowledge Quiz) -->
                    <div class="nexus-mobile-tab-content insight-tab @(_activeMobileTab == MobileReaderTab.Insight ? "active" : "")">
                        <div class="mobile-insight-container">
                            <div class="mobile-insight-header">
                                <div class="mobile-insight-nav">
                                    <button class="mobile-insight-nav-btn @(_activeTab == SidebarTab.Knowledge ? "active" : "")" @onclick="() => SetActiveTab(SidebarTab.Knowledge)">
                                        <NexusIcon Name="brain" Size="16" />
                                        <span>Podgląd pojęcia</span>
                                    </button>
                                    <button class="mobile-insight-nav-btn quiz-btn @(_activeTab == SidebarTab.Quiz ? "active" : "") @(QuizService.HasNewQuiz ? "quiz-pulse" : "")" @onclick="() => SetActiveTab(SidebarTab.Quiz)">
                                        <NexusIcon Name="quiz" Size="16" />
                                        <span>Quiz wiedzy</span>
                                    </button>
                                </div>
                            </div>

                            <div class="mobile-insight-body">
                                @if (_activeTab == SidebarTab.Knowledge)
                                {
                                    <div class="contextual-intelligence-panel">
                                        <div class="panel-body">
                                            @if (_selectedNode != null)
                                            {
                                                <div class="node-details">
                                                    <div class="node-header-section">
                                                        <span class="node-group-badge @(_selectedNode.Group.ToLower())">@(_selectedNode.Group.ToUpper())</span>
                                                        <h3 class="node-label">@_selectedNode.Label</h3>
                                                    </div>
                                                    
                                                    @if (!string.IsNullOrEmpty(_selectedNode.Description))
                                                    {
                                                        <div class="detail-section">
                                                            <p class="node-description">@_selectedNode.Description</p>
                                                        </div>
                                                    }

                                                    @if (!string.IsNullOrEmpty(_selectedNode.Summary))
                                                    {
                                                        <div class="detail-section summary-section">
                                                            <h4 class="section-title neon-sub-header">Podsumowanie</h4>
                                                            <p class="node-summary">@_selectedNode.Summary</p>
                                                        </div>
                                                    }

                                                    @if (_selectedNode.KeyTerms != null && _selectedNode.KeyTerms.Any())
                                                    {
                                                        <div class="detail-section key-terms-section">
                                                            <h4 class="section-title neon-sub-header">Kluczowe Pojęcia</h4>
                                                            <ul class="key-terms-list">
                                                                @foreach (var term in _selectedNode.KeyTerms)
                                                                {
                                                                    <li class="key-term-item">
                                                                        <span class="term-bullet">•</span>
                                                                        <span class="term-text">@term</span>
                                                                    </li>
                                                                }
                                                            </ul>
                                                        </div>
                                                    }
                                                </div>
                                            }
                                            else
                                            {
                                                <div class="no-node-selected">
                                                    <div class="placeholder-glow"></div>
                                                    <p class="placeholder-text">Wybierz pojęcie na wykresie, aby wyświetlić jego podsumowanie.</p>
                                                </div>
                                            }
                                        </div>
                                    </div>
                                }
                                else
                                {
                                    <div class="mobile-quiz-wrapper">
                                        <KnowledgeCheck />
                                    </div>
                                }
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Three-Tab Fixed Bottom Navigation Bar -->
                <div class="nexus-mobile-bottom-nav">
                    <button class="bottom-nav-item @(_activeMobileTab == MobileReaderTab.Reader ? "active" : "")" @onclick="() => SetMobileTab(MobileReaderTab.Reader)">
                        <NexusIcon Name="book-open" Size="20" />
                        <span>Czytnik</span>
                    </button>
                    <button class="bottom-nav-item @(_activeMobileTab == MobileReaderTab.Graph ? "active" : "")" @onclick="() => SetMobileTab(MobileReaderTab.Graph)">
                        <NexusIcon Name="network" Size="20" />
                        <span>Wykres</span>
                    </button>
                    <button class="bottom-nav-item @(_activeMobileTab == MobileReaderTab.Insight ? "active" : "")" @onclick="() => SetMobileTab(MobileReaderTab.Insight)">
                        <span class="insight-icon-wrapper">
                            <NexusIcon Name="brain" Size="20" />
                            @if (QuizService.HasNewQuiz)
                            {
                                <span class="nav-quiz-indicator"></span>
                            }
                        </span>
                        <span>Analiza</span>
                    </button>
                </div>
            }
        </Authorized>
        <Authorizing>
            <div class="app-preloader">
                <div class="preloader-spinner"></div>
                <div class="preloader-text">Weryfikacja...</div>
            </div>
        </Authorizing>
    </AuthorizeView>
</div>

<div id="blazor-error-ui" data-nosnippet>
    An unhandled error has occurred.
    <a href="." class="reload">Reload</a>
    <span class="dismiss">🗙</span>
</div>

@code {
    private enum SidebarTab
    {
        Knowledge,
        Quiz
    }

    private enum MobileReaderTab
    {
        Reader,
        Graph,
        Insight
    }

    private SidebarTab _activeTab = SidebarTab.Knowledge;
    private MobileReaderTab _activeMobileTab = MobileReaderTab.Reader;
    private string? _selectedNodeId;
    private GraphNodeDto? _selectedNode;

    private string _platformClass = "platform-desktop";
    private bool _isMobile = false;
    private DotNetObjectReference<ReaderLayout>? _selfReference;

    protected override void OnInitialized()
    {
        FocusMode.OnFocusModeChanged += HandleUpdate;
        QuizService.OnQuizUpdated += HandleUpdate;
        QuizService.OnQuizRequested += HandleQuizRequestedAsync;

        InteractionService.OnNodeSelected += HandleNodeSelectedAsync;
        InteractionService.OnAssistantRequested += HandleAssistantRequestedAsync;
        GraphService.OnGraphUpdated += HandleGraphUpdatedAsync;

        var context = PlatformService.GetDeviceContext();
        if (context.IsSuccess)
        {
            _isMobile = context.Value.DeviceType switch
            {
                DeviceType.Phone or DeviceType.Tablet => true,
                _ => false
            };
            
            _platformClass = _isMobile ? "platform-mobile" : "platform-desktop";
        }
    }

    private void SetActiveTab(SidebarTab tab)
    {
        _activeTab = tab;
        StateHasChanged();
    }

    private void SetMobileTab(MobileReaderTab tab)
    {
        _activeMobileTab = tab;
        StateHasChanged();
    }

    private async Task HandleQuizRequestedAsync(string blockId)
    {
        _activeTab = SidebarTab.Quiz;
        if (_isMobile)
        {
            _activeMobileTab = MobileReaderTab.Insight;
        }
        await InvokeAsync(StateHasChanged);
    }

    private async Task HandleAssistantRequestedAsync()
    {
        _activeMobileTab = MobileReaderTab.Insight;
        _activeTab = SidebarTab.Quiz;
        await InvokeAsync(StateHasChanged);
    }

    private async Task HandleNodeSelectedAsync(string nodeId)
    {
        _selectedNodeId = nodeId;
        if (GraphService.CurrentGraphData != null)
        {
            _selectedNode = GraphService.CurrentGraphData.Nodes.FirstOrDefault(n => n.Id == nodeId);
        }
        if (_isMobile)
        {
            _activeMobileTab = MobileReaderTab.Insight;
            _activeTab = SidebarTab.Knowledge;
        }
        await InvokeAsync(StateHasChanged);
    }

    private async Task HandleGraphUpdatedAsync()
    {
        _selectedNodeId = null;
        _selectedNode = null;
        await InvokeAsync(StateHasChanged);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            try
            {
                var module = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/NexusReader.UI.Shared/js/layoutResizer.js");
                await module.InvokeVoidAsync("initResizer", ".app-container", "#sidebar-resizer", "--sidebar-width");
            }
            catch (Exception ex)
            {
                Logger.LogError(ex, "Failed to initialize layout resizer JS module.");
            }

            await InitViewportDetectionAsync();
        }
    }

    private async Task InitViewportDetectionAsync()
    {
        try
        {
            _selfReference = DotNetObjectReference.Create(this);
            var isMobileViewport = await JS.InvokeAsync<bool>("eval", "window.innerWidth < 768");
            await OnViewportChanged(isMobileViewport);

            await JS.InvokeVoidAsync("eval", @"
                window.registerViewportObserver = (dotNetHelper) => {
                    let currentIsMobile = window.innerWidth < 768;
                    window.addEventListener('resize', () => {
                        let isMobile = window.innerWidth < 768;
                        if (isMobile !== currentIsMobile) {
                            currentIsMobile = isMobile;
                            dotNetHelper.invokeMethodAsync('OnViewportChanged', isMobile);
                        }
                    });
                }
            ");
            await JS.InvokeVoidAsync("registerViewportObserver", _selfReference);
        }
        catch (Exception ex)
        {
            Logger.LogWarning(ex, "Failed to initialize viewport detection.");
        }
    }

    [JSInvokable]
    public async Task OnViewportChanged(bool isMobile)
    {
        if (_isMobile != isMobile)
        {
            _isMobile = isMobile;
            _platformClass = _isMobile ? "platform-mobile" : "platform-desktop";
            await InvokeAsync(StateHasChanged);
        }
    }

    private Task HandleUpdate() => InvokeAsync(StateHasChanged);

    public void Dispose()
    {
        FocusMode.OnFocusModeChanged -= HandleUpdate;
        QuizService.OnQuizUpdated -= HandleUpdate;
        QuizService.OnQuizRequested -= HandleQuizRequestedAsync;
        InteractionService.OnNodeSelected -= HandleNodeSelectedAsync;
        InteractionService.OnAssistantRequested -= HandleAssistantRequestedAsync;
        GraphService.OnGraphUpdated -= HandleGraphUpdatedAsync;
        _selfReference?.Dispose();
    }
}