import { useState } from 'react';
import { PatientHistoryPage } from './pages/PatientHistoryPage';

import HomePage from './pages/HomePage.tsx';
import { PatientRegistry } from './pages/PatientRegistry.tsx';
import { GuidedCapturePage } from './pages/GuidedCapturePage';
import { AcetowhiteExamPage } from './pages/AcetowhiteExamPage';
import { GreenFilterPage } from './pages/GreenFilterPage';
import { LugolExamPage } from './pages/LugolExamPage';
import { BiopsyMarking } from './pages/BiopsyMarking';
import { ReportPage } from './pages/ReportPage';
import { Sidebar } from './components/Sidebar';
import { Header } from './components/Header';
import { Footer } from './components/Footer';
import { ChatBot } from './components/ChatBot';

export function App() {
  const [currentPage, setCurrentPage] = useState<'home' | 'patientinfo' | 'patienthistory' | 'colposcopyimaging' | 'acetowhite' | 'greenfilter' | 'lugol' | 'guidedcapture' | 'biopsymarking' | 'capture' | 'annotation' | 'compare' | 'report' | 'settings'>('home');
  const [currentPatientId, setCurrentPatientId] = useState<string | undefined>(undefined);
  const [isNewPatientFlow, setIsNewPatientFlow] = useState(false);
  const [capturedImages, setCapturedImages] = useState<any[]>([]);
  const [guidanceMode, setGuidanceMode] = useState<'capture' | 'annotation' | 'compare' | 'report'>('capture');

  const goToPatientRegistry = () => {
    setCurrentPatientId(undefined);
    setIsNewPatientFlow(false);
    setCurrentPage('patientinfo');
  };

  const goToPatientHistory = (patientId?: string, isNewPatient: boolean = false) => {
    setCurrentPatientId(patientId);
    setIsNewPatientFlow(isNewPatient);
    setCurrentPage('patienthistory');
  };

  const goToHome = () => {
    setCurrentPatientId(undefined);
    setIsNewPatientFlow(false);
    setCurrentPage('home');
  };

  const goToColposcopyImaging = () => setCurrentPage('colposcopyimaging');
  const goToAcetowhite = () => setCurrentPage('acetowhite');
  const goToGreenFilter = () => setCurrentPage('greenfilter');
  const goToLugol = () => setCurrentPage('lugol');
  const goToGuidedCapture = () => {
    setCurrentPage('capture');
    setGuidanceMode('capture');
  };
  const goToBiopsyMarking = () => setCurrentPage('biopsymarking');
  const goToCapture = () => {
    setCurrentPage('capture');
    setGuidanceMode('capture');
  };
  const goToAnnotation = () => {
    setCurrentPage('annotation');
    setGuidanceMode('annotation');
  };
  const goToCompare = () => {
    setCurrentPage('compare');
    setGuidanceMode('compare');
  };
  const goToReport = () => setCurrentPage('report');

  const renderMain = () => {
    switch (currentPage) {
      case 'home':
        return <HomePage onNavigateToPatients={goToPatientRegistry} onNext={goToPatientRegistry} />;
      case 'patientinfo':
        return <PatientRegistry onNewPatient={(newPatientId) => goToPatientHistory(newPatientId, true)} onSelectExisting={(id: string) => goToPatientHistory(id)} onBackToHome={goToHome} onNext={goToGuidedCapture} />;
      case 'patienthistory':
        return <PatientHistoryPage goToImaging={goToGuidedCapture} goBackToRegistry={goToPatientRegistry} patientID={currentPatientId} goToGuidedCapture={isNewPatientFlow ? goToGuidedCapture : undefined} />;
      
      case 'acetowhite':
        return <AcetowhiteExamPage goBack={goToColposcopyImaging} onNext={goToGreenFilter} />;
      case 'greenfilter':
        return <GreenFilterPage goBack={goToAcetowhite} onNext={goToLugol} />;
      case 'lugol':
        return <LugolExamPage goBack={goToGreenFilter} onNext={goToGuidedCapture} />;
      case 'biopsymarking':
        return <BiopsyMarking onBack={goToGuidedCapture} onNext={goToReport} capturedImages={capturedImages} />;
      case 'capture':
        return <GuidedCapturePage onNext={goToBiopsyMarking} onGoToPatientRecords={goToPatientRegistry} initialMode="capture" onCapturedImagesChange={setCapturedImages} onModeChange={setGuidanceMode} />;
      case 'annotation':
        return <GuidedCapturePage onNext={goToBiopsyMarking} onGoToPatientRecords={goToPatientRegistry} initialMode="annotation" onCapturedImagesChange={setCapturedImages} onModeChange={setGuidanceMode} />;
      case 'compare':
        return <GuidedCapturePage onNext={goToBiopsyMarking} onGoToPatientRecords={goToPatientRegistry} initialMode="compare" onCapturedImagesChange={setCapturedImages} onModeChange={setGuidanceMode} />;
      case 'report':
        return <ReportPage onBack={goToCompare} onNext={goToHome} onGoToPatientRecords={goToPatientRegistry} capturedImages={capturedImages} />;
      default:
        return <div className="p-8">Page "{currentPage}" not implemented yet.</div>;
    }
  };

  // Sidebar is shown on all pages except home
  const showSidebar = currentPage !== 'home';
  const sidebarKey = currentPage === 'patienthistory' ? 'patientinfo' : (currentPage === 'guidedcapture' && guidanceMode === 'report') ? 'report' : ['capture', 'annotation', 'compare', 'guidedcapture'].includes(currentPage) ? guidanceMode : currentPage;

  return (
    <div className="flex flex-col min-h-screen">
      <Header compact={currentPage === 'guidedcapture'} />

      <div className="flex-1 flex min-h-0">
        {showSidebar && <Sidebar current={sidebarKey as 'home' | 'patientinfo' | 'capture' | 'annotation' | 'compare' | 'report' | 'settings'} onNavigate={k => {
          if (k === 'home') goToHome();
          else if (k === 'patientinfo') goToPatientRegistry();
          else if (k === 'capture') goToCapture();
          else if (k === 'annotation') goToAnnotation();
          else if (k === 'compare') goToCompare();
          else if (k === 'report') goToReport();
          else setCurrentPage(k as any);
        }} />}
        <main className="flex-1 bg-white overflow-auto">
          {renderMain()}
        </main>
      </div>

      <Footer compact={currentPage === 'guidedcapture'} />
      <ChatBot />
    </div>
  );
}