// ============================================
// Model Comparison — AI Model Analysis & Validation
// ============================================

const ModelComparison = {
    selectedModels: new Set(['ad-standard-v1']),
    activeMode: 'models', // 'models', 'validation', 'datasets'
    isRunning: false,
    validationResults: [],
    bestRunIndex: null,

    init() {
        this.renderModelSelectors();
        this.renderDatasetSelectors();
        this.bindEvents();
        this.loadValidationHistory();
    },

    bindEvents() {
        // Mode toggle
        Helpers.$$('.analysis-mode-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                Helpers.$$('.analysis-mode-btn').forEach(b => b.classList.remove('active'));
                btn.classList.add('active');
                this.setMode(btn.dataset.mode);
            });
        });

        // Threshold slider
        Helpers.$('#validation-threshold')?.addEventListener('input', (e) => {
            const val = (e.target.value / 100).toFixed(2);
            Helpers.$('#threshold-value').textContent = val;
        });

        // Sensitivity preset changes threshold
        Helpers.$('#validation-sensitivity')?.addEventListener('change', (e) => {
            const thresholdMap = { low: 30, medium: 75, high: 90 };
            const threshold = thresholdMap[e.target.value] || 75;
            Helpers.$('#validation-threshold').value = threshold;
            Helpers.$('#threshold-value').textContent = (threshold / 100).toFixed(2);
        });

        // Run comparison
        Helpers.$('#btn-run-model-comparison')?.addEventListener('click', () => this.runComparison());
    },

    setMode(mode) {
        this.activeMode = mode;
        const modelSelectors = Helpers.$('#model-selectors-container');
        const validationSettings = Helpers.$('#validation-settings');
        const exportBtns = Helpers.$('#validation-export');

        if (mode === 'models') {
            if (modelSelectors) modelSelectors.style.display = '';
            if (validationSettings) validationSettings.style.display = 'none';
            if (exportBtns) exportBtns.style.display = 'none';
        } else if (mode === 'validation') {
            if (modelSelectors) modelSelectors.style.display = 'none';
            if (validationSettings) validationSettings.style.display = '';
            if (exportBtns) exportBtns.style.display = '';
            this.renderValidationResults();
        } else if (mode === 'datasets') {
            if (modelSelectors) modelSelectors.style.display = '';
            if (validationSettings) validationSettings.style.display = 'none';
            if (exportBtns) exportBtns.style.display = 'none';
        }
    },

    renderModelSelectors() {
        const container = Helpers.$('#model-selectors');
        if (!container) return;

        container.innerHTML = MockData.models.map(model => `
            <div class="model-selector ${this.selectedModels.has(model.id) ? 'model-selector--selected' : ''}" data-model-id="${model.id}">
                <div class="model-selector__check"><i class="fa-solid fa-check"></i></div>
                <div class="model-selector__info">
                    <div class="model-selector__name">${model.name}</div>
                    <div class="model-selector__type">${model.description}</div>
                </div>
                <span class="model-selector__tag model-selector__tag--${model.type.toLowerCase()}">${model.type}</span>
            </div>
        `).join('');

        // Bind model selection
        container.querySelectorAll('.model-selector').forEach(el => {
            el.addEventListener('click', () => {
                const id = el.dataset.modelId;
                if (this.selectedModels.has(id)) {
                    if (this.selectedModels.size > 1) {
                        this.selectedModels.delete(id);
                        el.classList.remove('model-selector--selected');
                    } else {
                        Toast.show('At least one model must be selected', 'warning');
                    }
                } else {
                    if (this.selectedModels.size >= 3) {
                        Toast.show('Maximum 3 models can be compared', 'warning');
                        return;
                    }
                    this.selectedModels.add(id);
                    el.classList.add('model-selector--selected');
                }
            });
        });
    },

    renderDatasetSelectors() {
        const select = Helpers.$('#model-compare-image-set');
        if (!select) return;

        select.innerHTML = MockData.datasets.map(ds =>
            `<option value="${ds.id}">${ds.name} (${ds.imageCount} images)</option>`
        ).join('');
    },

    loadValidationHistory() {
        // Mock validation run history
        this.validationResults = MockData.validationRuns || [];
    },

    runComparison() {
        if (this.activeMode === 'validation') {
            this.runValidation();
        } else {
            this.runModelComparison();
        }
    },

    runModelComparison() {
        if (this.selectedModels.size === 0) {
            Toast.show('Select at least one model', 'warning');
            return;
        }

        this.isRunning = true;
        const btn = Helpers.$('#btn-run-model-comparison');
        btn.disabled = true;
        btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Running...';

        setTimeout(() => {
            this.isRunning = false;
            btn.disabled = false;
            btn.innerHTML = '<i class="fa-solid fa-flask"></i> Run Comparison';
            this.renderComparisonResults();
            Toast.show('Model comparison complete!', 'success');
        }, 2000);
    },

    runValidation() {
        const btn = Helpers.$('#btn-run-model-comparison');
        btn.disabled = true;
        btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Validating...';

        const threshold = parseInt(Helpers.$('#validation-threshold')?.value || 75) / 100;
        const sensitivity = Helpers.$('#validation-sensitivity')?.value || 'medium';
        const defectClass = Helpers.$('#validation-defect-class')?.value || 'all';
        const datasetId = Helpers.$('#model-compare-image-set')?.value || 'west2257';

        setTimeout(() => {
            btn.disabled = false;
            btn.innerHTML = '<i class="fa-solid fa-flask"></i> Run Validation';

            // Create new validation result
            const newResult = {
                id: Date.now(),
                date: new Date().toISOString(),
                dataset: datasetId,
                model: 'ad-standard-v1',
                threshold: threshold,
                sensitivity: sensitivity,
                defectClass: defectClass,
                accuracy: 0.92 + Math.random() * 0.07,
                precision: 0.88 + Math.random() * 0.10,
                recall: 0.85 + Math.random() * 0.12,
                f1: 0.86 + Math.random() * 0.11,
                falsePositiveRate: 0.02 + Math.random() * 0.08,
                falseNegativeRate: 0.03 + Math.random() * 0.10,
                truePositive: Math.floor(15 + Math.random() * 10),
                trueNegative: Math.floor(50 + Math.random() * 30),
                falsePositive: Math.floor(2 + Math.random() * 8),
                falseNegative: Math.floor(1 + Math.random() * 6),
                rocData: this.generateMockROCData(),
                status: 'passed'
            };

            this.validationResults.unshift(newResult);
            this.bestRunIndex = 0;
            this.setMode('validation');
            Toast.show('Validation complete!', 'success');
        }, 1500);
    },

    generateMockROCData() {
        const data = [];
        for (let tpr = 0; tpr <= 100; tpr += 5) {
            data.push({
                tpr: tpr / 100,
                fpr: Math.max(0, (tpr / 100 - 0.05) * 0.9 + Math.random() * 0.05)
            });
        }
        return data;
    },

    renderComparisonResults() {
        const container = Helpers.$('#model-comparison-results');
        if (!container) return;

        const modelIds = [...this.selectedModels];
        const results = modelIds.map(id => ({
            ...MockData.models.find(m => m.id === id),
            ...MockData.validationResults[id]
        }));

        const bestF1 = Math.max(...results.map(r => r.f1));
        const bestPrecision = Math.max(...results.map(r => r.precision));
        const bestRecall = Math.max(...results.map(r => r.recall));
        const lowestFpr = Math.min(...results.map(r => r.falsePositiveRate));

        container.innerHTML = `
            <div class="metrics-grid">
                ${results.map(r => `
                    <div class="metric-card">
                        <div class="metric-card__label">${r.name}</div>
                        <div class="metric-card__value metric-card__value--high">${(r.f1 * 100).toFixed(1)}%</div>
                        <div style="font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 4px;">F1 Score</div>
                    </div>
                `).join('')}
            </div>

            <div style="margin-bottom: var(--space-6);">
                <h4 style="font-size: var(--font-size-md); font-weight: 600; color: var(--color-dark); margin-bottom: var(--space-4);">
                    <i class="fa-solid fa-table" style="color: var(--color-primary); margin-right: var(--space-2);"></i>
                    Performance Comparison
                </h4>
                <div style="overflow-x: auto;">
                    <table class="comparison-table">
                        <thead>
                            <tr>
                                <th>Model</th>
                                <th>Type</th>
                                <th>Accuracy</th>
                                <th>Precision</th>
                                <th>Recall</th>
                                <th>F1 Score</th>
                                <th>FPR</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${results.map(r => `
                                <tr>
                                    <td style="font-weight: 600;">${r.name}</td>
                                    <td><span class="model-selector__tag model-selector__tag--${r.type.toLowerCase()}">${r.type}</span></td>
                                    <td class="${r.accuracy === Math.max(...results.map(rr => rr.accuracy)) ? 'best-value' : ''}">${(r.accuracy * 100).toFixed(1)}%</td>
                                    <td class="${r.precision === bestPrecision ? 'best-value' : ''}">${(r.precision * 100).toFixed(1)}%</td>
                                    <td class="${r.recall === bestRecall ? 'best-value' : ''}">${(r.recall * 100).toFixed(1)}%</td>
                                    <td class="${r.f1 === bestF1 ? 'best-value' : ''}">${(r.f1 * 100).toFixed(1)}%</td>
                                    <td class="${r.falsePositiveRate === lowestFpr ? 'best-value' : ''}">${(r.falsePositiveRate * 100).toFixed(1)}%</td>
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="roc-container">
                <h4><i class="fa-solid fa-chart-line" style="color: var(--color-primary); margin-right: var(--space-2);"></i>ROC Curves</h4>
                <div style="display: flex; gap: var(--space-4); flex-wrap: wrap;">
                    ${results.map(r => {
                        const colorMap = { 'ad-standard-v1': '#a7002b', 'ad-sensitive-v2': '#3b82f6', 'ss-fibres-v1': '#22c55e', 'ss-critical-v1': '#f59e0b' };
                        return `
                            <div style="flex: 1; min-width: 280px;">
                                <div style="font-size: var(--font-size-sm); font-weight: 600; margin-bottom: var(--space-2); color: ${colorMap[r.id] || '#a7002b'};">${r.name}</div>
                                <canvas id="roc-${r.id}" width="400" height="200" style="width: 100%; height: 200px; background: var(--color-bg); border-radius: var(--radius-md);"></canvas>
                            </div>
                        `;
                    }).join('')}
                </div>
            </div>

            <div style="margin-top: var(--space-6); display: flex; gap: var(--space-3);">
                <button class="btn btn--primary" onclick="Toast.show('Exporting results...', 'info')">
                    <i class="fa-solid fa-download"></i> Export Results
                </button>
                <button class="btn btn--outline" onclick="Toast.show('Generating report...', 'info')">
                    <i class="fa-solid fa-file-pdf"></i> Generate Report
                </button>
            </div>
        `;

        // Draw ROC curves
        requestAnimationFrame(() => {
            results.forEach(r => {
                const rocData = r.rocData || [];
                const colorMap = { 'ad-standard-v1': '#a7002b', 'ad-sensitive-v2': '#3b82f6', 'ss-fibres-v1': '#22c55e', 'ss-critical-v1': '#f59e0b' };
                Helpers.drawROCCanvas('roc-' + r.id, { rocData, color: colorMap[r.id] });
            });
        });
    },

    renderValidationResults() {
        const container = Helpers.$('#model-comparison-results');
        if (!container) return;

        if (this.validationResults.length === 0) {
            container.innerHTML = `
                <div class="model-comparison__empty">
                    <i class="fa-solid fa-circle-check"></i>
                    <h3>No Validation Runs Yet</h3>
                    <p>Run a validation to see results here</p>
                </div>
            `;
            return;
        }

        // Find best run by F1 score
        const bestRun = this.validationResults.reduce((best, run, i) => 
            run.f1 > best.value ? { value: run.f1, index: i } : best
        , { value: 0, index: 0 });

        const latestRun = this.validationResults[0];

        // Build confusion matrix HTML
        const buildConfusionMatrix = (run) => `
            <div class="confusion-matrix">
                <div class="confusion-matrix__title">Confusion Matrix</div>
                <div class="confusion-matrix__grid">
                    <div class="confusion-matrix__header"></div>
                    <div class="confusion-matrix__header">Predicted Positive</div>
                    <div class="confusion-matrix__header">Predicted Negative</div>
                    <div class="confusion-matrix__header">Actual Positive</div>
                    <div class="confusion-matrix__cell confusion-matrix__cell--tp">
                        <span class="confusion-matrix__cell__value">${run.truePositive}</span>
                        <span class="confusion-matrix__cell__label">True Positive</span>
                    </div>
                    <div class="confusion-matrix__cell confusion-matrix__cell--fn">
                        <span class="confusion-matrix__cell__value">${run.falseNegative}</span>
                        <span class="confusion-matrix__cell__label">False Negative</span>
                    </div>
                    <div class="confusion-matrix__header">Actual Negative</div>
                    <div class="confusion-matrix__cell confusion-matrix__cell--fp">
                        <span class="confusion-matrix__cell__value">${run.falsePositive}</span>
                        <span class="confusion-matrix__cell__label">False Positive</span>
                    </div>
                    <div class="confusion-matrix__cell confusion-matrix__cell--tn">
                        <span class="confusion-matrix__cell__value">${run.trueNegative}</span>
                        <span class="confusion-matrix__cell__label">True Negative</span>
                    </div>
                </div>
            </div>
        `;

        // Build image comparison HTML
        const buildImageComparison = () => `
            <div style="margin-top: var(--space-4);">
                <h4 style="font-size: var(--font-size-sm); font-weight: 600; color: var(--color-dark); margin-bottom: var(--space-3);">
                    <i class="fa-solid fa-images" style="color: var(--color-primary); margin-right: var(--space-2);"></i>
                    Classic vs AI Comparison
                </h4>
                <div class="image-comparison">
                    <div class="image-comparison__panel">
                        <div class="image-comparison__label">Classic Vision</div>
                        <div class="image-comparison__image image-comparison__image--classic">
                            <i class="fa-solid fa-image" style="font-size: 3rem; color: var(--color-text-light);"></i>
                        </div>
                    </div>
                    <div class="image-comparison__panel">
                        <div class="image-comparison__label">AI Anomaly Detection</div>
                        <div class="image-comparison__image image-comparison__image--ai">
                            <i class="fa-solid fa-circle-exclamation" style="font-size: 3rem; color: var(--color-danger);"></i>
                        </div>
                    </div>
                </div>
            </div>
        `;

        container.innerHTML = `
            <div class="validation-runs-list">
                <h4 style="font-size: var(--font-size-sm); font-weight: 600; color: var(--color-dark); margin-bottom: var(--space-3);">
                    <i class="fa-solid fa-clock-rotate-left" style="color: var(--color-primary); margin-right: var(--space-2);"></i>
                    Validation History
                </h4>
                ${this.validationResults.map((run, i) => `
                    <div class="validation-run-item ${i === bestRun.index ? 'validation-run-item--best' : ''}" data-run-index="${i}">
                        <div class="validation-run-item__info">
                            <div class="validation-run-item__title">
                                ${run.model} — Threshold: ${run.threshold.toFixed(2)}
                                ${i === bestRun.index ? '<span class="validation-run-item__badge--best"><i class="fa-solid fa-trophy"></i> Best</span>' : ''}
                            </div>
                            <div class="validation-run-item__meta">
                                ${Helpers.formatDate(run.date)} • ${run.sensitivity} sensitivity • ${run.defectClass === 'all' ? 'All defects' : run.defectClass}
                            </div>
                        </div>
                        <div style="text-align: right;">
                            <div style="font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: ${run.status === 'passed' ? 'var(--color-success)' : 'var(--color-danger)'};">
                                ${(run.f1 * 100).toFixed(1)}%
                            </div>
                            <div style="font-size: var(--font-size-xs); color: var(--color-text-secondary);">F1 Score</div>
                        </div>
                    </div>
                `).join('')}
            </div>

            <div style="border-top: 1px solid var(--color-border); padding-top: var(--space-4); margin-top: var(--space-4);">
                <h4 style="font-size: var(--font-size-sm); font-weight: 600; color: var(--color-dark); margin-bottom: var(--space-3);">
                    Latest Validation Results
                </h4>
                
                <div class="metrics-grid">
                    <div class="metric-card">
                        <div class="metric-card__label">Accuracy</div>
                        <div class="metric-card__value metric-card__value--high">${(latestRun.accuracy * 100).toFixed(1)}%</div>
                    </div>
                    <div class="metric-card">
                        <div class="metric-card__label">Precision</div>
                        <div class="metric-card__value">${(latestRun.precision * 100).toFixed(1)}%</div>
                    </div>
                    <div class="metric-card">
                        <div class="metric-card__label">Recall</div>
                        <div class="metric-card__value">${(latestRun.recall * 100).toFixed(1)}%</div>
                    </div>
                    <div class="metric-card">
                        <div class="metric-card__label">F1 Score</div>
                        <div class="metric-card__value metric-card__value--high">${(latestRun.f1 * 100).toFixed(1)}%</div>
                    </div>
                </div>

                ${buildConfusionMatrix(latestRun)}
                ${buildImageComparison()}

                <div class="roc-container" style="margin-top: var(--space-4);">
                    <h4><i class="fa-solid fa-chart-line" style="color: var(--color-primary); margin-right: var(--space-2);"></i>ROC Curve</h4>
                    <canvas id="roc-validation" width="400" height="250" style="width: 100%; height: 250px; background: var(--color-bg-white); border-radius: var(--radius-md);"></canvas>
                </div>

                <div style="margin-top: var(--space-4); padding: var(--space-3); background: var(--color-bg); border-radius: var(--radius-md); font-size: var(--font-size-xs);">
                    <div style="font-weight: var(--font-weight-semibold); color: var(--color-dark); margin-bottom: var(--space-2);">Run Metadata</div>
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4px;">
                        <span style="color: var(--color-text-secondary);">Dataset:</span>
                        <span>${latestRun.dataset}</span>
                        <span style="color: var(--color-text-secondary);">Model:</span>
                        <span>${latestRun.model}</span>
                        <span style="color: var(--color-text-secondary);">Threshold:</span>
                        <span>${latestRun.threshold.toFixed(2)}</span>
                        <span style="color: var(--color-text-secondary);">Operator:</span>
                        <span>Engineer (simulated)</span>
                        <span style="color: var(--color-text-secondary);">Status:</span>
                        <span style="color: ${latestRun.status === 'passed' ? 'var(--color-success)' : 'var(--color-danger)'}; font-weight: var(--font-weight-bold);">
                            ${latestRun.status === 'passed' ? 'PASSED' : 'FAILED'}
                        </span>
                    </div>
                </div>
            </div>
        `;

        requestAnimationFrame(() => {
            Helpers.drawROCCanvas('roc-validation', { 
                rocData: latestRun.rocData || [], 
                color: '#a7002b' 
            });
        });
    }
};

window.ModelComparison = ModelComparison;