import { useState, useEffect, useCallback } from 'react'
import { getLocale } from '@/lib/i18n'

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[]): {
  selectedDoc: DocSection
  docContent: string
  loading: boolean
  loadDoc: (docId: DocSection) => Promise<void>
} {
  const [selectedDoc, setSelectedDoc] = useState<DocSection>('user-guide')
  const [docContent, setDocContent] = useState<string>('')
  const [loading, setLoading] = useState(false)

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

    setLoading(true)
    setSelectedDoc(docId)

    try {
      // Get current locale and pass it to the API
      const locale = getLocale()
      const response = await globalThis.fetch(`/api/docs/${doc.file}?locale=${locale}`)
      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)
    }
  }, [docs])

  useEffect(() => {
    void loadDoc('user-guide')
  }, [loadDoc])

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