import { useState } from 'react'

const emptyForm = () => ({
  title: '',
  author: '',
  year: new Date().getFullYear(),
  genre: '',
  read: false,
})

export function BookForm({ onSubmit }) {
  const [form, setForm] = useState(() => emptyForm())

  function handleSubmit(e) {
    e.preventDefault()
    if (!form.title.trim() || !form.author.trim()) return
    onSubmit(form)
    setForm(emptyForm())
  }

  return (
    <form className="book-form" onSubmit={handleSubmit}>
      <h2>Enregistrer un nouveau livre</h2>
      <p className="book-form-story">Je veux enregistrer un nouveau livre</p>
      <p className="book-form-api">
        <code>POST /api/books</code>
        <span className="book-form-api-note">
          {' '}
          (dans cette appli : enregistrement local, pas de serveur)
        </span>
      </p>
      <div className="form-grid">
        <label>
          Titre
          <input
            required
            value={form.title}
            onChange={(e) => setForm((f) => ({ ...f, title: e.target.value }))}
            placeholder="Ex. Les Misérables"
          />
        </label>
        <label>
          Auteur·ice
          <input
            required
            value={form.author}
            onChange={(e) => setForm((f) => ({ ...f, author: e.target.value }))}
            placeholder="Ex. Victor Hugo"
          />
        </label>
        <label>
          Année
          <input
            type="number"
            min={1000}
            max={2100}
            value={form.year}
            onChange={(e) =>
              setForm((f) => ({
                ...f,
                year: Number(e.target.value) || f.year,
              }))
            }
          />
        </label>
        <label>
          Genre
          <input
            value={form.genre}
            onChange={(e) => setForm((f) => ({ ...f, genre: e.target.value }))}
            placeholder="Roman, essai…"
          />
        </label>
      </div>
      <label className="checkbox-row">
        <input
          type="checkbox"
          checked={form.read}
          onChange={(e) => setForm((f) => ({ ...f, read: e.target.checked }))}
        />
        Déjà lu
      </label>
      <div className="form-actions">
        <button type="submit" className="btn primary">
          Enregistrer (POST)
        </button>
      </div>
    </form>
  )
}