website/client/src/routes/admin/views/ContentReports.jsx

import { useCallback, useState } from 'react'
import Modal from '../../../components/Modal.jsx'
import { Loading, ErrorState } from '../../../components/PageState.jsx'
import { useAsync } from '../../../lib/useAsync.js'
import { ago, dateTime } from '../../../lib/format.js'
import { api } from '../../../api/client.js'

// The member-raised content-report queue (TEAMS.md §5.6).
//
// **This is the only view of this queue, and that is the design.** The gap §5.6
// exists to close has a specific shape: leaders moderate their own Team's forum,
// and a Team's leaders are exactly the people who will not report their own Team.
// A leader-visible queue would route a complaint about a leader back to that
// leader. Org lead, 2026-08-18: reports are **site administration only**. If a
// leader-facing view is ever wanted it is a design decision, not a component.
//
// It sits beside Appeals rather than under Teams because a staffer working a
// queue should have one place to work — and because `target_type` is deliberately
// open-ended, so the next consumer (a wiki page, a news comment) arrives as a new
// row here rather than as a new screen.
//
// **Handling a report is bookkeeping about the REPORT, not moderation of the
// content.** Acting on the content itself is the ordinary forum moderation
// control, or a site-wide sanction against the account. Keeping those separate is
// what stops "report" from becoming a way for any member to hide anything, so
// this screen deliberately offers no hide/delete button of its own.

const STATUS_TABS = [
  { key: 'open_work', label: 'Open work', param: undefined },
  { key: 'open', label: 'Open', param: 'open' },
  { key: 'reviewing', label: 'Reviewing', param: 'reviewing' },
  { key: 'actioned', label: 'Actioned', param: 'actioned' },
  { key: 'dismissed', label: 'Dismissed', param: 'dismissed' },
  { key: 'all', label: 'All', param: 'all' },
]

const STATUS_STYLE = {
  open: { color: '#e0b070', background: 'rgba(224,176,112,0.12)', border: '1px solid rgba(224,176,112,0.4)' },
  reviewing: { color: '#7fa8d0', background: 'rgba(127,168,208,0.14)', border: '1px solid rgba(127,168,208,0.4)' },
  actioned: { color: '#7fd0a4', background: 'rgba(95,185,138,0.16)', border: '1px solid rgba(95,185,138,0.4)' },
  dismissed: { color: '#9fb0c6', background: 'rgba(127,153,189,0.14)', border: '1px solid var(--line)' },
}
const STATUS_LABEL = {
  open: 'Open', reviewing: 'Reviewing', actioned: 'Actioned', dismissed: 'Dismissed',
}

const REASON_LABEL = {
  spam: 'Spam',
  abuse: 'Abuse',
  sexual: 'Sexual',
  illegal: 'Illegal',
  impersonation: 'Impersonation',
  other: 'Other',
}

const bytes = (n) => {
  if (!n && n !== 0) return ''
  if (n < 1024) return `${n} B`
  if (n < 1024 * 1024) return `${Math.round(n / 1024)} KB`
  return `${(n / (1024 * 1024)).toFixed(1)} MB`
}

/**
 * What was reported, rendered from the row the queue already resolved.
 *
 * Nothing here fetches: §5.6's fourth rule is that a staffer sees uploader, size
 * and sniffed type without hunting, and the server attaches all of it in three
 * batched reads. A `null` target is a target that has since been hard-deleted,
 * and the row still shows — "somebody reported this and by the time we looked it
 * was gone" is a fact worth seeing, and dropping it would hide the pattern of a
 * member deleting their own content the moment it is reported.
 */
function TargetCell({ report }) {
  const t = report.target
  if (!t) {
    return (
      <span style={{ color: 'var(--muted)' }}>
        {report.targetType.replace('team_forum_', '')} #{report.targetId} — no longer exists
      </span>
    )
  }
  if (t.kind === 'upload') {
    return (
      <span>
        <a href={t.url} target="_blank" rel="noopener noreferrer" className="link-accent">{t.filename}</a>
        <span className="dim" style={{ display: 'block', fontSize: '0.78rem' }}>
          {t.uploader || 'unknown'} · {t.mimetype} · {bytes(t.byteSize)}
          {t.deleted && ' · removed'}
        </span>
      </span>
    )
  }
  if (t.kind === 'thread') {
    return (
      <span>
        <strong>{t.title}</strong>
        <span className="dim" style={{ display: 'block', fontSize: '0.78rem' }}>
          {t.type} by {t.author || 'unknown'}
          {t.status !== 'visible' && ` · ${t.status}`}
        </span>
      </span>
    )
  }
  return (
    <span>
      {t.excerpt || <em className="dim">(no text)</em>}
      <span className="dim" style={{ display: 'block', fontSize: '0.78rem' }}>
        {t.author || 'unknown'} in “{t.threadTitle}”
        {t.status !== 'visible' && ` · ${t.status}`}
      </span>
    </span>
  )
}

export default function ContentReports() {
  const [tab, setTab] = useState('open_work')
  const [tick, setTick] = useState(0)
  const reload = useCallback(() => setTick((t) => t + 1), [])
  const [handling, setHandling] = useState(null)
  const [notice, setNotice] = useState(null)

  const activeTab = STATUS_TABS.find((t) => t.key === tab) || STATUS_TABS[0]
  const { loading, error, data } = useAsync(
    () => api.admin.contentReports({ status: activeTab.param }),
    [tab, tick],
  )

  if (loading) return <Loading />
  if (error) return <ErrorState message="Could not load reports." />

  const rows = data?.reports || []

  return (
    <section>
      <p className="sans dim" style={{ margin: '0 0 14px', fontSize: '0.85rem', maxWidth: 720 }}>
        Reports raised by members about Team forum content. They come to site staff and are not visible
        to a Team&rsquo;s own leaders — a leader moderates their own forum, so a report about a leader
        has to reach someone above them. Handling a report records a decision about the report; hiding
        or removing the content itself is done from the forum, or as a sanction against the account.
        {typeof data?.openCount === 'number' && ` ${data.openCount} open.`}
      </p>

      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 16 }}>
        {STATUS_TABS.map((t) => (
          <button
            key={t.key}
            onClick={() => setTab(t.key)}
            className="pill"
            style={tab === t.key ? activePill : undefined}
          >
            {t.label}
          </button>
        ))}
      </div>

      {notice && (
        <p
          className="sans"
          style={{ margin: '0 0 14px', color: notice.tone === 'error' ? '#d98b84' : '#7fd0a4', fontSize: '0.85rem' }}
        >
          {notice.text}
        </p>
      )}

      <div className="panel-flat">
        <table className="adm-table">
          <thead>
            <tr>
              <th className="adm-th">Reported content</th>
              <th className="adm-th">Reason</th>
              <th className="adm-th">Detail</th>
              <th className="adm-th">Reporter</th>
              <th className="adm-th">Age</th>
              <th className="adm-th">Status</th>
              <th className="adm-th" />
            </tr>
          </thead>
          <tbody>
            {rows.length === 0 && (
              <tr>
                <td className="adm-td" colSpan={7} style={muted}>
                  No reports match this filter.
                </td>
              </tr>
            )}
            {rows.map((r) => (
              <tr key={r.id}>
                <td className="adm-td" style={{ color: 'var(--text)', maxWidth: 340 }}>
                  <TargetCell report={r} />
                </td>
                <td className="adm-td">
                  <span className="badge">{REASON_LABEL[r.reason] || r.reason}</span>
                </td>
                <td className="adm-td dim" style={{ maxWidth: 260 }}>{r.detail || '—'}</td>
                <td className="adm-td dim">{r.reporter}</td>
                <td className="adm-td dim" title={dateTime(r.createdAt)}>{ago(r.createdAt)}</td>
                <td className="adm-td">
                  <span className="badge" style={STATUS_STYLE[r.status]}>{STATUS_LABEL[r.status] || r.status}</span>
                  {r.handledBy && (
                    <span className="dim" style={{ display: 'block', fontSize: '0.75rem' }}>
                      {r.handledBy}
                      {r.handledNote ? ` — ${r.handledNote}` : ''}
                    </span>
                  )}
                </td>
                <td className="adm-td" style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
                  <button
                    onClick={() => setHandling(r)}
                    className="btn btn-primary btn-sq"
                    style={{ padding: '5px 12px', fontSize: '0.82rem' }}
                  >
                    Handle
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {handling && (
        <HandleModal
          report={handling}
          onCancel={() => setHandling(null)}
          onDone={() => {
            setHandling(null)
            setNotice({ text: 'Report updated.', tone: 'ok' })
            reload()
          }}
          onError={(message) => setNotice({ text: message, tone: 'error' })}
        />
      )}
    </section>
  )
}

/**
 * Record a decision about a report.
 *
 * The note is optional and worth writing: every transition is audited, dismissals
 * included, and the note is what the next staffer to see a repeat report about the
 * same content reads to find out why the last one was closed.
 */
function HandleModal({ report, onCancel, onDone, onError }) {
  const [status, setStatus] = useState(report.status === 'open' ? 'reviewing' : 'actioned')
  const [note, setNote] = useState('')
  const [busy, setBusy] = useState(false)

  const submit = async () => {
    setBusy(true)
    try {
      await api.admin.handleContentReport(report.id, { status, note: note || undefined })
      onDone()
    } catch (err) {
      onError(err.message || 'Could not update that report.')
      setBusy(false)
    }
  }

  return (
    <Modal
      title={`Report #${report.id}`}
      onClose={onCancel}
      footer={(
        <>
          <button className="pill" onClick={onCancel}>Cancel</button>
          <button className="btn btn-primary btn-sq" onClick={submit} disabled={busy}>
            {busy ? 'Saving…' : 'Save'}
          </button>
        </>
      )}
    >
      <div style={{ display: 'grid', gap: 12 }}>
        <p className="sans dim" style={{ margin: 0, fontSize: '0.82rem' }}>
          This records a decision about the report. It does not hide, delete or restore the content —
          do that from the forum itself, or against the account.
        </p>

        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {['reviewing', 'actioned', 'dismissed', 'open'].map((value) => (
            <button
              key={value}
              onClick={() => setStatus(value)}
              className="pill"
              style={status === value ? activePill : undefined}
            >
              {STATUS_LABEL[value]}
            </button>
          ))}
        </div>

        <label>
          <span className="field-label">Note (optional)</span>
          <textarea
            className="textarea"
            placeholder="Why this was actioned or dismissed — the next staffer to see a repeat report reads this."
            value={note}
            onChange={(e) => setNote(e.target.value)}
            maxLength={500}
            rows={4}
            style={{ width: '100%' }}
          />
        </label>
      </div>
    </Modal>
  )
}

const activePill = { background: 'var(--blue)', color: 'var(--ink)', borderColor: 'var(--accent)' }
const muted = { color: 'var(--muted)' }