"use client";

import { FormEvent, useState } from "react";
import { site } from "@/lib/data";

export function ContactForm() {
  const [sent, setSent] = useState(false);

  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const name = String(data.get("name") || "");
    const phone = String(data.get("phone") || "");
    const message = String(data.get("message") || "");
    const body = encodeURIComponent(`نام: ${name}\nتلفن: ${phone}\n\n${message}`);
    window.location.href = `mailto:${site.email}?subject=${encodeURIComponent("پیام از وبسایت BRB")}&body=${body}`;
    setSent(true);
  };

  if (sent) {
    return (
      <p className="rounded-2xl bg-paper p-6 text-[14px] leading-7 text-muted">
        پیام شما آماده ارسال از طریق ایمیل شد. اگر برنامه ایمیل باز نشد، با شماره‌های فروشگاه تماس بگیرید.
      </p>
    );
  }

  return (
    <form onSubmit={onSubmit} className="space-y-3">
      <input
        name="name"
        required
        placeholder="نام و نام خانوادگی"
        className="w-full rounded-xl border border-line bg-paper px-4 py-3.5 text-[14px] outline-none focus:border-brand focus:bg-white"
      />
      <input
        name="phone"
        required
        dir="ltr"
        placeholder="شماره همراه"
        className="w-full rounded-xl border border-line bg-paper px-4 py-3.5 text-[14px] outline-none focus:border-brand focus:bg-white"
      />
      <textarea
        name="message"
        required
        rows={6}
        placeholder="پیام شما"
        className="w-full resize-y rounded-xl border border-line bg-paper px-4 py-3.5 text-[14px] outline-none focus:border-brand focus:bg-white"
      />
      <button type="submit" className="rounded-xl bg-brand px-8 py-3.5 text-[14px] font-medium text-white hover:bg-brand-dark">
        ارسال پیام
      </button>
    </form>
  );
}