'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { API_BASE } from '@/lib/config';
import { toast } from 'sonner';

export default function NewPractice() {
  const router = useRouter();
  const [form, setForm] = useState({ title: '', description: '', difficulty: 'BEGINNER', category: '', sortOrder: 0 });

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    try {
      const token = localStorage.getItem('adminToken');
      const res = await fetch(`${API_BASE}/admin/practices`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
        body: JSON.stringify(form),
      });
      if (res.ok) {
        toast.success('创建成功');
        router.push('/admin/practices');
      } else {
        const err = await res.json();
        toast.error(err.message || '创建失败');
      }
    } catch {
      toast.error('网络错误');
    }
  }

  return (
    <div className="p-6 max-w-2xl">
      <h1 className="text-2xl font-bold text-foreground mb-6">新增练习</h1>
      <form onSubmit={submit} className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-foreground mb-1">标题</label>
          <input className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm" required
            value={form.title} onChange={e => setForm({ ...form, title: e.target.value })} />
        </div>
        <div>
          <label className="block text-sm font-medium text-foreground mb-1">描述</label>
          <textarea className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm" rows={4}
            value={form.description} onChange={e => setForm({ ...form, description: e.target.value })} />
        </div>
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-foreground mb-1">难度</label>
            <select className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"
              value={form.difficulty} onChange={e => setForm({ ...form, difficulty: e.target.value })}>
              <option value="BEGINNER">入门</option>
              <option value="INTERMEDIATE">中等</option>
              <option value="ADVANCED">高级</option>
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-foreground mb-1">分类</label>
            <input className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"
              value={form.category} onChange={e => setForm({ ...form, category: e.target.value })} />
          </div>
        </div>
        <div>
          <label className="block text-sm font-medium text-foreground mb-1">排序</label>
          <input type="number" className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"
            value={form.sortOrder} onChange={e => setForm({ ...form, sortOrder: Number(e.target.value) })} />
        </div>
        <div className="flex gap-3 pt-2">
          <button type="submit" className="rounded-lg bg-primary text-primary-foreground px-6 py-2 text-sm font-medium hover:bg-primary/90">创建</button>
          <button type="button" onClick={() => router.back()} className="rounded-lg border border-border px-6 py-2 text-sm font-medium hover:bg-accent">取消</button>
        </div>
      </form>
    </div>
  );
}
