'use client';
/**
 * BannedWordsTable — 违禁词列表表格
 */
import { BannedWord, BannedWordLevel } from '@/types/index';

const LEVEL_LABELS: Record<BannedWordLevel, { label: string; color: string }> = {
  auto_fix: { label: '🟢 自动改写', color: 'text-status-success bg-green-50' },
  soft_warn: { label: '🟡 软提示', color: 'text-status-warning bg-yellow-50' },
  hard_block: { label: '🔴 硬拦截', color: 'text-status-error bg-red-50' },
};

interface BannedWordsTableProps {
  words: BannedWord[];
  onDelete: (id: number) => void;
}

export function BannedWordsTable({ words, onDelete }: BannedWordsTableProps) {
  return (
    <table className="w-full text-sm" aria-label="违禁词列表">
      <thead>
        <tr className="text-text-secondary border-b border-border-default text-left">
          <th className="py-2 pr-4 font-medium">词</th>
          <th className="py-2 pr-4 font-medium">级别</th>
          <th className="py-2 pr-4 font-medium">替换词</th>
          <th className="py-2 font-medium">操作</th>
        </tr>
      </thead>
      <tbody className="divide-y divide-border-default">
        {words.map((w) => (
          <tr key={w.id}>
            <td className="py-2 pr-4">{w.word}</td>
            <td className="py-2 pr-4">
              <span className={`text-xs px-2 py-0.5 rounded-full ${LEVEL_LABELS[w.level].color}`}>
                {LEVEL_LABELS[w.level].label}
              </span>
            </td>
            <td className="py-2 pr-4 text-text-secondary">{w.replacement ?? '—'}</td>
            <td className="py-2">
              {w.updatable && (
                <button onClick={() => onDelete(w.id)}
                  aria-label={`删除违禁词 ${w.word}`}
                  className="text-status-error text-xs hover:underline">删除</button>
              )}
            </td>
          </tr>
        ))}
        {words.length === 0 && (
          <tr><td colSpan={4} className="py-4 text-text-tertiary text-center">暂无违禁词</td></tr>
        )}
      </tbody>
    </table>
  );
}
