@extends('layouts.admin')

@section('title', 'リアルタイム監視ダッシュボード')

@section('content')
<div class="monitoring-dashboard">
    <div class="dashboard-header">
        <h1>リアルタイム監視ダッシュボード</h1>
        <div class="dashboard-controls">
            <button id="refresh-all" class="btn btn-primary">
                <i class="fas fa-sync-alt"></i> 全て更新
            </button>
            <button id="export-data" class="btn btn-secondary">
                <i class="fas fa-download"></i> データエクスポート
            </button>
            <div class="auto-refresh-toggle">
                <label>
                    <input type="checkbox" id="auto-refresh" checked>
                    自動更新 (5秒)
                </label>
            </div>
        </div>
    </div>

    <!-- システム概要 -->
    <div class="overview-section">
        <h2>システム概要</h2>
        <div class="overview-grid">
            <div class="overview-card" id="system-health">
                <div class="card-header">
                    <h3>システムヘルス</h3>
                    <div class="health-indicator" id="health-status">
                        <span class="status-dot"></span>
                        <span class="status-text">確認中...</span>
                    </div>
                </div>
                <div class="card-content">
                    <div class="health-metrics">
                        <div class="metric">
                            <span class="label">データベース:</span>
                            <span class="value" id="db-status">-</span>
                        </div>
                        <div class="metric">
                            <span class="label">Redis:</span>
                            <span class="value" id="redis-status">-</span>
                        </div>
                        <div class="metric">
                            <span class="label">アクティブ接続:</span>
                            <span class="value" id="active-connections">-</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="overview-card" id="performance-summary">
                <div class="card-header">
                    <h3>パフォーマンス</h3>
                </div>
                <div class="card-content">
                    <div class="performance-metrics">
                        <div class="metric">
                            <span class="label">平均レスポンス時間:</span>
                            <span class="value" id="avg-response-time">-</span>
                        </div>
                        <div class="metric">
                            <span class="label">メモリ使用量:</span>
                            <span class="value" id="memory-usage">-</span>
                        </div>
                        <div class="metric">
                            <span class="label">総リクエスト数:</span>
                            <span class="value" id="total-requests">-</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="overview-card" id="alerts-summary">
                <div class="card-header">
                    <h3>アラート</h3>
                    <span class="alert-count" id="alert-count">0</span>
                </div>
                <div class="card-content">
                    <div id="recent-alerts">
                        <p class="no-alerts">アクティブなアラートはありません</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 詳細メトリクス -->
    <div class="metrics-section">
        <h2>詳細メトリクス</h2>
        
        <!-- レスポンス時間チャート -->
        <div class="metric-card">
            <div class="card-header">
                <h3>レスポンス時間推移</h3>
                <div class="time-range-selector">
                    <select id="response-time-range">
                        <option value="5">過去5分</option>
                        <option value="15">過去15分</option>
                        <option value="30">過去30分</option>
                        <option value="60">過去1時間</option>
                    </select>
                </div>
            </div>
            <div class="card-content">
                <canvas id="response-time-chart" width="800" height="300"></canvas>
            </div>
        </div>

        <!-- メモリ使用量チャート -->
        <div class="metric-card">
            <div class="card-header">
                <h3>メモリ使用量推移</h3>
            </div>
            <div class="card-content">
                <canvas id="memory-usage-chart" width="800" height="300"></canvas>
            </div>
        </div>

        <!-- オペレーション別統計 -->
        <div class="metric-card">
            <div class="card-header">
                <h3>オペレーション別統計</h3>
            </div>
            <div class="card-content">
                <div class="operations-table-container">
                    <table id="operations-table" class="operations-table">
                        <thead>
                            <tr>
                                <th>オペレーション</th>
                                <th>実行回数</th>
                                <th>平均時間</th>
                                <th>最大時間</th>
                                <th>平均メモリ</th>
                                <th>最終実行</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="6" class="loading">データを読み込み中...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- データベース監視 -->
    <div class="database-section">
        <h2>データベース監視</h2>
        <div class="database-grid">
            <div class="database-card">
                <div class="card-header">
                    <h3>接続状況</h3>
                </div>
                <div class="card-content">
                    <div id="database-connections">
                        <p class="loading">データを読み込み中...</p>
                    </div>
                </div>
            </div>

            <div class="database-card">
                <div class="card-header">
                    <h3>クエリ統計</h3>
                </div>
                <div class="card-content">
                    <div id="query-statistics">
                        <p class="loading">データを読み込み中...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- アラート履歴 -->
    <div class="alerts-section">
        <h2>アラート履歴</h2>
        <div class="alerts-card">
            <div class="card-header">
                <h3>最近のアラート</h3>
                <button id="clear-alerts" class="btn btn-sm btn-outline">
                    <i class="fas fa-trash"></i> クリア
                </button>
            </div>
            <div class="card-content">
                <div id="alerts-history">
                    <p class="no-data">アラート履歴がありません</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- パフォーマンステストモーダル -->
<div id="performance-test-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>パフォーマンステスト</h3>
            <button class="modal-close">&times;</button>
        </div>
        <div class="modal-body">
            <p>システムのパフォーマンステストを実行しますか？</p>
            <p class="text-muted">このテストは数秒間システムに負荷をかけます。</p>
        </div>
        <div class="modal-footer">
            <button id="run-test" class="btn btn-primary">テスト実行</button>
            <button class="modal-close btn btn-secondary">キャンセル</button>
        </div>
    </div>
</div>

@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('css/admin/monitoring-dashboard.css') }}">
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="{{ asset('js/admin/monitoring-dashboard.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 監視ダッシュボードを初期化
    window.monitoringDashboard = new MonitoringDashboard({
        updateInterval: 5000,
        maxDataPoints: 100,
        apiEndpoints: {
            metrics: '/admin/api/monitoring/metrics',
            systemStatus: '/admin/api/monitoring/system-status',
            databaseStatus: '/admin/api/monitoring/database-status',
            memoryStatus: '/admin/api/monitoring/memory-status',
            performanceTest: '/admin/api/monitoring/performance-test'
        }
    });

    // 自動開始
    window.monitoringDashboard.start();
});
</script>
@endpush