ftb-project-management/apps/web/components/test-case/TestCaseTab.tsx

'use client';

import { useState, useMemo, useEffect } from 'react';
import { Plus, ClipboardCheck, Filter } from 'lucide-react';
import { useTestCaseStore } from '@/stores/useTestCaseStore';
import { useBugStore } from '@/stores/useBugStore';
import { useRequirementStore } from '@/stores/useRequirementStore';
import { useAuthStore } from '@/stores/useAuthStore';
import { TestCaseRow } from './TestCaseRow';
import { TestCaseCreateModal } from './TestCaseCreateModal';
import { TestCaseDetailDrawer } from './TestCaseDetailDrawer';
import { BugCreateModal } from '@/components/bug/BugCreateModal';
import { calcTestProgress, TEST_CASE_STATUS_LABEL } from '@/lib/test-case';
import { Pagination, usePagination } from '@/components/Pagination';
import type { TestCaseStatus } from '@/lib/test-case';

interface Props {
  versionId: string;
  requirementIds: string[];
}

export function TestCaseTab({ versionId, requirementIds }: Props) {
  const { testCases, fetchTestCases } = useTestCaseStore();
  const { bugs, fetchBugs } = useBugStore();
  const { requirements } = useRequirementStore();
  const user = useAuthStore((s) => s.user);

  useEffect(() => { fetchTestCases(); }, [fetchTestCases]);
  useEffect(() => { fetchBugs(); }, [fetchBugs]);

  const versionCases = useMemo(
    () => testCases.filter((c) => requirementIds.includes(c.requirementId)),
    [testCases, requirementIds],
  );

  const stats = calcTestProgress(versionCases);

  // 筛选
  const [filterAssignee, setFilterAssignee] = useState('');
  const [filterStatus, setFilterStatus] = useState('');

  const filteredCases = useMemo(() => {
    let result = versionCases;
    if (filterAssignee) result = result.filter((c) => c.assigneeId === filterAssignee);
    if (filterStatus) result = result.filter((c) => c.status === filterStatus);
    return result;
  }, [versionCases, filterAssignee, filterStatus]);

  const { paged, page, setPage, total, pageSize, setPageSize } = usePagination(filteredCases, 20);

  const [showCreate, setShowCreate] = useState(false);
  const [selectedCaseId, setSelectedCaseId] = useState<string | null>(null);
  const [bugForCaseId, setBugForCaseId] = useState<string | null>(null);

  // 按需求分组
  const groupedByReq = useMemo(() => {
    const map = new Map<string, typeof paged>();
    for (const c of paged) {
      const list = map.get(c.requirementId) || [];
      list.push(c);
      map.set(c.requirementId, list);
    }
    return map;
  }, [paged]);

  const assignees = useMemo(() => {
    const names = new Set(versionCases.map((c) => c.assigneeId).filter(Boolean) as string[]);
    return Array.from(names);
  }, [versionCases]);

  const hasFilter = !!(filterAssignee || filterStatus);

  return (
    <div className="space-y-3">
      {/* 统计栏 */}
      <div className="flex items-center gap-4 px-4 py-3 rounded-lg bg-[var(--bg-subtle)] border border-[var(--line)]">
        <div className="flex items-center gap-2">
          <ClipboardCheck className="h-4 w-4 text-[var(--accent)]" />
          <span className="text-[13px] font-medium text-[var(--ink)]">测试完成 {stats.completionRate}%</span>
        </div>
        <div className="h-2 flex-1 rounded-full bg-[var(--bg)] overflow-hidden">
          <div className="h-full rounded-full bg-emerald-500 transition-all" style={{ width: `${stats.completionRate}%` }} />
        </div>
        <span className="text-[11px] text-[var(--ink-muted)] tabular-nums">
          {stats.total} 用例 · 通过 {stats.passed} · 失败 {stats.failed} · 阻塞 {stats.blocked}
        </span>
        <span className="text-[11px] text-[var(--ink-muted)]">通过率 {stats.passRate}%</span>
        <button onClick={() => setShowCreate(true)} className="ml-auto flex items-center gap-1 h-7 px-3 rounded-md text-[11px] font-medium bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)]">
          <Plus className="h-3 w-3" />新建用例
        </button>
      </div>

      {/* 筛选 */}
      <div className="flex items-center gap-2 px-1">
        <Filter className="h-3.5 w-3.5 text-[var(--ink-muted)]" />
        <select value={filterAssignee} onChange={(e) => { setFilterAssignee(e.target.value); setPage(1); }} className="h-7 rounded-md border border-[var(--line)] bg-[var(--bg-card)] px-2 text-[11px] text-[var(--ink-soft)] focus:border-[var(--accent)] focus:outline-none">
          <option value="">全部负责人</option>
          {user?.name && <option value={user.name}>我的用例</option>}
          {assignees.filter((a) => a !== user?.name).map((a) => <option key={a} value={a}>{a}</option>)}
        </select>
        <select value={filterStatus} onChange={(e) => { setFilterStatus(e.target.value); setPage(1); }} className="h-7 rounded-md border border-[var(--line)] bg-[var(--bg-card)] px-2 text-[11px] text-[var(--ink-soft)] focus:border-[var(--accent)] focus:outline-none">
          <option value="">全部状态</option>
          {(Object.entries(TEST_CASE_STATUS_LABEL) as [TestCaseStatus, string][]).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
        </select>
        {hasFilter && <button onClick={() => { setFilterAssignee(''); setFilterStatus(''); setPage(1); }} className="text-[11px] text-[var(--accent)] hover:underline">清除</button>}
        <span className="ml-auto text-[11px] text-[var(--ink-muted)]">{filteredCases.length} 条</span>
      </div>

      {/* 列表 */}
      {filteredCases.length === 0 ? (
        <div className="rounded-xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] p-12 text-center">
          <p className="text-[13px] text-[var(--ink-muted)]">{hasFilter ? '没有匹配的用例' : '暂无测试用例'}</p>
          {!hasFilter && <button onClick={() => setShowCreate(true)} className="mt-3 text-[12px] text-[var(--accent)] hover:underline">创建第一个用例</button>}
        </div>
      ) : (
        Array.from(groupedByReq.entries()).map(([reqId, cases]) => {
          const req = requirements.find((r) => r.id === reqId);
          const reqPassed = cases.filter((c) => c.status === 'passed').length;
          return (
            <div key={reqId} className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] overflow-hidden">
              <div className="flex items-center gap-2 px-4 py-2 bg-[var(--bg-subtle)] border-b border-[var(--line)]">
                <span className="text-[11px] font-mono text-[var(--ink-muted)]">{req?.code}</span>
                <span className="text-[12px] font-medium text-[var(--ink)] flex-1 truncate">{req?.title}</span>
                <span className="text-[11px] text-[var(--ink-muted)]">{reqPassed}/{cases.length} 通过</span>
              </div>
              {cases.map((c) => (
                <TestCaseRow key={c.id} testCase={c} bugCount={bugs.filter((b) => b.testCaseId === c.id).length} onClick={() => setSelectedCaseId(c.id)} />
              ))}
            </div>
          );
        })
      )}

      {total > 20 && <Pagination total={total} page={page} pageSize={pageSize} onChange={setPage} onPageSizeChange={setPageSize} />}

      {showCreate && <TestCaseCreateModal requirementIds={requirementIds} onClose={() => setShowCreate(false)} />}
      {selectedCaseId && <TestCaseDetailDrawer testCaseId={selectedCaseId} onClose={() => setSelectedCaseId(null)} onCreateBug={(id) => { setBugForCaseId(id); }} />}
      {bugForCaseId && <BugCreateModal testCaseId={bugForCaseId} onClose={() => setBugForCaseId(null)} />}
    </div>
  );
}