frontend/src/App.tsx

import { useState, useEffect } from "react";
import axios from "axios";
import { Header } from "./components/Header";
import { Sidebar } from "./components/Sidebar";
import { UploadSection } from "./components/UploadSection";
import { ResultsPanel } from "./components/ResultsPanel";
import { Footer } from "./components/Footer";
import { ProgressBar } from "./components/progressbar";

export function App() {
// ----------------------------
// State Management
// ----------------------------
const [selectedTest, setSelectedTest] = useState("cytology");
const [uploadedImage, setUploadedImage] = useState<string | null>(null);
const [selectedModel, setSelectedModel] = useState("");
const [apiResult, setApiResult] = useState<any>(null);
const [showResults, setShowResults] = useState(false);
const [currentStep, setCurrentStep] = useState(0);
const [loading, setLoading] = useState(false);

// ----------------------------
// Progress bar logic
// ----------------------------
useEffect(() => {
if (showResults) setCurrentStep(2);
else if (uploadedImage) setCurrentStep(1);
else setCurrentStep(0);
}, [uploadedImage, showResults]);

// ----------------------------
// Reset logic — new test
// ----------------------------
useEffect(() => {
setCurrentStep(0);
setShowResults(false);
setUploadedImage(null);
setSelectedModel("");
setApiResult(null);
}, [selectedTest]);

// ----------------------------
// Analyze handler (Backend call)
// ----------------------------
const handleAnalyze = async () => {
if (!uploadedImage || !selectedModel) {
alert("Please select a model and upload an image first!");
return;
}


setLoading(true);
setShowResults(false);
setApiResult(null);

try {
  // Convert Base64 → File
  const blob = await fetch(uploadedImage).then((r) => r.blob());
  const file = new File([blob], "input.jpg", { type: blob.type });

  const formData = new FormData();
  formData.append("file", file);
  formData.append("analysis_type", selectedTest);
  formData.append("model_name", selectedModel);

  // POST to backend
const baseURL =
      import.meta.env.MODE === "development"
        ? "http://127.0.0.1:8000"
        : window.location.origin;

    const res = await axios.post(`${baseURL}/predict/`, formData, {
      headers: { "Content-Type": "multipart/form-data" },
    });

    setApiResult(res.data);
    setShowResults(true);
  } catch (err) {
    console.error("❌ Error during inference:", err);
    alert("Error analyzing the image. Check backend logs.");
  } finally {
    setLoading(false);
  }
};
// ----------------------------
// Layout
// ----------------------------
return ( <div className="flex flex-col min-h-screen w-full bg-gray-50"> <Header /> <ProgressBar currentStep={currentStep} />


  <div className="flex flex-1">
    <Sidebar selectedTest={selectedTest} onTestChange={setSelectedTest} />

    <main className="flex-1 p-6">
      <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Upload & Model Selection */}
        <UploadSection
          selectedTest={selectedTest}
          uploadedImage={uploadedImage}
          setUploadedImage={setUploadedImage}
          selectedModel={selectedModel}
          setSelectedModel={setSelectedModel}
          onAnalyze={handleAnalyze}
        />

        {/* Results Panel */}
        {showResults && (
          <ResultsPanel
            uploadedImage={
              apiResult?.annotated_image_url || uploadedImage
            }
            result={apiResult}
            loading={loading}
          />
        )}
      </div>
    </main>
  </div>

  <Footer />
</div>


);
}