import { useState, type FormEvent } from "react";
import { useServerFn } from "@tanstack/react-start";
import { toast } from "sonner";
import { submitEnquiry } from "@/lib/forms.functions";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const subjects = [
  "Speaking",
  "Book Order",
  "Mentorship & Vocal Coaching",
  "Collaboration",
  "General",
] as const;

/** Contact form — handled server-side, stored in the database. */
export function ContactForm() {
  const submitFn = useServerFn(submitEnquiry);
  const [busy, setBusy] = useState(false);
  const [subject, setSubject] = useState<string>("Speaking");
  const [done, setDone] = useState(false);

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = e.currentTarget;
    const data = new FormData(form);
    setBusy(true);
    const res = await submitFn({
      data: {
        name: String(data.get("name") ?? ""),
        email: String(data.get("email") ?? ""),
        phone: String(data.get("phone") ?? "") || null,
        subject,
        message: String(data.get("message") ?? ""),
      },
    });
    setBusy(false);
    if (!res.ok) {
      toast.error(res.error);
      return;
    }
    toast.success("Thank you — your message is on its way. Eva will be in touch.");
    form.reset();
    setDone(true);
  }

  return (
    <form onSubmit={onSubmit} className="grid gap-6 sm:grid-cols-2">
      <div className="grid gap-2">
        <Label htmlFor="contact-name">Name</Label>
        <Input id="contact-name" name="name" required placeholder="Your full name" />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="contact-email">Email</Label>
        <Input id="contact-email" name="email" type="email" required placeholder="you@example.com" />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="contact-phone">Phone (optional)</Label>
        <Input id="contact-phone" name="phone" type="tel" placeholder="+254…" />
      </div>
      <div className="grid gap-2">
        <Label>Subject</Label>
        <Select value={subject} onValueChange={setSubject}>
          <SelectTrigger className="w-full">
            <SelectValue placeholder="Choose a subject" />
          </SelectTrigger>
          <SelectContent>
            {subjects.map((s) => (
              <SelectItem key={s} value={s}>
                {s}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
      <div className="grid gap-2 sm:col-span-2">
        <Label htmlFor="contact-message">Message</Label>
        <Textarea
          id="contact-message"
          name="message"
          required
          rows={6}
          placeholder="Tell me a little about your event, order, or the journey you'd like to walk together…"
        />
      </div>
      <div className="sm:col-span-2">
        <Button type="submit" variant="green" size="xl" disabled={busy}>
          {busy ? "Sending…" : done ? "Message sent — thank you" : "Send message"}
        </Button>
      </div>
    </form>
  );
}