import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'
import api from '../utils/api'

/**
 * Technische System- und Build-Infos (ehemals Dashboard) — unter Einstellungen für Betrieb/Diagnose.
 */
function SettingsSystemInfoPage() {
  const { user } = useAuth()
  const [version, setVersion] = useState(null)
  const [err, setErr] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    let cancelled = false
    ;(async () => {
      setErr(null)
      try {
        const v = await api.getVersion()
        if (!cancelled) setVersion(v)
      } catch (e) {
        if (!cancelled) setErr(e.message || String(e))
      } finally {
        if (!cancelled) setLoading(false)
      }
    })()
    return () => {
      cancelled = true
    }
  }, [])

  return (
    <div className="page-padding app-page" style={{ padding: '1rem' }}>
      <p style={{ marginBottom: '0.75rem' }}>
        <Link to="/settings" style={{ fontSize: '0.9rem' }}>
          ← Zurück zu Einstellungen
        </Link>
      </p>
      <h1 style={{ marginBottom: '0.35rem', fontSize: '1.5rem' }}>Systeminformationen</h1>
      <p
        style={{
          color: 'var(--text2)',
          marginBottom: '1.25rem',
          fontSize: '0.95rem',
          lineHeight: 1.5,
          maxWidth: '40rem',
        }}
      >
        Build, Umgebung und Schema-Stand der App — hilfreich für Support oder nach Deployments. Tarif und Rolle
        beziehen sich auf dein Konto.
      </p>

      {loading ? (
        <p className="muted" style={{ margin: 0 }}>
          Version wird geladen…
        </p>
      ) : null}
      {err ? (
        <p role="alert" style={{ color: 'var(--danger)', marginBottom: '1rem' }}>
          {err}
        </p>
      ) : null}

      {version ? (
        <div className="card dashboard-sys-card">
          <h2 className="dashboard-sys-card__title" style={{ marginTop: 0 }}>
            System
          </h2>
          <div className="dashboard-sys-card__grid">
            <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>
              <span
                className={
                  user?.tier === 'premium'
                    ? 'dashboard-sys-card__pill dashboard-sys-card__pill--accent'
                    : 'dashboard-sys-card__pill'
                }
              >
                {user?.tier || 'free'}
              </span>
            </span>
            <strong>Rolle</strong>
            <span>{user?.role || 'user'}</span>
          </div>
        </div>
      ) : null}
    </div>
  )
}

export default SettingsSystemInfoPage