'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'

export function AgentForm() {
  const router = useRouter()
  const [form, setForm] = useState({
    name: '',
    email: '',
    password: '',
    phone: '',
    whatsapp: '',
    bio: '',
    autoPublish: false,
  })
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState('')

  async function submit(e: React.FormEvent) {
    e.preventDefault()
    setSaving(true)
    setError('')
    try {
      const res = await fetch('/api/admin/agents', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      })
      if (!res.ok) {
        const err = await res.json().catch(() => ({}))
        throw new Error(err.error || `Failed to create agent (${res.status})`)
      }
      router.push('/admin/agents')
      router.refresh()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Failed to create agent')
    } finally {
      setSaving(false)
    }
  }

  return (
    <form onSubmit={submit} className="max-w-2xl space-y-4">
      {error && (
        <div className="bg-red-50 text-red-700 p-3 rounded" role="alert">
          {error}
        </div>
      )}

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium mb-1">Full name *</label>
          <input
            placeholder="Acme Inc"
            required
            minLength={2}
            value={form.name}
            onChange={(e) => setForm({ ...form, name: e.target.value })}
            className="w-full px-3 py-2 border rounded focus:border-[#374527]"
          />
        </div>
        <div>
          <label className="block text-sm font-medium mb-1">Email *</label>
          <input
            type="email"
            placeholder="agent@example.com"
            required
            value={form.email}
            onChange={(e) => setForm({ ...form, email: e.target.value })}
            className="w-full px-3 py-2 border rounded focus:border-[#374527]"
          />
        </div>
        <div>
          <label className="block text-sm font-medium mb-1">Temporary password *</label>
          <input
            type="password"
            placeholder="Min 8 chars"
            required
            minLength={8}
            value={form.password}
            onChange={(e) => setForm({ ...form, password: e.target.value })}
            className="w-full px-3 py-2 border rounded focus:border-[#374527]"
          />
        </div>
        <div>
          <label className="block text-sm font-medium mb-1">Phone</label>
          <input
            placeholder="+52 322 123 4567"
            value={form.phone}
            onChange={(e) => setForm({ ...form, phone: e.target.value })}
            className="w-full px-3 py-2 border rounded focus:border-[#374527]"
          />
        </div>
        <div>
          <label className="block text-sm font-medium mb-1">WhatsApp</label>
          <input
            placeholder="+52 1 322 123 4567"
            value={form.whatsapp}
            onChange={(e) => setForm({ ...form, whatsapp: e.target.value })}
            className="w-full px-3 py-2 border rounded focus:border-[#374527]"
          />
        </div>
      </div>

      <div>
        <label className="block text-sm font-medium mb-1">Short bio</label>
        <textarea
          placeholder="Specialties, languages, years of experience..."
          value={form.bio}
          onChange={(e) => setForm({ ...form, bio: e.target.value })}
          rows={3}
          className="w-full px-3 py-2 border rounded focus:border-[#374527]"
        />
      </div>

      <label className="flex items-center gap-2 cursor-pointer">
        <input
          type="checkbox"
          checked={form.autoPublish}
          onChange={(e) => setForm({ ...form, autoPublish: e.target.checked })}
          className="w-4 h-4 accent-[#374527]"
        />
        <span className="text-sm">Auto-publish listings (skip moderation)</span>
      </label>

      <div className="flex gap-3 pt-3 border-t">
        <button
          type="submit"
          disabled={saving}
          className="bg-[#374527] text-white px-6 py-2 rounded hover:bg-[#1D2019] disabled:opacity-50"
        >
          {saving ? 'Creating...' : 'Create agent'}
        </button>
        <button
          type="button"
          onClick={() => router.push('/admin/agents')}
          className="px-6 py-2 border rounded hover:bg-gray-50"
        >
          Cancel
        </button>
      </div>
    </form>
  )
}