import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { PageHero } from "@/components/site/page-hero";
import { Container, Kicker } from "@/components/site/section";
import { Button } from "@/components/ui/button";
import { Field, Input, Select, Textarea } from "@/components/ui/field";
import { brand } from "@/data/site";
import { pageHead } from "@/lib/seo";
import { uid } from "@/lib/utils";

export const Route = createFileRoute("/contact")({
  component: ContactPage,
  head: () =>
    pageHead(
      "Contact",
      "Tell FerryLore about your story — weddings, events, portraits, travel, and cinematic films in Virginia, Maryland, and Washington, DC.",
    ),
});

function ContactPage() {
  const [sent, setSent] = useState<string | null>(null);
  const [error, setError] = useState("");
  const [form, setForm] = useState({
    name: "",
    email: "",
    phone: "",
    type: "Wedding",
    date: "",
    location: "",
    budget: "",
    looking: "",
  });

  function submit(e: React.FormEvent) {
    e.preventDefault();
    if (!form.name.trim() || !form.email.includes("@") || !form.looking.trim()) {
      setError("Name, email, and a few words about what you’re looking for, please.");
      return;
    }
    const id = uid("INQ");
    try {
      const prev = JSON.parse(localStorage.getItem("ferrylore-inquiries") || "[]") as unknown[];
      localStorage.setItem(
        "ferrylore-inquiries",
        JSON.stringify([{ id, ...form, at: new Date().toISOString() }, ...prev].slice(0, 30)),
      );
    } catch {
      /* ignore */
    }
    setSent(id);
  }

  return (
    <main id="main">
      <PageHero
        kicker="Contact"
        title="Let’s create something you’ll want to remember."
        lede="Tell us about your story — or skip the form and book a date."
        image="/images/virginia-landscape.jpg"
        primary={{ label: "Create My Story", to: "/book" }}
      />
      <section className="bg-ink py-24">
        <Container className="grid gap-16 lg:grid-cols-12">
          <div className="lg:col-span-5">
            <Kicker>Prefer to talk?</Kicker>
            <h2 className="font-serif text-4xl">Schedule a consultation</h2>
            <p className="mt-4 text-muted">
              {brand.location}
            </p>
            <p className="mt-6 text-sm">
              <a className="text-ivory hover:text-gold" href={`mailto:${brand.email}`}>
                {brand.email}
              </a>
            </p>
            <p className="mt-2 text-sm">
              <a className="text-ivory hover:text-gold" href={`tel:+15715550148`}>
                {brand.phone}
              </a>
            </p>
            <div className="mt-8">
              <Button to="/book" variant="outline">
                Create My Story
              </Button>
            </div>
          </div>
          <div className="lg:col-span-7">
            {sent ? (
              <div className="rounded-xl border border-line bg-ink-soft p-8">
                <p className="text-[0.7rem] uppercase tracking-[0.22em] text-gold">Received</p>
                <h2 className="mt-3 font-serif text-4xl">We have your story.</h2>
                <p className="mt-4 text-muted">
                  Reference {sent}. We’ll write back within one business day.
                </p>
              </div>
            ) : (
              <form onSubmit={submit} className="grid gap-5 sm:grid-cols-2">
                <Field label="Name" htmlFor="cname">
                  <Input
                    id="cname"
                    value={form.name}
                    onChange={(e) => setForm({ ...form, name: e.target.value })}
                    autoComplete="name"
                  />
                </Field>
                <Field label="Email" htmlFor="cemail">
                  <Input
                    id="cemail"
                    type="email"
                    value={form.email}
                    onChange={(e) => setForm({ ...form, email: e.target.value })}
                    autoComplete="email"
                  />
                </Field>
                <Field label="Phone" htmlFor="cphone">
                  <Input
                    id="cphone"
                    value={form.phone}
                    onChange={(e) => setForm({ ...form, phone: e.target.value })}
                    autoComplete="tel"
                  />
                </Field>
                <Field label="Event type" htmlFor="ctype">
                  <Select
                    id="ctype"
                    value={form.type}
                    onChange={(e) => setForm({ ...form, type: e.target.value })}
                  >
                    {["Wedding", "Event", "Portrait", "Travel", "Business", "AI Experience", "Other"].map(
                      (t) => (
                        <option key={t}>{t}</option>
                      ),
                    )}
                  </Select>
                </Field>
                <Field label="Date" htmlFor="cdate">
                  <Input
                    id="cdate"
                    type="date"
                    value={form.date}
                    onChange={(e) => setForm({ ...form, date: e.target.value })}
                  />
                </Field>
                <Field label="Location" htmlFor="cloc">
                  <Input
                    id="cloc"
                    value={form.location}
                    onChange={(e) => setForm({ ...form, location: e.target.value })}
                  />
                </Field>
                <div className="sm:col-span-2">
                  <Field label="Estimated budget" htmlFor="cbudget">
                    <Select
                      id="cbudget"
                      value={form.budget}
                      onChange={(e) => setForm({ ...form, budget: e.target.value })}
                    >
                      <option value="">Select</option>
                      <option>Under $500</option>
                      <option>$500–$1,000</option>
                      <option>$1,000–$2,500</option>
                      <option>$2,500+</option>
                      <option>Not sure yet</option>
                    </Select>
                  </Field>
                </div>
                <div className="sm:col-span-2">
                  <Field label="What are you looking for?" htmlFor="clook">
                    <Textarea
                      id="clook"
                      value={form.looking}
                      onChange={(e) => setForm({ ...form, looking: e.target.value })}
                    />
                  </Field>
                </div>
                {error ? <p className="sm:col-span-2 text-sm text-gold">{error}</p> : null}
                <div className="sm:col-span-2">
                  <Button type="submit">Send my story</Button>
                </div>
              </form>
            )}
          </div>
        </Container>
      </section>
    </main>
  );
}