frontend/src/App.js

/**
 * EWAAST React Application
 * 
 * Main app component with state machine for navigation.
 * Adapted from Google's appoint-ready App.js pattern.
 */

import React, { useState } from 'react';
import WelcomePage from './components/WelcomePage/WelcomePage';
import PatientSelector from './components/PatientSelector/PatientSelector';
import SimulationBriefing from './components/SimulationBriefing/SimulationBriefing';
import WoundUpload from './components/WoundUpload/WoundUpload';
import Assessment from './components/Assessment/Assessment';
import './shared/Style.css';

const App = () => {
  const [currentPage, setCurrentPage] = useState('welcome');
  const [selectedPatient, setSelectedPatient] = useState(null);
  const [selectedWound, setSelectedWound] = useState(null);
  const [uploadedImage, setUploadedImage] = useState(null);
  const [patientContext, setPatientContext] = useState('');
  const [assessmentResult, setAssessmentResult] = useState(null);

  const handleStartAssessment = () => {
    setCurrentPage('patientSelector');
  };

  const handlePatientSelected = (patient, wound) => {
    setSelectedPatient(patient);
    setSelectedWound(wound);
    setPatientContext(patient.ehr_summary);
    setCurrentPage('simulationBriefing');
  };

  const handleStartSimulation = () => {
    setCurrentPage('upload');
  };

  const handleImageUploaded = (imageFile, context) => {
    setUploadedImage(imageFile);
    setPatientContext(context);
    setCurrentPage('assessment');
  };

  const handleAssessmentComplete = (result) => {
    setAssessmentResult(result);
  };

  const handleBack = () => {
    if (currentPage === 'patientSelector') {
      setCurrentPage('welcome');
    } else if (currentPage === 'simulationBriefing') {
      setCurrentPage('patientSelector');
    } else if (currentPage === 'upload') {
      setCurrentPage('simulationBriefing');
    } else if (currentPage === 'assessment') {
      setCurrentPage('upload');
      setAssessmentResult(null);
    }
  };

  const handleStartOver = () => {
    setCurrentPage('welcome');
    setSelectedPatient(null);
    setSelectedWound(null);
    setUploadedImage(null);
    setPatientContext('');
    setAssessmentResult(null);
  };

  return (
    <div className="app">
      {currentPage === 'welcome' && (
        <WelcomePage onStart={handleStartAssessment} />
      )}
      {currentPage === 'patientSelector' && (
        <PatientSelector
          onNext={handlePatientSelected}
          onBack={handleBack}
        />
      )}
      {currentPage === 'simulationBriefing' && (
        <SimulationBriefing
          selectedPatient={selectedPatient}
          selectedWound={selectedWound}
          onStart={handleStartSimulation}
          onBack={handleBack}
        />
      )}
      {currentPage === 'upload' && (
        <WoundUpload
          onNext={handleImageUploaded}
          onBack={handleBack}
          selectedPatient={selectedPatient}
          selectedWound={selectedWound}
        />
      )}
      {currentPage === 'assessment' && (
        <Assessment
          imageFile={uploadedImage}
          patientContext={patientContext}
          selectedPatient={selectedPatient}
          selectedWound={selectedWound}
          onComplete={handleAssessmentComplete}
          onBack={handleBack}
          onStartOver={handleStartOver}
        />
      )}
    </div>
  );
};

export default App;