src/ui/results.js

/**
 * Results Display - Show evaluation results to user
 */

/**
 * Interpret Gardner grade
 */
export function interpretGrade(grade) {
    if (grade === 'poor grade embryo' || !grade || grade.length < 3) {
        return '<p>This embryo has been classified as <strong>poor grade</strong>.</p>';
    }
    
    const stage = grade[0];
    const icm = grade[1];
    const te = grade[2];
    
    const stageDesc = {
        '3': 'Early Blastocyst (cavity < 50% of embryo)',
        '4': 'Expanded Blastocyst (cavity >= 50% of embryo)',
        '5': 'Hatching/Hatched Blastocyst'
    };
    
    const icmDesc = {
        'A': 'Excellent - Tightly packed, many cells',
        'B': 'Good - Loosely grouped, several cells',
        'C': 'Fair - Very few cells'
    };
    
    const teDesc = {
        'A': 'Excellent - Many cells, cohesive epithelium',
        'B': 'Good - Few cells, loose epithelium',
        'C': 'Fair - Very few large cells'
    };
    
    return `
        <ul style="list-style: none; padding-left: 0; margin-top: 15px;">
            <li style="margin: 10px 0;"><strong>Stage ${stage}:</strong> ${stageDesc[stage] || 'Unknown stage'}</li>
            <li style="margin: 10px 0;"><strong>ICM Quality ${icm}:</strong> ${icmDesc[icm] || 'Unknown quality'}</li>
            <li style="margin: 10px 0;"><strong>TE Quality ${te}:</strong> ${teDesc[te] || 'Unknown quality'}</li>
        </ul>
    `;
}

/**
 * Display top predictions
 */
export function displayPredictions(predictions, container) {
    if (!predictions || Object.keys(predictions).length === 0) {
        container.innerHTML = '';
        return;
    }
    
    const sortedPredictions = Object.entries(predictions)
        .sort((a, b) => b[1] - a[1])
        .slice(0, 5);
    
    container.innerHTML = sortedPredictions.map(([label, confidence]) => `
        <div class="prediction-item">
            <span class="prediction-label">${label}</span>
            <span class="prediction-confidence">${(confidence * 100).toFixed(1)}%</span>
            <div class="prediction-bar">
                <div class="prediction-bar-fill" style="width: ${confidence * 100}%"></div>
            </div>
        </div>
    `).join('');
}

/**
 * Get image quality tip HTML
 */
function getImageQualityTip() {
    return `
        <div style="background: #fff3cd; border-left: 4px solid #ffc107; padding: 15px; border-radius: 4px; margin-top: 15px;">
            <h4 style="margin: 0 0 10px 0; color: #856404;">Image Quality Tip</h4>
            <p style="margin: 0; color: #856404;">If this result seems incorrect, please ensure:</p>
            <ul style="margin: 10px 0 0 20px; color: #856404;">
                <li>The image is clear and well-focused</li>
            </ul>
            <p style="margin: 10px 0 0 0; color: #856404;"><strong>Try uploading a clearer image for more accurate results.</strong></p>
        </div>
    `;
}

/**
 * Display single embryo results
 */
export function displaySingleEmbryoResults(result) {
    const resultsDiv = document.getElementById('singleResults');
    const predictionsDiv = document.getElementById('singlePredictions');
    
    if (!resultsDiv || !predictionsDiv) return;
    
    if (result.quality === 'poor') {
        resultsDiv.innerHTML = `
            <div class="grade-result grade-poor">
                <h2>Quality: Poor Grade Embryo</h2>
            </div>
            <hr style="margin: 20px 0;">
            <h3>Assessment</h3>
            <p>This embryo has been classified as <strong>poor quality</strong> and is <strong>not suitable for transfer</strong>.</p>
            <p><strong>Recommendation:</strong> This embryo does not meet the minimum quality standards for viable transfer.</p>
            <hr style="margin: 20px 0;">
            ${getImageQualityTip()}
        `;
        predictionsDiv.innerHTML = '';
    } else {
        resultsDiv.innerHTML = `
            <div class="grade-result grade-good">
                <h2>Predicted Grade: ${result.grade}</h2>
            </div>
            <hr style="margin: 20px 0;">
            <h3>Grade Interpretation</h3>
            ${interpretGrade(result.grade)}
        `;
        displayPredictions(result.predictions, predictionsDiv);
    }
}

/**
 * Display cropped embryo results
 */
export function displayCroppedEmbryoResults(result) {
    const resultsDiv = document.getElementById('croppedResults');
    const predictionsDiv = document.getElementById('croppedPredictions');
    
    if (!resultsDiv || !predictionsDiv) return;
    
    if (result.quality === 'poor') {
        resultsDiv.innerHTML = `
            <div class="grade-result grade-poor">
                <h2>Quality: Poor Grade Embryo</h2>
            </div>
            <p style="margin-top: 15px;">This embryo is <strong>not suitable for transfer</strong>.</p>
            <div style="background: #fff3cd; border-left: 4px solid #ffc107; padding: 12px; border-radius: 4px; margin-top: 15px;">
                <p style="margin: 0; color: #856404; font-size: 0.95em;"><strong>Tip:</strong> If this seems incorrect, try uploading a clearer, well-focused image of the embryo for more accurate assessment.</p>
            </div>
        `;
        predictionsDiv.innerHTML = '';
    } else {
        resultsDiv.innerHTML = `
            <div class="grade-result grade-good">
                <h2>Predicted Grade: ${result.grade}</h2>
            </div>
            ${interpretGrade(result.grade)}
        `;
        displayPredictions(result.predictions, predictionsDiv);
    }
}

/**
 * Display quick evaluation results
 */
export function displayQuickResults(result) {
    const resultsDiv = document.getElementById('quickResults');
    const predictionsDiv = document.getElementById('quickPredictions');
    
    if (!resultsDiv || !predictionsDiv) return;
    
    if (result.quality === 'poor') {
        resultsDiv.innerHTML = `
            <div class="grade-result grade-poor">
                <h2>Quality: Poor Grade Embryo</h2>
            </div>
            <hr style="margin: 20px 0;">
            <p>This embryo has been classified as <strong>poor quality</strong> and is <strong>not suitable for transfer</strong>.</p>
            ${getImageQualityTip()}
        `;
        predictionsDiv.innerHTML = '';
    } else {
        resultsDiv.innerHTML = `
            <div class="grade-result grade-good">
                <h2>Predicted Grade: ${result.grade}</h2>
            </div>
            <hr style="margin: 20px 0;">
            ${interpretGrade(result.grade)}
        `;
        displayPredictions(result.predictions, predictionsDiv);
    }
}

/**
 * Display classification status
 */
export function displayClassificationStatus(result) {
    const statusDiv = document.getElementById('classificationStatus');
    if (!statusDiv) return;
    
    const isEmbryo = result.label === 'yes';
    
    if (isEmbryo) {
        statusDiv.innerHTML = `
            <div class="grade-result grade-good">
                <h3>Embryo Detected</h3>
            </div>
            <hr style="margin: 15px 0;">
            <p><strong>Image successfully classified as embryo.</strong></p>
            <p>Confidence: ${(result.confidence * 100).toFixed(1)}%</p>
            <p style="margin-top: 10px;">Click 'Next: Detect Embryos' to continue.</p>
        `;
    } else {
        statusDiv.innerHTML = `
            <div class="grade-result grade-poor">
                <h3>Not an Embryo</h3>
            </div>
            <hr style="margin: 15px 0;">
            <p><strong>The image does not appear to contain an embryo.</strong></p>
            <p>Confidence: ${(result.confidence * 100).toFixed(1)}%</p>
            <p style="margin-top: 10px;">Please upload a valid embryo image to proceed.</p>
        `;
    }
}

/**
 * Display final results in Step 5
 */
export function displayFinalResults(result) {
    const resultsDiv = document.getElementById('finalResults');
    const predictionsDiv = document.getElementById('finalPredictions');
    
    if (!resultsDiv || !predictionsDiv) return;
    
    if (result.quality === 'poor') {
        resultsDiv.innerHTML = `
            <div class="grade-result grade-poor">
                <h2>Quality: Poor Grade Embryo</h2>
            </div>
            <hr style="margin: 20px 0;">
            <h3>Assessment</h3>
            <p>This embryo has been classified as <strong>poor quality</strong> and is <strong>not suitable for transfer</strong>.</p>
            <p><strong>Recommendation:</strong> This embryo does not meet the minimum quality standards for viable transfer.</p>
            <hr style="margin: 20px 0;">
            ${getImageQualityTip()}
        `;
        predictionsDiv.innerHTML = '';
    } else {
        resultsDiv.innerHTML = `
            <div class="grade-result grade-good">
                <h2>Predicted Grade: ${result.grade}</h2>
            </div>
            <hr style="margin: 20px 0;">
            <h3>Grade Interpretation</h3>
            ${interpretGrade(result.grade)}
            <hr style="margin: 20px 0;">
            <h3>Analysis Complete</h3>
            <p>The embryo has been successfully evaluated using AI-powered analysis.</p>
        `;
        displayPredictions(result.predictions, predictionsDiv);
    }
}