import Head from 'next/head'
import { DocsSidebar } from '@/components/DocsSidebar'
import { DocsContent } from '@/components/DocsContent'
import { PageHeader } from '@/components/PageHeader'
import { Footer } from '@/components/Footer'
import { useDocs, type DocLink, type DocSection } from '@/hooks/useDocs'
import { t } from '@/lib/i18n'

export default function DocsPage(): JSX.Element {
  const docs: DocLink[] = [
    {
      id: 'user-guide',
      title: t('docs.userGuide'),
      file: 'user-guide.md',
    },
    {
      id: 'faq',
      title: t('docs.faq'),
      file: 'faq.md',
    },
    {
      id: 'publishing',
      title: t('docs.publishing'),
      file: 'publishing-guide.md',
    },
    {
      id: 'payment',
      title: t('docs.payment'),
      file: 'payment-guide.md',
    },
    {
      id: 'fees-and-contributions',
      title: t('docs.feesAndContributions'),
      file: 'fees-and-contributions.md',
    },
  ]

  const { selectedDoc, docContent, loading, loadDoc } = useDocs(docs)

  return (
    <>
      <Head>
        <title>{t('nav.documentation')} - zapwall.fr</title>
        <meta name="description" content={t('docs.meta.description')} />
        <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="max-w-7xl mx-auto px-4 py-8">
          <div className="flex flex-col lg:flex-row gap-8">
            <DocsSidebar
              docs={docs}
              selectedDoc={selectedDoc}
              onSelectDoc={(slug: DocSection) => {
                void loadDoc(slug)
              }}
            />
            <div className="flex-1">
              <DocsContent content={docContent} loading={loading} />
            </div>
          </div>
        </div>
        <Footer />
      </main>
    </>
  )
}
