'use client'

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

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

  async function act(action: string, extra?: Record<string, unknown>, 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, ...extra }),
      })
      const data: { success?: boolean; forumId?: number } = await res.json()
      if (data.success && action === 'delete' && data.forumId) {
        router.push(`/forum/${data.forumId}`)
      } else if (data.success && action === 'move') {
        router.push(`/forum/${extra?.forumId}`)
      } else {
        router.refresh()
      }
    } finally {
      setBusy(false)
    }
  }

  if (deleted) {
    return (
      <div className="info-box-light separate">
        <span className="red-info2">{t('deletedMark')}</span>{' '}
        <button type="button" onClick={() => act('restore')} disabled={busy} className="nw-tool-btn green-info">
          {t('restoreTopic')}
        </button>
      </div>
    )
  }

  return (
    <div className="info-box-light separate">
      <span className="yellow-info">{t('moderation')}:</span>{' '}
      <button type="button" onClick={() => act(locked ? 'unlock' : 'lock')} disabled={busy} className="nw-tool-btn">
        {locked ? t('unlock') : t('lock')}
      </button>{' '}
      <button type="button" onClick={() => act(sticky ? 'unsticky' : 'sticky')} disabled={busy} className="nw-tool-btn">
        {sticky ? t('unpin') : t('pin')}
      </button>{' '}
      {moveForums.length > 0 && (
        <select
          defaultValue=""
          disabled={busy}
          onChange={(e) => {
            const forumId = Number(e.target.value)
            e.target.value = ''
            if (forumId) act('move', { forumId })
          }}
          style={{ width: 'auto' }}
          aria-label={t('moveTopic')}
        >
          <option value="" disabled>
            {t('moveTopic')}…
          </option>
          {moveForums.map((f) => (
            <option key={f.id} value={f.id}>
              {f.name}
            </option>
          ))}
        </select>
      )}{' '}
      <button type="button" onClick={() => act('delete', undefined, t('confirmDeleteTopic'))} disabled={busy} className="nw-tool-btn red-info2">
        {t('deleteTopic')}
      </button>
    </div>
  )
}