import { createFileRoute } from "@tanstack/react-router";
import { useState, type FormEvent } from "react";
import { z } from "zod";
import { CheckCircle2 } from "lucide-react";
import { SiteLayout } from "@/components/site/Layout";
import { PLANS, SITE } from "@/lib/site";

const planIds = ["essential", "premium", "ultimate"] as const;

export const Route = createFileRoute("/contact")({
  validateSearch: (s: Record<string, unknown>): { plan?: (typeof planIds)[number] } =>
    planIds.includes(s["plan"] as never) ? { plan: s["plan"] as (typeof planIds)[number] } : {},
  head: () => ({
    meta: [
      { title: "Contact & Get Started — FHD Media UK" },
      { name: "description", content: "Contact FHD Media UK about a package, device compatibility or setup support." },
      { property: "og:title", content: "Contact FHD Media UK" },
      { property: "og:description", content: "Get in touch about packages, compatible devices and setup." },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary" },
    ],
  }),
  component: Contact,
});

const schema = z.object({
  name: z.string().trim().min(2, "Please enter your name").max(100),
  email: z.string().trim().email("Please enter a valid email address").max(255),
  plan: z.string(),
  device: z.string().trim().max(100),
  message: z.string().trim().min(10, "Please write at least 10 characters").max(1000),
  consent: z.literal(true, { errorMap: () => ({ message: "Please agree to the Privacy Policy" }) }),
});

const field = "mt-1.5 w-full rounded-xl border border-input bg-background/60 px-4 py-3 outline-none focus:border-primary focus:ring-2 focus:ring-ring/40";

function Contact() {
  const { plan } = Route.useSearch();
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [done, setDone] = useState(false);

  const submit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const fd = new FormData(e.currentTarget);
    const res = schema.safeParse({ ...Object.fromEntries(fd), consent: fd.get("consent") === "on" });
    if (!res.success) {
      const errs: Record<string, string> = {};
      res.error.issues.forEach((i) => (errs[String(i.path[0])] ??= i.message));
      setErrors(errs);
      return;
    }
    setErrors({});
    // TODO: connect to your email/CRM or checkout provider.
    setDone(true);
  };

  const err = (k: string) => errors[k] && <p id={`${k}-err`} className="mt-1 text-sm text-destructive">{errors[k]}</p>;

  return (
    <SiteLayout>
      <section className="mx-auto grid max-w-6xl gap-12 px-5 py-20 lg:grid-cols-2">
        <div>
          <h1 className="text-4xl font-bold sm:text-5xl">Get started with <span className="text-brand">FHD Media UK</span></h1>
          <p className="mt-5 text-muted-foreground">Tell us which package interests you and the devices you use. Our team will reply with package details and next steps.</p>
          <dl className="mt-8 space-y-3 text-sm">
            <div><dt className="text-muted-foreground">Email</dt><dd>{SITE.email}</dd></div>
            <div><dt className="text-muted-foreground">Phone</dt><dd>{SITE.phone}</dd></div>
            <div><dt className="text-muted-foreground">Address</dt><dd>{SITE.address}</dd></div>
          </dl>
        </div>
        <div className="glass rounded-3xl p-8">
          {done ? (
            <div role="status" className="py-10 text-center">
              <CheckCircle2 className="mx-auto h-14 w-14 text-success" />
              <h2 className="mt-4 text-2xl font-semibold">Thanks — message received</h2>
              <p className="mt-2 text-muted-foreground">We'll be in touch soon.</p>
            </div>
          ) : (
            <form onSubmit={submit} noValidate className="space-y-5">
              <div><label htmlFor="name" className="text-sm font-medium">Name</label>
                <input id="name" name="name" className={field} aria-invalid={!!errors["name"]} aria-describedby="name-err" />{err("name")}</div>
              <div><label htmlFor="email" className="text-sm font-medium">Email</label>
                <input id="email" name="email" type="email" className={field} aria-invalid={!!errors["email"]} aria-describedby="email-err" />{err("email")}</div>
              <div><label htmlFor="plan" className="text-sm font-medium">Package</label>
                <select id="plan" name="plan" defaultValue={plan ?? "unsure"} className={field}>
                  {PLANS.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
                  <option value="unsure">Not sure yet</option>
                </select></div>
              <div><label htmlFor="device" className="text-sm font-medium">Your device(s) <span className="text-muted-foreground">(optional)</span></label>
                <input id="device" name="device" className={field} /></div>
              <div><label htmlFor="message" className="text-sm font-medium">Message</label>
                <textarea id="message" name="message" rows={4} className={field} aria-invalid={!!errors["message"]} aria-describedby="message-err" />{err("message")}</div>
              <div><label className="flex items-start gap-3 text-sm"><input type="checkbox" name="consent" className="mt-1 accent-primary" />
                <span>I agree to my details being used to respond to this enquiry, as described in the <a href="/privacy" className="text-primary underline">Privacy Policy</a>.</span></label>{err("consent")}</div>
              <button className="w-full rounded-full bg-brand py-3.5 font-semibold text-primary-foreground shadow-glow transition-transform hover:scale-[1.02]">Send enquiry</button>
            </form>
          )}
        </div>
      </section>
    </SiteLayout>
  );
}