UpdateNotificationModal.razor

@namespace WebCodeCli.Components
@using WebCodeCli.Domain.Domain.Service
@using Markdig
@inject IJSRuntime JSRuntime
@inject ILocalizationService L
@inject IVersionService VersionService

<!-- 更新提示模态框 -->
@if (_isVisible)
{
    <div class="fixed inset-0 z-50 overflow-y-auto">
        <!-- 背景遮罩 -->
        <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" @onclick="Close"></div>

        <!-- 模态框内容 -->
        <div class="flex min-h-full items-center justify-center p-4">
            <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-lg transform transition-all" @onclick:stopPropagation="true">
                <!-- 头部 -->
                <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between bg-gradient-to-r from-blue-50 to-indigo-50 rounded-t-2xl">
                    <h3 class="text-lg font-semibold text-gray-800 flex items-center gap-2">
                        <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                            </svg>
                        </div>
                        @T("version.updateTitle")
                    </h3>
                    <button @onclick="Close" class="p-1 hover:bg-gray-100 rounded-lg transition-colors">
                        <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>

                <!-- 内容 -->
                <div class="p-6">
                    @if (_isChecking)
                    {
                        <!-- 检查中 -->
                        <div class="py-8 text-center">
                            <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-blue-600 mx-auto"></div>
                            <p class="mt-4 text-gray-500">@T("version.checking")</p>
                        </div>
                    }
                    else if (_result != null)
                    {
                        @if (!string.IsNullOrEmpty(_result.ErrorMessage))
                        {
                            <!-- 检查失败 -->
                            <div class="text-center py-4">
                                <div class="inline-flex items-center justify-center w-16 h-16 bg-red-100 rounded-full mb-4">
                                    <svg class="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                </div>
                                <h4 class="text-lg font-semibold text-gray-800 mb-2">@T("version.checkFailed")</h4>
                                <p class="text-sm text-gray-500 mb-4">@_result.ErrorMessage</p>
                                <a href="@_result.ReleaseUrl" 
                                   target="_blank" 
                                   rel="noopener noreferrer"
                                   class="inline-flex items-center gap-2 px-4 py-2 bg-gray-900 text-white rounded-lg font-medium hover:bg-gray-800 transition-colors">
                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                        <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
                                    </svg>
                                    @T("version.githubReleases")
                                </a>
                            </div>
                        }
                        else if (_result.HasUpdate)
                        {
                            <!-- 有更新 -->
                            <div class="space-y-4">
                                <!-- 版本信息 -->
                                <div class="flex items-center justify-center gap-4">
                                    <div class="text-center">
                                        <div class="text-xs text-gray-500 mb-1">@T("version.current")</div>
                                        <div class="text-lg font-mono font-semibold text-gray-600">v@_result.CurrentVersion</div>
                                    </div>
                                    <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                                    </svg>
                                    <div class="text-center">
                                        <div class="text-xs text-gray-500 mb-1">@T("version.latest")</div>
                                        <div class="text-lg font-mono font-semibold text-blue-600">v@_result.LatestVersion</div>
                                    </div>
                                </div>

                                <!-- 发布时间 -->
                                @if (_result.PublishedAt.HasValue)
                                {
                                    <div class="text-center text-sm text-gray-500">
                                        @T("version.publishedAt"): @_result.PublishedAt.Value.ToString("yyyy-MM-dd HH:mm")
                                    </div>
                                }

                                <!-- 更新日志 -->
                                @if (!string.IsNullOrEmpty(_result.ReleaseNotes))
                                {
                                    <div class="mt-4">
                                        <h4 class="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-2">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                            </svg>
                                            @T("version.releaseNotes")
                                        </h4>
                                        <div class="bg-gray-50 rounded-lg p-4 max-h-48 overflow-y-auto text-sm prose prose-sm prose-gray">
                                            @((MarkupString)RenderMarkdown(_result.ReleaseNotes))
                                        </div>
                                    </div>
                                }

                                <!-- 操作按钮 -->
                                <div class="flex gap-3 pt-2">
                                    <button @onclick="Close"
                                            class="flex-1 py-3 px-4 border border-gray-300 rounded-xl text-gray-700 font-medium hover:bg-gray-50 transition-colors">
                                        @T("version.remindLater")
                                    </button>
                                    <a href="@_result.ReleaseUrl" 
                                       target="_blank" 
                                       rel="noopener noreferrer"
                                       class="flex-1 py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-medium transition-colors flex items-center justify-center gap-2">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                                        </svg>
                                        @T("version.viewUpdate")
                                    </a>
                                </div>
                            </div>
                        }
                        else
                        {
                            <!-- 已是最新 -->
                            <div class="text-center py-4">
                                <div class="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4">
                                    <svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                <h4 class="text-lg font-semibold text-gray-800 mb-2">@T("version.upToDate")</h4>
                                <p class="text-sm text-gray-500 mb-2">
                                    @T("version.current"): <span class="font-mono font-semibold">v@_result.CurrentVersion</span>
                                </p>
                                <button @onclick="Close"
                                        class="mt-4 px-6 py-2 bg-gray-900 text-white rounded-lg font-medium hover:bg-gray-800 transition-colors">
                                    @T("common.ok")
                                </button>
                            </div>
                        }
                    }
                </div>
            </div>
        </div>
    </div>
}

@code {
    private bool _isVisible = false;
    private bool _isChecking = false;
    private VersionCheckResult? _result;
    
    // 本地化相关
    private Dictionary<string, string> _translations = new();
    private string _currentLanguage = "zh-CN";
    
    // Markdown 渲染管道
    private static readonly MarkdownPipeline _markdownPipeline = new MarkdownPipelineBuilder()
        .UseAdvancedExtensions()
        .DisableHtml()
        .Build();

    protected override async Task OnInitializedAsync()
    {
        await LoadTranslationsAsync();
    }

    /// <summary>
    /// 显示模态框
    /// </summary>
    public async Task ShowAsync(VersionCheckResult? result = null)
    {
        _isVisible = true;
        _result = result;
        _isChecking = result == null;
        StateHasChanged();
        
        await LoadTranslationsAsync();
    }

    /// <summary>
    /// 显示并开始检查更新
    /// </summary>
    public async Task ShowAndCheckAsync(IVersionService versionService)
    {
        _isVisible = true;
        _isChecking = true;
        _result = null;
        StateHasChanged();
        
        await LoadTranslationsAsync();
        
        try
        {
            _result = await versionService.CheckForUpdateAsync();
        }
        catch (Exception ex)
        {
            _result = new VersionCheckResult
            {
                CurrentVersion = versionService.GetCurrentVersion(),
                ErrorMessage = ex.Message,
                ReleaseUrl = "https://github.com/shuyu-labs/WebCode/releases"
            };
        }
        finally
        {
            _isChecking = false;
            StateHasChanged();
        }
    }

    /// <summary>
    /// 关闭模态框
    /// </summary>
    public void Close()
    {
        _isVisible = false;
        StateHasChanged();
    }

    /// <summary>
    /// 设置检查结果
    /// </summary>
    public void SetResult(VersionCheckResult result)
    {
        _result = result;
        _isChecking = false;
        StateHasChanged();
    }

    private string RenderMarkdown(string markdown)
    {
        if (string.IsNullOrEmpty(markdown))
            return string.Empty;
            
        try
        {
            return Markdown.ToHtml(markdown, _markdownPipeline);
        }
        catch
        {
            return markdown;
        }
    }

    #region 本地化辅助方法

    private async Task LoadTranslationsAsync()
    {
        try
        {
            _currentLanguage = await L.GetCurrentLanguageAsync();
            var allTranslations = await L.GetAllTranslationsAsync(_currentLanguage);
            _translations = FlattenTranslations(allTranslations);
        }
        catch (Exception ex)
        {
            Console.WriteLine($"[UpdateNotificationModal] 加载翻译资源失败: {ex.Message}");
        }
    }

    private Dictionary<string, string> FlattenTranslations(Dictionary<string, object> source, string prefix = "")
    {
        var result = new Dictionary<string, string>();

        foreach (var kvp in source)
        {
            var key = string.IsNullOrEmpty(prefix) ? kvp.Key : $"{prefix}.{kvp.Key}";

            if (kvp.Value is System.Text.Json.JsonElement jsonElement)
            {
                if (jsonElement.ValueKind == System.Text.Json.JsonValueKind.Object)
                {
                    var nested = System.Text.Json.JsonSerializer.Deserialize<Dictionary<string, object>>(jsonElement.GetRawText());
                    if (nested != null)
                    {
                        foreach (var item in FlattenTranslations(nested, key))
                        {
                            result[item.Key] = item.Value;
                        }
                    }
                }
                else if (jsonElement.ValueKind == System.Text.Json.JsonValueKind.String)
                {
                    result[key] = jsonElement.GetString() ?? key;
                }
            }
            else if (kvp.Value is Dictionary<string, object> dict)
            {
                foreach (var item in FlattenTranslations(dict, key))
                {
                    result[item.Key] = item.Value;
                }
            }
            else if (kvp.Value is string str)
            {
                result[key] = str;
            }
        }

        return result;
    }

    private string T(string key)
    {
        if (_translations.TryGetValue(key, out var translation))
        {
            return translation;
        }

        var parts = key.Split('.');
        return parts.Length > 0 ? parts[^1] : key;
    }

    #endregion
}