import { useState, useEffect } from 'react'
import WeatherDashboard from './components/WeatherDashboard'
import './App.css'

function App() {
  const [weatherData, setWeatherData] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  const [lastUpdate, setLastUpdate] = useState(null)

  useEffect(() => {
    // Prüfe ob eingebettete Daten vorhanden sind
    if (window.__WEATHER_DATA__) {
      setWeatherData(window.__WEATHER_DATA__)
      setLastUpdate(new Date())
      setLoading(false)
    } else {
      setError('Keine Wetterdaten verfügbar')
      setLoading(false)
    }
  }, [])

  if (loading) {
    return (
      <div className="loading-container">
        <div className="loading-spinner"></div>
        <p>Lade Wetterdaten...</p>
      </div>
    )
  }

  if (error) {
    return (
      <div className="error-container">
        <h2>Fehler beim Laden der Daten</h2>
        <p>{error}</p>
      </div>
    )
  }

  return (
    <div className="app">
      <header className="app-header">
        <h1>🌤️ Wetterstation</h1>
        {lastUpdate && (
          <p className="last-update">
            Letzte Aktualisierung: {lastUpdate.toLocaleTimeString('de-DE')}
          </p>
        )}
      </header>
      
      <main className="app-main">
        <WeatherDashboard data={weatherData} />
      </main>
    </div>
  )
}

export default App
