<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>데이터 분석 - Project Master Sabermetrics</title>
    <link rel="stylesheet" href="style/common.css">
    <link rel="stylesheet" href="style/analysis.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
</head>

<body>
    <nav class="topbar">
        <div class="topbar-header">
            <a href="/">
                <h2>Project Master Test</h2>
            </a>
        </div>
        <ul class="nav-list">
            <li class="nav-item" onclick="location.href='/dashboard'">대시보드</li>
            <li class="nav-item" onclick="location.href='/inquiries'">문의사항</li>
            <li class="nav-item" onclick="location.href='/mailTest'">메일관리</li>
            <li class="nav-item active" onclick="location.href='/analysis'">분석</li>
        </ul>
    </nav>

    <main class="analysis-content">
        <header class="analysis-header">
            <div class="title-group">
                <div class="ai-badge">AI Sabermetrics</div>
                <h2>시스템 운영 자산 가치 분석</h2>
                <p>수집된 활동 로그 및 자산 데이터를 기반으로 한 통계적 활력 지표 (Beta)</p>
            </div>
            <div class="analysis-actions">
                <button class="btn btn-primary" onclick="location.reload()">데이터 갱신</button>
            </div>
        </header>

        <!-- 상단 정보 영역 -->
        <div class="top-info-grid">
            <section class="dl-model-info">
                <div class="card-header">
                    <h4><i class="ai-icon">AI</i> Hybrid Prediction Engine</h4>
                </div>
                <div class="card-body">
                    <div class="model-desc-vertical">
                        <div class="model-item-vertical">
                            <span class="model-tag">분석 모델</span>
                            <p>최근 9회차 시계열의 Velocity 및 변화율 분석</p>
                        </div>
                        <div class="model-item-vertical">
                            <span class="model-tag">가중치 로직</span>
                            <p>활동 시 '선형 유지', 정체 시 '지수 감쇄' 동적 적용</p>
                        </div>
                    </div>
                </div>
            </section>

            <section class="soi-deep-dive">
                <div class="card-header">
                    <h4><i class="info-icon">i</i> AI 위험 적응형 모델 (AAS) 기반 지표 정의</h4>
                </div>
                <div class="card-body">
                    <div class="soi-info-columns">
                        <div class="soi-info-column">
                            <h6>1. 자산 가치 변동 추적</h6>
                            <p>규모를 감지하여, 대형 프로젝트 정체 시 데이터 가치 하락 속도를 <strong>가속(Acceleration)</strong>시킵니다.</p>
                        </div>
                        <div class="soi-info-column">
                            <h6>2. 활동 시계열 관성 분석</h6>
                            <p>최근 활동의 연속성을 분석하여, 단기 정체 시에도 과거의 <strong>운영 모멘텀</strong>을 반영하여 지수를 보정합니다.</p>
                        </div>
                        <div class="soi-info-column">
                            <h6>3. 동적 가치 계수</h6>
                            <p>프로젝트마다 <strong>개별화된 감쇄 곡선</strong>을 생성하여 현장에 가장 밀착된 보존율을 제공합니다.</p>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <!-- 메인 분석 차트 영역 -->
        <div class="analysis-charts-grid">
            <div class="chart-container-box">
                <h5>운영 활력 분포 (Activity Distribution)</h5>
                <canvas id="statusChart"></canvas>
            </div>
            <div class="chart-container-box">
                <h5>자산 가치 전략 매트릭스 (Strategic Analysis)</h5>
                <canvas id="forecastChart"></canvas>
            </div>
        </div>

        <!-- 리더보드 영역 -->
        <div class="analysis-card timeline-analysis">
            <div class="card-header">
                <div style="display: flex; flex-direction: column; gap: 4px;">
                    <h4>Project Activity Vitality Leaderboard (AVI Status)</h4>
                    <p style="font-size: 11px; color: #888; margin: 0;">운영 표준(AVI 70%) 대비 운영 활력 및 VCI 기여 리더보드</p>
                </div>
                <div class="card-tools">
                    <span id="avg-system-info" style="font-size: 11px; color: #888;">* AVI (Activity Vitality Index)</span>
                </div>
            </div>
            <div class="card-body">
                <div class="d-war-guide">
                    <div class="guide-item active-low"><span>70%↑</span> 정상 운영</div>
                    <div class="guide-item warning-mid"><span>30~70%</span> 관리 주의</div>
                    <div class="guide-item danger-high"><span>10~30%</span> 위험 노출</div>
                    <div class="guide-item hazard-critical"><span>10%↓</span> 중단/방치</div>
                </div>
                
                <div id="p-war-table-container">
                    <!-- JS에 의해 동적으로 테이블 삽입 -->
                </div>
            </div>
        </div>
    </main>

    <!-- 설명 모달 -->
    <div id="analysisModal" class="modal-overlay" onclick="if(event.target===this) closeAnalysisModal()">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle">분석 상세</h3>
                <span class="modal-close" onclick="closeAnalysisModal()">&times;</span>
            </div>
            <div class="modal-body" id="modalBody">
                <!-- 내용 동적 삽입 -->
            </div>
        </div>
    </div>

    <script src="js/common.js"></script>
    <script src="js/analysis.js"></script>
</body>

</html>
