"use client";

import { FormEvent, useState } from "react";
import { CheckCircle2, LoaderCircle, Send } from "lucide-react";

export function ContactForm() {
  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setStatus("loading");
    const formData = new FormData(event.currentTarget);
    const payload = Object.fromEntries(formData.entries());
    try {
      const response = await fetch("/api/iletisim", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      if (!response.ok) throw new Error("Gönderilemedi");
      event.currentTarget.reset();
      setStatus("success");
    } catch {
      setStatus("error");
    }
  }

  if (status === "success") {
    return (
      <div className="form-success compact-success" role="status">
        <CheckCircle2 size={38} />
        <h3>Mesajınız bize ulaştı.</h3>
        <p>Danışmanımız mesai saatleri içinde sizinle iletişime geçecek.</p>
        <button className="button button-ghost" onClick={() => setStatus("idle")}>Yeni mesaj gönder</button>
      </div>
    );
  }

  return (
    <form className="contact-form" onSubmit={submit}>
      <div className="form-grid">
        <label>Ad soyad<input name="name" required placeholder="Adınız ve soyadınız" /></label>
        <label>Telefon<input name="phone" type="tel" required placeholder="05__ ___ __ __" /></label>
        <label>E-posta<input name="email" type="email" placeholder="ornek@eposta.com" /></label>
        <label>Konu<select name="subject" required defaultValue=""><option value="" disabled>Seçin</option><option>Teklif hakkında</option><option>Mevcut poliçem</option><option>Hasar işlemleri</option><option>Diğer</option></select></label>
        <label className="field-span-2">Mesajınız<textarea name="message" required rows={5} placeholder="Size nasıl yardımcı olabiliriz?" /></label>
      </div>
      <label className="consent"><input name="consent" value="true" type="checkbox" required /><span>İletişim talebim kapsamında bilgilerimin işlenmesini kabul ediyorum.</span></label>
      {status === "error" && <p className="form-error" role="alert">Mesaj gönderilemedi. Lütfen tekrar deneyin.</p>}
      <button className="button" disabled={status === "loading"}>{status === "loading" ? <><LoaderCircle className="spin" size={18} /> Gönderiliyor</> : <><Send size={18} /> Mesajı Gönder</>}</button>
    </form>
  );
}