"use client"

import styles from "./contact-form.module.scss"
import { motion } from "framer-motion"
import { useState } from "react"
import { router } from "@inertiajs/react"

export default function ContactFormSection() {
  const [form, setForm] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  })

  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle")

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    setForm({ ...form, [e.target.name]: e.target.value })
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setStatus("loading")

    router.post("/contact", form, {
      onSuccess: () => {
        setStatus("success")
        setForm({ name: "", email: "", subject: "", message: "" })
      },
      onError: () => {
        setStatus("error")
      },
    })
  }

  return (
    <section id="contact-form" className={styles.section}>
      <motion.div
        className={styles.wrapper}
        initial={{ opacity: 0, y: 40 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.7, ease: "easeOut" }}
        viewport={{ once: true }}
      >
        <div className={styles.header}>
          <h2>Send Us a Message</h2>
          <p>Our team typically responds within minutes.</p>
        </div>

        {/* Toast States */}
        {status === "success" && (
          <div className={`${styles.toast} ${styles.success}`}>
            Message sent successfully. We’ll get back to you shortly.
          </div>
        )}

        {status === "error" && (
          <div className={`${styles.toast} ${styles.error}`}>
            Something went wrong. Please try again.
          </div>
        )}

        <form className={styles.form} onSubmit={handleSubmit}>
          <div className={styles.grid}>
            <input
              name="name"
              value={form.name}
              onChange={handleChange}
              placeholder="Full Name"
              required
            />
            <input
              name="email"
              value={form.email}
              onChange={handleChange}
              placeholder="Email Address"
              type="email"
              required
            />
          </div>

          <input
            name="subject"
            value={form.subject}
            onChange={handleChange}
            placeholder="Subject"
            required
          />

          <textarea
            name="message"
            value={form.message}
            onChange={handleChange}
            placeholder="Your Message"
            rows={5}
            required
          />

          <button type="submit" disabled={status === "loading"}>
            {status === "loading" ? "Sending..." : "Send Message"}
          </button>
        </form>
      </motion.div>
    </section>
  )
}