import { createFileRoute } from "@tanstack/react-router";
import { SiteLayout } from "@/components/site/SiteLayout";
import { Mail, Phone, MapPin, Send, Loader2, CheckCircle2, AlertCircle } from "lucide-react";
import { useState } from "react";
import { submitEnquiry } from "@/lib/website-api";
import { toast } from "sonner";

export const Route = createFileRoute("/contact")({
  head: () => ({
    meta: [
      { title: "Contact Airfis — We're here to help" },
      {
        name: "description",
        content:
          "Reach the Airfis team by email, phone or our contact form. Business hours and office location included.",
      },
      { property: "og:title", content: "Contact Airfis" },
      { property: "og:description", content: "Get in touch with the Airfis team." },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: Contact,
});

function Contact() {
  const [fullName, setFullName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [topic, setTopic] = useState("");
  const [message, setMessage] = useState("");

  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submittedId, setSubmittedId] = useState<string | null>(null);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setErrorMessage(null);

    // Client-side validations
    if (!fullName.trim() || fullName.trim().length < 2) {
      setErrorMessage("Please enter your full name (minimum 2 characters).");
      return;
    }

    if (!email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) {
      setErrorMessage("Please provide a valid email address.");
      return;
    }

    if (!message.trim() || message.trim().length < 5) {
      setErrorMessage("Please enter a message (at least 5 characters).");
      return;
    }

    setIsSubmitting(true);

    try {
      const result = await submitEnquiry({
        fullName: fullName.trim(),
        email: email.trim(),
        phone: phone.trim() || undefined,
        topic: topic.trim() || "General",
        message: message.trim(),
      });

      setSubmittedId(result.enquiryId);
      toast.success(result.message || "Enquiry sent successfully!", {
        description: `Reference: ${result.enquiryId}`,
      });

      // Clear fields upon successful submission
      setFullName("");
      setEmail("");
      setPhone("");
      setTopic("");
      setMessage("");
    } catch (err: unknown) {
      const errObj = err as Error & { status?: number };
      const displayMsg =
        errObj.status === 409
          ? "We recently received your inquiry! Our team is already reviewing it."
          : errObj.message || "Failed to submit enquiry. Please check your network and try again.";

      setErrorMessage(displayMsg);
      toast.error("Submission issue", {
        description: displayMsg,
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <SiteLayout>
      <section className="pt-16 lg:pt-24 pb-16">
        <div className="container-airfis grid lg:grid-cols-12 gap-12">
          <div className="lg:col-span-5">
            <p className="eyebrow">Contact</p>
            <h1 className="h-display mt-6 text-ink">Let's talk.</h1>
            <p className="mt-6 text-lg text-ink-2">
              Whether you're an owner, partner or investor — we'd love to hear from you.
            </p>

            <ul className="mt-10 space-y-5">
              <Item icon={Mail} label="Email" value="hello@airfis.in" />
              <Item icon={Phone} label="Phone" value="+91 90000 00000" />
              <Item icon={MapPin} label="Office" value="Race Course Road, Coimbatore, TN 641018" />
            </ul>
          </div>

          <div className="lg:col-span-7">
            <form className="surface-card p-8" onSubmit={handleSubmit}>
              {/* Success Notification Banner */}
              {submittedId && (
                <div className="mb-6 p-4 rounded-2xl bg-emerald-50 border border-emerald-200 flex items-start gap-3">
                  <CheckCircle2 className="w-5 h-5 text-emerald-600 shrink-0 mt-0.5" />
                  <div>
                    <h4 className="text-sm font-semibold text-emerald-950">Thank you for reaching out!</h4>
                    <p className="text-xs text-emerald-800 mt-1">
                      Your enquiry has been logged with reference{" "}
                      <span className="font-mono font-bold">{submittedId}</span>. Our team will review
                      and get back to you shortly.
                    </p>
                  </div>
                </div>
              )}

              {/* Error Notification Banner */}
              {errorMessage && (
                <div className="mb-6 p-4 rounded-2xl bg-rose-50 border border-rose-200 flex items-start gap-3">
                  <AlertCircle className="w-5 h-5 text-rose-600 shrink-0 mt-0.5" />
                  <div>
                    <h4 className="text-sm font-semibold text-rose-950">Submission notice</h4>
                    <p className="text-xs text-rose-800 mt-1">{errorMessage}</p>
                  </div>
                </div>
              )}

              <div className="grid md:grid-cols-2 gap-5">
                <div>
                  <label className="text-xs uppercase tracking-widest text-ink-2">Full name *</label>
                  <input
                    type="text"
                    required
                    value={fullName}
                    onChange={(e) => setFullName(e.target.value)}
                    placeholder="Your name"
                    className="mt-2 w-full rounded-xl border border-hairline px-4 py-3 focus:outline-none focus:border-primary text-sm"
                  />
                </div>

                <div>
                  <label className="text-xs uppercase tracking-widest text-ink-2">Email *</label>
                  <input
                    type="email"
                    required
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="name@example.com"
                    className="mt-2 w-full rounded-xl border border-hairline px-4 py-3 focus:outline-none focus:border-primary text-sm"
                  />
                </div>

                <div>
                  <label className="text-xs uppercase tracking-widest text-ink-2">Phone</label>
                  <input
                    type="tel"
                    value={phone}
                    onChange={(e) => setPhone(e.target.value)}
                    placeholder="+91 98400 00000"
                    className="mt-2 w-full rounded-xl border border-hairline px-4 py-3 focus:outline-none focus:border-primary text-sm"
                  />
                </div>

                <div>
                  <label className="text-xs uppercase tracking-widest text-ink-2">Topic</label>
                  <input
                    type="text"
                    value={topic}
                    onChange={(e) => setTopic(e.target.value)}
                    placeholder="Support · Partner · Press"
                    className="mt-2 w-full rounded-xl border border-hairline px-4 py-3 focus:outline-none focus:border-primary text-sm"
                  />
                </div>
              </div>

              <div className="mt-5">
                <label className="text-xs uppercase tracking-widest text-ink-2">Message *</label>
                <textarea
                  rows={5}
                  required
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                  placeholder="Tell us what you need help with..."
                  className="mt-2 w-full rounded-xl border border-hairline px-4 py-3 focus:outline-none focus:border-primary text-sm"
                />
              </div>

              <button
                type="submit"
                disabled={isSubmitting}
                className="mt-6 btn-brand inline-flex items-center gap-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {isSubmitting ? (
                  <>
                    <Loader2 className="w-4 h-4 animate-spin" /> Sending message...
                  </>
                ) : (
                  <>
                    <Send className="w-4 h-4" /> Send message
                  </>
                )}
              </button>
            </form>

            <div className="mt-6 rounded-3xl overflow-hidden border border-hairline aspect-[16/9] bg-surface relative">
              <svg viewBox="0 0 800 400" className="w-full h-full">
                <rect width="800" height="400" fill="#f5f5f7" />
                <g stroke="#e7e7ea" strokeWidth="14" fill="none" strokeLinecap="round">
                  <path d="M 40 100 L 780 90" />
                  <path d="M 20 220 L 780 210" />
                  <path d="M 40 340 L 780 330" />
                  <path d="M 200 20 L 220 380" />
                  <path d="M 500 20 L 520 380" />
                </g>
                <circle cx="400" cy="200" r="14" fill="#FF4308" />
                <circle
                  cx="400"
                  cy="200"
                  r="26"
                  fill="#FF4308"
                  opacity="0.2"
                  className="pulse-ring"
                />
              </svg>
            </div>
          </div>
        </div>
      </section>
    </SiteLayout>
  );
}

function Item({
  icon: Icon,
  label,
  value,
}: {
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  value: React.ReactNode;
}) {
  return (
    <li className="flex items-start gap-4">
      <div className="w-10 h-10 rounded-xl bg-[#f3f3f3] text-[#0a0a12] flex items-center justify-center">
        <Icon className="w-4 h-4" />
      </div>
      <div>
        <div className="text-xs uppercase tracking-widest text-ink-2">{label}</div>
        <div className="text-ink font-medium">{value}</div>
      </div>
    </li>
  );
}