import { useState, useEffect } from 'react'

export type DocSection = 'user-guide' | 'faq' | 'publishing' | 'payment' | 'fees-and-contributions'

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

export function useDocs(docs: DocLink[]) {
  const [selectedDoc, setSelectedDoc] = useState<DocSection>('user-guide')
  const [docContent, setDocContent] = useState<string>('')
  const [loading, setLoading] = useState(false)

  const loadDoc = async (docId: DocSection) => {
    const doc = docs.find((d) => d.id === docId)
    if (!doc) return

    setLoading(true)
    setSelectedDoc(docId)

    try {
      const response = await fetch(`/api/docs/${doc.file}`)
      if (response.ok) {
        const text = await response.text()
        setDocContent(text)
      } else {
        // Import t dynamically to avoid circular dependency
        const { t } = await import('@/lib/i18n')
        setDocContent(`# ${t('docs.error')}\n\n${t('docs.error.loadFailed')}`)
      }
    } catch {
      // Import t dynamically to avoid circular dependency
      const { t } = await import('@/lib/i18n')
      setDocContent(`# ${t('docs.error')}\n\n${t('docs.error.loadFailed')}`)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    loadDoc('user-guide')
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return {
    selectedDoc,
    docContent,
    loading,
    loadDoc,
  }
}