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

'use client';

import { useState } from 'react';
import { PRIORITY_LABEL } from '@/lib/constants';

interface Props {
  initialData?: { title: string; description: string; priority: number };
  onSubmit: (data: { title: string; description: string; priority: number }) => void;
  onCancel: () => void;
}

export function RequirementForm({ initialData, onSubmit, onCancel }: Props) {
  const [title, setTitle] = useState(initialData?.title || '');
  const [description, setDescription] = useState(initialData?.description || '');
  const [priority, setPriority] = useState(initialData?.priority ?? 0);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!title.trim()) return;
    onSubmit({ title: title.trim(), description: description.trim(), priority });
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <Field label="标题" required>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="一句话描述需求"
          className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
        />
      </Field>
      <Field label="描述">
        <textarea
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          rows={4}
          placeholder="详细说明需求背景、目标、验收标准"
          className="w-full resize-none rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 py-2 text-[13px] leading-relaxed text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
        />
      </Field>
      <Field label="优先级">
        <div className="flex gap-1">
          {Object.entries(PRIORITY_LABEL).map(([value, label]) => {
            const v = Number(value);
            const active = priority === v;
            return (
              <button
                key={value}
                type="button"
                onClick={() => setPriority(v)}
                className={`h-7 rounded-md px-2.5 text-[12.5px] transition-colors ${
                  active
                    ? 'bg-[var(--ink)] text-white'
                    : 'border border-[var(--line)] bg-[var(--bg-card)] text-[var(--ink-soft)] hover:border-[var(--ink-muted)] hover:text-[var(--ink)]'
                }`}
              >
                {label}
              </button>
            );
          })}
        </div>
      </Field>
      <FormActions onCancel={onCancel} submitLabel={initialData ? '保存' : '创建'} />
    </form>
  );
}

function Field({ label, required, children }: { label: string; required?: boolean; children: React.ReactNode }) {
  return (
    <div>
      <label className="mb-1.5 block text-[12px] font-medium text-[var(--ink-soft)]">
        {label}
        {required && <span className="ml-0.5 text-red-500">*</span>}
      </label>
      {children}
    </div>
  );
}

function FormActions({ onCancel, submitLabel }: { onCancel: () => void; submitLabel: string }) {
  return (
    <div className="flex justify-end gap-2 pt-2">
      <button
        type="button"
        onClick={onCancel}
        className="h-8 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)] hover:text-[var(--ink)]"
      >
        取消
      </button>
      <button
        type="submit"
        className="h-8 rounded-lg bg-[var(--accent)] px-4 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] hover:bg-[var(--accent-hover)]"
      >
        {submitLabel}
      </button>
    </div>
  );
}