'use client';
/**
 * BenchmarkForm — 标杆笔记上传表单
 */
import { useState } from 'react';
import { api } from '@/lib/api';
import { CreateBenchmarkRequest } from '@/types/index';

interface BenchmarkFormProps {
  productId: number;
  onSaved: () => void;
  onCancel: () => void;
}

export function BenchmarkForm({ productId, onSaved, onCancel }: BenchmarkFormProps) {
  const [form, setForm] = useState<CreateBenchmarkRequest>({
    screenshot_url: '', highlights: '', link_url: null,
  });
  const [saving, setSaving] = useState(false);

  async function handleSave(e: React.FormEvent) {
    e.preventDefault();
    if (!form.screenshot_url || !form.highlights) return;
    setSaving(true);
    try {
      await api.post(`/api/v1/products/${productId}/benchmarks`, form);
      onSaved();
    } finally {
      setSaving(false);
    }
  }

  return (
    <form onSubmit={handleSave}
      className="border border-border-default rounded-xl p-6 bg-surface-primary space-y-4">
      <h3 className="font-medium text-text-primary">上传标杆笔记</h3>
      <div>
        <label htmlFor="bm-url" className="block text-sm font-medium mb-1">截图 URL</label>
        <input id="bm-url" value={form.screenshot_url}
          onChange={(e) => setForm((f) => ({ ...f, screenshot_url: e.target.value }))}
          placeholder="https://..."
          className="w-full border border-border-default rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-brand-orange"
          required aria-required="true"
        />
      </div>
      <div>
        <label htmlFor="bm-highlights" className="block text-sm font-medium mb-1">亮点（手填）</label>
        <textarea id="bm-highlights" value={form.highlights} rows={3}
          onChange={(e) => setForm((f) => ({ ...f, highlights: e.target.value }))}
          className="w-full border border-border-default rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-brand-orange resize-none"
          required aria-required="true"
        />
      </div>
      <div className="flex gap-3 justify-end">
        <button type="button" onClick={onCancel}
          className="px-4 py-2 text-sm text-text-secondary border border-border-default rounded-lg hover:bg-surface-tertiary">
          取消
        </button>
        <button type="submit" disabled={saving}
          className="px-4 py-2 text-sm bg-brand-orange text-white rounded-lg hover:bg-orange-600 disabled:opacity-50">
          {saving ? '保存中…' : '保存'}
        </button>
      </div>
    </form>
  );
}
