@page "/operations"
@using QuantEngine.Core.Infrastructure
@inject IWebHostEnvironment Environment

<PageTitle>Quant Engine - Operations</PageTitle>

<h1 style="margin: 0 0 8px 0; font-size: 28px; font-weight: 600;">Operational Report</h1>
<p style="margin: 0 0 16px 0; color: var(--neutral-foreground-2); font-size: 14px;">
    이 페이지는 `Temp/operational_report.json`만 읽습니다. DB 연결과 무관하게 동일한 결과를 보여주는 운영 고정 화면입니다.
</p>

<!-- Metadata Cards -->
<FluentStack Orientation="Orientation.Horizontal" HorizontalGap="16" Wrap="true" Style="margin-bottom: 16px;">
    <FluentCard Style="flex: 1; min-width: 150px;">
        <div style="padding: 16px;">
            <p style="margin: 0 0 8px 0; color: var(--neutral-foreground-2); font-size: 12px; font-weight: 500;">Schema</p>
            <h3 style="margin: 0; font-size: 18px; font-weight: 600;">@SchemaVersion</h3>
        </div>
    </FluentCard>
    <FluentCard Style="flex: 1; min-width: 150px;">
        <div style="padding: 16px;">
            <p style="margin: 0 0 8px 0; color: var(--neutral-foreground-2); font-size: 12px; font-weight: 500;">Sections</p>
            <h3 style="margin: 0; font-size: 18px; font-weight: 600;">@SectionCountLabel</h3>
        </div>
    </FluentCard>
    <FluentCard Style="flex: 1; min-width: 150px;">
        <div style="padding: 16px;">
            <p style="margin: 0 0 8px 0; color: var(--neutral-foreground-2); font-size: 12px; font-weight: 500;">Source</p>
            <h3 style="margin: 0; font-size: 18px; font-weight: 600;">@SourceJson</h3>
        </div>
    </FluentCard>
    <FluentCard Style="flex: 1; min-width: 150px;">
        <div style="padding: 16px;">
            <p style="margin: 0 0 8px 0; color: var(--neutral-foreground-2); font-size: 12px; font-weight: 500;">Generated</p>
            <h3 style="margin: 0; font-size: 18px; font-weight: 600;">@GeneratedAt</h3>
        </div>
    </FluentCard>
</FluentStack>

<!-- Highlight Sections Grid -->
<FluentStack Orientation="Orientation.Horizontal" HorizontalGap="16" Wrap="true" Style="margin-bottom: 16px;">
    @foreach (var section in HighlightSections)
    {
        <FluentCard Style="flex: 1; min-width: 200px;">
            <div style="padding: 16px;">
                <p style="margin: 0 0 4px 0; color: var(--neutral-foreground-2); font-size: 12px;">@(section.Name)</p>
                <h3 style="margin: 4px 0; font-size: 16px; font-weight: 600;">@(section.Title)</h3>
                <p style="margin: 8px 0 0 0; color: var(--neutral-foreground-3); font-size: 12px;">@(section.Preview)</p>
            </div>
        </FluentCard>
    }
</FluentStack>

<!-- Report Health -->
<FluentCard Style="margin-bottom: 16px;">
    <div style="padding: 16px;">
        <h3 style="margin: 0 0 12px 0; font-size: 16px; font-weight: 600;">Report Health</h3>
        <FluentStack Orientation="Orientation.Vertical" VerticalGap="8">
            <p style="margin: 0; font-size: 14px;"><strong>Status:</strong> <FluentBadge Appearance="BadgeAppearance.Filled">@HealthLabel</FluentBadge></p>
            <p style="margin: 0; font-size: 14px;"><strong>Path:</strong> @ReportPath</p>
            <p style="margin: 0; font-size: 14px;"><strong>Sections rendered:</strong> @RenderedSectionCountLabel</p>
        </FluentStack>
    </div>
</FluentCard>

<!-- Sections Table -->
<FluentCard>
    <div style="padding: 16px;">
        <h3 style="margin: 0 0 12px 0; font-size: 16px; font-weight: 600;">Sections</h3>
        @if (Sections.Count == 0)
        {
            <div style="padding: 12px; background: var(--warning-background-1); border: 1px solid var(--warning-stroke-1); border-radius: 4px; color: var(--warning-foreground-1); font-size: 14px;">
                DATA_MISSING: operational_report.json에 표시할 섹션이 없습니다.
            </div>
        }
        else
        {
            <FluentDataGrid Items="@Sections.AsQueryable()">
                <PropertyColumn Property="@(x => x.Name)" Title="Name" />
                <PropertyColumn Property="@(x => x.Title)" Title="Title" />
                <PropertyColumn Property="@(x => x.Preview)" Title="Preview" />
            </FluentDataGrid>
        }
    </div>
</FluentCard>

@code {
    private readonly List<OperationalReportSection> Sections = new();
    private readonly List<OperationalReportSection> HighlightSections = new();
    private string SchemaVersion = "n/a";
    private string SourceJson = "n/a";
    private string GeneratedAt = "n/a";
    private string SectionCountLabel = "0";
    private string RenderedSectionCountLabel = "0";
    private string HealthLabel = "DATA_MISSING";
    private string ReportPath = "n/a";

    protected override async Task OnInitializedAsync()
    {
        ReportPath = Path.GetFullPath(Path.Combine(Environment.ContentRootPath, "..", "..", "..", "Temp", "operational_report.json"));

        var report = OperationalReportLoader.Load(ReportPath);
        SchemaVersion = report.SchemaVersion;
        SourceJson = report.SourceJson;
        GeneratedAt = report.GeneratedAt;
        Sections.AddRange(report.Sections);

        HighlightSections.Clear();
        HighlightSections.AddRange(Sections.Take(4));

        SectionCountLabel = report.SectionCount.ToString();
        RenderedSectionCountLabel = Sections.Count.ToString();
        HealthLabel = Sections.Count > 0 ? "PASS" : "DATA_MISSING";
    }
}
