'use client'

import { useState } from 'react'
import { useTranslations } from 'next-intl'
import type { AccountRow } from '@/lib/admin-users'

export function AdminUsersManager() {
  const t = useTranslations('Admin')
  const [q, setQ] = useState('')
  const [accounts, setAccounts] = useState<AccountRow[]>([])
  const [busy, setBusy] = useState(false)
  const [searched, setSearched] = useState(false)

  async function search(e: React.FormEvent) {
    e.preventDefault()
    if (q.trim().length < 2) return
    setBusy(true)
    try {
      const res = await fetch(`/api/admin/users?q=${encodeURIComponent(q.trim())}`, { credentials: 'same-origin' })
      const data: { success?: boolean; accounts?: AccountRow[] } = await res.json()
      setAccounts(data.accounts ?? [])
      setSearched(true)
    } finally {
      setBusy(false)
    }
  }

  async function act(acc: AccountRow, action: 'ban' | 'unban') {
    let reason = ''
    let days = 0
    if (action === 'ban') {
      reason = prompt(t('banReasonPrompt'), '') ?? ''
      if (reason === null) return
      const d = prompt(t('banDaysPrompt'), '0')
      if (d === null) return
      days = Number(d) || 0
    } else if (!confirm(t('confirmUnban', { name: acc.username }))) {
      return
    }
    const res = await fetch('/api/admin/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'same-origin',
      body: JSON.stringify({ accountId: acc.id, action, reason, days }),
    })
    if ((await res.json()).success) {
      setAccounts((list) =>
        list.map((a) =>
          a.id === acc.id
            ? { ...a, banned: action === 'ban', ban_reason: action === 'ban' ? reason : null, ban_until: null }
            : a,
        ),
      )
    }
  }

  return (
    <div>
      <form onSubmit={search} className="centered separate">
        <input
          type="text"
          value={q}
          onChange={(e) => setQ(e.target.value)}
          placeholder={t('userSearchPlaceholder')}
        />{' '}
        <button type="submit" disabled={busy} className="search-items-button">
          {busy ? t('searching') : t('search')}
        </button>
      </form>

      {searched && accounts.length === 0 ? (
        <p className="second-brown centered">{t('noUsers')}</p>
      ) : (
        <table className="max-center-table">
          <tbody>
            {accounts.map((a) => (
              <tr key={a.id} className="team-center-table-tr">
                <td className="lefted separate">
                  <span className="yellow-info">{a.username}</span>{' '}
                  {a.gmlevel > 0 && <span className="second-yellow small-font">[GM {a.gmlevel}]</span>}{' '}
                  {a.online && <span className="green-info small-font">● {t('online')}</span>}{' '}
                  {a.banned && <span className="red-info2 small-font">⛔ {t('banned')}</span>}
                  <p className="third-brown small-font">
                    #{a.id}
                    {a.email && ` · ${a.email}`}
                    {a.last_login && ` · ${t('lastLogin')}: ${new Date(a.last_login).toLocaleDateString()}`}
                    {a.banned && a.ban_reason && ` · ${a.ban_reason}`}
                    {a.banned && a.ban_until && ` (${new Date(a.ban_until).toLocaleDateString()})`}
                  </p>
                </td>
                <td className="real-info-box">
                  {a.banned ? (
                    <button onClick={() => act(a, 'unban')} className="ns-tool-btn green-info">
                      {t('unban')}
                    </button>
                  ) : (
                    <button onClick={() => act(a, 'ban')} className="ns-tool-btn red-info2">
                      {t('ban')}
                    </button>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  )
}