@extends('layouts.admin')

@section('title', 'パフォーマンスレポート')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">パフォーマンスレポート</h3>
                </div>
                <div class="card-body">
                    <!-- レポート生成フォーム -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">新しいレポートを生成</h5>
                                </div>
                                <div class="card-body">
                                    <form action="{{ route('admin.reports.generate') }}" method="GET" id="generateReportForm">
                                        <div class="form-group mb-3">
                                            <label for="period">期間</label>
                                            <select name="period" id="period" class="form-control" required>
                                                <option value="1h">過去1時間</option>
                                                <option value="1d" selected>過去1日</option>
                                                <option value="1w">過去1週間</option>
                                                <option value="1m">過去1ヶ月</option>
                                            </select>
                                        </div>
                                        <div class="form-group mb-3">
                                            <label for="format">フォーマット</label>
                                            <select name="format" id="format" class="form-control">
                                                <option value="html" selected>HTML</option>
                                                <option value="json">JSON</option>
                                            </select>
                                        </div>
                                        <div class="btn-group" role="group">
                                            <button type="submit" class="btn btn-primary">
                                                <i class="fas fa-chart-line"></i> レポート生成
                                            </button>
                                            <button type="button" class="btn btn-success" onclick="downloadReport()">
                                                <i class="fas fa-download"></i> ダウンロード
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">クイックアクション</h5>
                                </div>
                                <div class="card-body">
                                    <div class="btn-group-vertical w-100" role="group">
                                        <button type="button" class="btn btn-outline-info mb-2" onclick="generateQuickReport('1h')">
                                            <i class="fas fa-clock"></i> 過去1時間のレポート
                                        </button>
                                        <button type="button" class="btn btn-outline-info mb-2" onclick="generateQuickReport('1d')">
                                            <i class="fas fa-calendar-day"></i> 今日のレポート
                                        </button>
                                        <button type="button" class="btn btn-outline-warning mb-2" onclick="showComparison()">
                                            <i class="fas fa-balance-scale"></i> レポート比較
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary" onclick="refreshReportList()">
                                            <i class="fas fa-sync"></i> リスト更新
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 既存レポート一覧 -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">保存されたレポート</h5>
                        </div>
                        <div class="card-body">
                            @if(empty($reports))
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i> 保存されたレポートはありません。
                            </div>
                            @else
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>期間</th>
                                            <th>フォーマット</th>
                                            <th>作成日時</th>
                                            <th>ファイルサイズ</th>
                                            <th>アクション</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($reports as $report)
                                        <tr>
                                            <td>
                                                <span class="badge badge-info">{{ $report['period'] }}</span>
                                            </td>
                                            <td>
                                                <span class="badge badge-secondary">{{ strtoupper($report['format']) }}</span>
                                            </td>
                                            <td>{{ date('Y/m/d H:i:s', $report['created_at']) }}</td>
                                            <td>{{ number_format($report['size'] / 1024, 1) }} KB</td>
                                            <td>
                                                <div class="btn-group btn-group-sm" role="group">
                                                    <a href="{{ route('admin.reports.view', ['file' => $report['file']]) }}" 
                                                       class="btn btn-outline-primary" target="_blank">
                                                        <i class="fas fa-eye"></i> 表示
                                                    </a>
                                                    <a href="{{ route('admin.reports.download-file', ['file' => $report['file']]) }}" 
                                                       class="btn btn-outline-success">
                                                        <i class="fas fa-download"></i> DL
                                                    </a>
                                                    <button type="button" class="btn btn-outline-danger" 
                                                            onclick="deleteReport('{{ $report['file'] }}')">
                                                        <i class="fas fa-trash"></i> 削除
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- レポート比較モーダル -->
<div class="modal fade" id="comparisonModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">レポート比較</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="comparisonForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="period1">期間1</label>
                                <select name="period1" id="period1" class="form-control" required>
                                    <option value="1h">過去1時間</option>
                                    <option value="1d">過去1日</option>
                                    <option value="1w">過去1週間</option>
                                    <option value="1m">過去1ヶ月</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="period2">期間2</label>
                                <select name="period2" id="period2" class="form-control" required>
                                    <option value="1h">過去1時間</option>
                                    <option value="1d">過去1日</option>
                                    <option value="1w">過去1週間</option>
                                    <option value="1m">過去1ヶ月</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
                <div id="comparisonResult" style="display: none;">
                    <!-- 比較結果がここに表示される -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
                <button type="button" class="btn btn-primary" onclick="executeComparison()">比較実行</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
function generateQuickReport(period) {
    const form = document.getElementById('generateReportForm');
    document.getElementById('period').value = period;
    form.submit();
}

function downloadReport() {
    const period = document.getElementById('period').value;
    const format = document.getElementById('format').value;
    
    const url = new URL('{{ route("admin.reports.download") }}', window.location.origin);
    url.searchParams.append('period', period);
    url.searchParams.append('format', format);
    
    window.location.href = url.toString();
}

function showComparison() {
    $('#comparisonModal').modal('show');
}

function executeComparison() {
    const period1 = document.getElementById('period1').value;
    const period2 = document.getElementById('period2').value;
    
    if (period1 === period2) {
        alert('異なる期間を選択してください。');
        return;
    }
    
    fetch('{{ route("admin.reports.compare") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            period1: period1,
            period2: period2
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            displayComparisonResult(data.data);
        } else {
            alert('比較に失敗しました: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('比較中にエラーが発生しました。');
    });
}

function displayComparisonResult(comparison) {
    const resultDiv = document.getElementById('comparisonResult');
    
    const html = `
        <div class="card">
            <div class="card-header">
                <h6>比較結果: ${comparison.period1} vs ${comparison.period2}</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <h6>総操作数</h6>
                        <p>${comparison.comparison.total_operations.period1} → ${comparison.comparison.total_operations.period2}</p>
                        <p class="text-${comparison.comparison.total_operations.change >= 0 ? 'success' : 'danger'}">
                            変化: ${comparison.comparison.total_operations.change} (${comparison.comparison.total_operations.change_percent}%)
                        </p>
                    </div>
                    <div class="col-md-4">
                        <h6>平均実行時間</h6>
                        <p>${comparison.comparison.avg_execution_time.period1}ms → ${comparison.comparison.avg_execution_time.period2}ms</p>
                        <p class="text-${comparison.comparison.avg_execution_time.change <= 0 ? 'success' : 'danger'}">
                            変化: ${comparison.comparison.avg_execution_time.change}ms (${comparison.comparison.avg_execution_time.change_percent}%)
                        </p>
                    </div>
                    <div class="col-md-4">
                        <h6>キャッシュヒット率</h6>
                        <p>${comparison.comparison.cache_hit_rate.period1}% → ${comparison.comparison.cache_hit_rate.period2}%</p>
                        <p class="text-${comparison.comparison.cache_hit_rate.change >= 0 ? 'success' : 'danger'}">
                            変化: ${comparison.comparison.cache_hit_rate.change}%
                        </p>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    resultDiv.innerHTML = html;
    resultDiv.style.display = 'block';
}

function deleteReport(filename) {
    if (confirm('このレポートを削除しますか？')) {
        fetch('{{ route("admin.reports.delete") }}', {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                file: filename
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('削除に失敗しました: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('削除中にエラーが発生しました。');
        });
    }
}

function refreshReportList() {
    location.reload();
}
</script>
@endsection