'use client'

import { useState } from 'react'
import { useTranslations } from 'next-intl'
import { useRouter } from '@/i18n/navigation'

export function TopicModBar({
  topicId,
  locked,
  sticky,
}: {
  topicId: number
  locked: boolean
  sticky: boolean
}) {
  const t = useTranslations('Forum')
  const router = useRouter()
  const [busy, setBusy] = useState(false)

  async function act(action: string, confirmMsg?: string) {
    if (busy) return
    if (confirmMsg && !confirm(confirmMsg)) return
    setBusy(true)
    try {
      const res = await fetch('/api/forum/moderate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'same-origin',
        body: JSON.stringify({ topicId, action }),
      })
      const data: { success?: boolean; forumId?: number } = await res.json()
      if (data.success && action === 'delete' && data.forumId) {
        router.push(`/forum/${data.forumId}`)
      } else {
        router.refresh()
      }
    } finally {
      setBusy(false)
    }
  }

  return (
    <div className="mb-6 flex flex-wrap items-center gap-2 rounded-lg border border-nw-border/60 bg-nw-panel-2/40 px-3 py-2 text-sm">
      <span className="mr-1 font-semibold text-nw-gold-light">{t('moderation')}:</span>
      <button
        type="button"
        onClick={() => act(locked ? 'unlock' : 'lock')}
        disabled={busy}
        className="nw-btn-ghost text-xs disabled:opacity-60"
      >
        {locked ? t('unlock') : t('lock')}
      </button>
      <button
        type="button"
        onClick={() => act(sticky ? 'unsticky' : 'sticky')}
        disabled={busy}
        className="nw-btn-ghost text-xs disabled:opacity-60"
      >
        {sticky ? t('unpin') : t('pin')}
      </button>
      <button
        type="button"
        onClick={() => act('delete', t('confirmDeleteTopic'))}
        disabled={busy}
        className="text-xs text-red-400 hover:text-red-300 disabled:opacity-60"
      >
        {t('deleteTopic')}
      </button>
    </div>
  )
}