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

function App() {
  const [prompt, setPrompt] = useState("");
  const [image, setImage] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleGenerate = async (isPremium) => {
    setLoading(true);
    try {
      const response = await fetch("http://localhost:5000/generate", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ prompt, premium: isPremium }),
      });
      const data = await response.json();
      setImage(data.image_url);
    } catch (error) {
      console.error("Görsel oluşturulurken hata oluştu:", error);
    }
    setLoading(false);
  };

  return (
    <div className="app-container">
      {/* HEADER */}
      <header className="header">
        <div className="logo">Logo</div>
        <div className="header-right">
          <div className="new-project">
            <span className="new-project-text">Yeni Proje</span>
            <span className="new-project-icon">+</span>
          </div>
          <div className="profile">
            <img src="profile.jpg" alt="Profile" className="profile-pic" />
          </div>
        </div>
      </header>
      
      {/* SOL PANEL */}
      <div className="side-panel">
        <label>Toplam Alan (m²)</label>
        <input type="number" placeholder="Örn: 100" />

        <label>Yatak Odası</label>
        <input type="number" placeholder="0" />

        <label>Banyo</label>
        <input type="number" placeholder="0" />

        <label>Mutfak</label>
        <input type="number" placeholder="0" />

        <label>Oturma Odası</label>
        <input type="number" placeholder="0" />

        <label>Yemek Odası</label>
        <input type="number" placeholder="0" />

        <label>Giriş</label>
        <input type="number" placeholder="0" />

        <label>Garaj</label>
        <input type="number" placeholder="0" />

        {/* PROMPT ALANI */}
        <textarea
          placeholder="Özel isteğinizi buraya yazın..."
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
        ></textarea>

        {/* BUTONLAR */}
        <div className="buttons">
          <button onClick={() => handleGenerate(false)}>Oluştur</button>
          <button className="premium-button" onClick={() => handleGenerate(true)}>
            Yükselt <span className="lock-icon">🔒</span>
          </button>
        </div>
      </div>

      {/* GÖRSEL ALANI */}
      <div className="image-container">
        {loading && <p>Görsel oluşturuluyor...</p>}
        {image && <img src={`data:image/png;base64,${image}`} alt="Generated Floor Plan" />}
      </div>
    </div>
  );
}

export default App;