Nexus.Reader/src/NexusReader.UI.Shared/Pages/Dashboard.razor

@page "/"
@page "/dashboard"
@using Microsoft.AspNetCore.Authorization
@using NexusReader.UI.Shared.Components.Atoms
@using NexusReader.UI.Shared.Components.Organisms
@using NexusReader.UI.Shared.Services
@inject IIdentityService IdentityService
@inject NavigationManager NavigationManager
@inject ISyncService SyncService
@inject IJSRuntime JS
@using Microsoft.JSInterop
@attribute [Authorize]
@implements IDisposable


<PageTitle>Dashboard | Nexus Reader</PageTitle>

<div class="dashboard-container">
    <!-- Top Profile Section -->
    <header class="profile-header">
        <div class="header-grid-bg"></div>
        <div class="profile-visual">
            <div class="avatar-wrapper">
                <img src="https://api.dicebear.com/7.x/bottts/svg?seed=Nexus" alt="Profile" class="profile-img" />
                <div class="avatar-glow"></div>
            </div>
            <h1 class="username">@(string.IsNullOrEmpty(_profile?.DisplayName) ? (_profile?.Email.Split('@')[0] ?? "Użytkownik") : _profile.DisplayName)</h1>
            
            <div class="status-pills">
                <div class="status-pill">
                    <span class="pill-label">Książki:</span>
                    <span class="pill-value">@(_profile?.BooksReadCount ?? 0)</span>
                </div>
                <div class="status-pill">
                    <span class="pill-label">Pojęcia:</span>
                    <span class="pill-value">@(_profile?.ConceptsMappedCount ?? 0)</span>
                </div>
                <div class="status-pill">
                    <span class="pill-label">Średni Wynik:</span>
                    <span class="pill-value">@(_profile?.AverageQuizScore ?? 0)%</span>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content Area -->
    <main class="dashboard-content">
        <h2 class="section-title">Witaj, @(string.IsNullOrEmpty(_profile?.DisplayName) ? (_profile?.Email.Split('@')[0] ?? "Użytkowniku") : _profile.DisplayName)</h2>
        
        <div class="main-grid">
            <!-- Current Reading Card -->
            <CurrentReadingWidget Book="_profile?.LastReadBook" />

            <div class="secondary-grid">
                <!-- Knowledge Integration -->
                <section class="integration-card glass-panel">
                    <div class="panel-header">
                        <h4>Integracja Wiedzy</h4>
                        <button class="view-toggle-btn" @onclick="ToggleGraphMode" type="button" aria-label="Toggle View">
                            <NexusIcon Name="@(_showSimplifiedList ? "map" : "list")" Size="14" />
                            <span>@(_showSimplifiedList ? "Pokaż Wykres" : "Pokaż Listę")</span>
                        </button>
                    </div>

                    @if (_showSimplifiedList)
                    {
                        <div class="concepts-linear-stack">
                            @if (_profile?.MappedConcepts != null && _profile.MappedConcepts.Any())
                            {
                                <div class="concept-linear-list">
                                    @foreach (var concept in _profile.MappedConcepts)
                                    {
                                        <div class="concept-linear-item">
                                            <span class="concept-badge @concept.Type.ToLower()">@concept.Type</span>
                                            <span class="concept-text" title="@concept.Content">@concept.Content</span>
                                        </div>
                                    }
                                </div>
                            }
                            else
                            {
                                <div class="concepts-empty-list">
                                    <NexusIcon Name="info" Size="20" />
                                    <p>Brak pojęć. Rozpocznij czytanie, aby AI wyodrębniło kluczowe koncepty.</p>
                                </div>
                            }
                        </div>
                    }
                    else
                    {
                        <div class="graph-placeholder">
                            <div class="graph-node central" title="Ośrodek Wiedzy Nexus Reader"></div>
                            
                            @if (_profile?.MappedConcepts != null && _profile.MappedConcepts.Any())
                            {
                                <div @key='"satellite-concepts-container"' style="display: contents;">
                                    @for (int i = 0; i < _profile.MappedConcepts.Count; i++)
                                    {
                                        var concept = _profile.MappedConcepts[i];
                                        var angle = i * (360.0 / _profile.MappedConcepts.Count);
                                        var dist = 65;
                                        <div @key="concept.Id" class="graph-node satellite" 
                                             style="--angle: @(angle)deg; --dist: @(dist)px;"
                                             title="[@concept.Type] @concept.Content"
                                             @onmouseover="() => SetHoveredConcept(concept)"
                                             @onmouseout="ClearHoveredConcept">
                                        </div>
                                    }
                                </div>
                            }
                            else
                            {
                                <div @key='"satellite-placeholders-container"' style="display: contents;">
                                    <div @key='"satellite-placeholder-0"' class="graph-node satellite" style="--angle: 0deg; --dist: 60px;"></div>
                                    <div @key='"satellite-placeholder-1"' class="graph-node satellite" style="--angle: 120deg; --dist: 50px;"></div>
                                    <div @key='"satellite-placeholder-2"' class="graph-node satellite" style="--angle: 240deg; --dist: 70px;"></div>
                                </div>
                            }
                            
                            <div class="active-node-label">
                                @(string.IsNullOrEmpty(_hoveredConceptLabel) ? "TU JESTEŚ" : _hoveredConceptLabel)
                            </div>
                        </div>
                        
                        @if (_hoveredConcept != null)
                        {
                            <div class="concept-detail-toast">
                                <span class="concept-type">@_hoveredConcept.Type</span>
                                <p class="concept-content">@_hoveredConcept.Content</p>
                            </div>
                        }
                        else
                        {
                            <div class="concept-detail-toast placeholder">
                                <span class="concept-type">Mapowanie AI</span>
                                <p class="concept-content">Najedź na węzeł, aby zbadać pojęcie wydobyte przez Nexus AI.</p>
                            </div>
                        }
                    }
                </section>

                <!-- Quiz Summary -->
                <section class="quiz-card glass-panel">
                    <div class="panel-header">
                        <h4>Rozwiązane Quizy</h4>
                        <NexusIcon Name="arrow-right" Size="16" />
                    </div>
                    <div class="quiz-preview">
                        @if (_profile?.RecentQuizzes != null && _profile.RecentQuizzes.Any())
                        {
                            <div @key='"quiz-history-list"' class="quiz-history-list">
                                @foreach (var quiz in _profile.RecentQuizzes)
                                {
                                    <div @key="quiz.Id" class="quiz-history-item">
                                        <div class="quiz-item-header">
                                            <span class="quiz-topic">@quiz.Topic</span>
                                            <span class="quiz-score badge @(quiz.Percentage >= 80 ? "badge-success" : quiz.Percentage >= 50 ? "badge-warning" : "badge-danger")">
                                                @quiz.Score / @quiz.TotalQuestions (@((int)quiz.Percentage)%)
                                            </span>
                                        </div>
                                        <div class="quiz-item-meta">
                                            <span class="quiz-date">@quiz.CompletedDate.ToString("g")</span>
                                        </div>
                                    </div>
                                }
                            </div>
                        }
                        else
                        {
                            <div @key='"empty-quiz-state"' class="empty-quiz-state">
                                <p class="question">Brak rozwiązanych quizów</p>
                                <p class="sub-text">Rozwiązuj quizy w trakcie czytania książek, aby śledzić swoje postępy.</p>
                            </div>
                        }
                    </div>
                </section>
            </div>
        </div>

        <!-- Contextual AI Recommendations -->
        <ContextualRecommendationsWidget />

        <!-- Detailed Content Block Showcase -->
        <section class="architecture-guide-panel glass-panel">
            <div class="panel-header">
                <h4>Architektura Systemu Nexus</h4>
                <NexusIcon Name="book" Size="16" />
            </div>
            <div class="architecture-content">
                <h3>.NET 10 &amp; Blazor Hybrid Architecture</h3>
                <p>
                    Nasza platforma została zaprojektowana w oparciu o najnowszy stos technologiczny <strong>.NET 10</strong> oraz model komponentowy <strong>Blazor</strong>, zapewniając pełną kompatybilność z kompilacją <strong>Native AOT</strong> (Ahead-Of-Time). Dzięki temu aplikacja charakteryzuje się błyskawicznym czasu uruchamiania i minimalnym zużyciem pamięci, co jest kluczowe w scenariuszach mobilnych i hybrydowych.
                </p>
                <p>
                    Wykorzystanie wzorca <strong>CQRS</strong> (Command Query Responsibility Segregation) wraz z biblioteką <strong>MediatR</strong> oddziela operacje odczytu od zapisu, gwarantując skalowalność i przejrzystość kodu. Wszystkie operacje biznesowe są reprezentowane przez niezależne procedury obsługi (handlers) zwracające unifikowany typ wyniku <code>Result&lt;T&gt;</code>, eliminując rzucanie wyjątków dla przepływów sterowania.
                </p>
                <p>
                    Warstwa prezentacji opiera się na izolowanych komponentach Razor z dedykowanymi arkuszami stylów CSS, co ułatwia zarządzanie modularnym i rozszerzalnym interfejsem użytkownika w duchu Modern Deep Dark.
                </p>
            </div>
        </section>
    </main>
</div>

@code {
    private UserProfileDto? _profile;
    private MappedConceptDto? _hoveredConcept;
    private string _hoveredConceptLabel = string.Empty;
    private bool _showSimplifiedList = false;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            try
            {
                var isMobile = await JS.InvokeAsync<bool>("eval", "window.innerWidth < 768");
                if (isMobile)
                {
                    _showSimplifiedList = true;
                    StateHasChanged();
                }
            }
            catch
            {
                // Fallback for tests or prerendering
            }
        }
    }

    private void ToggleGraphMode()
    {
        _showSimplifiedList = !_showSimplifiedList;
    }

    protected override async Task OnInitializedAsync()
    {
        IdentityService.OnStateInvalidated += HandleStateInvalidatedAsync;
        await LoadProfileAsync();
        
        await SyncService.InitializeAsync();
        SyncService.OnProgressReceived += HandleProgressReceivedAsync;
    }

    private void SetHoveredConcept(MappedConceptDto concept)
    {
        _hoveredConcept = concept;
        _hoveredConceptLabel = concept.DisplayLabel;
    }

    private void ClearHoveredConcept()
    {
        _hoveredConcept = null;
        _hoveredConceptLabel = string.Empty;
    }

    private async Task LoadProfileAsync()
    {
        var result = await IdentityService.GetProfileAsync();
        if (result.IsSuccess) 
        {
            _profile = result.Value;
        }
        else
        {
            _profile = null;
        }
        StateHasChanged();
    }

    private async Task HandleStateInvalidatedAsync()
    {
        await InvokeAsync(async () =>
        {
            await LoadProfileAsync();
        });
    }

    private async Task HandleProgressReceivedAsync(string pageId, DateTime timestamp)
    {
        await InvokeAsync(async () =>
        {
            IdentityService.ClearCache();
            await LoadProfileAsync();
        });
    }

    public void Dispose()
    {
        IdentityService.OnStateInvalidated -= HandleStateInvalidatedAsync;
        SyncService.OnProgressReceived -= HandleProgressReceivedAsync;
    }
}