'use client'

import { useState } from 'react'

export default function ContactForm({ locale = 'tr' }: { locale?: 'tr' | 'en' }) {
  const en = locale === 'en'
  const [form, setForm] = useState({ name: '', email: '', phone: '', message: '' })
  const [status, setStatus] = useState<'idle' | 'loading' | 'ok' | 'error'>('idle')

  function set(key: string, val: string) {
    setForm(f => ({ ...f, [key]: val }))
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setStatus('loading')
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      })
      setStatus(res.ok ? 'ok' : 'error')
    } catch {
      setStatus('error')
    }
  }

  const ic = 'w-full px-4 py-3 rounded-lg border border-sand bg-white font-body text-sm focus:outline-none focus:border-earth transition-colors'
  const lb = 'block font-body text-sm text-brown mb-2'

  if (status === 'ok') {
    return (
      <div className="bg-green-50 border border-green-200 rounded-lg p-8 text-center">
        <p className="font-display text-2xl text-brown mb-2">{en ? 'Thank you!' : 'Teşekkürler!'}</p>
        <p className="font-body text-sm text-brown/60">
          {en ? 'Your message has been received. We will get back to you shortly.' : 'Mesajınız alındı. En kısa sürede size döneceğiz.'}
        </p>
      </div>
    )
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-5">
      <div>
        <label className={lb}>{en ? 'Full Name *' : 'Ad Soyad *'}</label>
        <input type="text" required value={form.name}
          onChange={e => set('name', e.target.value)} className={ic} />
      </div>
      <div>
        <label className={lb}>{en ? 'Email *' : 'E-posta *'}</label>
        <input type="email" required value={form.email}
          onChange={e => set('email', e.target.value)} className={ic} />
      </div>
      <div>
        <label className={lb}>{en ? 'Phone' : 'Telefon'}</label>
        <input type="tel" value={form.phone}
          onChange={e => set('phone', e.target.value)} className={ic} />
      </div>
      <div>
        <label className={lb}>{en ? 'Message *' : 'Mesaj *'}</label>
        <textarea rows={5} required value={form.message}
          onChange={e => set('message', e.target.value)}
          className={`${ic} resize-none`} />
      </div>

      {status === 'error' && (
        <p className="font-body text-sm text-red-600 bg-red-50 rounded-lg px-4 py-2">
          {en ? 'An error occurred. Please try again.' : 'Bir hata oluştu. Lütfen tekrar deneyin.'}
        </p>
      )}

      <button type="submit" disabled={status === 'loading'}
        className="w-full py-3 rounded-lg bg-brown text-cream font-body text-sm tracking-widest uppercase hover:bg-earth transition-colors disabled:opacity-60">
        {status === 'loading' ? (en ? 'Sending...' : 'Gönderiliyor...') : (en ? 'Send' : 'Gönder')}
      </button>
    </form>
  )
}