'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-5">
      <div>
        <label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
          需求标题
        </label>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="一句话描述需求"
          className="mt-2 block w-full border-0 border-b border-[var(--line)] bg-transparent pb-2 font-display text-xl text-[var(--ink)] placeholder:font-display placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none"
        />
      </div>
      <div>
        <label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
          描述
        </label>
        <textarea
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          rows={4}
          placeholder="详细说明需求背景、目标、验收标准"
          className="mt-2 block w-full resize-none border-0 border-b border-[var(--line)] bg-transparent pb-2 text-[14px] leading-relaxed text-[var(--ink-soft)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none"
        />
      </div>
      <div>
        <label className="font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--ink-muted)]">
          优先级
        </label>
        <div className="mt-2 flex gap-1.5">
          {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={`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)]'
                }`}
              >
                {label}
              </button>
            );
          })}
        </div>
      </div>
      <div className="flex justify-end gap-2 pt-2">
        <button
          type="button"
          onClick={onCancel}
          className="rounded-md px-4 py-2 text-[13px] text-[var(--ink-soft)] hover:bg-[var(--line-soft)]"
        >
          取消
        </button>
        <button
          type="submit"
          className="rounded-md bg-[var(--ink)] px-5 py-2 text-[13px] font-medium text-[var(--bg)] transition-colors hover:bg-[var(--accent)]"
        >
          {initialData ? '保存修改' : '创建需求'}
        </button>
      </div>
    </form>
  );
}