web/src/components/AppFooter.tsx

import { useEffect, useState } from 'react'
import { getVersion } from '../api/version'
import { getProviders } from '../api/payments'
import { useI18n } from '../i18n'
import type { ProvidersResponse, VersionInfo } from '../types'

/** Non-intrusive footer: environment facts (from /payments/providers) + a version
 *  line (from /version) so the deployed build is verifiable. No secrets are shown. */
export function AppFooter() {
  const { t } = useI18n()
  const [version, setVersion] = useState<VersionInfo | null>(null)
  const [providers, setProviders] = useState<ProvidersResponse | null>(null)

  useEffect(() => {
    let live = true
    getVersion().then((v) => live && setVersion(v)).catch(() => {})
    getProviders().then((p) => live && setProviders(p)).catch(() => {})
    return () => {
      live = false
    }
  }, [])

  const d = providers?.default
  return (
    <footer className="app-footer">
      <details className="env-panel">
        <summary>{t('env.title')}</summary>
        <dl className="env-grid">
          <dt>{t('env.country')}</dt>
          <dd>{t('env.countryValue')}</dd>
          <dt>{t('env.currency')}</dt>
          <dd className="mono">{d?.currency ?? 'SAR'}</dd>
          <dt>{t('env.timezone')}</dt>
          <dd className="mono">{d?.timezone ?? 'Asia/Riyadh'}</dd>
          <dt>{t('env.languages')}</dt>
          <dd>{t('env.languagesValue')}</dd>
          <dt>{t('env.provider')}</dt>
          <dd>{version?.provider_mode === 'mock' || !version ? t('env.providerValue') : version.provider_mode}</dd>
          <dt>{t('env.mode')}</dt>
          <dd>{t('env.modeValue')}</dd>
          <dt>{t('env.realMoney')}</dt>
          <dd>{t('env.no')}</dd>
        </dl>
      </details>
      <p className="version-line mono" dir="ltr">
        {version
          ? `${t('version.prefix')}${version.app_version} · ${version.commit} · ${version.ui_mode} · ${version.provider_mode}`
          : t('version.unknown')}
      </p>
    </footer>
  )
}