import React, { useState, useEffect } from 'react'
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
import { AuthProvider } from './context/AuthContext'

function App() {
  const [version, setVersion] = useState(null)

  useEffect(() => {
    // Load version from API
    fetch('/api/version')
      .then(res => res.json())
      .then(data => setVersion(data))
      .catch(err => console.error('Failed to load version:', err))
  }, [])

  return (
    <AuthProvider>
      <Router>
        <div className="app">
          <div className="container">
            <h1>🥋 Shinkan Jinkendo</h1>
            <p>Trainer- und Vereinsplattform für Kampfsport-Trainingsplanung</p>

            {version && (
              <div className="card" style={{ marginTop: '2rem' }}>
                <h3>System Status</h3>
                <p><strong>Version:</strong> {version.app_version}</p>
                <p><strong>Build:</strong> {version.build_date}</p>
                <p><strong>Environment:</strong> {version.environment}</p>
                <p><strong>DB Schema:</strong> {version.db_schema_version}</p>
              </div>
            )}

            <div className="card" style={{ marginTop: '2rem' }}>
              <h3>🚧 In Entwicklung</h3>
              <p>Die App wird gerade aufgebaut.</p>
              <ul style={{ textAlign: 'left', marginTop: '1rem' }}>
                <li>✅ Backend-Basis</li>
                <li>✅ Docker-Setup</li>
                <li>✅ Datenbank-Schema</li>
                <li>🔲 Auth-System</li>
                <li>🔲 Übungsverwaltung</li>
                <li>🔲 Trainingsplanung</li>
              </ul>
            </div>
          </div>
        </div>
      </Router>
    </AuthProvider>
  )
}

export default App