import React, { useState } from "react";
import "./App.css";

function App() {

  // ✅ Your Hugging Face backend URL
  const API = "https://Srikar00007--Medical-Chatbot.hf.space";

  const [image, setImage] = useState(null);
  const [analysis, setAnalysis] = useState(null);
  const [question, setQuestion] = useState("");
  const [answer, setAnswer] = useState("");

  // ✅ Upload Image -> Analyze
  async function uploadImage(e) {
    const file = e.target.files[0];
    setImage(URL.createObjectURL(file));

    const formData = new FormData();
    formData.append("file", file);

    const res = await fetch(`${API}/analyze-image/`, {
      method: "POST",
      body: formData,
    });

    const data = await res.json();
    setAnalysis(data);
  }

  // ✅ Ask AI
  async function askAI() {
    const res = await fetch(`${API}/ask-ai/`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        wound: analysis.wound_label,
        skin: analysis.skin_label,
        question: question,
      }),
    });

    const data = await res.json();
    setAnswer(data.reply);
  }

  return (
    <div className="container">

      <h1>🩺 Medical Diagnosis + AI Assistant</h1>

      <input type="file" accept="image/*" onChange={uploadImage} />

      {/* ✅ Show Uploaded Image */}
      {image && <img src={image} alt="Uploaded" className="preview" />}

      {/* ✅ Show Analysis Results */}
      {analysis && (
        <div className="results">
          <h2>🔍 Detection Results</h2>
          <p><b>Wound:</b> {analysis.wound_label}</p>
          <p><b>Skin Disease:</b> {analysis.skin_label}</p>
        </div>
      )}

      {/* ✅ Ask Question */}
      {analysis && (
        <>
          <h2>💬 Ask a Medical Question</h2>
          
          <input
            type="text"
            placeholder="Ask something..."
            onChange={(e) => setQuestion(e.target.value)}
          />

          <button onClick={askAI}>Ask</button>

          {answer && (
            <div className="answer-box">
              <h3>✅ AI Response</h3>
              <p>{answer}</p>
            </div>
          )}
        </>
      )}

    </div>
  );
}

export default App;