frontend/src/components/Assessment/Report.js

/**
 * Report Component
 * 
 * Displays the final clinical assessment report and equity self-evaluation.
 * Designed to look like a high-fidelity EHR clinical note.
 */

import React from 'react';
import './Report.css';

const Report = ({ reportData, mstData, onStartOver }) => {
    if (!reportData || !mstData) return null;

    return (
        <div className="report-container">

            {/* Clinical Report Section */}
            <section className="report-section clinical-note">
                <h2 className="report-header">
                    <span className="icon">📋</span> Clinical Assessment Report
                </h2>

                <div className="report-card-grid">
                    {/* MST Card */}
                    <div className="report-card mst">
                        <div className="report-card-label">Skin Tone (MST)</div>
                        <div className="report-card-value">
                            MST {mstData.mst_value} - {mstData.category}
                        </div>
                    </div>

                    {/* Stage Card */}
                    <div className="report-card stage">
                        <div className="report-card-label">Wound Stage</div>
                        <div className="report-card-value">{reportData.stage}</div>
                    </div>

                    {/* Urgency Card */}
                    <div className={`report-card urgency ${reportData.urgency}`}>
                        <div className="report-card-label">Urgency</div>
                        <div className="report-card-value" style={{ textTransform: 'capitalize' }}>
                            {reportData.urgency}
                        </div>
                    </div>
                </div>

                <div className="report-text-block">
                    <h3>Clinical Rationale</h3>
                    <p>{reportData.rationale}</p>
                </div>

                <div className="report-text-block">
                    <h3>Recommended Care Plan</h3>
                    <div className="care-plan-text">
                        {reportData.care_plan.split('\n').map((line, i) => (
                            <div key={i}>{line}</div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Equity Self-Evaluation Section (Auto-generated based on MST) */}
            <section className="report-section equity-evaluation">
                <h2 className="report-header equity-header">
                    <span className="icon">⚖️</span> Equity Self-Evaluation
                </h2>
                <div className="equity-content">
                    <p className="equity-intro">
                        The AI agent performed a self-check to ensure the assessment followed equitable standards for <strong>Monk Skin Tone (MST)</strong> criteria.
                    </p>

                    <div className="equity-checklist">
                        <div className="checklist-item success">
                            <span className="check">✓</span>
                            <span>Identified patient as <strong>MST {mstData.mst_value} ({mstData.category})</strong></span>
                        </div>

                        <div className="checklist-item success">
                            <span className="check">✓</span>
                            <span>Applied MST-specific visual guidance: <em>"{mstData.visual_guidance}"</em></span>
                        </div>

                        {mstData.mst_value >= 7 ? (
                            <div className="checklist-item success">
                                <span className="check">✓</span>
                                <span><strong>Equity Check Passed:</strong> Did NOT use "redness" or "erythema" as primary indicator for Deep skin tone. Relied on purple/blue/maroon discoloration and texture.</span>
                            </div>
                        ) : mstData.mst_value >= 4 ? (
                            <div className="checklist-item success">
                                <span className="check">✓</span>
                                <span><strong>Equity Check Passed:</strong> Used "redness" with caution. Verified with secondary signs (warmth, shiny skin) appropriate for Medium skin tone.</span>
                            </div>
                        ) : (
                            <div className="checklist-item success">
                                <span className="check">✓</span>
                                <span><strong>Standard Criteria Used:</strong> "Redness" / "Erythema" checks are valid for Light skin tone (MST 1-3).</span>
                            </div>
                        )}
                    </div>
                </div>
            </section>

            {/* Actions */}
            <div className="report-actions">
                <button className="secondary-button" onClick={() => window.print()}>
                    🖨️ Print / Save PDF
                </button>
                <button className="primary-button" onClick={onStartOver}>
                    🔄 Start New Assessment
                </button>
            </div>

        </div>
    );
};

export default Report;