'use client';

import { useState } from 'react';
import { LoginPrompt } from '@/components/auth/LoginPrompt';
import { PlazaApiError, submitCommentReport } 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 CommentReportButtonProps = {
  commentId: string;
};

export function CommentReportButton({ commentId }: CommentReportButtonProps) {
  const [open, setOpen] = useState(false);
  const [reason, setReason] = useState<(typeof REPORT_REASONS)[number]['value']>('spam');
  const [busy, setBusy] = useState(false);
  const [loginOpen, setLoginOpen] = useState(false);

  const submit = async () => {
    setBusy(true);
    try {
      await submitCommentReport(commentId, reason);
      setOpen(false);
    } catch (error) {
      if (error instanceof PlazaApiError && error.code === 'unauthorized') {
        setLoginOpen(true);
      }
    } finally {
      setBusy(false);
    }
  };

  if (!open) {
    return (
      <>
        <button
          type="button"
          onClick={() => setOpen(true)}
          className="font-semibold text-[#8a928c] hover:text-red-700"
        >
          举报
        </button>
        <LoginPrompt open={loginOpen} onClose={() => setLoginOpen(false)} message="登录后可举报" />
      </>
    );
  }

  return (
    <span className="inline-flex flex-wrap items-center gap-2">
      <select
        value={reason}
        onChange={(event) =>
          setReason(event.target.value as (typeof REPORT_REASONS)[number]['value'])
        }
        className="rounded border border-[#d6d0c3] bg-white px-2 py-0.5 text-xs"
      >
        {REPORT_REASONS.map((item) => (
          <option key={item.value} value={item.value}>
            {item.label}
          </option>
        ))}
      </select>
      <button
        type="button"
        disabled={busy}
        onClick={() => void submit()}
        className="font-semibold text-red-700"
      >
        提交
      </button>
      <button type="button" onClick={() => setOpen(false)} className="text-[#68716c]">
        取消
      </button>
      <LoginPrompt open={loginOpen} onClose={() => setLoginOpen(false)} message="登录后可举报" />
    </span>
  );
}