import { useSession } from '../context/SessionContext.jsx'

export function TenantContextWidget() {
  const { context, me } = useSession()

  if (!context?.tenant) {
    return (
      <div className="widget-card">
        <h3>Kontext</h3>
        <p className="muted">Kein aktiver Tenant — bitte Tenant wählen.</p>
      </div>
    )
  }

  return (
    <div className="widget-card">
      <h3>Kontext</h3>
      <dl className="context-dl">
        <div>
          <dt>Nutzer</dt>
          <dd>{me?.display_name}</dd>
        </div>
        <div>
          <dt>Tenant</dt>
          <dd>{context.tenant.name}</dd>
        </div>
        <div>
          <dt>Tenant-Rolle</dt>
          <dd>{context.tenant.role}</dd>
        </div>
        {context.actor && (
          <div>
            <dt>Actor</dt>
            <dd>
              {context.actor.type} · {context.actor.id.slice(0, 8)}…
            </dd>
          </div>
        )}
      </dl>
    </div>
  )
}