import type { Revision } from '../types';
import { labelOf } from '../lib/fieldLabels';
import { Button } from './ui';

const STATUS_LABEL: Record<string, string> = {
  pending: '待审核',
  approved: '已通过',
  rejected: '已驳回',
};
const STATUS_CLS: Record<string, string> = {
  pending: 'tag tag-amber',
  approved: 'tag tag-green',
  rejected: 'tag tag-gray',
};

export function RevisionList({
  revisions,
  onApprove,
  onReject,
}: {
  revisions: Revision[];
  onApprove?: (id: number) => void;
  onReject?: (id: number) => void;
}) {
  if (revisions.length === 0)
    return <p className="muted">暂无修订记录。</p>;
  return (
    <ul className="rev-list">
      {revisions.map((r) => (
        <li key={r.id} className="rev-item">
          <div className="rev-head">
            <span className={STATUS_CLS[r.status]}>{STATUS_LABEL[r.status]}</span>
            <span className="rev-author">{r.author_name}</span>
            <span className="muted rev-date">
              {new Date(r.created_at + 'Z').toLocaleString('zh-CN')}
            </span>
          </div>
          {r.note && <p className="rev-note">{r.note}</p>}
          <ul className="rev-changes">
            {r.changes.map((c) => (
              <li key={c.field}>
                <b>{labelOf(c.field)}</b>：
                <span className="old">{c.old_value || '—'}</span>
                {' → '}
                <span className="new">{c.new_value || '—'}</span>
              </li>
            ))}
          </ul>
          {r.status === 'pending' && (onApprove || onReject) && (
            <div className="rev-actions">
              {onApprove && (
                <Button variant="primary" size="sm" onClick={() => onApprove(r.id)}>
                  通过
                </Button>
              )}
              {onReject && (
                <Button variant="danger" size="sm" onClick={() => onReject(r.id)}>
                  驳回
                </Button>
              )}
            </div>
          )}
        </li>
      ))}
    </ul>
  );
}