'use client'

import { useState } from 'react'
import { useTranslations } from 'next-intl'
import { useRouter } from '@/i18n/navigation'
import type { AdminCategory, AdminForum } from '@/lib/admin-forum'

type Group = { category: AdminCategory; forums: AdminForum[] }

export function AdminForumManager({ initial }: { initial: Group[] }) {
  const t = useTranslations('Admin')
  const router = useRouter()
  const [busy, setBusy] = useState(false)
  const [catForm, setCatForm] = useState({ name: '', nameEn: '', order: '0' })
  const [forumForm, setForumForm] = useState<Record<number, { name: string; nameEn: string; description: string; descriptionEn: string; order: string }>>({})
  const [editCat, setEditCat] = useState<{ id: number; name: string; nameEn: string; order: string } | null>(null)
  const [editForum, setEditForum] = useState<{ id: number; name: string; nameEn: string; description: string; descriptionEn: string; order: string; visibility: number } | null>(null)

  function ff(catId: number) {
    return forumForm[catId] ?? { name: '', nameEn: '', description: '', descriptionEn: '', order: '0' }
  }
  function setFF(catId: number, patch: Partial<{ name: string; nameEn: string; description: string; descriptionEn: string; order: string }>) {
    setForumForm((s) => ({ ...s, [catId]: { ...ff(catId), ...patch } }))
  }

  async function call(url: string, method: string, body?: unknown): Promise<boolean> {
    setBusy(true)
    try {
      const res = await fetch(url, {
        method,
        headers: body ? { 'Content-Type': 'application/json' } : undefined,
        credentials: 'same-origin',
        body: body ? JSON.stringify(body) : undefined,
      })
      const d = await res.json()
      if (d.success) {
        router.refresh()
        return true
      }
      if (d.error === 'categoryNotEmpty') alert(t('categoryNotEmpty'))
      return false
    } finally {
      setBusy(false)
    }
  }

  return (
    <div>
      {/* Alta de categoría */}
      <form
        onSubmit={(e) => {
          e.preventDefault()
          if (catForm.name.trim())
            call('/api/admin/forum/category', 'POST', { name: catForm.name, nameEn: catForm.nameEn, order: Number(catForm.order) }).then(
              (ok) => ok && setCatForm({ name: '', nameEn: '', order: '0' }),
            )
        }}
        className="admin-form info-box-light separate2"
      >
        <span className="second-brown">{t('newCategory')}</span>
        <input value={catForm.name} onChange={(e) => setCatForm({ ...catForm, name: e.target.value })} placeholder={t('categoryName')} />
        <input value={catForm.nameEn} onChange={(e) => setCatForm({ ...catForm, nameEn: e.target.value })} placeholder={t('categoryNameEn')} />
        <span className="second-brown">{t('order')}</span>
        <input type="number" value={catForm.order} onChange={(e) => setCatForm({ ...catForm, order: e.target.value })} />
        <p className="third-brown small-font">{t('forumEnHint')}</p>
        <button type="submit" disabled={busy}>{t('create')}</button>
      </form>
      <br />

      {initial.length === 0 && <p className="second-brown centered">{t('noCategories')}</p>}

      {initial.map(({ category, forums }) => (
        <div key={category.id} className="inline-div" style={{ display: 'block' }}>
          {editCat?.id === category.id ? (
            <div className="admin-form separate2">
              <input value={editCat.name} onChange={(e) => setEditCat({ ...editCat, name: e.target.value })} placeholder={t('categoryName')} />
              <input value={editCat.nameEn} onChange={(e) => setEditCat({ ...editCat, nameEn: e.target.value })} placeholder={t('categoryNameEn')} />
              <input type="number" value={editCat.order} onChange={(e) => setEditCat({ ...editCat, order: e.target.value })} />
              <button
                onClick={() =>
                  editCat.name.trim() &&
                  call(`/api/admin/forum/category/${category.id}`, 'PUT', { name: editCat.name, nameEn: editCat.nameEn, order: Number(editCat.order) }).then((ok) => ok && setEditCat(null))
                }
                disabled={busy}
                className="ns-tool-btn"
              >
                {t('save')}
              </button>{' '}
              <button onClick={() => setEditCat(null)} className="ns-tool-btn">{t('cancel')}</button>
            </div>
          ) : (
            <div className="title-content-h3">
              <h3 className="big-font">
                {category.name}
                {category.name_en && <span className="third-brown small-font"> · EN: {category.name_en}</span>}{' '}
                <span className="third-brown small-font">#{category.order}</span>{' '}
                <button
                  onClick={() => setEditCat({ id: category.id, name: category.name, nameEn: category.name_en, order: String(category.order) })}
                  disabled={busy}
                  className="ns-tool-btn"
                >
                  {t('edit')}
                </button>{' '}
                <button
                  onClick={() => confirm(t('confirmDelete')) && call(`/api/admin/forum/category/${category.id}`, 'DELETE')}
                  disabled={busy}
                  className="ns-tool-btn red-info2"
                >
                  {t('delete')}
                </button>
              </h3>
            </div>
          )}

          {/* Foros de la categoría */}
          <table className="max-center-table">
            <tbody>
              {forums.length === 0 && (
                <tr>
                  <td className="second-brown centered">{t('noForums')}</td>
                </tr>
              )}
              {forums.map((f) =>
                editForum?.id === f.id ? (
                  <tr key={f.id} className="team-center-table-tr">
                    <td className="lefted separate" colSpan={2}>
                      <input value={editForum.name} onChange={(e) => setEditForum({ ...editForum, name: e.target.value })} placeholder={t('forumName')} maxLength={45} />
                      <input value={editForum.nameEn} onChange={(e) => setEditForum({ ...editForum, nameEn: e.target.value })} placeholder={t('forumNameEn')} maxLength={45} />
                      <input value={editForum.description} onChange={(e) => setEditForum({ ...editForum, description: e.target.value })} placeholder={t('forumDescription')} />
                      <input value={editForum.descriptionEn} onChange={(e) => setEditForum({ ...editForum, descriptionEn: e.target.value })} placeholder={t('forumDescriptionEn')} />
                      <button
                        onClick={() =>
                          editForum.name.trim() &&
                          call(`/api/admin/forum/${f.id}`, 'PUT', {
                            name: editForum.name,
                            nameEn: editForum.nameEn,
                            description: editForum.description,
                            descriptionEn: editForum.descriptionEn,
                            order: Number(editForum.order),
                            visibility: editForum.visibility !== 0,
                          }).then((ok) => ok && setEditForum(null))
                        }
                        disabled={busy}
                        className="ns-tool-btn"
                      >
                        {t('save')}
                      </button>{' '}
                      <button onClick={() => setEditForum(null)} className="ns-tool-btn">{t('cancel')}</button>
                    </td>
                  </tr>
                ) : (
                  <tr key={f.id} className="team-center-table-tr">
                    <td className="lefted separate">
                      <span className="yellow-info">{f.name}</span>{' '}
                      {f.name_en && <span className="third-brown small-font">· EN: {f.name_en}</span>}{' '}
                      {f.visibility === 0 && <span className="red-info2 small-font">({t('hidden')})</span>}
                      {f.description && <p className="third-brown small-font">{f.description}</p>}
                    </td>
                    <td className="real-info-box no-wrap-td">
                      <button
                        onClick={() => setEditForum({ id: f.id, name: f.name, nameEn: f.name_en, description: f.description, descriptionEn: f.description_en, order: String(f.order), visibility: f.visibility })}
                        disabled={busy}
                        className="ns-tool-btn"
                      >
                        {t('edit')}
                      </button>{' '}
                      <button
                        onClick={() => call(`/api/admin/forum/${f.id}`, 'PATCH', { visibility: f.visibility === 0 })}
                        disabled={busy}
                        className="ns-tool-btn"
                      >
                        {f.visibility === 0 ? t('show') : t('hide')}
                      </button>{' '}
                      <button
                        onClick={() => confirm(t('confirmDelete')) && call(`/api/admin/forum/${f.id}`, 'DELETE')}
                        disabled={busy}
                        className="ns-tool-btn red-info2"
                      >
                        {t('delete')}
                      </button>
                    </td>
                  </tr>
                ),
              )}
            </tbody>
          </table>

          {/* Alta de foro en esta categoría */}
          <form
            onSubmit={(e) => {
              e.preventDefault()
              const v = ff(category.id)
              if (v.name.trim())
                call('/api/admin/forum', 'POST', {
                  categoryId: category.id,
                  name: v.name,
                  nameEn: v.nameEn,
                  description: v.description,
                  descriptionEn: v.descriptionEn,
                  order: Number(v.order),
                }).then((ok) => ok && setFF(category.id, { name: '', nameEn: '', description: '', descriptionEn: '', order: '0' }))
            }}
            className="admin-form separate"
          >
            <input value={ff(category.id).name} onChange={(e) => setFF(category.id, { name: e.target.value })} placeholder={t('forumName')} maxLength={45} />
            <input value={ff(category.id).nameEn} onChange={(e) => setFF(category.id, { nameEn: e.target.value })} placeholder={t('forumNameEn')} maxLength={45} />
            <input value={ff(category.id).description} onChange={(e) => setFF(category.id, { description: e.target.value })} placeholder={t('forumDescription')} />
            <input value={ff(category.id).descriptionEn} onChange={(e) => setFF(category.id, { descriptionEn: e.target.value })} placeholder={t('forumDescriptionEn')} />
            <button type="submit" disabled={busy}>{t('addForum')}</button>
          </form>
        </div>
      ))}
    </div>
  )
}