@page "/Edit"
@using Blazored.TextEditor
@using System.Text.RegularExpressions
@using TechHelper.Client.Pages.Exam
<MudPaper Class="d-flex flex-column flex-grow-1 pa-4" Elevation="0" Style="background-color:#ffffff55">

	<MudPaper Class="d-flex flex-column flex-grow-0 mb-4" Elevation="1" Style="background-color:#FFFFFF22">

		<MudPaper Class="d-flex flex-row flex-grow-0 justify-content-between mb-4" Elevation="1" Style="background-color:#FFFFFF22">
			<MudButtonGroup Variant="Variant.Filled" OverrideStyles="true" Class="pa-2">
				<MudButton OnClick="TriggerFullAIParsingProcessAsync" Disabled="@_isProcessing"
						   Style="background-color: var(--mud-palette-primary); color: white;">
					@if (_isProcessing)
					{
						<MudProgressCircular Indeterminate="true" Size="Size.Small" Class="mr-2" />
					}
					**全自动流程 (AI)**
				</MudButton>
				<MudButton Variant="Variant.Outlined" Color="Color.Secondary" OnClick="GetEditorTextContentAsync" Disabled="@_isProcessing">
					获取编辑器HTML
				</MudButton>

				<MudButton Variant="Variant.Outlined" Color="Color.Secondary" OnClick="DivideExamContentByAIAsync" Disabled="@_isProcessing">
					AI 分割题组 (仅文本)
				</MudButton>

				<MudButton Variant="Variant.Outlined" Color="Color.Secondary" OnClick="ConvertDividedXmlToQuestionList" Disabled="@_isProcessing">
					转换为题组列表
				</MudButton>

				<MudButton Variant="Variant.Outlined" Color="Color.Secondary" OnClick="ParseEachQuestionGroupAsync" Disabled="@_isProcessing">
					AI 解析每个题组 (仅文本)
				</MudButton>

				<MudButton Variant="Variant.Outlined" Color="Color.Secondary" OnClick="ConvertParsedXmlsToQuestionGroups" Disabled="@_isProcessing">
					转换为题组对象
				</MudButton>

				<MudButton Variant="Variant.Outlined" Color="Color.Tertiary" OnClick="CopyToClipboard" Disabled="@_isProcessing">
					复制当前结果
				</MudButton>


			</MudButtonGroup>

			<MudButtonGroup Variant="Variant.Filled" OverrideStyles="true" Class="pa-2">
				<MudButton Variant="Variant.Outlined" Color="Color.Info" Disabled="@_isProcessing">
					保存
				</MudButton>
				<MudButton Variant="Variant.Outlined" Color="Color.Success" Disabled="@_isProcessing">
					发布
				</MudButton>
			</MudButtonGroup>
		</MudPaper>
		<MudPaper Style="background-color:#FFFFFF22">
			<MudText Typo="Typo.body2" Class="mt-2 ml-2">**当前状态:** @_processingStatusMessage</MudText>
		</MudPaper>
	</MudPaper>

	<MudPaper Class="d-flex flex-row flex-grow-1 overflow-hidden" Elevation="0" Style="background-color:#FFFFFF77">

		<MudPaper Class="d-flex flex-column flex-grow-1 mr-4" Style="min-width: 400px; max-width: 70%;background-color:#FFFFFFaa" Elevation="2">
			<MudTabs Elevation="0" Rounded="true" PanelClass="pa-4 flex-grow-1 justify-content-around overflow-auto" Style="background-color:#FFFFFF11"
					 Class="flex-grow-1 d-flex  flex-column overflow-auto">

				<MudTabPanel Text="编辑器内容" Icon="@Icons.Material.Filled.Edit" Style="background-color:#FFFFFF11">

					<MudText Typo="Typo.h6">编辑器原始HTML/文本内容:</MudText>
					<MudTextField T="string" @bind-value="@_editorHtmlContent" MaxLines="20" Variant="Variant.Outlined" AutoGrow="true" />
				</MudTabPanel>

				<MudTabPanel Text="分割XML" Icon="@Icons.Material.Filled.Code">
					<MudText Typo="Typo.h6">AI 分割后的原始XML内容:</MudText>
					<MudTextField T="string" @bind-value="@_rawDividedExamXmlContent" MaxLines="20" Variant="Variant.Outlined" AutoGrow="true" />

				</MudTabPanel>

				<MudTabPanel Text="题组列表" Icon="@Icons.Material.Filled.List">
					@if (_dividedQuestionGroupList != null && _dividedQuestionGroupList.Items.Any())
					{
						<MudText Typo="Typo.h6">转换为题组列表 (StringsList):</MudText>
						@foreach (var item in _dividedQuestionGroupList.Items)
						{
							<MudTextField T="string" Value="@item" MaxLines="5" Variant="Variant.Outlined" Class="mb-2" AutoGrow="true" />
						}
					}
					else
					{
						<MudText Typo="Typo.body1">将分割XML转换为题组列表 (StringsList) 后将显示在此处。</MudText>
					}
				</MudTabPanel>

				@* Tab 4: 每个题组的原始 XML (Raw Parsed XMLs) *@
				<MudTabPanel Text="解析XML" Icon="@Icons.Material.Filled.Article">
					<ChildContent>
						<MudText Typo="Typo.h6">AI 解析的每个题组原始XML内容:</MudText>
						@for (int i = 0; i < _rawParsedQuestionXmls.Count; i++)
						{
							int index = i; // 捕获迭代变量
							<MudCard Class="mb-3" Style="background-color:#ffffff88">
								<MudCardHeader>
									<MudCardActions>
										<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="(() => DeleteFromParse(index))">删除</MudButton>
									</MudCardActions>
								</MudCardHeader>
								<MudCardContent>
									<MudTextField Class="ma-0" AutoGrow="true" @bind-Value="_rawParsedQuestionXmls[index]" Variant="Variant.Outlined" />
								</MudCardContent>
							</MudCard>
						}

					</ChildContent>
				</MudTabPanel>

				@* Tab 5: 最终的 QuestionGroup 对象 *@
				<MudTabPanel Text="最终结果" Icon="@Icons.Material.Filled.Check">
					@if (_finalQuestionGroups != null && _finalQuestionGroups.Any())
					{
						<MudText Typo="Typo.h6">最终解析的题组对象:</MudText>
						@foreach (var item in _finalQuestionGroups)
						{
							<QuestionGroupDisplay QuestionGroup="item" IsNested="false" />
						}
					}
					else
					{
						<MudText Typo="Typo.body1">最终解析为 QuestionGroup 对象的试题内容将显示在此处。</MudText>
					}
				</MudTabPanel>

			</MudTabs>
		</MudPaper>

		<MudPaper Class="d-flex flex-column flex-grow-1" Style="min-width: 200px; max-width: 30%; background-color:#FFFFFF77;" Elevation="2">
			<BlazoredTextEditor @ref="@_quillHtmlEditor" EditorCssStyle="height: 93%;" >
				<ToolbarContent >
					<select class="ql-header">
						<option selected=""></option>
						<option value="1"></option>
						<option value="2"></option>
						<option value="3"></option>
						<option value="4"></option>
						<option value="5"></option>
					</select>
					<span class="ql-formats">
						<button class="ql-bold"></button>
						<button class="ql-italic"></button>
						<button class="ql-underline"></button>
						<button class="ql-strike"></button>
					</span>
					<span class="ql-formats">
						<select class="ql-color"></select>
						<select class="ql-background"></select>
					</span>
					<span class="ql-formats">
						<button class="ql-list" value="ordered"></button>
						<button class="ql-list" value="bullet"></button>
					</span>
					<span class="ql-formats">
						<button class="ql-link"></button>
					</span>
				</ToolbarContent>
				<EditorContent >
				</EditorContent>
			</BlazoredTextEditor>
		</MudPaper>

	</MudPaper>
</MudPaper>