ftb-project-management/apps/web/components/product/RequirementTable.tsx

'use client';

import { RequirementStatus } from '@ftb/shared';
import { Pencil, Trash2 } from 'lucide-react';
import { RequirementStatusBadge } from './RequirementStatusBadge';
import { PRIORITY_LABEL, REQUIREMENT_STATUS_LABEL } from '@/lib/constants';

interface RequirementItem {
  id: string;
  title: string;
  description: string;
  status: RequirementStatus;
  priority: number;
  creator?: { id: string; name: string };
  createdAt: string;
}

interface Props {
  requirements: RequirementItem[];
  statusFilter: RequirementStatus | null;
  onFilterChange: (status: RequirementStatus | null) => void;
  onEdit: (req: RequirementItem) => void;
  onStatusChange: (id: string, status: RequirementStatus) => void;
  onDelete: (id: string) => void;
  onCreate: () => void;
}

const ALL_STATUSES = Object.values(RequirementStatus);

export function RequirementTable({
  requirements,
  statusFilter,
  onFilterChange,
  onEdit,
  onDelete,
  onCreate,
}: Props) {
  return (
    <div>
      <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
        <div className="flex flex-wrap gap-1.5">
          <FilterChip active={!statusFilter} onClick={() => onFilterChange(null)}>
            全部
          </FilterChip>
          {ALL_STATUSES.map((s) => (
            <FilterChip key={s} active={statusFilter === s} onClick={() => onFilterChange(s)}>
              {REQUIREMENT_STATUS_LABEL[s]}
            </FilterChip>
          ))}
        </div>
        <button
          onClick={onCreate}
          className="rounded-md bg-[var(--ink)] px-4 py-2 text-[13px] font-medium text-[var(--bg)] transition-colors hover:bg-[var(--accent)]"
        >
          + 新建需求
        </button>
      </div>

      {requirements.length === 0 ? (
        <div className="rounded-xl border border-dashed border-[var(--line)] py-20 text-center">
          <p className="font-display text-lg text-[var(--ink-muted)]">暂无需求</p>
          <p className="mt-1 text-[12px] text-[var(--ink-muted)]">点击"新建需求"开始记录</p>
        </div>
      ) : (
        <div className="overflow-hidden rounded-xl border border-[var(--line)] bg-[var(--bg-elevated)]">
          <table className="w-full text-left">
            <thead>
              <tr className="border-b border-[var(--line)] bg-[var(--bg)]">
                <th className="w-12 py-3 pl-6 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">№</th>
                <th className="py-3 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">标题</th>
                <th className="py-3 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">状态</th>
                <th className="py-3 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">优先级</th>
                <th className="py-3 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">创建者</th>
                <th className="py-3 pr-6 font-mono text-[10px] uppercase tracking-[0.18em] text-[var(--ink-muted)]">操作</th>
              </tr>
            </thead>
            <tbody>
              {requirements.map((req, idx) => (
                <tr
                  key={req.id}
                  className="border-b border-[var(--line-soft)] transition-colors last:border-0 hover:bg-[var(--line-soft)]"
                >
                  <td className="py-4 pl-6 font-mono text-[11px] tabular-nums text-[var(--ink-muted)]">
                    {String(idx + 1).padStart(2, '0')}
                  </td>
                  <td className="py-4 pr-6 font-medium text-[var(--ink)]">{req.title}</td>
                  <td className="py-4">
                    <RequirementStatusBadge status={req.status} />
                  </td>
                  <td className="py-4 text-[13px] text-[var(--ink-soft)]">
                    {PRIORITY_LABEL[req.priority] || '无'}
                  </td>
                  <td className="py-4 text-[13px] text-[var(--ink-soft)]">{req.creator?.name || '—'}</td>
                  <td className="py-4 pr-6">
                    <div className="flex gap-1">
                      <button
                        onClick={() => onEdit(req)}
                        className="rounded p-1.5 text-[var(--ink-muted)] hover:bg-[var(--bg)] hover:text-[var(--ink)]"
                        title="编辑"
                      >
                        <Pencil className="h-3.5 w-3.5" strokeWidth={1.75} />
                      </button>
                      <button
                        onClick={() => onDelete(req.id)}
                        className="rounded p-1.5 text-[var(--ink-muted)] hover:bg-[var(--bg)] hover:text-[var(--accent)]"
                        title="删除"
                      >
                        <Trash2 className="h-3.5 w-3.5" strokeWidth={1.75} />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

function FilterChip({
  active,
  onClick,
  children,
}: {
  active: boolean;
  onClick: () => void;
  children: React.ReactNode;
}) {
  return (
    <button
      onClick={onClick}
      className={`rounded-full px-3 py-1.5 text-[12px] transition-all ${
        active
          ? 'bg-[var(--ink)] text-[var(--bg)]'
          : 'border border-[var(--line)] text-[var(--ink-soft)] hover:border-[var(--ink)] hover:text-[var(--ink)]'
      }`}
    >
      {children}
    </button>
  );
}