"use client";
import { useState } from "react";
import { api } from "@/lib/api";

export default function ContactPage() {
  const [form, setForm] = useState({ name: "", email: "", phone: "", subject: "", message: "" });
  const [status, setStatus] = useState<"idle" | "loading" | "done" | "error">("idle");
  const [error, setError] = useState("");

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setStatus("loading");
    try {
      await api.post("/contact", form);
      setStatus("done");
      setForm({ name: "", email: "", phone: "", subject: "", message: "" });
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to send message");
      setStatus("error");
    }
  }

  return (
    <div className="mx-auto max-w-3xl px-4 py-14">
      <h1 className="text-3xl font-bold text-[var(--brand-blue)] mb-2">Contact Us</h1>
      <p className="text-gray-600 mb-8">Ilo-Ayegunle, Ilesa, Osun State, Nigeria</p>

      {status === "done" ? (
        <div className="rounded-lg bg-green-50 border border-green-200 text-green-700 px-4 py-3 text-sm">
          Thank you — your message has been received. We will get back to you shortly.
        </div>
      ) : (
        <form onSubmit={handleSubmit} className="grid sm:grid-cols-2 gap-4 bg-white border border-[var(--brand-border)] rounded-2xl p-6 shadow-sm">
          <div>
            <label className="text-sm font-medium">Name</label>
            <input required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })}
              className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm" />
          </div>
          <div>
            <label className="text-sm font-medium">Email</label>
            <input type="email" required value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })}
              className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm" />
          </div>
          <div>
            <label className="text-sm font-medium">Phone</label>
            <input value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })}
              className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm" />
          </div>
          <div>
            <label className="text-sm font-medium">Subject</label>
            <input value={form.subject} onChange={(e) => setForm({ ...form, subject: e.target.value })}
              className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm" />
          </div>
          <div className="sm:col-span-2">
            <label className="text-sm font-medium">Message</label>
            <textarea required rows={5} value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })}
              className="mt-1 w-full rounded-md border border-[var(--brand-border)] px-3 py-2 text-sm" />
          </div>
          {error && <p className="sm:col-span-2 text-sm text-red-600">{error}</p>}
          <div className="sm:col-span-2">
            <button type="submit" disabled={status === "loading"}
              className="w-full rounded-full bg-[var(--brand-magenta)] text-white py-3 font-semibold hover:bg-[var(--brand-blue)] transition-colors disabled:opacity-60">
              {status === "loading" ? "Sending..." : "Send Message"}
            </button>
          </div>
        </form>
      )}
    </div>
  );
}