import Head from 'next/head'
import { PageHeader } from '@/components/PageHeader'
import { Footer } from '@/components/Footer'
import { Nip95ConfigManager } from '@/components/Nip95ConfigManager'
import { KeyManagementManager } from '@/components/KeyManagementManager'
import { CacheUpdateManager } from '@/components/CacheUpdateManager'
import { LanguageSettingsManager } from '@/components/LanguageSettingsManager'
import { RelayManager } from '@/components/RelayManager'
import { t } from '@/lib/i18n'

export default function SettingsPage(): React.ReactElement {
  return (
    <>
      <Head>
        <title>{t('settings.title')} - zapwall.fr</title>
        <meta name="description" content="Application settings and configuration" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
      </Head>
      <main className="min-h-screen bg-cyber-darker">
        <PageHeader />
        <div className="w-full px-4 py-8">
          <h1 className="text-3xl font-bold text-neon-cyan mb-8">{t('settings.title')}</h1>
          <div className="space-y-8">
            <LanguageSettingsManager />
            <KeyManagementManager />
            <RelayManager />
            <Nip95ConfigManager />
            <CacheUpdateManager />
          </div>
        </div>
        <Footer />
      </main>
    </>
  )
}
