"use client";

import { FormEvent, useState } from "react";

export default function ContactForm() {
  const [submitted, setSubmitted] = useState(false);
  const [sending, setSending] = useState(false);

  function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const formEl = e.currentTarget;
    setSending(true);
    window.setTimeout(() => {
      setSending(false);
      setSubmitted(true);
      formEl.reset();
    }, 600);
  }

  if (submitted) {
    return (
      <div className="rounded-2xl border border-primary/20 bg-primary/5 p-8 text-center">
        <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-primary text-white">
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
            <path
              d="M5 13l4 4L19 7"
              stroke="currentColor"
              strokeWidth="2.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        </div>
        <h3 className="mt-5 text-lg font-bold text-secondary">
          پیام شما ثبت شد
        </h3>
        <p className="mt-2 text-sm text-foreground">
          از تماس شما سپاسگزاریم. کارشناسان ما در اسرع وقت با شما تماس خواهند
          گرفت.
        </p>
        <button
          type="button"
          onClick={() => setSubmitted(false)}
          className="mt-6 rounded-full border border-primary/30 px-6 py-2.5 text-sm font-semibold text-primary hover:bg-primary/5 transition-colors"
        >
          ارسال پیام جدید
        </button>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-5">
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
        <div>
          <label htmlFor="name" className="block text-sm font-medium text-secondary mb-2">
            نام و نام خانوادگی
          </label>
          <input
            id="name"
            name="name"
            type="text"
            required
            placeholder="نام شما"
            className="w-full rounded-xl border border-black/10 bg-white px-4 py-3 text-sm outline-none focus:border-primary transition-colors"
          />
        </div>
        <div>
          <label htmlFor="phone" className="block text-sm font-medium text-secondary mb-2">
            شماره تماس
          </label>
          <input
            id="phone"
            name="phone"
            type="tel"
            required
            dir="ltr"
            placeholder="09xxxxxxxxx"
            className="w-full rounded-xl border border-black/10 bg-white px-4 py-3 text-sm text-right outline-none focus:border-primary transition-colors"
          />
        </div>
      </div>

      <div>
        <label htmlFor="subject" className="block text-sm font-medium text-secondary mb-2">
          موضوع
        </label>
        <input
          id="subject"
          name="subject"
          type="text"
          placeholder="موضوع پیام"
          className="w-full rounded-xl border border-black/10 bg-white px-4 py-3 text-sm outline-none focus:border-primary transition-colors"
        />
      </div>

      <div>
        <label htmlFor="message" className="block text-sm font-medium text-secondary mb-2">
          پیام شما
        </label>
        <textarea
          id="message"
          name="message"
          required
          rows={5}
          placeholder="پیام خود را بنویسید..."
          className="w-full rounded-xl border border-black/10 bg-white px-4 py-3 text-sm outline-none focus:border-primary transition-colors resize-none"
        />
      </div>

      <button
        type="submit"
        disabled={sending}
        className="w-full sm:w-auto rounded-full bg-primary px-8 py-3.5 text-white font-semibold hover:bg-primary-dark transition-colors disabled:opacity-60"
      >
        {sending ? "در حال ارسال..." : "ارسال پیام"}
      </button>
    </form>
  );
}
