import { useEffect, useState } from 'react'
import { useAuth } from '../context/AuthContext.jsx'
import { api } from '../api.js'

export default function SettingsPage() {
  const { session, isAdmin } = useAuth()
  const [sub, setSub] = useState(null)

  useEffect(() => {
    api('/api/subscription', { token: session.token }).then(setSub).catch(() => setSub(null))
  }, [session.token])

  return (
    <section className="card">
      <h1>Einstellungen</h1>
      <dl className="meta">
        <dt>Name</dt>
        <dd>{session?.profile?.name}</dd>
        <dt>E-Mail</dt>
        <dd>{session?.profile?.email}</dd>
        <dt>Rolle</dt>
        <dd>{isAdmin ? 'Admin' : 'Nutzer'}</dd>
        <dt>Rahmen-Tier</dt>
        <dd>{sub?.tier?.name || '…'}</dd>
      </dl>
      {sub?.features && (
        <ul className="muted">
          {sub.features.map((item) => (
            <li key={item.feature_id}>{item.feature_id}: {item.allowed ? 'verfügbar' : 'gesperrt'}{item.limit == null ? ' (ohne Limit)' : ` (${item.used}/${item.limit})`}</li>
          ))}
        </ul>
      )}
    </section>
  )
}