import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { Header } from "@/components/site/Header";
import { Footer } from "@/components/site/Footer";
import { SignInModal, CartDrawer, CheckoutFlow } from "@/components/site/Modals";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Mail, Phone, MapPin, Clock } from "lucide-react";
import { toast } from "sonner";

export const Route = createFileRoute("/contact")({
  head: () => ({
    meta: [
      { title: "Contact Us — SulejaMarket" },
      { name: "description", content: "Get in touch with SulejaMarket support. We're here to help with orders, returns, and vendor inquiries." },
      { property: "og:title", content: "Contact SulejaMarket" },
      { property: "og:description", content: "Reach our support team by phone, email, or the contact form." },
    ],
  }),
  component: ContactPage,
});

function ContactPage() {
  const [signInOpen, setSignInOpen] = useState(false);
  const [cartOpen, setCartOpen] = useState(false);
  const [checkoutOpen, setCheckoutOpen] = useState(false);

  const [form, setForm] = useState({ name: "", email: "", subject: "", topic: "General", message: "" });
  const [submitting, setSubmitting] = useState(false);

  const set = (k: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) =>
    setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) {
      toast.error("Please fill in your name, email and message.");
      return;
    }
    setSubmitting(true);
    setTimeout(() => {
      setSubmitting(false);
      setForm({ name: "", email: "", subject: "", topic: "General", message: "" });
      toast.success("Message sent! We'll get back to you within 24 hours.");
    }, 700);
  };

  return (
    <div className="min-h-screen" style={{ backgroundColor: "#f0f2f5" }}>
      <SignInModal open={signInOpen} onOpenChange={setSignInOpen} />
      <CartDrawer open={cartOpen} onOpenChange={setCartOpen} onCheckout={() => { setCartOpen(false); setCheckoutOpen(true); }} />
      <CheckoutFlow open={checkoutOpen} onOpenChange={setCheckoutOpen} />

      <Header onOpenCart={() => setCartOpen(true)} onOpenSignIn={() => setSignInOpen(true)} />

      <main className="max-w-[1200px] mx-auto px-4 py-6">
        <div className="text-xs text-neutral-500 mb-3">Home / <span className="text-neutral-800">Contact Us</span></div>

        <div className="bg-gradient-to-r from-orange-500 to-orange-400 rounded-md p-6 text-white mb-4">
          <h1 className="text-2xl font-bold">Contact Us</h1>
          <p className="text-sm opacity-95 mt-1">Questions, feedback, or need help with an order? We're here for you.</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <aside className="md:col-span-1 space-y-3">
            <InfoCard icon={<Phone className="w-5 h-5" />} title="Call us" lines={["081 0265 8259", "Mon–Sat, 8am–7pm"]} />
            <InfoCard icon={<Mail className="w-5 h-5" />} title="Email" lines={["support@sulejamarket.ng", "vendors@sulejamarket.ng"]} />
            <InfoCard icon={<MapPin className="w-5 h-5" />} title="Address" lines={["Suleja, Niger State", "Nigeria"]} />
            <InfoCard icon={<Clock className="w-5 h-5" />} title="Support hours" lines={["Mon–Fri: 8am–7pm", "Sat: 9am–5pm"]} />
          </aside>

          <section className="md:col-span-2 bg-white rounded-md p-5">
            <h2 className="font-semibold text-lg mb-1">Send us a message</h2>
            <p className="text-sm text-neutral-500 mb-4">Fill out the form and our team will respond within 24 hours.</p>

            <form onSubmit={submit} className="space-y-3">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                <Field label="Full name *">
                  <Input value={form.name} onChange={set("name")} placeholder="Jane Doe" />
                </Field>
                <Field label="Email *">
                  <Input type="email" value={form.email} onChange={set("email")} placeholder="you@example.com" />
                </Field>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                <Field label="Topic">
                  <select
                    value={form.topic}
                    onChange={set("topic")}
                    className="w-full h-9 px-3 rounded-md border border-neutral-200 bg-white text-sm"
                  >
                    <option>General</option>
                    <option>Order issue</option>
                    <option>Returns & refunds</option>
                    <option>Vendor inquiry</option>
                    <option>Feedback</option>
                  </select>
                </Field>
                <Field label="Subject">
                  <Input value={form.subject} onChange={set("subject")} placeholder="How can we help?" />
                </Field>
              </div>
              <Field label="Message *">
                <textarea
                  value={form.message}
                  onChange={set("message")}
                  rows={6}
                  placeholder="Tell us more..."
                  className="w-full px-3 py-2 rounded-md border border-neutral-200 bg-white text-sm resize-y"
                />
              </Field>

              <div className="flex items-center justify-between pt-1">
                <span className="text-xs text-neutral-500">We'll never share your email.</span>
                <Button type="submit" disabled={submitting} className="bg-orange-500 hover:bg-orange-600 text-white">
                  {submitting ? "Sending..." : "Send message"}
                </Button>
              </div>
            </form>
          </section>
        </div>
      </main>
      <Footer />
    </div>
  );
}

function InfoCard({ icon, title, lines }: { icon: React.ReactNode; title: string; lines: string[] }) {
  return (
    <div className="bg-white rounded-md p-4 flex gap-3">
      <div className="w-9 h-9 rounded-full bg-orange-50 text-orange-500 flex items-center justify-center shrink-0">{icon}</div>
      <div>
        <div className="text-sm font-semibold text-neutral-800">{title}</div>
        {lines.map((l, i) => (
          <div key={i} className="text-xs text-neutral-500">{l}</div>
        ))}
      </div>
    </div>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <label className="block">
      <span className="block text-xs font-medium text-neutral-700 mb-1">{label}</span>
      {children}
    </label>
  );
}