tkmind_go/ui/plaza/components/post/PostReportButton.tsx

'use client';

import { useState } from 'react';
import { LoginPrompt } from '@/components/auth/LoginPrompt';
import { PlazaApiError, submitPostReport } from '@/lib/api';

const REPORT_REASONS = [
  { value: 'spam', label: '垃圾广告' },
  { value: 'violence', label: '暴力内容' },
  { value: 'porn', label: '色情低俗' },
  { value: 'political', label: '政治敏感' },
  { value: 'privacy', label: '侵犯隐私' },
  { value: 'other', label: '其他' },
] as const;

type PostReportButtonProps = {
  postId: string;
};

export function PostReportButton({ postId }: PostReportButtonProps) {
  const [open, setOpen] = useState(false);
  const [reason, setReason] = useState<(typeof REPORT_REASONS)[number]['value']>('spam');
  const [detail, setDetail] = useState('');
  const [message, setMessage] = useState('');
  const [busy, setBusy] = useState(false);
  const [loginOpen, setLoginOpen] = useState(false);

  const submit = async () => {
    setBusy(true);
    setMessage('');
    try {
      await submitPostReport(postId, reason, detail.trim() || undefined);
      setMessage('举报已提交，感谢反馈');
      setOpen(false);
      setDetail('');
    } catch (error) {
      if (error instanceof PlazaApiError && error.code === 'unauthorized') {
        setLoginOpen(true);
      } else {
        setMessage(error instanceof Error ? error.message : '提交失败');
      }
    } finally {
      setBusy(false);
    }
  };

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen((value) => !value)}
        className="text-sm font-semibold text-[#8a928c] hover:text-red-700"
      >
        举报
      </button>
      {open ? (
        <div className="mt-3 rounded-xl border border-[#ebe4d6] bg-[#faf7f0] p-4">
          <p className="text-sm font-semibold text-[#17221d]">举报此帖子</p>
          <label className="mt-3 block text-xs text-[#68716c]">
            原因
            <select
              value={reason}
              onChange={(event) =>
                setReason(event.target.value as (typeof REPORT_REASONS)[number]['value'])
              }
              className="mt-1 w-full rounded-lg border border-[#d6d0c3] bg-white px-3 py-2 text-sm text-[#17221d]"
            >
              {REPORT_REASONS.map((item) => (
                <option key={item.value} value={item.value}>
                  {item.label}
                </option>
              ))}
            </select>
          </label>
          <label className="mt-3 block text-xs text-[#68716c]">
            补充说明（可选）
            <textarea
              value={detail}
              onChange={(event) => setDetail(event.target.value)}
              maxLength={500}
              rows={3}
              className="mt-1 w-full rounded-lg border border-[#d6d0c3] bg-white px-3 py-2 text-sm text-[#17221d]"
            />
          </label>
          <div className="mt-3 flex gap-2">
            <button
              type="button"
              disabled={busy}
              onClick={() => void submit()}
              className="rounded-full bg-red-700 px-4 py-2 text-sm font-semibold text-white disabled:opacity-60"
            >
              {busy ? '提交中…' : '提交举报'}
            </button>
            <button
              type="button"
              onClick={() => setOpen(false)}
              className="rounded-full border border-[#d6d0c3] px-4 py-2 text-sm text-[#68716c]"
            >
              取消
            </button>
          </div>
        </div>
      ) : null}
      {message ? <p className="mt-2 text-sm text-[#2f6f57]">{message}</p> : null}
      <LoginPrompt open={loginOpen} onClose={() => setLoginOpen(false)} message="登录后可举报" />
    </>
  );
}