// js/model-demo.js
class ModelDemo {
    constructor() {
        this.model = null;
        this.labels = [];
        this.initializeUI();
        this.loadModel();
    }
    
    async loadModel() {
        try {
            // モデルの読み込み
            this.model = await tf.loadLayersModel('./models/model.json');
            
            // ラベルの読み込み
            const response = await fetch('./models/labels.json');
            this.labels = await response.json();
            
            console.log('Model loaded successfully');
            this.showStatus('モデル読み込み完了', 'success');
        } catch (error) {
            console.error('Model loading failed:', error);
            this.showStatus('モデル読み込みエラー', 'error');
        }
    }
    
    async predict(imageElement) {
        if (!this.model) {
            this.showStatus('モデルが読み込まれていません', 'error');
            return;
        }
        
        // 画像の前処理
        const tensor = tf.browser.fromPixels(imageElement)
            .resizeNearestNeighbor([224, 224])
            .toFloat()
            .div(tf.scalar(255.0))
            .expandDims();
            
        // 推論実行
        const predictions = await this.model.predict(tensor).data();
        tensor.dispose();
        
        // 結果を整形
        const results = Array.from(predictions)
            .map((prob, idx) => ({
                label: this.labels[idx],
                probability: prob
            }))
            .sort((a, b) => b.probability - a.probability)
            .slice(0, 5);
            
        this.displayResults(results);
    }
    
    displayResults(results) {
        const predictionsDiv = document.getElementById('predictions');
        predictionsDiv.innerHTML = '';
        
        results.forEach(result => {
            const resultDiv = document.createElement('div');
            resultDiv.className = 'prediction-item';
            resultDiv.innerHTML = `
                <div class="label">${result.label}</div>
                <div class="probability-bar">
                    <div class="probability-fill" style="width: ${result.probability * 100}%"></div>
                </div>
                <div class="probability-text">${(result.probability * 100).toFixed(2)}%</div>
            `;
            predictionsDiv.appendChild(resultDiv);
        });
        
        document.getElementById('results').classList.remove('hidden');
    }
    
    initializeUI() {
        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('fileInput');
        const predictBtn = document.getElementById('predictBtn');
        
        // ドラッグ&ドロップ
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });
        
        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragover');
        });
        
        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
            const file = e.dataTransfer.files[0];
            if (file && file.type.startsWith('image/')) {
                this.handleImage(file);
            }
        });
        
        // クリックでファイル選択
        uploadArea.addEventListener('click', () => fileInput.click());
        fileInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) this.handleImage(file);
        });
        
        // 予測ボタン
        predictBtn.addEventListener('click', () => {
            const img = document.getElementById('previewImage');
            this.predict(img);
        });
    }
    
    handleImage(file) {
        const reader = new FileReader();
        reader.onload = (e) => {
            const img = document.getElementById('previewImage');
            img.src = e.target.result;
            document.getElementById('preview').classList.remove('hidden');
            document.getElementById('predictBtn').classList.remove('hidden');
        };
        reader.readAsDataURL(file);
    }
    
    showStatus(message, type) {
        // ステータス表示の実装
        console.log(`[${type}] ${message}`);
    }
}

// 初期化
document.addEventListener('DOMContentLoaded', () => {
    new ModelDemo();
});

// js/dashboard.js
class ExperimentDashboard {
    constructor() {
        this.loadExperimentData();
    }
    
    async loadExperimentData() {
        try {
            const response = await fetch('./data/experiments.json');
            this.data = await response.json();
            this.renderDashboard();
        } catch (error) {
            console.error('Failed to load experiment data:', error);
        }
    }
    
    renderDashboard() {
        this.renderMetricsSummary();
        this.renderTrainingPlot();
        this.renderComparisonPlot();
        this.renderHyperparameterPlot();
    }
    
    renderMetricsSummary() {
        const latest = this.data.experiments[this.data.experiments.length - 1];
        const summaryHtml = `
            <div class="metrics-grid">
                <div class="metric">
                    <h4>Best Accuracy</h4>
                    <p class="value">${(latest.best_accuracy * 100).toFixed(2)}%</p>
                </div>
                <div class="metric">
                    <h4>Training Time</h4>
                    <p class="value">${latest.training_time} hours</p>
                </div>
                <div class="metric">
                    <h4>Model Size</h4>
                    <p class="value">${latest.model_size} MB</p>
                </div>
                <div class="metric">
                    <h4>Inference Time</h4>
                    <p class="value">${latest.inference_time} ms</p>
                </div>
            </div>
        `;
        document.getElementById('metrics-summary').innerHTML = summaryHtml;
    }
    
    renderTrainingPlot() {
        const traces = this.data.experiments.map(exp => ({
            x: exp.epochs,
            y: exp.train_loss,
            name: `${exp.name} (train)`,
            type: 'scatter',
            mode: 'lines'
        }));
        
        // Validation lossも追加
        this.data.experiments.forEach(exp => {
            traces.push({
                x: exp.epochs,
                y: exp.val_loss,
                name: `${exp.name} (val)`,
                type: 'scatter',
                mode: 'lines',
                line: { dash: 'dot' }
            });
        });
        
        const layout = {
            title: 'Training and Validation Loss',
            xaxis: { title: 'Epoch' },
            yaxis: { title: 'Loss' },
            hovermode: 'x unified'
        };
        
        Plotly.newPlot('training-plot', traces, layout);
    }
    
    renderComparisonPlot() {
        const models = this.data.experiments.map(exp => exp.name);
        const metrics = ['accuracy', 'precision', 'recall', 'f1_score'];
        
        const traces = metrics.map(metric => ({
            x: models,
            y: this.data.experiments.map(exp => exp.metrics[metric]),
            name: metric.charAt(0).toUpperCase() + metric.slice(1),
            type: 'bar'
        }));
        
        const layout = {
            title: 'Model Performance Comparison',
            xaxis: { title: 'Model' },
            yaxis: { title: 'Score' },
            barmode: 'group'
        };
        
        Plotly.newPlot('comparison-plot', traces, layout);
    }
    
    renderHyperparameterPlot() {
        // 3D散布図でハイパーパラメータと性能の関係を表示
        const trace = {
            x: this.data.experiments.map(exp => exp.hyperparameters.learning_rate),
            y: this.data.experiments.map(exp => exp.hyperparameters.batch_size),
            z: this.data.experiments.map(exp => exp.metrics.accuracy),
            mode: 'markers',
            marker: {
                size: 12,
                color: this.data.experiments.map(exp => exp.metrics.accuracy),
                colorscale: 'Viridis',
                showscale: true
            },
            text: this.data.experiments.map(exp => exp.name),
            type: 'scatter3d'
        };
        
        const layout = {
            title: 'Hyperparameter Space Exploration',
            scene: {
                xaxis: { title: 'Learning Rate', type: 'log' },
                yaxis: { title: 'Batch Size' },
                zaxis: { title: 'Accuracy' }
            }
        };
        
        Plotly.newPlot('hparam-plot', [trace], layout);
    }
}

// 初期化
document.addEventListener('DOMContentLoaded', () => {
    new ExperimentDashboard();
});

// sw.js - Service Worker
const CACHE_NAME = 'ml-docs-v1';
const urlsToCache = [
    '/',
    '/css/style.css',
    '/js/model-demo.js',
    '/models/model.json',
    '/models/labels.json'
];

// インストール時にキャッシュ
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(urlsToCache))
    );
});

// フェッチ時にキャッシュを確認
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                // キャッシュがあればそれを返す
                if (response) {
                    return response;
                }
                
                // なければネットワークから取得
                return fetch(event.request).then(response => {
                    // レスポンスが有効でない場合はそのまま返す
                    if (!response || response.status !== 200 || response.type !== 'basic') {
                        return response;
                    }
                    
                    // レスポンスをキャッシュに保存
                    const responseToCache = response.clone();
                    caches.open(CACHE_NAME).then(cache => {
                        cache.put(event.request, responseToCache);
                    });
                    
                    return response;
                });
            })
    );
});

// analytics.js
class MLDocsAnalytics {
    constructor() {
        this.sessionId = this.generateSessionId();
        this.events = [];
        this.startTime = Date.now();
        
        // ページビューを記録
        this.trackPageView();
        
        // イベントリスナーを設定
        this.setupEventListeners();
    }
    
    generateSessionId() {
        return Date.now().toString(36) + Math.random().toString(36).substr(2);
    }
    
    trackPageView() {
        this.track('page_view', {
            url: window.location.href,
            referrer: document.referrer,
            screen: `${window.screen.width}x${window.screen.height}`
        });
    }
    
    setupEventListeners() {
        // モデルデモの使用を追跡
        document.addEventListener('model_prediction', (e) => {
            this.track('model_demo_used', {
                model: e.detail.model,
                prediction_time: e.detail.time
            });
        });
        
        // ドキュメントのスクロール深度
        let maxScroll = 0;
        window.addEventListener('scroll', () => {
            const scrollPercentage = (window.scrollY / document.body.scrollHeight) * 100;
            maxScroll = Math.max(maxScroll, scrollPercentage);
        });
        
        // ページ離脱時に送信
        window.addEventListener('beforeunload', () => {
            this.track('page_leave', {
                time_on_page: Date.now() - this.startTime,
                max_scroll_depth: maxScroll
            });
            this.sendEvents();
        });
    }
    
    track(eventName, properties = {}) {
        this.events.push({
            event: eventName,
            properties: {
                ...properties,
                session_id: this.sessionId,
                timestamp: new Date().toISOString()
            }
        });
    }
    
    sendEvents() {
        if (this.events.length === 0) return;
        
        // Beacon APIを使用して確実に送信
        const data = JSON.stringify({
            events: this.events,
            site: 'ml-docs'
        });
        
        navigator.sendBeacon('/api/analytics', data);
        this.events = [];
    }
}

// 初期化（プライバシーに配慮）
if (!window.location.hostname.includes('localhost')) {
    new MLDocsAnalytics();
}