"use client";

import { FormEvent, useState } from "react";

export function ContactForm() {
  const [message, setMessage] = useState("");
  const [loading, setLoading] = useState(false);

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setLoading(true);
    setMessage("");
    const form = new FormData(event.currentTarget);
    const response = await fetch("/api/contact", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name: form.get("name"),
        email: form.get("email"),
        companySize: form.get("companySize"),
        message: form.get("message")
      })
    });
    const payload = await response.json().catch(() => ({}));
    setLoading(false);
    if (!response.ok) {
      setMessage(payload.error ?? "Could not send your message.");
      return;
    }
    event.currentTarget.reset();
    setMessage("Message sent. We will follow up with rollout next steps.");
  }

  return (
    <form className="grid gap-4 rounded-lg border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900" onSubmit={submit}>
      <input className="admin-input py-3" name="name" placeholder="Name" />
      <input className="admin-input py-3" name="email" placeholder="Work email" type="email" />
      <input className="admin-input py-3" name="companySize" placeholder="Company size" />
      <textarea className="admin-input min-h-36 py-3" name="message" placeholder="What do you want WorkOnClock to solve?" />
      <button className="brand-button py-3" disabled={loading} type="submit">
        {loading ? "Sending..." : "Send Message"}
      </button>
      {message ? <p className="text-sm font-medium text-slate-600 dark:text-slate-300">{message}</p> : null}
    </form>
  );
}