frontend/src/components/SimulationBriefing/SimulationBriefing.js

/**
 * SimulationBriefing Component
 * 
 * "What's happening in this assessment" page
 * Adapted from appoint-ready's RolePlayDialogs pattern
 * Explains the two "agents" and what to expect
 */

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

const SimulationBriefing = ({ selectedPatient, selectedWound, onStart, onBack }) => {
    return (
        <div className="page simulation-briefing-page">
            {/* Header */}
            <header className="header">
                <div className="header-left">
                    <button className="back-button" onClick={onBack}>
                        ← Back
                    </button>
                    <div className="logo-container">
                        <span className="logo">EWAAST</span>
                        <span className="powered-by">
                            powered by <span className="medgemma-badge">MedGemma 1.5</span>
                        </span>
                    </div>
                </div>
                <button className="details-button">
                    ℹ️ Details about this Demo
                </button>
            </header>

            {/* Main Content */}
            <div className="page-content">
                <div className="frame frame-wide">

                    <h1 className="briefing-title">What's happening in this assessment</h1>

                    {/* Two Agent Cards */}
                    <div className="agents-grid">

                        {/* EWAAST Agent Card */}
                        <div className="agent-card">
                            <h2 className="agent-title">EWAAST Assessment Agent</h2>
                            <p className="agent-subtitle">
                                Built with: <span className="medgemma-inline">MedGemma</span> 1.5 4B
                            </p>

                            <div className="agent-icon">
                                <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
                                    <circle cx="32" cy="32" r="28" fill="#E8F0FE" />
                                    <path d="M24 28L32 20L40 28" stroke="#4285F4" strokeWidth="3" strokeLinecap="round" />
                                    <path d="M24 36L32 44L40 36" stroke="#4285F4" strokeWidth="3" strokeLinecap="round" />
                                    <circle cx="32" cy="32" r="6" fill="#4285F4" />
                                </svg>
                            </div>

                            <p className="agent-description">
                                In this demo, EWAAST functions as an AI agent designed to assess wounds
                                using <strong>equitable visual criteria</strong>. It applies the{' '}
                                <strong>Monk Skin Tone (MST) Scale</strong> to adapt its assessment
                                based on the patient's skin tone.
                            </p>
                            <p className="agent-description">
                                For <strong>MST {selectedPatient?.mst_value}</strong> ({selectedPatient?.mst_category} skin),
                                EWAAST will:
                            </p>
                            <ul className="agent-criteria">
                                {selectedPatient?.mst_value >= 7 ? (
                                    <>
                                        <li>❌ <strong>NOT</strong> rely on "redness" or "erythema"</li>
                                        <li>✓ Look for purple/blue discoloration</li>
                                        <li>✓ Assess warmth and induration</li>
                                        <li>✓ Check for texture changes</li>
                                    </>
                                ) : selectedPatient?.mst_value >= 4 ? (
                                    <>
                                        <li>⚠️ Use redness as secondary indicator only</li>
                                        <li>✓ Look for color changes (darkening)</li>
                                        <li>✓ Assess warmth and shiny skin</li>
                                    </>
                                ) : (
                                    <>
                                        <li>✓ Look for non-blanchable erythema</li>
                                        <li>✓ Traditional redness criteria apply</li>
                                        <li>✓ Assess warmth and pallor</li>
                                    </>
                                )}
                            </ul>
                        </div>

                        {/* Patient Scenario Card */}
                        <div className="agent-card">
                            <h2 className="agent-title">Patient Scenario: {selectedPatient?.name}</h2>
                            <p className="agent-subtitle">
                                Simulated by: Synthetic Clinical Vignette
                            </p>

                            <div className="patient-photo-container">
                                <img
                                    src={selectedPatient?.image}
                                    alt={selectedPatient?.name}
                                    className="patient-photo"
                                />
                            </div>

                            <p className="agent-description">
                                EWAAST is provided the context that the patient is a{' '}
                                <strong>{selectedPatient?.age}-year-old {selectedPatient?.gender?.toLowerCase()}</strong> with{' '}
                                <strong>MST {selectedPatient?.mst_value}</strong> ({selectedPatient?.mst_category}) skin tone.
                            </p>
                            <p className="agent-description">
                                The simulated scenario involves a <strong>{selectedWound?.name}</strong> wound:
                            </p>
                            <div className="wound-info">
                                <strong>{selectedWound?.name}</strong>: {selectedWound?.description}
                            </div>
                            <p className="agent-description patient-context">
                                <strong>Medical History:</strong> {selectedPatient?.existing_condition}
                            </p>
                        </div>
                    </div>

                    {/* Explanation Text */}
                    <div className="explanation-section">
                        <p className="explanation-text">
                            As the assessment develops, EWAAST{' '}
                            <span className="highlight">
                                generates a real-time clinical report
                            </span>{' '}
                            using MST-adaptive visual criteria. For MST {selectedPatient?.mst_value}, this means:
                        </p>
                        <div className="visual-guidance-box">
                            <strong>Visual Guidance:</strong> {selectedPatient?.visual_guidance}
                        </div>
                        <p className="explanation-text">
                            Following the assessment, a{' '}
                            <span className="highlight">
                                self-evaluation highlighting equity considerations
                            </span>{' '}
                            will be available to demonstrate how EWAAST ensures fair treatment across all skin tones.
                        </p>
                    </div>

                    {/* Start Button */}
                    <button className="primary-button start-button" onClick={onStart}>
                        🔬 Start Assessment
                    </button>

                </div>
            </div>

            {/* Footer */}
            <footer className="footer">
                <span className="footer-text">
                    All patients are synthetic. No real patient data is used.
                </span>
            </footer>
        </div>
    );
};

export default SimulationBriefing;