import Head from 'next/head'
import Link from 'next/link'
import { ConnectButton } from '@/components/ConnectButton'
import { DocsSidebar } from '@/components/DocsSidebar'
import { DocsContent } from '@/components/DocsContent'
import { useDocs } from '@/hooks/useDocs'

type DocSection = 'user-guide' | 'faq' | 'publishing' | 'payment'

interface DocLink {
  id: DocSection
  title: string
  file: string
}

const docs: DocLink[] = [
  {
    id: 'user-guide',
    title: 'Guide d\'utilisation',
    file: 'user-guide.md',
  },
  {
    id: 'faq',
    title: 'FAQ',
    file: 'faq.md',
  },
  {
    id: 'publishing',
    title: 'Guide de publication',
    file: 'publishing-guide.md',
  },
  {
    id: 'payment',
    title: 'Guide de paiement',
    file: 'payment-guide.md',
  },
]

function DocsHeader() {
  return (
    <header className="bg-white shadow-sm">
      <div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
        <Link href="/" className="text-2xl font-bold text-gray-900 hover:text-gray-700">
          zapwall4Science
        </Link>
        <div className="flex items-center gap-4">
          <Link
            href="/"
            className="px-4 py-2 text-gray-600 hover:text-gray-800 text-sm font-medium"
          >
            Articles
          </Link>
          <ConnectButton />
        </div>
      </div>
    </header>
  )
}

export default function DocsPage() {
  const { selectedDoc, docContent, loading, loadDoc } = useDocs(docs)

  return (
    <>
      <Head>
        <title>Documentation - zapwall4Science</title>
        <meta name="description" content="Documentation complète pour zapwall4Science" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <main className="min-h-screen bg-gray-50">
        <DocsHeader />
        <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) => {
                void loadDoc(slug)
              }}
            />
            <div className="flex-1">
              <DocsContent content={docContent} loading={loading} />
            </div>
          </div>
        </div>
      </main>
    </>
  )
}
