'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card } from '@/components/ui/card';
import { API_BASE } from '@/lib/config';

export default function NewToolPage() {
  const router = useRouter();
  const [form, setForm] = useState({ name: '', description: '', url: '', icon: '', affiliateLink: '', tags: '' });
  const [submitting, setSubmitting] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!form.name.trim() || !form.url.trim()) return;
    setSubmitting(true);
    try {
      const token = localStorage.getItem('adminToken');
      const res = await fetch(`${API_BASE}/tools`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
        body: JSON.stringify(form),
      });
      if (res.ok) router.push('/admin/tools');
    } catch {}
    setSubmitting(false);
  }

  return (
    <>
      <div className="border-b border-border bg-card px-4 py-4">
        <h1 className="text-2xl font-bold text-foreground">新建工具</h1>
      </div>
      <div className="max-w-2xl mx-auto p-6">
        <Card className="p-6">
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-foreground mb-1">名称</label>
              <Input value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} placeholder="工具名称" required />
            </div>
            <div>
              <label className="block text-sm font-medium text-foreground mb-1">描述</label>
              <textarea value={form.description} onChange={e => setForm(f => ({ ...f, description: e.target.value }))}
                rows={3} className="w-full px-3 py-2 bg-background border border-input rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-ring"
                placeholder="工具简介" />
            </div>
            <div>
              <label className="block text-sm font-medium text-foreground mb-1">链接</label>
              <Input value={form.url} onChange={e => setForm(f => ({ ...f, url: e.target.value }))} placeholder="https://..." required />
            </div>
            <div>
              <label className="block text-sm font-medium text-foreground mb-1">图标链接</label>
              <Input value={form.icon} onChange={e => setForm(f => ({ ...f, icon: e.target.value }))} placeholder="https://..." />
            </div>
            <div>
              <label className="block text-sm font-medium text-foreground mb-1">
                返佣链接 <span className="text-muted-foreground font-normal">(可选)</span>
              </label>
              <Input value={form.affiliateLink} onChange={e => setForm(f => ({ ...f, affiliateLink: e.target.value }))} placeholder="https://..." />
              <p className="text-xs text-muted-foreground mt-1">通过此链接跳转可获得返佣收入</p>
            </div>
            <div>
              <label className="block text-sm font-medium text-foreground mb-1">标签</label>
              <Input value={form.tags} onChange={e => setForm(f => ({ ...f, tags: e.target.value }))} placeholder="AI,工具,效率" />
            </div>
            <div className="flex gap-2 pt-2">
              <Button type="submit" disabled={submitting || !form.name.trim() || !form.url.trim()}>
                {submitting ? '创建中...' : '创建工具'}
              </Button>
              <Link href="/admin/tools"><Button type="button" variant="outline">取消</Button></Link>
            </div>
          </form>
        </Card>
      </div>
    </>
  );
}
