import React, { useEffect, useState } from 'react'

export default function AdminUploadQueue() {
  const [items, setItems] = useState([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  const [notes, setNotes] = useState({})

  const loadPending = async () => {
    setLoading(true)
    setError('')

    try {
      const response = await window.axios.get('/api/admin/uploads/pending')
      setItems(Array.isArray(response?.data?.data) ? response.data.data : [])
    } catch (loadError) {
      setError(loadError?.response?.data?.message || 'Failed to load moderation queue.')
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    loadPending()
  }, [])

  const moderate = async (id, action) => {
    try {
      const payload = { note: String(notes[id] || '') }
      await window.axios.post(`/api/admin/uploads/${id}/${action}`, payload)
      setItems((prev) => prev.filter((item) => item.id !== id))
    } catch (moderateError) {
      setError(moderateError?.response?.data?.message || `Failed to ${action} upload.`)
    }
  }

  return (
    <section aria-label="Moderation queue" className="mx-auto w-full max-w-5xl rounded-2xl border border-white/10 bg-slate-900/60 p-4 md:p-6">
      <div className="mb-4 flex items-center justify-between">
        <h2 className="text-lg font-semibold text-white">Pending Upload Moderation</h2>
        <button type="button" onClick={loadPending} className="rounded-lg border border-white/20 px-3 py-1 text-xs text-white">
          Refresh
        </button>
      </div>

      {loading ? <p role="status" className="text-sm text-white/70">Loading…</p> : null}
      {error ? <p role="alert" className="mb-3 text-sm text-rose-200">{error}</p> : null}
      {!loading && items.length === 0 ? <p role="status" className="text-sm text-white/60">No pending uploads.</p> : null}

      <ul className="space-y-3">
        {items.map((item) => (
          <li key={item.id} aria-label={`Pending upload ${item.id}`} className="rounded-xl border border-white/10 bg-white/5 p-3">
            <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
              <div>
                <div className="text-sm font-medium text-white">{item.title || '(untitled upload)'}</div>
                <div className="mt-1 text-xs text-white/65">{item.type} · {item.id}</div>
                {item.preview_path ? <div className="mt-1 text-xs text-white/55">Preview: {item.preview_path}</div> : null}
              </div>

              <div className="w-full max-w-sm space-y-2">
                <input
                  type="text"
                  aria-label={`Moderation note for ${item.id}`}
                  value={notes[item.id] || ''}
                  onChange={(event) => setNotes((prev) => ({ ...prev, [item.id]: event.target.value }))}
                  placeholder="Moderation note"
                  className="w-full rounded-lg border border-white/15 bg-white/10 px-3 py-2 text-xs text-white"
                />
                <div className="flex gap-2">
                  <button
                    type="button"
                    aria-label={`Approve upload ${item.id}`}
                    onClick={() => moderate(item.id, 'approve')}
                    className="rounded-lg bg-emerald-500 px-3 py-2 text-xs font-semibold text-black"
                  >
                    Approve
                  </button>
                  <button
                    type="button"
                    aria-label={`Reject upload ${item.id}`}
                    onClick={() => moderate(item.id, 'reject')}
                    className="rounded-lg bg-rose-500 px-3 py-2 text-xs font-semibold text-white"
                  >
                    Reject
                  </button>
                </div>
              </div>
            </div>
          </li>
        ))}
      </ul>
    </section>
  )
}