import { useCallback, useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { X, CalendarDays, MessageCircle, Mail } from "lucide-react";
import { COMPANY } from "../data/site";

const TOPICS = [
  "General consultation",
  "Data Centre & Continuity",
  "Networking & Wireless",
  "Cybersecurity & SOC",
  "Cloud & Digital Workplace",
  "UC, AV & IoT",
  "Software / Data / AI",
  "Managed IT & Support",
];

interface MeetingModalProps {
  open?: boolean;
  onClose?: () => void;
}

/** Consultation-request modal: composes a pre-filled WhatsApp message or email. */
export default function MeetingModal({ open = false, onClose }: MeetingModalProps) {
  const [day, setDay] = useState("This week");
  const [slot, setSlot] = useState("Morning");
  const [topic, setTopic] = useState(TOPICS[0]);
  const [eventOpened, setEventOpened] = useState(false);

  useEffect(() => {
    const handler = () => setEventOpened(true);
    window.addEventListener("open-meeting", handler);
    return () => window.removeEventListener("open-meeting", handler);
  }, []);

  const show = open || eventOpened;
  const close = useCallback(() => {
    setEventOpened(false);
    onClose?.();
  }, [onClose]);

  // Escape closes the modal (parity with the search palette).
  useEffect(() => {
    if (!show) return;
    const h = (e: KeyboardEvent) => {
      if (e.key === "Escape") close();
    };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [show, close]);

  const text = encodeURIComponent(
    `Hi Aviokan Technologies, I'd like to book a consultation (${topic}). Preferred time: ${day}, ${slot}. Please confirm a slot. Thank you.`
  );
  const wa = `https://wa.me/${COMPANY.phoneHref.replace(/\D/g, "")}?text=${text}`;
  const mail = `mailto:connect@aviokan.com?subject=${encodeURIComponent(
    `Consultation request — ${topic}`
  )}&body=${encodeURIComponent(`Hello Aviokan Team,\n\nI'd like to book a consultation.\n\nTopic: ${topic}\nPreferred time: ${day}, ${slot}\n\nThank you.`)}`;

  return (
    <AnimatePresence>
      {show && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-[90] bg-[#14151A]/70 backdrop-blur-md flex items-end sm:items-center justify-center p-0 sm:p-6"
          onClick={close}
          data-testid="meeting-modal-backdrop"
        >
          <motion.div
            initial={{ y: 60, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            exit={{ y: 40, opacity: 0 }}
            transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
            className="w-full sm:max-w-md bg-[#1D1E24] border border-white/10 p-6 sm:p-7 relative"
            onClick={(e) => e.stopPropagation()}
            data-testid="meeting-modal"
            role="dialog"
            aria-modal="true"
            aria-label="Book a consultation"
          >
            <button
              onClick={close}
              className="absolute top-3.5 right-3.5 h-8 w-8 grid place-items-center border border-white/15 text-white/70 hover:text-white hover:border-cy/50 transition-colors"
              aria-label="Close"
              data-testid="meeting-modal-close"
            >
              <X size={15} />
            </button>
            <p className="text-[10px] font-tech tracking-[0.25em] text-cy flex items-center gap-2">
              <CalendarDays size={13} /> BOOK A CONSULTATION
            </p>
            <h3 className="font-display font-black text-xl text-white mt-2.5">Find a time with our team.</h3>
            <p className="text-[13px] text-white/55 mt-1.5">Pick a preference — we confirm by return message.</p>

            <p className="text-[10px] font-tech tracking-[0.2em] text-white/45 mt-5 mb-1.5">WHEN</p>
            <div className="flex flex-wrap gap-1.5">
              {["This week", "Next week", "Flexible"].map((d) => chip(d, day, setDay, "meeting-day"))}
            </div>
            <p className="text-[10px] font-tech tracking-[0.2em] text-white/45 mt-3.5 mb-1.5">TIME OF DAY</p>
            <div className="flex flex-wrap gap-1.5">
              {["Morning", "Afternoon", "Evening"].map((s) => chip(s, slot, setSlot, "meeting-slot"))}
            </div>
            <p className="text-[10px] font-tech tracking-[0.2em] text-white/45 mt-3.5 mb-1.5">TOPIC</p>
            <div className="flex flex-wrap gap-1.5">
              {TOPICS.map((t) => chip(t, topic, setTopic, "meeting-topic"))}
            </div>

            <div className="grid grid-cols-2 gap-2.5 mt-6">
              <a
                href={wa}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center justify-center gap-2 bg-[#25D366] text-[#0A1F44] font-bold text-[13px] py-3 hover:brightness-110 transition-all"
                data-testid="meeting-via-whatsapp"
              >
                <MessageCircle size={15} /> WhatsApp
              </a>
              <a
                href={mail}
                className="flex items-center justify-center gap-2 bg-ember text-white font-bold text-[13px] py-3 hover:bg-[#E54D16] transition-colors"
                data-testid="meeting-via-email"
              >
                <Mail size={15} /> Email
              </a>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

function chip(label: string, active: string, setActive: (v: string) => void, prefix: string) {
  return (
    <button
      key={label}
      onClick={() => setActive(label)}
      className={`text-[11.5px] font-bold px-3 py-1.5 border transition-colors duration-200 ${
        active === label
          ? "bg-cy text-[#0A1F44] border-cy"
          : "border-white/15 text-white/65 hover:text-white hover:border-cy/50"
      }`}
      data-testid={`${prefix}-${label.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`}
    >
      {label}
    </button>
  );
}

/** Fire from anywhere: Header CTA, contact page, quick actions. */
export function openMeetingModal() {
  window.dispatchEvent(new CustomEvent("open-meeting"));
}