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

'use client';

import { useEffect, useState, useMemo } from 'react';
import { X } from 'lucide-react';
import { useTestCaseStore } from '@/stores/useTestCaseStore';
import { useRequirementStore } from '@/stores/useRequirementStore';
import { useMemberStore } from '@/stores/useMemberStore';
import { useTaskCategoryStore } from '@/stores/useTaskCategoryStore';
import { useAuthStore } from '@/stores/useAuthStore';
import type { Priority } from '@/lib/derive';
import { getCategoriesByGroup, getDefaultCategoryByGroup } from '@/lib/task-category';
import { clampTestCaseEstimateHours, getDefaultTestCaseEstimateHours } from '@/lib/ai-estimation-policy';

interface Props {
  versionId: string;
  requirementIds: string[];
  onClose: () => void;
}

export function TestCaseCreateModal({ versionId, requirementIds, onClose }: Props) {
  const { createTestCase } = useTestCaseStore();
  const { requirements } = useRequirementStore();
  const { members } = useMemberStore();
  const { categories } = useTaskCategoryStore();
  const user = useAuthStore((s) => s.user);

  const versionReqs = useMemo(
    () => requirements.filter((r) => requirementIds.includes(r.id)),
    [requirements, requirementIds],
  );
  const testCategories = useMemo(() => getCategoriesByGroup(categories, 'testing'), [categories]);

  const [title, setTitle] = useState('');
  const [requirementId, setRequirementId] = useState(versionReqs[0]?.id || '');
  const [priority, setPriority] = useState<Priority>(versionReqs[0]?.priority || 'P2');
  const [categoryId, setCategoryId] = useState(getDefaultCategoryByGroup(categories, 'testing').id);
  const selectedCategory = useMemo(
    () => categories.find((category) => category.id === categoryId) ?? testCategories[0],
    [categories, categoryId, testCategories],
  );
  const [estimateHours, setEstimateHours] = useState(0.5);
  const [assigneeId, setAssigneeId] = useState(user?.name || '');
  const [description, setDescription] = useState('');
  const [prototypeNotes, setPrototypeNotes] = useState('');

  useEffect(() => {
    if (testCategories.length === 0) return;
    if (testCategories.some((category) => category.id === categoryId)) return;
    const next = testCategories[0];
    setCategoryId(next.id);
    setEstimateHours(getDefaultTestCaseEstimateHours(next.code));
  }, [categoryId, testCategories]);

  const handleCategoryChange = (nextCategoryId: string) => {
    setCategoryId(nextCategoryId);
    const category = categories.find((c) => c.id === nextCategoryId) ?? testCategories.find((c) => c.id === nextCategoryId);
    setEstimateHours(getDefaultTestCaseEstimateHours(category?.code));
  };

  const normalizedEstimateHours = clampTestCaseEstimateHours(selectedCategory?.code, estimateHours);
  const canSubmit = title.trim() && categoryId && normalizedEstimateHours > 0;

  const handleSubmit = () => {
    if (!canSubmit) return;
    const reqRef = versionReqs.find((r) => r.id === requirementId);
    const references = [
      ...(reqRef ? [{ type: 'requirement' as const, id: reqRef.code, label: `${reqRef.code} ${reqRef.title}` }] : []),
      ...prototypeNotes.split(/[,，\s]+/).map((s) => s.trim()).filter(Boolean).map((note) => ({
        type: 'prototype_note' as const,
        id: note,
        label: note,
      })),
    ];
    createTestCase({
      versionId,
      requirementId: requirementId || undefined,
      title: title.trim(),
      description: description.trim() || undefined,
      categoryId,
      priority,
      estimateHours: normalizedEstimateHours,
      assigneeId: assigneeId || undefined,
      references: references.length > 0 ? references : undefined,
      createdBy: user?.name || '系统',
    });
    onClose();
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onClose}>
      <div className="w-full max-w-md rounded-2xl bg-[var(--bg-card)] border border-[var(--line)] p-6 shadow-[var(--shadow-md)]" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-[14px] font-semibold text-[var(--ink)]">新建测试用例</h3>
          <button onClick={onClose} className="rounded-md p-1 hover:bg-[var(--bg-subtle)]"><X className="h-4 w-4 text-[var(--ink-muted)]" /></button>
        </div>
        <div className="space-y-3">
          <div>
            <label className="block text-[12px] text-[var(--ink-soft)] mb-1">用例标题 *</label>
            <input value={title} onChange={(e) => setTitle(e.target.value)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" placeholder="例如：正常排班" />
          </div>
          <div>
            <label className="block text-[12px] text-[var(--ink-soft)] mb-1">关联需求（可选）</label>
            <select value={requirementId} onChange={(e) => { setRequirementId(e.target.value); const r = versionReqs.find((x) => x.id === e.target.value); if (r) setPriority(r.priority); }} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none">
              <option value="">不关联需求</option>
              {versionReqs.map((r) => <option key={r.id} value={r.id}>{r.code} {r.title}</option>)}
            </select>
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="block text-[12px] text-[var(--ink-soft)] mb-1">优先级</label>
              <select value={priority} onChange={(e) => setPriority(e.target.value as Priority)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none">
                {(['P0','P1','P2','P3'] as Priority[]).map((p) => <option key={p} value={p}>{p}</option>)}
              </select>
            </div>
            <div>
              <label className="block text-[12px] text-[var(--ink-soft)] mb-1">任务类型 *</label>
              <select value={categoryId} onChange={(e) => handleCategoryChange(e.target.value)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none">
                {testCategories.map((category) => (
                  <option key={category.id} value={category.id}>{category.name}</option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-[12px] text-[var(--ink-soft)] mb-1">预估耗时 *</label>
              <input
                type="number"
                min="0.25"
                max="2"
                step="0.25"
                value={estimateHours}
                onChange={(e) => setEstimateHours(Number(e.target.value))}
                onBlur={() => setEstimateHours(normalizedEstimateHours)}
                className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none"
              />
            </div>
            <div>
              <label className="block text-[12px] text-[var(--ink-soft)] mb-1">测试负责人</label>
              <select value={assigneeId} onChange={(e) => setAssigneeId(e.target.value)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none">
                <option value="">选择负责人</option>
                {members.map((m) => <option key={m.id} value={m.name}>{m.name}</option>)}
              </select>
            </div>
          </div>
          <div>
            <label className="block text-[12px] text-[var(--ink-soft)] mb-1">测试步骤 & 预期结果</label>
            <textarea rows={4} value={description} onChange={(e) => setDescription(e.target.value)} className="w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 py-2 text-[13px] focus:border-[var(--accent)] focus:outline-none resize-none" placeholder="1. 操作步骤...&#10;2. 预期结果..." />
          </div>
          <div>
            <label className="block text-[12px] text-[var(--ink-soft)] mb-1">原型批注</label>
            <input value={prototypeNotes} onChange={(e) => setPrototypeNotes(e.target.value)} className="h-8 w-full rounded-lg border border-[var(--line)] bg-[var(--bg)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" placeholder="如 QY0007, QY0023" />
            <p className="mt-1 text-[11px] text-[var(--ink-muted)]">原型批注编号，逗号分隔（用例来自原型上的哪些标记）</p>
          </div>
        </div>
        <div className="flex justify-end gap-2 pt-4 border-t border-[var(--line)] mt-4">
          <button onClick={onClose} className="h-8 px-3 rounded-lg text-[12px] font-medium border border-[var(--line)] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]">取消</button>
          <button onClick={handleSubmit} disabled={!canSubmit} className="h-8 px-4 rounded-lg text-[12px] font-medium bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)] disabled:opacity-50">创建</button>
        </div>
      </div>
    </div>
  );
}