'use client'

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

interface Props {
  propertyId: string
  readOnly?: boolean
}

export function AdvanceForm({ propertyId, readOnly = false }: Props) {
  const router = useRouter()
  const [title, setTitle] = useState('')
  const [description, setDescription] = useState('')
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState('')

  if (readOnly) return null

  async function submit(e: React.FormEvent) {
    e.preventDefault()
    if (!title.trim()) {
      setError('Title is required')
      return
    }
    setSaving(true)
    setError('')
    try {
      const res = await fetch(`/api/admin/properties/${propertyId}/advances`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          type: 'NOTE',
          title: title.trim(),
          description: description.trim() || null,
        }),
      })
      if (!res.ok) {
        const err = await res.json().catch(() => ({}))
        throw new Error(err.error || `Save failed (${res.status})`)
      }
      setTitle('')
      setDescription('')
      router.refresh()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Save failed')
    } finally {
      setSaving(false)
    }
  }

  return (
    <form
      onSubmit={submit}
      className="bg-gray-50 rounded border border-gray-200 p-3 space-y-2"
    >
      {error && (
        <p className="text-sm text-red-600" role="alert">
          {error}
        </p>
      )}
      <input
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Note title"
        required
        className="w-full px-2 py-1 border rounded text-sm"
      />
      <textarea
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        placeholder="Optional details..."
        rows={2}
        className="w-full px-2 py-1 border rounded text-sm"
      />
      <div className="flex justify-end">
        <button
          type="submit"
          disabled={saving}
          className="text-sm px-3 py-1 bg-[#374527] text-white rounded hover:bg-[#1D2019] disabled:opacity-50"
        >
          {saving ? 'Adding...' : 'Add note'}
        </button>
      </div>
    </form>
  )
}