'use client';

import { useState } from 'react';

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

export function ProductForm({ initialData, onSubmit, onCancel }: Props) {
  const [name, setName] = useState(initialData?.name || '');
  const [description, setDescription] = useState(initialData?.description || '');

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

  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={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="例如：FTB 智能项目管理"
          className="mt-2 block w-full border-0 border-b border-[var(--line)] bg-transparent pb-2 font-display text-2xl 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={3}
          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 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>
  );
}