import { useState, type FormEvent } from "react";
import { createFileRoute } from "@tanstack/react-router";
import { AlertTriangle, Clock, Mail, MapPin, Phone } from "lucide-react";
import { PageHero } from "@/components/site/PageHero";
import { site } from "@/lib/site-data";

export const Route = createFileRoute("/contact")({
  head: () => ({
    meta: [
      { title: "Contact Us — Ward 8 Gynaecology & Obstetrics, JPMC" },
      {
        name: "description",
        content:
          "Location, OPD timings, phone, email and enquiry form for Ward 8, Department of Gynaecology & Obstetrics, Jinnah Postgraduate Medical Centre, Karachi.",
      },
      { property: "og:title", content: "Contact Ward 8 — Gynaecology & Obstetrics, JPMC" },
      {
        property: "og:description",
        content: "Find us at JPMC Karachi. OPD Mon–Sat, 8:00 AM–2:00 PM. Emergency care 24/7.",
      },
    ],
  }),
  component: ContactPage,
});

const field =
  "mt-2 w-full rounded-lg border border-border bg-white px-4 py-2.5 text-sm text-navy outline-none focus:border-teal focus:ring-2 focus:ring-teal/20";
const label = "block text-sm font-medium text-navy";

const details = [
  { icon: MapPin, title: "Location", lines: ["Ward 8", site.address] },
  { icon: Clock, title: "OPD Timings", lines: [site.opd, "Emergency care available 24 / 7"] },
  {
    icon: Phone,
    title: "Telephone",
    href: `tel:${site.phone}`,
    lines: [site.phone, "Hospital exchange, ask for Ward 8"],
  },
  { icon: Mail, title: "Email", href: `mailto:${site.email}`, lines: [site.email] },
];

function ContactPage() {
  const [sent, setSent] = useState(false);

  function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setSent(true);
  }

  return (
    <main id="main-content">
      <PageHero
        eyebrow="Get in Touch"
        title="Contact Ward 8"
        intro="For appointments, enquiries, or general information about the Department of Gynaecology & Obstetrics at JPMC, Karachi."
      />

      <section className="py-16 sm:py-20">
        <div className="mx-auto grid max-w-7xl gap-12 px-4 sm:px-6 lg:grid-cols-2">
          <div>
            <h2 className="font-display text-2xl font-bold text-navy sm:text-3xl">
              Department Details
            </h2>
            <div className="mt-5 h-1 w-12 rounded-full bg-teal" />

            <div className="mt-8 space-y-4">
              {details.map((d) => (
                <div
                  key={d.title}
                  className="grid grid-cols-[auto_minmax(0,1fr)] gap-4 rounded-xl border border-border bg-card p-5"
                >
                  <span className="grid size-10 shrink-0 place-items-center rounded-lg bg-teal-soft text-teal">
                    <d.icon className="size-5" aria-hidden />
                  </span>
                  <div className="min-w-0">
                    <h3 className="font-display text-sm font-bold text-navy">{d.title}</h3>
                    {d.lines.map((l, i) => (
                      <p key={l} className="mt-1 text-sm leading-relaxed text-muted-foreground">
                        {i === 0 && d.href ? (
                          <a href={d.href} className="break-all hover:text-teal">
                            {l}
                          </a>
                        ) : (
                          l
                        )}
                      </p>
                    ))}
                  </div>
                </div>
              ))}
            </div>

            <div className="mt-6 flex gap-4 rounded-xl border border-destructive/20 bg-destructive/5 p-6">
              <AlertTriangle className="mt-0.5 size-5 shrink-0 text-destructive" aria-hidden />
              <div>
                <h3 className="eyebrow text-navy">Medical Emergency</h3>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                  This form is not monitored around the clock and must not be used for emergencies.
                  In an obstetric or gynaecological emergency, go directly to the Emergency
                  Department — emergency care is available 24 hours a day, 7 days a week.
                </p>
              </div>
            </div>
          </div>

          <div className="rounded-xl border border-border bg-card p-7 sm:p-8">
            <h2 className="font-display text-xl font-bold text-navy">Send Us a Message</h2>

            {sent ? (
              <p className="mt-6 rounded-lg border border-teal/20 bg-teal-soft p-5 text-sm leading-relaxed text-navy">
                Thank you for your message. Our team will respond to non-urgent enquiries as soon as
                possible.
              </p>
            ) : (
              <form className="mt-6 space-y-5" onSubmit={onSubmit}>
                <div>
                  <label className={label} htmlFor="c-name">
                    Full Name *
                  </label>
                  <input id="c-name" name="name" required className={field} />
                </div>
                <div className="grid gap-5 sm:grid-cols-2">
                  <div>
                    <label className={label} htmlFor="c-email">
                      Email Address *
                    </label>
                    <input id="c-email" name="email" type="email" required className={field} />
                  </div>
                  <div>
                    <label className={label} htmlFor="c-phone">
                      Phone Number
                    </label>
                    <input id="c-phone" name="phone" className={field} />
                  </div>
                </div>
                <div>
                  <label className={label} htmlFor="c-subject">
                    Subject *
                  </label>
                  <select id="c-subject" name="subject" required defaultValue="" className={field}>
                    <option value="" disabled>
                      Select a subject…
                    </option>
                    <option>General enquiry</option>
                    <option>Appointment information</option>
                    <option>Patient records</option>
                    <option>Academic / training enquiry</option>
                    <option>Feedback</option>
                    <option>Other</option>
                  </select>
                </div>
                <div>
                  <label className={label} htmlFor="c-message">
                    Message *
                  </label>
                  <textarea id="c-message" name="message" rows={6} required className={field} />
                </div>
                <button
                  type="submit"
                  className="w-full rounded-lg bg-navy px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-navy-deep"
                >
                  Send Message
                </button>
                <p className="text-xs leading-relaxed text-muted-foreground">
                  Please do not include sensitive medical details in this form. For clinical matters
                  visit the OPD during working hours.
                </p>
              </form>
            )}
          </div>
        </div>
      </section>
    </main>
  );
}