import { useEffect } from 'react'
import { useForumData } from './useForumData'
import { AdminView } from './admin/AdminView'
import { Container } from '@/components/shared'
import { Helmet } from 'react-helmet'
import { useLocalization } from '@/utils/hooks/useLocalization'

export function Management() {
  const {
    categories,
    topics,
    posts,
    loading,
    error,
    createCategory,
    updateCategory,
    updateCategoryLockState,
    updateCategoryActiveState,
    deleteCategory,
    createTopic,
    updateTopic,
    deleteTopic,
    pinTopic,
    unpinTopic,
    lockTopic,
    unlockTopic,
    solvedTopic,
    unsolvedTopic,
    createPost,
    updatePost,
    deletePost,
    markPostAsAcceptedAnswer,
    unmarkPostAsAcceptedAnswer,
    clearError,
  } = useForumData()
  const { translate } = useLocalization()

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
        e.preventDefault()
        // Search modal will be opened by Header component
      }
    }
    document.addEventListener('keydown', handleKeyDown)
    return () => document.removeEventListener('keydown', handleKeyDown)
  }, [])

  useEffect(() => {
    if (error) {
      const timer = setTimeout(() => {
        clearError()
      }, 5000)
      return () => clearTimeout(timer)
    }
  }, [error, clearError])

  return (
    <Container>
      <Helmet
        titleTemplate="%s | Kurs Platform"
        title={translate('::' + 'App.ForumManagement')}
        defaultTitle="Kurs Platform"
      ></Helmet>

      {error && (
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
            <strong className="font-bold">Error: </strong>
            <span className="block sm:inline">{error}</span>
            <button onClick={clearError} className="absolute top-0 bottom-0 right-0 px-4 py-3">
              <span className="sr-only">Dismiss</span>×
            </button>
          </div>
        </div>
      )}

      <AdminView
        categories={categories}
        topics={topics}
        posts={posts}
        loading={loading}
        onCreateCategory={(data) => createCategory(data).then(() => {})}
        onUpdateCategory={(id, data) => updateCategory(id, data).then(() => {})}
        onUpdateCategoryLockState={(id) => updateCategoryLockState(id).then(() => {})}
        onUpdateCategoryActiveState={(id) => updateCategoryActiveState(id).then(() => {})}
        onDeleteCategory={(id) => deleteCategory(id).then(() => {})}
        onCreateTopic={(data) => createTopic(data).then(() => {})}
        onUpdateTopic={(id, data) => updateTopic(id, data).then(() => {})}
        onDeleteTopic={(id) => deleteTopic(id).then(() => {})}
        onPinTopic={(id) => pinTopic(id).then(() => {})}
        onUnpinTopic={(id) => unpinTopic(id).then(() => {})}
        onLockTopic={(id) => lockTopic(id).then(() => {})}
        onUnlockTopic={(id) => unlockTopic(id).then(() => {})}
        onMarkTopicAsSolved={(id) => solvedTopic(id).then(() => {})}
        onMarkTopicAsUnsolved={(id) => unsolvedTopic(id).then(() => {})}
        onCreatePost={(data) => createPost(data).then(() => {})}
        onUpdatePost={(id, data) => updatePost(id, data).then(() => {})}
        onDeletePost={(id) => deletePost(id).then(() => {})}
        onMarkPostAsAcceptedAnswer={(id) => markPostAsAcceptedAnswer(id).then(() => {})}
        onUnmarkPostAsAcceptedAnswer={(id) => unmarkPostAsAcceptedAnswer(id).then(() => {})}
      />
    </Container>
  )
}

export default Management