'use client';

import { useEffect, useState } from 'react';
import { useRouter, useParams } from 'next/navigation';
import { API_BASE } from '@/lib/config';
import { Skeleton } from '@/components/ui/skeleton';
import { toast } from 'sonner';

export default function EditPractice() {
  const router = useRouter();
  const params = useParams();
  const [form, setForm] = useState({ title: '', description: '', difficulty: 'BEGINNER', category: '', sortOrder: 0, isActive: true });
  const [loading, setLoading] = useState(true);

  useEffect(() => { load(); }, []);

  async function load() {
    try {
      const token = localStorage.getItem('adminToken');
      const res = await fetch(`${API_BASE}/admin/practices/${params.id}`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      if (res.ok) {
        const data = await res.json();
        setForm({ title: data.title, description: data.description || '', difficulty: data.difficulty || 'BEGINNER', category: data.category || '', sortOrder: data.sortOrder || 0, isActive: data.isActive ?? true });
      }
    } catch {}
    setLoading(false);
  }

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    try {
      const token = localStorage.getItem('adminToken');
      const res = await fetch(`${API_BASE}/admin/practices/${params.id}`, {
        method: 'PUT',
        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('网络错误'); }
  }

  if (loading) return <div className="p-6 space-y-4"><Skeleton className="h-8 w-48" /><Skeleton className="h-10 w-full" /><Skeleton className="h-10 w-full" /></div>;

  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 items-center gap-2">
          <input type="checkbox" id="isActive" checked={form.isActive}
            onChange={e => setForm({ ...form, isActive: e.target.checked })} />
          <label htmlFor="isActive" className="text-sm text-foreground">启用</label>
        </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>
  );
}