import Head from 'next/head'
import { useRouter } from 'next/router'
import { Footer } from '@/components/Footer'
import { PageHeader } from '@/components/PageHeader'
import { t } from '@/lib/i18n'
import { AuthorPageContent } from './AuthorPageContent'
import { resolveAuthorHashIdOrPubkey } from './resolveAuthorHashIdOrPubkey'
import { useAuthorData } from './useAuthorData'

export function AuthorPage(): React.ReactElement {
  const router = useRouter()
  const { pubkey } = router.query
  const hashIdOrPubkey = resolveAuthorHashIdOrPubkey(pubkey)

  const { presentation, series, totalSponsoring, loading, error, reload } = useAuthorData(hashIdOrPubkey ?? '')
  const onSeriesCreated = (): void => {
    void reload()
  }

  if (!hashIdOrPubkey) {
    return <div />
  }

  const actualAuthorPubkey = presentation?.pubkey ?? ''
  return (
    <>
      <Head>
        <title>{t('author.title')} - {t('home.title')}</title>
        <meta name="description" content={t('author.presentation')} />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <main className="min-h-screen bg-cyber-darker">
        <PageHeader />
        <div className="w-full px-4 py-8">
          <AuthorPageContent
            presentation={presentation}
            series={series}
            totalSponsoring={totalSponsoring}
            authorPubkey={actualAuthorPubkey}
            loading={loading}
            error={error}
            onSeriesCreated={onSeriesCreated}
          />
        </div>
        <Footer />
      </main>
    </>
  )
}
