'use client';
/**
 * RejectReasonBanner — 打回原因横幅（R4-b 审核回路死链修复）
 * 被打回的任务回到 pending_selection，用户重进挑选页时显示"为何被打回"，
 * 不再一脸懵。任务页/历史页可复用。
 * 自取 task 详情判断 review_status==='rejected' 才显示。
 */
import { useEffect, useState } from 'react';
import { api } from '@/lib/api';
import { TaskListItem } from '@/types/dto.tasks';

interface Props {
  taskId: number | null;
  /** 外部已有 task 数据时直接传入，省一次请求 */
  task?: TaskListItem | null;
}

export function RejectReasonBanner({ taskId, task: taskProp }: Props) {
  const [task, setTask] = useState<TaskListItem | null>(taskProp ?? null);

  useEffect(() => {
    if (taskProp) { setTask(taskProp); return; }
    if (!taskId) return;
    let alive = true;
    api.get<TaskListItem>(`/api/v1/tasks/${taskId}`)
      .then((d) => { if (alive) setTask(d); })
      .catch(() => { /* 取不到不显示，不阻塞页面 */ });
    return () => { alive = false; };
  }, [taskId, taskProp]);

  if (!task || task.review_status !== 'rejected' || !task.reject_reason) return null;

  return (
    <div
      className="mx-6 mt-4 bg-red-50 border border-red-200 rounded-xl px-4 py-3"
      role="alert"
    >
      <p className="text-sm font-medium text-red-700">
        <span aria-hidden="true">↩️</span> 这条笔记被组长打回，请按原因重新调整后再提交审核
      </p>
      <p className="text-sm text-red-600 mt-1 leading-relaxed">
        打回原因：{task.reject_reason}
      </p>
    </div>
  );
}
