'use client';

import { useActionState } from 'react';
import { submitContact, type ContactState } from '@/app/(site)/iletisim/actions';

const initial: ContactState = { status: 'idle' };

export default function ContactForm() {
  const [state, action, pending] = useActionState(submitContact, initial);

  if (state.status === 'ok') {
    return (
      <div className="card flex flex-col items-center p-12 text-center">
        <span className="flex h-14 w-14 items-center justify-center rounded-full bg-gold-500/15 text-gold-600">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
            <path d="m5 12.5 4.5 4.5L19 7" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </span>
        <h3 className="mt-5 font-display text-2xl">Teşekkürler</h3>
        <p className="mt-2 max-w-sm text-sm leading-relaxed text-cocoa-600">{state.message}</p>
      </div>
    );
  }

  return (
    <form action={action} className="card space-y-5 p-7 sm:p-9">
      <div className="grid gap-5 sm:grid-cols-2">
        <div>
          <label htmlFor="name" className="field-label">
            Ad Soyad *
          </label>
          <input id="name" name="name" required className="field" placeholder="Adınız" />
        </div>
        <div>
          <label htmlFor="phone" className="field-label">
            Telefon *
          </label>
          <input
            id="phone"
            name="phone"
            required
            inputMode="tel"
            className="field"
            placeholder="0 5xx xxx xx xx"
          />
        </div>
      </div>

      <div className="grid gap-5 sm:grid-cols-2">
        <div>
          <label htmlFor="email" className="field-label">
            E-posta
          </label>
          <input id="email" name="email" type="email" className="field" placeholder="ornek@firma.com" />
        </div>
        <div>
          <label htmlFor="subject" className="field-label">
            Konu
          </label>
          <input id="subject" name="subject" className="field" placeholder="Ürün / teklif talebi" />
        </div>
      </div>

      <div>
        <label htmlFor="body" className="field-label">
          Mesajınız *
        </label>
        <textarea
          id="body"
          name="body"
          required
          rows={6}
          className="field resize-y"
          placeholder="İlgilendiğiniz ürünler, tahmini adet ve teslimat bilgisi…"
        />
      </div>

      {/* bot tuzagi — ekranda gorunmez */}
      <input
        type="text"
        name="company"
        tabIndex={-1}
        autoComplete="off"
        aria-hidden
        className="hidden"
      />

      {state.status === 'error' && (
        <p className="rounded-xl bg-red-50 px-4 py-3 text-sm text-red-700">{state.message}</p>
      )}

      <button type="submit" disabled={pending} className="btn-primary w-full disabled:opacity-60">
        {pending ? 'Gönderiliyor…' : 'Mesajı gönder'}
      </button>
      <p className="text-xs leading-relaxed text-cocoa-400">
        Gönderdiğiniz bilgiler yalnızca talebinize dönüş yapmak için kullanılır.
      </p>
    </form>
  );
}