NightSpire/web-next/components/TopicModBar.tsx

'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="mb-6 flex flex-wrap items-center gap-2 rounded-lg border border-red-900/60 bg-red-950/20 px-3 py-2 text-sm">
        <span className="mr-1 font-semibold text-red-400">{t('deletedMark')}</span>
        <button
          type="button"
          onClick={() => act('restore')}
          disabled={busy}
          className="text-xs text-green-400 hover:text-green-300 disabled:opacity-60"
        >
          {t('restoreTopic')}
        </button>
      </div>
    )
  }

  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>
      {moveForums.length > 0 && (
        <select
          defaultValue=""
          disabled={busy}
          onChange={(e) => {
            const forumId = Number(e.target.value)
            e.target.value = ''
            if (forumId) act('move', { forumId })
          }}
          className="nw-input inline-block w-auto py-1 text-xs disabled:opacity-60"
          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="text-xs text-red-400 hover:text-red-300 disabled:opacity-60"
      >
        {t('deleteTopic')}
      </button>
    </div>
  )
}