ProjectManageModal.razor

@namespace WebCodeCli.Components
@using System.Text.Json
@using System.Net.Http.Headers
@using Microsoft.AspNetCore.Components.Forms
@using WebCodeCli.Domain.Domain.Model
@using WebCodeCli.Domain.Domain.Service
@inject HttpClient Http
@inject IJSRuntime JSRuntime
@inject ILocalizationService L

<!-- 项目管理模态框 -->
@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-2xl transform transition-all overflow-hidden" @onclick:stopPropagation="true">
                <!-- 头部 -->
                <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-800 flex items-center gap-2">
                        <svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
                        </svg>
                        @T("project.title")
                    </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 overflow-x-hidden">
                    <!-- Tab 切换 -->
                    <div class="flex border-b border-gray-200 mb-4">
                        <button @onclick='() => _activeTab = "list"'
                                class="px-4 py-2 text-sm font-medium @(_activeTab == "list" ? "text-gray-900 border-b-2 border-gray-900 -mb-px" : "text-gray-500 hover:text-gray-700")">
                            @T("project.list") (@_projects.Count)
                        </button>
                        <button @onclick='() => _activeTab = "create"'
                                class="px-4 py-2 text-sm font-medium @(_activeTab == "create" ? "text-gray-900 border-b-2 border-gray-900 -mb-px" : "text-gray-500 hover:text-gray-700")">
                            @T("project.create")
                        </button>
                    </div>

                    @if (_activeTab == "list")
                    {
                        <!-- 项目列表 -->
                        @if (_isLoadingProjects)
                        {
                            <div class="py-8 text-center">
                                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 mx-auto"></div>
                                <p class="mt-2 text-gray-500">@T("common.loading")</p>
                            </div>
                        }
                        else if (_projects.Count == 0)
                        {
                            <div class="py-8 text-center text-gray-500">
                                <svg class="w-12 h-12 mx-auto text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
                                </svg>
                                <p>@T("project.noProjects")</p>
                                <button @onclick='() => _activeTab = "create"' class="mt-2 text-gray-700 hover:underline text-sm">
                                    @T("project.createFirst")
                                </button>
                            </div>
                        }
                        else
                        {
                            <div class="space-y-3 max-h-96 overflow-y-auto">
                                @foreach (var project in _projects)
                                {
                                    <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors">
                                        <div class="flex items-start justify-between">
                                            <div class="flex-1 min-w-0">
                                                <div class="flex items-center gap-2 mb-1">
                                                    <!-- 状态标签 -->
                                                    @if (project.Status == "ready")
                                                    {
                                                        <span class="px-2 py-0.5 bg-green-100 text-green-700 text-xs rounded">@T("project.status.ready")</span>
                                                    }
                                                    else if (project.Status == "cloning")
                                                    {
                                                        <span class="px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded flex items-center gap-1">
                                                            <div class="w-3 h-3 animate-spin rounded-full border-2 border-blue-500 border-t-transparent"></div>
                                                            @T("project.status.cloning")
                                                        </span>
                                                    }
                                                    else if (project.Status == "error")
                                                    {
                                                        <span class="px-2 py-0.5 bg-red-100 text-red-600 text-xs rounded">@T("project.status.error")</span>
                                                    }
                                                    else
                                                    {
                                                        <span class="px-2 py-0.5 bg-gray-100 text-gray-600 text-xs rounded">@T("project.status.pending")</span>
                                                    }
                                                    <!-- 来源标签 -->
                                                    @if (IsZipProject(project))
                                                    {
                                                        <span class="px-2 py-0.5 bg-purple-100 text-purple-700 text-xs rounded">@T("project.localProject")</span>
                                                    }
                                                    <span class="text-sm font-semibold text-gray-800 truncate">@project.Name</span>
                                                </div>
                                                @if (!IsZipProject(project))
                                                {
                                                    <p class="text-xs text-gray-500 truncate mb-1">@project.GitUrl</p>
                                                }
                                                <div class="flex items-center gap-3 text-xs text-gray-400">
                                                    @if (!IsZipProject(project))
                                                    {
                                                        <span>@T("project.branch"): @(string.IsNullOrWhiteSpace(project.Branch) ? T("project.defaultBranch") : project.Branch)</span>
                                                    }
                                                    @if (project.LastSyncAt.HasValue)
                                                    {
                                                        <span>@T("project.lastSync"): @project.LastSyncAt.Value.ToString("MM-dd HH:mm")</span>
                                                    }
                                                    @if (IsZipProject(project))
                                                    {
                                                        <span>@T("project.sourceZip")</span>
                                                    }
                                                </div>
                                                @if (!string.IsNullOrEmpty(project.ErrorMessage))
                                                {
                                                    <p class="text-xs text-red-500 mt-1">@project.ErrorMessage</p>
                                                }
                                            </div>
                                            <div class="flex items-center gap-1 ml-2">
                                                @if (!IsZipProject(project) && (project.Status == "pending" || project.Status == "error"))
                                                {
                                                    <button @onclick="() => CloneProject(project.ProjectId)"
                                                            disabled="@(_cloningProjectId == project.ProjectId)"
                                                            class="p-2 hover:bg-green-100 rounded-lg transition-colors disabled:opacity-50"
                                                            title="@T("project.clone")">
                                                        @if (_cloningProjectId == project.ProjectId)
                                                        {
                                                            <div class="w-4 h-4 animate-spin rounded-full border-2 border-green-500 border-t-transparent"></div>
                                                        }
                                                        else
                                                        {
                                                            <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                                                            </svg>
                                                        }
                                                    </button>
                                                }
                                                else if (!IsZipProject(project) && project.Status == "ready")
                                                {
                                                    <button @onclick="() => ToggleProjectBranchPicker(project.ProjectId)"
                                                            disabled="@(_isLoadingProjectBranches || _switchingProjectId == project.ProjectId)"
                                                            class="p-2 hover:bg-emerald-100 rounded-lg transition-colors disabled:opacity-50"
                                                            title="@T("project.switchBranch")">
                                                        @if (_isLoadingProjectBranches && _branchPickerProjectId == project.ProjectId)
                                                        {
                                                            <div class="w-4 h-4 animate-spin rounded-full border-2 border-emerald-500 border-t-transparent"></div>
                                                        }
                                                        else
                                                        {
                                                            <svg class="w-4 h-4 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h10M7 12h6m-6 5h10M5 4l3 3-3 3m14-3l-3 3 3 3"></path>
                                                            </svg>
                                                        }
                                                    </button>
                                                    <button @onclick="() => PullProject(project.ProjectId)"
                                                            disabled="@(_pullingProjectId == project.ProjectId)"
                                                            class="p-2 hover:bg-blue-100 rounded-lg transition-colors disabled:opacity-50"
                                                            title="@T("project.pull")">
                                                        @if (_pullingProjectId == project.ProjectId)
                                                        {
                                                            <div class="w-4 h-4 animate-spin rounded-full border-2 border-blue-500 border-t-transparent"></div>
                                                        }
                                                        else
                                                        {
                                                            <svg class="w-4 h-4 text-blue-600" 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>
                                                        }
                                                    </button>
                                                }
                                                @if (!IsZipProject(project))
                                                {
                                                    <button @onclick="() => ShowEditDialog(project)"
                                                            class="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                                                            title="@T("common.edit")">
                                                        <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                                        </svg>
                                                    </button>
                                                }
                                                <button @onclick="() => DeleteProject(project.ProjectId)"
                                                        class="p-2 hover:bg-red-100 rounded-lg transition-colors"
                                                        title="@T("common.delete")">
                                                    <svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                                    </svg>
                                                </button>
                                            </div>
                                        </div>
                                        @if (!IsZipProject(project) && project.Status == "ready" && _branchPickerProjectId == project.ProjectId)
                                        {
                                            <div class="mt-3 rounded-lg border border-emerald-200 bg-emerald-50 p-3">
                                                <div class="flex items-center justify-between gap-2">
                                                    <div>
                                                        <p class="text-sm font-medium text-emerald-900">@T("project.switchBranch")</p>
                                                        <p class="text-xs text-emerald-700">@T("project.selectBranchToSwitch")</p>
                                                    </div>
                                                    <button @onclick="CloseProjectBranchPicker"
                                                            class="text-xs text-emerald-700 hover:text-emerald-900 transition-colors">
                                                        @T("common.cancel")
                                                    </button>
                                                </div>

                                                @if (_branchPickerError is not null)
                                                {
                                                    <div class="mt-2 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-600">
                                                        @_branchPickerError
                                                    </div>
                                                }
                                                else if (_isLoadingProjectBranches)
                                                {
                                                    <div class="mt-3 flex items-center gap-2 text-sm text-emerald-700">
                                                        <div class="w-4 h-4 animate-spin rounded-full border-2 border-emerald-500 border-t-transparent"></div>
                                                        <span>@T("project.loadingBranches")</span>
                                                    </div>
                                                }
                                                else if (_branchPickerBranches.Count == 0)
                                                {
                                                    <div class="mt-2 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700">
                                                        @T("project.noBranchesAvailable")
                                                    </div>
                                                }
                                                else
                                                {
                                                    <div class="mt-3 flex flex-wrap gap-2">
                                                        @foreach (var branch in _branchPickerBranches)
                                                        {
                                                            var isCurrentBranch = string.Equals(project.Branch, branch, StringComparison.OrdinalIgnoreCase);
                                                            var isSwitchingBranch = _switchingProjectId == project.ProjectId && _switchingBranchName == branch;
                                                            <button @onclick="() => SwitchProjectBranch(project.ProjectId, branch)"
                                                                    disabled="@(_switchingProjectId == project.ProjectId)"
                                                                    class="px-3 py-1.5 text-xs rounded-full border transition-colors disabled:opacity-60 disabled:cursor-not-allowed @(isCurrentBranch ? "border-emerald-700 bg-emerald-700 text-white" : "border-emerald-300 bg-white text-emerald-800 hover:bg-emerald-100")">
                                                                @if (isSwitchingBranch)
                                                                {
                                                                    <span class="inline-flex items-center gap-1">
                                                                        <span class="w-3 h-3 animate-spin rounded-full border-2 border-current border-t-transparent"></span>
                                                                        <span>@T("project.switchingBranch")</span>
                                                                    </span>
                                                                }
                                                                else
                                                                {
                                                                    @branch
                                                                }
                                                            </button>
                                                        }
                                                    </div>
                                                }
                                            </div>
                                        }
                                    </div>
                                }
                            </div>
                        }
                    }
                    else
                    {
                        <!-- 创建/编辑项目表单 -->
                        <div class="space-y-4">
                            @if (_editingProject == null)
                            {
                                <!-- 项目来源切换（仅新建时显示） -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">@T("project.sourceType")</label>
                                    <div class="flex gap-2">
                                        <button @onclick='() => _sourceType = "git"'
                                                class="flex-1 py-2 px-4 rounded-lg border-2 transition-colors flex items-center justify-center gap-2 @(_sourceType == "git" ? "border-gray-900 bg-gray-900 text-white" : "border-gray-300 hover:border-gray-400")">
                                            <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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
                                            </svg>
                                            @T("project.sourceGit")
                                        </button>
                                        <button @onclick='() => _sourceType = "zip"'
                                                class="flex-1 py-2 px-4 rounded-lg border-2 transition-colors flex items-center justify-center gap-2 @(_sourceType == "zip" ? "border-gray-900 bg-gray-900 text-white" : "border-gray-300 hover:border-gray-400")">
                                            <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="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                                            </svg>
                                            @T("project.sourceZip")
                                        </button>
                                    </div>
                                </div>
                            }

                            @if (_sourceType == "git" || _editingProject != null)
                            {
                                <!-- Git 项目表单 -->
                                <!-- 项目名称 -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">
                                        @T("project.name") <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text"
                                           @bind="_formName"
                                           placeholder="@T("project.namePlaceholder")"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
                                           disabled="@_isSaving" />
                                </div>

                                <!-- Git 仓库地址 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                                @T("project.gitUrl") <span class="text-red-500">*</span>
                                </label>
                                <input type="text"
                                       @bind="_formGitUrl"
                                       @bind:event="oninput"
                                                    placeholder="@T("project.gitUrlPlaceholder")"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
                                       disabled="@_isSaving" />
                            </div>

                            <!-- 认证方式 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">@T("project.authType")</label>
                                <MobileSelect TValue="string"
                                              @ref="_authTypeSelect"
                                              Value="@_formAuthType"
                                              DisplayText="@GetAuthTypeLabel(_formAuthType)"
                                              Placeholder="@T("project.authTypeNone")"
                                              Title="@T("project.authType")"
                                              CancelText="@T("common.cancel")"
                                              UseMobileSheet="true"
                                              Disabled="@_isSaving">
                                    <MobileSelectOption TValue="string"
                                                        Value="@("none")"
                                                        Text="@T("project.authTypeNone")"
                                                        IsSelected="@(_formAuthType == "none")"
                                                        OnSelect="SelectAuthTypeAsync" />
                                    <MobileSelectOption TValue="string"
                                                        Value="@("https")"
                                                        Text="@T("project.authTypeHttps")"
                                                        IsSelected="@(_formAuthType == "https")"
                                                        OnSelect="SelectAuthTypeAsync" />
                                    <MobileSelectOption TValue="string"
                                                        Value="@("ssh")"
                                                        Text="@T("project.authTypeSsh")"
                                                        IsSelected="@(_formAuthType == "ssh")"
                                                        OnSelect="SelectAuthTypeAsync" />
                                </MobileSelect>
                            </div>

                            <!-- HTTPS 认证信息 -->
                            @if (_formAuthType == "https")
                            {
                                <div class="space-y-3 pl-4 border-l-2 border-gray-200">
                                    <div>
                                             <label class="block text-sm font-medium text-gray-700 mb-1">@T("project.httpsUsername")</label>
                                        <input type="text"
                                               @bind="_formHttpsUsername"
                                                 placeholder="@T("project.httpsUsernamePlaceholder")"
                                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
                                               disabled="@_isSaving" />
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">
                                              @T("project.httpsToken") <span class="text-red-500">*</span>
                                        </label>
                                        <input type="password"
                                               @bind="_formHttpsToken"
                                                 placeholder="@T("project.httpsTokenPlaceholder")"
                                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
                                               disabled="@_isSaving" />
                                             <p class="text-xs text-gray-500 mt-1">@T("project.httpsTokenHint")</p>
                                    </div>
                                </div>
                            }

                            <!-- SSH 认证信息 -->
                            @if (_formAuthType == "ssh")
                            {
                                <div class="space-y-3 pl-4 border-l-2 border-gray-200">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">
                                            @T("project.sshPrivateKey") <span class="text-red-500">*</span>
                                        </label>
                                        <textarea @bind="_formSshPrivateKey"
                                                  placeholder="@T("project.sshPrivateKeyPlaceholder")"
                                                  rows="5"
                                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-gray-900 font-mono text-sm"
                                                  disabled="@_isSaving"></textarea>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-1">@T("project.sshPassphrase")</label>
                                        <input type="password"
                                               @bind="_formSshPassphrase"
                                               placeholder="@T("project.sshPassphrasePlaceholder")"
                                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
                                               disabled="@_isSaving" />
                                    </div>
                                </div>
                            }

                            <!-- 分支选择 -->
                            <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">@T("project.branch")</label>
                                <div class="flex gap-2">
                                    <input type="text"
                                           @bind="_formBranch"
                                         placeholder="@T("project.branchPlaceholder")"
                                           class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
                                           disabled="@_isSaving" />
                                    <button @onclick="FetchBranches"
                                            disabled="@(_isFetchingBranches || string.IsNullOrWhiteSpace(_formGitUrl))"
                                            class="px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-1"
                                          title="@T("project.fetchBranches")">
                                        @if (_isFetchingBranches)
                                        {
                                            <div class="w-4 h-4 animate-spin rounded-full border-2 border-gray-500 border-t-transparent"></div>
                                        }
                                        else
                                        {
                                            <svg class="w-4 h-4 text-gray-600" 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>
                                        }
                                        @T("project.fetchBranches")
                                    </button>
                                </div>
                                @if (_availableBranches.Count > 0)
                                {
                                    <div class="mt-2 flex flex-wrap gap-1">
                                        @foreach (var branch in _availableBranches.Take(10))
                                        {
                                            <button @onclick="() => _formBranch = branch"
                                                    class="px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded transition-colors @(_formBranch == branch ? "bg-gray-800 text-white hover:bg-gray-700" : "")">
                                                @branch
                                            </button>
                                        }
                                        @if (_availableBranches.Count > 10)
                                        {
                                            <span class="px-2 py-1 text-xs text-gray-400">@T("project.moreBranches", ("count", (_availableBranches.Count - 10).ToString()))</span>
                                        }
                                    </div>
                                }
                            </div>

                            <!-- 错误提示 -->
                                @if (!string.IsNullOrEmpty(_formError))
                                {
                                    <div class="p-3 bg-red-50 border border-red-200 rounded-lg text-red-600 text-sm">
                                        @_formError
                                    </div>
                                }

                                <!-- 提交按钮 -->
                                <div class="flex gap-3">
                                    @if (_editingProject != null)
                                    {
                                        <button @onclick="CancelEdit"
                                                class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                                            @T("common.cancel")
                                        </button>
                                    }
                                    <button @onclick="SaveProject"
                                            disabled="@(_isSaving || string.IsNullOrWhiteSpace(_formName) || string.IsNullOrWhiteSpace(_formGitUrl))"
                                            class="flex-1 py-3 bg-gray-900 text-white rounded-lg font-medium hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2">
                                        @if (_isSaving)
                                        {
                                            <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
                                            <span>@T("project.saving")</span>
                                        }
                                        else
                                        {
                                            <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="M5 13l4 4L19 7"></path>
                                            </svg>
                                            <span>@(_editingProject != null ? T("project.saveChanges") : T("project.create"))</span>
                                        }
                                    </button>
                                </div>
                            }
                            else
                            {
                                <!-- ZIP 上传表单 -->
                                <!-- 项目名称 -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">
                                        @T("project.name") <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text"
                                           @bind="_zipFormName"
                                           placeholder="@T("project.namePlaceholder")"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
                                           disabled="@_isUploadingZip" />
                                </div>

                                <!-- ZIP 文件选择 -->
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">
                                        @T("project.selectZipFile") <span class="text-red-500">*</span>
                                    </label>
                                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-gray-400 transition-colors">
                                        <InputFile OnChange="OnZipFileSelected" 
                                                   accept=".zip" 
                                                   disabled="@_isUploadingZip"
                                                   class="hidden" 
                                                   id="zip-file-input" />
                                        <label for="zip-file-input" class="cursor-pointer">
                                            @if (_selectedZipFile != null)
                                            {
                                                <div class="flex items-center justify-center gap-2 text-gray-700">
                                                    <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                    </svg>
                                                    <div class="text-left">
                                                        <p class="font-medium">@_selectedZipFile.Name</p>
                                                        <p class="text-xs text-gray-500">@FormatFileSize(_selectedZipFile.Size)</p>
                                                    </div>
                                                </div>
                                            }
                                            else
                                            {
                                                <svg class="w-12 h-12 mx-auto text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                                                </svg>
                                                <p class="text-gray-600">@T("project.selectZipFile")</p>
                                                <p class="text-xs text-gray-400 mt-1">@T("project.fileTooLarge")</p>
                                            }
                                        </label>
                                    </div>
                                </div>

                                <!-- 上传进度 -->
                                @if (_isUploadingZip)
                                {
                                    <div class="space-y-2">
                                        <div class="flex items-center justify-between text-sm">
                                            <span class="text-gray-600">@T("project.uploading")</span>
                                            <span class="text-gray-900 font-medium">@_uploadProgress%</span>
                                        </div>
                                        <div class="w-full bg-gray-200 rounded-full h-2">
                                            <div class="bg-gray-900 h-2 rounded-full transition-all duration-300" style="width: @(_uploadProgress)%"></div>
                                        </div>
                                    </div>
                                }

                                <!-- 错误提示 -->
                                @if (!string.IsNullOrEmpty(_zipFormError))
                                {
                                    <div class="p-3 bg-red-50 border border-red-200 rounded-lg text-red-600 text-sm">
                                        @_zipFormError
                                    </div>
                                }

                                <!-- 上传按钮 -->
                                <button @onclick="UploadZipProject"
                                        disabled="@(_isUploadingZip || string.IsNullOrWhiteSpace(_zipFormName) || _selectedZipFile == null)"
                                        class="w-full py-3 bg-gray-900 text-white rounded-lg font-medium hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2">
                                    @if (_isUploadingZip)
                                    {
                                        <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
                                        <span>@T("project.uploading")</span>
                                    }
                                    else
                                    {
                                        <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="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                                        </svg>
                                        <span>@T("project.uploadZip")</span>
                                    }
                                </button>
                            }
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
}

@code {
    [Parameter]
    public EventCallback OnProjectsChanged { get; set; }

    private bool _isVisible = false;
    private string _activeTab = "list";
    
    // 项目列表
    private List<ProjectInfo> _projects = new();
    private bool _isLoadingProjects = false;
    private string? _cloningProjectId = null;
    private string? _pullingProjectId = null;
    private string? _branchPickerProjectId = null;
    private List<string> _branchPickerBranches = new();
    private bool _isLoadingProjectBranches = false;
    private string? _branchPickerError = null;
    private string? _switchingProjectId = null;
    private string? _switchingBranchName = null;
    
    // 表单数据
    private ProjectInfo? _editingProject = null;
    private string _formName = string.Empty;
    private string _formGitUrl = string.Empty;
    private string _formAuthType = "none";
    private string? _formHttpsUsername = null;
    private string? _formHttpsToken = null;
    private string? _formSshPrivateKey = null;
    private string? _formSshPassphrase = null;
    private string _formBranch = string.Empty;
    private string _formError = string.Empty;
    private bool _isSaving = false;
    
    // 分支列表
    private List<string> _availableBranches = new();
    private bool _isFetchingBranches = false;
    
    // 认证方式选择组件引用
    private MobileSelect<string>? _authTypeSelect;
    
    // 项目来源类型：git 或 zip
    private string _sourceType = "git";
    
    // ZIP 上传相关
    private IBrowserFile? _selectedZipFile = null;
    private string _zipFormName = string.Empty;
    private string _zipFormError = string.Empty;
    private bool _isUploadingZip = false;
    private int _uploadProgress = 0;

    // 本地化相关
    private Dictionary<string, string> _translations = new();
    private string _currentLanguage = "zh-CN";
    private bool _isReloadingLanguage = false;

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

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var language = await L.GetCurrentLanguageAsync();
        if (language != _currentLanguage && !_isReloadingLanguage)
        {
            _isReloadingLanguage = true;
            _currentLanguage = language;
            await LoadTranslationsAsync();
            _isReloadingLanguage = false;
            StateHasChanged();
        }
    }

    public async Task ShowAsync()
    {
        _isVisible = true;
        _activeTab = "list";
        ResetForm();
        StateHasChanged();
        
        await LoadTranslationsAsync();
        await LoadProjects();
    }

    public void Close()
    {
        _isVisible = false;
        _authTypeSelect?.CloseDropdown();
        StateHasChanged();
    }
    
    private async System.Threading.Tasks.Task SelectAuthTypeAsync(string authType)
    {
        _formAuthType = authType;
        _authTypeSelect?.CloseDropdown();
        await System.Threading.Tasks.Task.CompletedTask;
    }
    
    private string GetAuthTypeLabel(string authType)
    {
        return authType switch
        {
            "none" => T("project.authTypeNone"),
            "https" => T("project.authTypeHttps"),
            "ssh" => T("project.authTypeSsh"),
            _ => T("project.authTypeNone")
        };
    }

    private async Task LoadProjects()
    {
        try
        {
            _isLoadingProjects = true;
            StateHasChanged();

            var response = await Http.GetAsync("/api/project");
            
            if (response.IsSuccessStatusCode)
            {
                _projects = await response.Content.ReadFromJsonAsync<List<ProjectInfo>>() ?? new();
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine($"加载项目列表失败: {ex.Message}");
        }
        finally
        {
            _isLoadingProjects = false;
            StateHasChanged();
        }
    }

    private async Task SaveProject()
    {
        if (string.IsNullOrWhiteSpace(_formName) || string.IsNullOrWhiteSpace(_formGitUrl))
        {
            if (string.IsNullOrWhiteSpace(_formName) && string.IsNullOrWhiteSpace(_formGitUrl))
            {
                _formError = T("project.error.nameRequired") + ", " + T("project.error.gitUrlRequired");
            }
            else if (string.IsNullOrWhiteSpace(_formName))
            {
                _formError = T("project.error.nameRequired");
            }
            else
            {
                _formError = T("project.error.gitUrlRequired");
            }
            return;
        }

        try
        {
            _isSaving = true;
            _formError = string.Empty;
            StateHasChanged();

            if (_editingProject != null)
            {
                // 更新项目
                var request = new
                {
                    Name = _formName,
                    GitUrl = _formGitUrl,
                    AuthType = _formAuthType,
                    HttpsUsername = _formHttpsUsername,
                    HttpsToken = _formHttpsToken,
                    SshPrivateKey = _formSshPrivateKey,
                    SshPassphrase = _formSshPassphrase,
                    Branch = _formBranch
                };

                var response = await Http.PutAsJsonAsync($"/api/project/{_editingProject.ProjectId}", request);

                if (!response.IsSuccessStatusCode)
                {
                    var error = await response.Content.ReadFromJsonAsync<ErrorResponse>();
                    _formError = error?.Error ?? T("project.error.updateFailed");
                    return;
                }
            }
            else
            {
                // 创建项目
                var request = new
                {
                    Name = _formName,
                    GitUrl = _formGitUrl,
                    AuthType = _formAuthType,
                    HttpsUsername = _formHttpsUsername,
                    HttpsToken = _formHttpsToken,
                    SshPrivateKey = _formSshPrivateKey,
                    SshPassphrase = _formSshPassphrase,
                    Branch = _formBranch
                };

                var response = await Http.PostAsJsonAsync("/api/project", request);

                if (!response.IsSuccessStatusCode)
                {
                    var error = await response.Content.ReadFromJsonAsync<ErrorResponse>();
                    _formError = error?.Error ?? T("project.error.createFailed");
                    return;
                }
            }

            // 成功后刷新列表
            await LoadProjects();
            await OnProjectsChanged.InvokeAsync();
            
            // 切换到列表页
            _activeTab = "list";
            ResetForm();
        }
        catch (Exception ex)
        {
            _formError = T("errors.operationFailed") + ": " + ex.Message;
        }
        finally
        {
            _isSaving = false;
            StateHasChanged();
        }
    }

    #region 本地化辅助方法

    private async Task LoadTranslationsAsync()
    {
        try
        {
            _currentLanguage = await L.GetCurrentLanguageAsync();
            var allTranslations = await L.GetAllTranslationsAsync(_currentLanguage);
            _translations = FlattenTranslations(allTranslations);
        }
        catch (Exception ex)
        {
            Console.WriteLine($"[项目管理] 加载翻译资源失败: {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 JsonElement jsonElement)
            {
                if (jsonElement.ValueKind == JsonValueKind.Object)
                {
                    var nested = 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 == 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;
    }

    private string T(string key, params (string name, string value)[] parameters)
    {
        var text = T(key);
        foreach (var (name, value) in parameters)
        {
            text = text.Replace($"{{{name}}}", value);
        }
        return text;
    }

    #endregion

    private async Task CloneProject(string projectId)
    {
        try
        {
            _cloningProjectId = projectId;
            StateHasChanged();

            var response = await Http.PostAsync($"/api/project/{projectId}/clone", null);

            if (!response.IsSuccessStatusCode)
            {
                var error = await response.Content.ReadFromJsonAsync<ErrorResponse>();
                Console.WriteLine($"克隆项目失败: {error?.Error}");
            }

            await LoadProjects();
            await OnProjectsChanged.InvokeAsync();
        }
        catch (Exception ex)
        {
            Console.WriteLine($"克隆项目失败: {ex.Message}");
        }
        finally
        {
            _cloningProjectId = null;
            StateHasChanged();
        }
    }

    private async Task PullProject(string projectId)
    {
        try
        {
            _pullingProjectId = projectId;
            StateHasChanged();

            var response = await Http.PostAsync($"/api/project/{projectId}/pull", null);

            if (!response.IsSuccessStatusCode)
            {
                var error = await response.Content.ReadFromJsonAsync<ErrorResponse>();
                Console.WriteLine($"更新项目失败: {error?.Error}");
            }

            await LoadProjects();
        }
        catch (Exception ex)
        {
            Console.WriteLine($"更新项目失败: {ex.Message}");
        }
        finally
        {
            _pullingProjectId = null;
            StateHasChanged();
        }
    }

    private async Task ToggleProjectBranchPicker(string projectId)
    {
        if (_branchPickerProjectId == projectId)
        {
            CloseProjectBranchPicker();
            return;
        }

        _branchPickerProjectId = projectId;
        _branchPickerBranches.Clear();
        _branchPickerError = null;
        StateHasChanged();

        await LoadProjectBranches(projectId);
    }

    private void CloseProjectBranchPicker()
    {
        _branchPickerProjectId = null;
        _branchPickerBranches.Clear();
        _branchPickerError = null;
        _switchingProjectId = null;
        _switchingBranchName = null;
        StateHasChanged();
    }

    private async Task LoadProjectBranches(string projectId)
    {
        try
        {
            _isLoadingProjectBranches = true;
            _branchPickerError = null;
            _branchPickerBranches.Clear();
            StateHasChanged();

            var response = await Http.GetAsync($"/api/project/{projectId}/branches");
            if (response.IsSuccessStatusCode)
            {
                _branchPickerBranches = await response.Content.ReadFromJsonAsync<List<string>>() ?? new();
                return;
            }

            var error = await response.Content.ReadFromJsonAsync<ErrorResponse>();
            _branchPickerError = error?.Error ?? T("project.loadBranchesFailed");
        }
        catch (Exception ex)
        {
            _branchPickerError = $"{T("project.loadBranchesFailed")}: {ex.Message}";
        }
        finally
        {
            _isLoadingProjectBranches = false;
            StateHasChanged();
        }
    }

    private async Task SwitchProjectBranch(string projectId, string branch)
    {
        if (string.IsNullOrWhiteSpace(branch))
        {
            return;
        }

        try
        {
            _switchingProjectId = projectId;
            _switchingBranchName = branch;
            _branchPickerError = null;
            StateHasChanged();

            var response = await Http.PostAsJsonAsync($"/api/project/{projectId}/switch-branch", new { Branch = branch });
            if (!response.IsSuccessStatusCode)
            {
                var error = await response.Content.ReadFromJsonAsync<ErrorResponse>();
                _branchPickerError = error?.Error ?? T("project.switchBranchFailed");
                return;
            }

            await LoadProjects();
            await OnProjectsChanged.InvokeAsync();
            CloseProjectBranchPicker();
        }
        catch (Exception ex)
        {
            _branchPickerError = $"{T("project.switchBranchFailed")}: {ex.Message}";
        }
        finally
        {
            _switchingProjectId = null;
            _switchingBranchName = null;
            StateHasChanged();
        }
    }

    private async Task DeleteProject(string projectId)
    {
        try
        {
            var response = await Http.DeleteAsync($"/api/project/{projectId}");
            
            if (response.IsSuccessStatusCode)
            {
                await LoadProjects();
                await OnProjectsChanged.InvokeAsync();
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine($"删除项目失败: {ex.Message}");
        }
    }

    private async Task FetchBranches()
    {
        if (string.IsNullOrWhiteSpace(_formGitUrl))
        {
            return;
        }

        try
        {
            _isFetchingBranches = true;
            _availableBranches.Clear();
            StateHasChanged();

            var request = new
            {
                GitUrl = _formGitUrl,
                AuthType = _formAuthType,
                HttpsUsername = _formHttpsUsername,
                HttpsToken = _formHttpsToken,
                SshPrivateKey = _formSshPrivateKey,
                SshPassphrase = _formSshPassphrase
            };

            var response = await Http.PostAsJsonAsync("/api/project/branches", request);

            if (response.IsSuccessStatusCode)
            {
                _availableBranches = await response.Content.ReadFromJsonAsync<List<string>>() ?? new();
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine($"获取分支列表失败: {ex.Message}");
        }
        finally
        {
            _isFetchingBranches = false;
            StateHasChanged();
        }
    }

    private void ShowEditDialog(ProjectInfo project)
    {
        _editingProject = project;
        _formName = project.Name;
        _formGitUrl = project.GitUrl;
        _formAuthType = project.AuthType;
        _formBranch = project.Branch;
        // 注意：不填充敏感信息
        _formHttpsUsername = null;
        _formHttpsToken = null;
        _formSshPrivateKey = null;
        _formSshPassphrase = null;
        _formError = string.Empty;
        _activeTab = "create";
        StateHasChanged();
    }

    private void CancelEdit()
    {
        ResetForm();
        _activeTab = "list";
        StateHasChanged();
    }

    private void ResetForm()
    {
        _editingProject = null;
        _formName = string.Empty;
        _formGitUrl = string.Empty;
        _formAuthType = "none";
        _formHttpsUsername = null;
        _formHttpsToken = null;
        _formSshPrivateKey = null;
        _formSshPassphrase = null;
        _formBranch = string.Empty;
        _formError = string.Empty;
        _availableBranches.Clear();
        _branchPickerProjectId = null;
        _branchPickerBranches.Clear();
        _branchPickerError = null;
        _switchingProjectId = null;
        _switchingBranchName = null;
        _authTypeSelect?.CloseDropdown();
        
        // 重置 ZIP 上传表单
        _sourceType = "git";
        _selectedZipFile = null;
        _zipFormName = string.Empty;
        _zipFormError = string.Empty;
        _isUploadingZip = false;
        _uploadProgress = 0;
    }

    /// <summary>
    /// 判断是否为 ZIP 上传的项目（无 Git URL）
    /// </summary>
    private static bool IsZipProject(ProjectInfo project)
    {
        return string.IsNullOrEmpty(project.GitUrl);
    }

    /// <summary>
    /// ZIP 文件选择事件
    /// </summary>
    private void OnZipFileSelected(InputFileChangeEventArgs e)
    {
        _zipFormError = string.Empty;
        var file = e.File;
        
        // 验证文件类型
        if (!file.Name.EndsWith(".zip", StringComparison.OrdinalIgnoreCase))
        {
            _zipFormError = T("project.invalidZipFile");
            _selectedZipFile = null;
            return;
        }
        
        // 验证文件大小（100MB）
        if (file.Size > 100_000_000)
        {
            _zipFormError = T("project.fileTooLarge");
            _selectedZipFile = null;
            return;
        }
        
        _selectedZipFile = file;
        
        // 自动填充项目名称（如果为空）
        if (string.IsNullOrWhiteSpace(_zipFormName))
        {
            var fileName = Path.GetFileNameWithoutExtension(file.Name);
            _zipFormName = fileName;
        }
        
        StateHasChanged();
    }

    /// <summary>
    /// 上传 ZIP 项目
    /// </summary>
    private async Task UploadZipProject()
    {
        if (string.IsNullOrWhiteSpace(_zipFormName))
        {
            _zipFormError = T("project.error.nameRequired");
            return;
        }
        
        if (_selectedZipFile == null)
        {
            _zipFormError = T("project.invalidZipFile");
            return;
        }
        
        try
        {
            _isUploadingZip = true;
            _zipFormError = string.Empty;
            _uploadProgress = 0;
            StateHasChanged();
            
            // 读取文件内容
            using var content = new MultipartFormDataContent();
            
            // 添加项目名称
            content.Add(new StringContent(_zipFormName), "name");
            
            // 添加 ZIP 文件
            var fileContent = new StreamContent(_selectedZipFile.OpenReadStream(maxAllowedSize: 100_000_000));
            fileContent.Headers.ContentType = new MediaTypeHeaderValue("application/zip");
            content.Add(fileContent, "zipFile", _selectedZipFile.Name);
            
            _uploadProgress = 50; // 模拟进度
            StateHasChanged();
            
            var response = await Http.PostAsync("/api/project/upload-zip", content);
            
            _uploadProgress = 90;
            StateHasChanged();
            
            if (!response.IsSuccessStatusCode)
            {
                var error = await response.Content.ReadFromJsonAsync<ErrorResponse>();
                _zipFormError = error?.Error ?? T("project.zipUploadFailed");
                return;
            }
            
            _uploadProgress = 100;
            StateHasChanged();
            
            // 成功后刷新列表
            await LoadProjects();
            await OnProjectsChanged.InvokeAsync();
            
            // 切换到列表页
            _activeTab = "list";
            ResetForm();
        }
        catch (Exception ex)
        {
            _zipFormError = T("project.zipUploadFailed") + ": " + ex.Message;
        }
        finally
        {
            _isUploadingZip = false;
            StateHasChanged();
        }
    }

    /// <summary>
    /// 格式化文件大小
    /// </summary>
    private static string FormatFileSize(long bytes)
    {
        string[] sizes = { "B", "KB", "MB", "GB" };
        double len = bytes;
        int order = 0;
        while (len >= 1024 && order < sizes.Length - 1)
        {
            order++;
            len = len / 1024;
        }
        return $"{len:0.##} {sizes[order]}";
    }

    private class ErrorResponse
    {
        public string? Error { get; set; }
    }
}

<style>
    /* 自定义下拉框动画 */
    .auth-dropdown-enter {
        animation: dropdownFadeIn 0.15s ease-out;
    }
    
    @@keyframes dropdownFadeIn {
        from {
            opacity: 0;
            transform: translateY(-4px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* 移动端触控优化 */
    button:active:not(:disabled) {
        transform: scale(0.98);
    }
</style>