@page "/dashboard"
@page "/admin/dashboard"
@rendermode @(new InteractiveWebAssemblyRenderMode(prerender: false))
@attribute [Authorize]

<PageTitle>대시보드</PageTitle>

<AdminPageHeader Title="대시보드" Eyebrow="Home" Subtitle="핵심 운영 상태와 최근 오류를 한 번에 확인합니다.">
</AdminPageHeader>

<MudGrid Spacing="3" Class="mt-4">
    <!-- 오류 진단 -->
    <MudItem XS="12" SM="6" MD="4">
        <MudPaper Class="pa-4 dashboard-card" Elevation="0" Style="border: 1px solid var(--border-color); min-height: 200px; display: flex; flex-direction: column;">
            <MudIcon Icon="@Icons.Material.Filled.BugReport" Size="Size.Large" Color="Color.Error" Class="mb-3" />
            <MudText Typo="Typo.h6" Class="font-weight-bold mb-2">오류 진단</MudText>
            <MudText Typo="Typo.body2" Class="mb-4 flex-grow-1">
                브라우저 오류와 JS interop 실패는 클라이언트 로그에서 바로 추적합니다.
            </MudText>
            <MudLink Href="./client-logs" Color="Color.Primary" Class="font-weight-bold">
                클라이언트 로그 보기 →
            </MudLink>
        </MudPaper>
    </MudItem>

    <!-- 운영 메뉴 -->
    <MudItem XS="12" SM="6" MD="4">
        <MudPaper Class="pa-4 dashboard-card" Elevation="0" Style="border: 1px solid var(--border-color); min-height: 200px; display: flex; flex-direction: column;">
            <MudIcon Icon="@Icons.Material.Filled.Dashboard" Size="Size.Large" Color="Color.Info" Class="mb-3" />
            <MudText Typo="Typo.h6" Class="font-weight-bold mb-2">운영 메뉴</MudText>
            <MudText Typo="Typo.body2" Class="mb-4 flex-grow-1">
                CRM, 홈페이지, 문의 관리 화면을 표준 템플릿으로 확장합니다.
            </MudText>
            <MudLink Href="./inquiries" Color="Color.Primary" Class="font-weight-bold">
                문의 관리로 이동 →
            </MudLink>
        </MudPaper>
    </MudItem>

    <!-- 배포 확인 -->
    <MudItem XS="12" SM="6" MD="4">
        <MudPaper Class="pa-4 dashboard-card" Elevation="0" Style="border: 1px solid var(--border-color); min-height: 200px; display: flex; flex-direction: column;">
            <MudIcon Icon="@Icons.Material.Filled.CloudUpload" Size="Size.Large" Color="Color.Success" Class="mb-3" />
            <MudText Typo="Typo.h6" Class="font-weight-bold mb-2">배포 확인</MudText>
            <MudText Typo="Typo.body2" Class="mb-4 flex-grow-1">
                하위 경로 배포와 렌더러 분리를 유지하도록 라우트 린트를 적용합니다.
            </MudText>
            <MudLink Href="./client-logs" Color="Color.Primary" Class="font-weight-bold">
                최근 에러 확인 →
            </MudLink>
        </MudPaper>
    </MudItem>

    <!-- 원인 규명 -->
    <MudItem XS="12" SM="6" MD="4">
        <MudPaper Class="pa-4 dashboard-card" Elevation="0" Style="border: 1px solid var(--border-color); min-height: 200px; display: flex; flex-direction: column;">
            <MudIcon Icon="@Icons.Material.Filled.Search" Size="Size.Large" Color="Color.Warning" Class="mb-3" />
            <MudText Typo="Typo.h6" Class="font-weight-bold mb-2">원인 규명</MudText>
            <MudText Typo="Typo.body2" Class="mb-4 flex-grow-1">
                중복되는 오류는 최근 로그 요약에서 source와 route 기준으로 묶어 봅니다.
            </MudText>
            <MudLink Href="./client-logs?q=invoke" Color="Color.Primary" Class="font-weight-bold">
                오류 검색 →
            </MudLink>
        </MudPaper>
    </MudItem>

    <!-- 관측성 -->
    <MudItem XS="12" SM="6" MD="4">
        <MudPaper Class="pa-4 dashboard-card" Elevation="0" Style="border: 1px solid var(--border-color); min-height: 200px; display: flex; flex-direction: column;">
            <MudIcon Icon="@Icons.Material.Filled.Visibility" Size="Size.Large" Color="Color.Secondary" Class="mb-3" />
            <MudText Typo="Typo.h6" Class="font-weight-bold mb-2">관측성</MudText>
            <MudText Typo="Typo.body2" Class="mb-4 flex-grow-1">
                Top sources / routes를 확인해서 어떤 모듈이 재발하는지 빠르게 좁힙니다.
            </MudText>
            <MudLink Href="./client-logs" Color="Color.Primary" Class="font-weight-bold">
                요약 리포트 보기 →
            </MudLink>
        </MudPaper>
    </MudItem>

    <!-- 빠른 통계 -->
    <MudItem XS="12">
        <MudPaper Class="pa-4 admin-surface" Elevation="0" Style="border: 1px solid var(--border-color);">
            <MudText Typo="Typo.h6" Class="font-weight-bold mb-3">📊 빠른 통계</MudText>
            <MudGrid Spacing="2">
                <MudItem XS="12" SM="6" MD="3">
                    <MudText Typo="Typo.body2">
                        <strong>전체 문의:</strong> API에서 조회
                    </MudText>
                </MudItem>
                <MudItem XS="12" SM="6" MD="3">
                    <MudText Typo="Typo.body2">
                        <strong>오류 건수:</strong> 클라이언트 로그 참조
                    </MudText>
                </MudItem>
                <MudItem XS="12" SM="6" MD="3">
                    <MudText Typo="Typo.body2">
                        <strong>배포 상태:</strong> 최신 버전 실행 중
                    </MudText>
                </MudItem>
                <MudItem XS="12" SM="6" MD="3">
                    <MudText Typo="Typo.body2">
                        <strong>로그 범위:</strong> 최근 7일
                    </MudText>
                </MudItem>
            </MudGrid>
        </MudPaper>
    </MudItem>
</MudGrid>

<style>
.dashboard-card {
    background: var(--surface-bg);
    transition: all 0.2s ease-in-out;
}

.dashboard-card:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.dashboard-card :deep(.mud-link) {
    text-decoration: none;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dashboard-card :deep(.mud-link:hover) {
    text-decoration: underline;
}
</style>