import { createFileRoute } from "@tanstack/react-router";
import { PageBanner } from "./about";
import { Phone, Mail, MapPin, Clock } from "lucide-react";
import { useState } from "react";

export const Route = createFileRoute("/contact")({
  head: () => ({
    meta: [
      { title: "Contact — Global Market Connections Co. Ltd" },
      { name: "description", content: "Reach Global Market Connections in City Mall, Juba, South Sudan. Call +211 922 999 832 or email info@globalmarketconnectionscoltd.com." },
      { property: "og:title", content: "Contact GMC" },
      { property: "og:description", content: "City Mall, Juba, South Sudan · +211 922 999 832 · info@globalmarketconnectionscoltd.com" },
    ],
  }),
  component: Contact,
});

const CONTACT_EMAIL = "info@globalmarketconnectionscoltd.com";

function Contact() {
  const [sent, setSent] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setError(null);
    const fd = new FormData(e.currentTarget);
    const name = String(fd.get("name") ?? "").trim().slice(0, 100);
    const company = String(fd.get("company") ?? "").trim().slice(0, 100);
    const email = String(fd.get("email") ?? "").trim().slice(0, 255);
    const phone = String(fd.get("phone") ?? "").trim().slice(0, 40);
    const subject = String(fd.get("subject") ?? "").trim().slice(0, 150) || "Website Enquiry";
    const message = String(fd.get("message") ?? "").trim().slice(0, 2000);

    if (!name || !email || !message) { setError("Please fill in name, email and message."); return; }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setError("Please enter a valid email address."); return; }

    const body = `Name: ${name}\nCompany: ${company}\nEmail: ${email}\nPhone: ${phone}\n\nMessage:\n${message}`;
    const href = `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    window.location.href = href;
    setSent(true);
  };

  return (
    <>
      <PageBanner title="Contact Us" caption="Get in touch" />
      <section className="bg-ivory">
        <div className="container-classic grid gap-12 py-20 md:grid-cols-12">
          <aside className="md:col-span-5">
            <p className="text-xs uppercase tracking-[0.4em] text-gold">Our Office</p>
            <span className="gold-rule mt-4" />
            <h2 className="mt-5 font-serif text-3xl text-navy-deep">We'd be delighted to hear from you.</h2>
            <p className="mt-4 text-muted-foreground">
              For enquiries, partnerships or procurement requests, please reach our team using any
              of the channels below. We aim to respond to all messages within one business day.
            </p>
            <ul className="mt-8 space-y-5 text-base">
              <li className="flex gap-3"><MapPin className="text-gold mt-1" size={20}/><span><strong className="font-serif text-navy-deep">Address</strong><br/>City Mall, Juba, Republic of South Sudan</span></li>
              <li className="flex gap-3"><Phone className="text-gold mt-1" size={20}/><span><strong className="font-serif text-navy-deep">Telephone</strong><br/>+211 (0) 922 999 832<br/>+211 (0) 912 999 832</span></li>
              <li className="flex gap-3"><Mail className="text-gold mt-1" size={20}/><span><strong className="font-serif text-navy-deep">Email</strong><br/><a href={`mailto:${CONTACT_EMAIL}`} className="underline decoration-gold underline-offset-4 hover:text-gold">{CONTACT_EMAIL}</a></span></li>
              <li className="flex gap-3"><Clock className="text-gold mt-1" size={20}/><span><strong className="font-serif text-navy-deep">Office Hours</strong><br/>Mon – Sat · 08:00 – 18:00</span></li>
            </ul>
          </aside>

          <form onSubmit={handleSubmit} className="md:col-span-7 bg-card border border-border p-8 md:p-10">
            <p className="text-xs uppercase tracking-[0.4em] text-gold">Send a Message</p>
            <h3 className="mt-3 font-serif text-2xl text-navy-deep">Request a quote or information</h3>
            <span className="gold-rule mt-4" />

            <div className="mt-8 grid gap-5 sm:grid-cols-2">
              <Field label="Full Name" name="name" required maxLength={100} />
              <Field label="Company" name="company" maxLength={100} />
              <Field label="Email Address" name="email" type="email" required maxLength={255} />
              <Field label="Telephone" name="phone" maxLength={40} />
            </div>
            <div className="mt-5">
              <Field label="Subject" name="subject" maxLength={150} />
            </div>
            <div className="mt-5">
              <label className="block font-serif text-sm text-navy-deep">Message *</label>
              <textarea name="message" required rows={6} maxLength={2000} className="mt-2 w-full border border-input bg-background px-3 py-2.5 text-base text-foreground outline-none focus:border-gold focus:ring-1 focus:ring-gold"/>
            </div>

            <button type="submit" className="mt-8 inline-flex items-center bg-navy px-8 py-3.5 font-serif text-ivory hover:bg-navy-deep">
              Send Enquiry
            </button>
            {error && <p className="mt-4 text-sm text-destructive">{error}</p>}
            {sent && !error && (
              <p className="mt-4 text-sm text-navy">
                Thank you — your email client has opened with your message addressed to {CONTACT_EMAIL}. Please click Send to deliver it.
              </p>
            )}
          </form>
        </div>
      </section>
    </>
  );
}

function Field({ label, name, type = "text", required, maxLength }: { label: string; name: string; type?: string; required?: boolean; maxLength?: number }) {
  return (
    <div>
      <label className="block font-serif text-sm text-navy-deep">{label}{required && " *"}</label>
      <input name={name} type={type} required={required} maxLength={maxLength} className="mt-2 w-full border border-input bg-background px-3 py-2.5 text-base text-foreground outline-none focus:border-gold focus:ring-1 focus:ring-gold"/>
    </div>
  );
}