import React, { useState, useEffect } from 'react'
import { useAuth } from '../context/AuthContext'
import api from '../utils/api'
import EmailVerificationBanner from '../components/EmailVerificationBanner'

function Dashboard() {
  const [version, setVersion] = useState(null)
  const [profile, setProfile] = useState(null)
  const [loading, setLoading] = useState(true)
  const { user } = useAuth()

  useEffect(() => {
    loadData()
  }, [])

  const loadData = async () => {
    try {
      const [versionData, profileData] = await Promise.all([
        api.getVersion(),
        api.getCurrentProfile()
      ])
      setVersion(versionData)
      setProfile(profileData)
    } catch (err) {
      console.error('Failed to load data:', err)
    } finally {
      setLoading(false)
    }
  }

  if (loading) {
    return (
      <div className="app-page" style={{ padding: '2rem 0', textAlign: 'center' }}>
        <div className="spinner"></div>
        <p>Laden...</p>
      </div>
    )
  }

  return (
    <div className="app-page">
        <h1>Dashboard</h1>
        <p style={{ color: 'var(--text2)', marginTop: '0.5rem' }}>
          Willkommen, {user?.name || user?.email}!
        </p>
        {profile && <EmailVerificationBanner profile={profile} />}
        {/* Welcome Card */}
        <div className="card" style={{ marginTop: '1.5rem', marginBottom: '1.5rem' }}>
          <h2>Willkommen bei Shinkan Jinkendo</h2>
          <p style={{ color: 'var(--text2)' }}>
            Trainer- und Vereinsplattform für Kampfsport-Trainingsplanung
          </p>
        </div>

        {/* Status Grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 260px), 1fr))',
          gap: '1rem',
          marginBottom: '1.5rem'
        }}>
          <div className="card">
            <h3>✅ Fertig</h3>
            <ul style={{ marginTop: '1rem', paddingLeft: '1.5rem' }}>
              <li>Backend-Basis</li>
              <li>Datenbank-Schema</li>
              <li>Auth-System</li>
              <li>Login & Registrierung</li>
            </ul>
          </div>

          <div className="card">
            <h3>🚧 In Arbeit</h3>
            <ul style={{ marginTop: '1rem', paddingLeft: '1.5rem' }}>
              <li>Übungsverwaltung</li>
              <li>Trainingsplanung</li>
              <li>Kataloge (Skills, Methods)</li>
            </ul>
          </div>

          <div className="card">
            <h3>📋 Geplant</h3>
            <ul style={{ marginTop: '1rem', paddingLeft: '1.5rem' }}>
              <li>MediaWiki-Import</li>
              <li>Trainingsprogramme</li>
              <li>Admin-Panel</li>
            </ul>
          </div>
        </div>

        {/* System Info */}
        {version && (
          <div className="card">
            <h3>System-Information</h3>
            <div style={{ display: 'grid', gridTemplateColumns: '150px 1fr', gap: '0.5rem', marginTop: '1rem' }}>
              <strong>Version:</strong>
              <span>{version.app_version}</span>

              <strong>Build:</strong>
              <span>{version.build_date}</span>

              <strong>Umgebung:</strong>
              <span>{version.environment}</span>

              <strong>DB Schema:</strong>
              <span>{version.db_schema_version}</span>

              <strong>Dein Tier:</strong>
              <span style={{
                padding: '0.25rem 0.5rem',
                background: profile?.tier === 'premium' ? 'var(--accent)' : 'var(--surface2)',
                color: profile?.tier === 'premium' ? 'white' : 'var(--text1)',
                borderRadius: '4px',
                display: 'inline-block'
              }}>
                {profile?.tier || 'free'}
              </span>

              <strong>Rolle:</strong>
              <span>{profile?.role || 'user'}</span>
            </div>
          </div>
        )}
    </div>
  )
}

export default Dashboard