'use client'

import { useState } from 'react'

type Status = { kind: 'idle' | 'sending' | 'ok' | 'error'; message?: string }

export default function ContactForm() {
  const [status, setStatus] = useState<Status>({ kind: 'idle' })

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const form = e.currentTarget
    const data = Object.fromEntries(new FormData(form))
    setStatus({ kind: 'sending' })

    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      })
      const json = await res.json()
      if (!res.ok) throw new Error(json.error ?? 'Ismeretlen hiba')
      setStatus({ kind: 'ok', message: 'Üzenetét sikeresen elküldtük' })
      form.reset()
    } catch (err) {
      setStatus({
        kind: 'error',
        message: err instanceof Error ? err.message : 'Az üzenet küldése nem sikerült',
      })
    }
  }

  return (
    <form onSubmit={onSubmit} className="contact-form">
      <div className="form-group">
        <input type="text" name="name" id="name" className="form-control" placeholder="Név" required />
      </div>
      <div className="form-group">
        <input type="email" name="email" id="email" className="form-control" placeholder="E-mail cím" required />
      </div>
      <div className="form-group">
        <input type="text" name="subject" id="subject" className="form-control" placeholder="tárgy" />
      </div>
      <div className="form-group">
        <textarea
          name="message"
          id="message"
          rows={5}
          className="form-control"
          placeholder="Üzenet"
          required
        />
      </div>
      {/* mézesbödön a robotoknak — ember sosem tölti ki */}
      <input
        type="text"
        name="website"
        tabIndex={-1}
        autoComplete="off"
        aria-hidden="true"
        style={{ position: 'absolute', left: '-9999px', width: 1, height: 1 }}
      />
      <button type="submit" className="btn btn-primary" disabled={status.kind === 'sending'}>
        {status.kind === 'sending' ? 'Küldés…' : 'Küldés'}
      </button>

      {status.message && (
        <p className={`form-note ${status.kind === 'ok' ? 'success' : 'error'}`} role="status">
          {status.message}
        </p>
      )}
    </form>
  )
}