import { useAuth } from '../context/AuthContext'

function ProfilePage() {
  const { user } = useAuth()

  return (
    <div style={{ padding: '2rem' }}>
      <div style={{ maxWidth: '800px', margin: '0 auto' }}>
        <h1>Profil</h1>

        <div className="card" style={{ marginTop: '1.5rem' }}>
          <h2>Persönliche Daten</h2>

          <div style={{ marginTop: '1rem' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '150px 1fr', gap: '1rem', marginBottom: '1rem' }}>
              <strong>Name:</strong>
              <span>{user?.name || '-'}</span>

              <strong>E-Mail:</strong>
              <span>{user?.email}</span>

              <strong>Rolle:</strong>
              <span style={{
                padding: '0.25rem 0.5rem',
                background: user?.role === 'admin' ? 'var(--accent)' : 'var(--surface2)',
                color: user?.role === 'admin' ? 'white' : 'var(--text1)',
                borderRadius: '4px',
                display: 'inline-block',
                fontSize: '0.875rem'
              }}>
                {user?.role || 'user'}
              </span>

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

        <div className="card" style={{ marginTop: '1.5rem' }}>
          <h2>Einstellungen</h2>
          <p style={{ color: 'var(--text2)', marginTop: '0.5rem' }}>
            Bearbeitung folgt in Kürze
          </p>
        </div>
      </div>
    </div>
  )
}

export default ProfilePage