import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [ticker, setTicker] = useState('GOOGL'); // Default ticker
  const [prediction, setPrediction] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');

  const handleForecast = async () => {
    setIsLoading(true);
    setError('');
    setPrediction('');

    try {
      // The Gradio API endpoint is at /run/predict
      const response = await fetch('/run/predict', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        // The data payload must be in this specific format for Gradio
        body: JSON.stringify({
          data: [ticker],
        }),
      });

      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }

      const result = await response.json();
      
      // The prediction is in the 'data' array of the response
      const forecastText = result.data[0];
      setPrediction(forecastText);

    } catch (err) {
      console.error("Failed to fetch prediction:", err);
      setError('Failed to get forecast. Check the ticker or try again later.');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1>Stock Forecaster</h1>
        <p>Enter a stock ticker (e.g., AAPL, GOOGL, TSLA) to predict the next day's closing price.</p>
        
        <div className="input-container">
          <input
            type="text"
            value={ticker}
            onChange={(e) => setTicker(e.target.value.toUpperCase())}
            placeholder="Enter Ticker"
            className="ticker-input"
          />
          <button onClick={handleForecast} disabled={isLoading} className="forecast-button">
            {isLoading ? 'Forecasting...' : 'Get Forecast'}
          </button>
        </div>

        {error && <p className="error-message">{error}</p>}
        
        {prediction && (
          <div className="prediction-result">
            <pre>{prediction}</pre>
          </div>
        )}
      </header>
    </div>
  );
}

export default App;