"use client";

import * as React from "react";
import { motion, AnimatePresence } from "framer-motion";
import { MessageCircle, X, Phone, Calendar, MapPin } from "lucide-react";
import { worksContent } from "@/lib/works-content";
import { cn } from "@/lib/utils";

const WA_BOOK = encodeURIComponent(
  "Hi The Works, I'd like to book a table.",
);
const WA_ORDER = encodeURIComponent(
  "Hi The Works, I'd like to place a takeaway order.",
);
const WA_ENQUIRE = encodeURIComponent(
  "Hi The Works, I have a question.",
);

export function WorksWhatsAppWidget() {
  const [open, setOpen] = React.useState(false);

  return (
    <div className="fixed bottom-5 left-5 z-[55] flex flex-col items-start gap-3 sm:bottom-6 sm:left-6">
      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ opacity: 0, y: 20, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 20, scale: 0.95 }}
            transition={{ type: "spring", stiffness: 320, damping: 28 }}
            className="w-[290px] overflow-hidden rounded-2xl border border-border bg-card shadow-[0_20px_60px_-20px_rgba(0,0,0,0.6)]"
          >
            <div className="flex items-center justify-between border-b border-border/60 bg-[#075E54] px-4 py-3">
              <div className="flex items-center gap-2.5">
                <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/15">
                  <MessageCircle className="h-4 w-4 text-white" />
                </span>
                <div className="leading-tight">
                  <p className="text-sm font-semibold text-white">The Works on WhatsApp</p>
                  <p className="text-[10px] text-white/70">Bookings · Orders · Enquiries</p>
                </div>
              </div>
              <button
                type="button"
                onClick={() => setOpen(false)}
                className="inline-flex h-7 w-7 items-center justify-center rounded-full text-white/80 transition-colors hover:bg-white/15 hover:text-white"
                aria-label="Close WhatsApp panel"
              >
                <X className="h-3.5 w-3.5" />
              </button>
            </div>
            <div className="flex flex-col gap-2 p-3">
              <motion.a
                href={`https://wa.me/${worksContent.phoneE164}?text=${WA_BOOK}`}
                target="_blank"
                rel="noopener noreferrer"
                initial={{ opacity: 0, x: -12 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.08 }}
                className="group flex items-center gap-3 rounded-xl border border-amber-500/30 bg-amber-500/5 p-3 transition-colors hover:border-amber-500/50 hover:bg-amber-500/10"
              >
                <span className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-amber-600 to-amber-500 text-white">
                  <Calendar className="h-4 w-4" />
                </span>
                <div className="min-w-0 flex-1">
                  <p className="text-sm font-semibold text-foreground">Book a table</p>
                  <p className="text-[11px] text-muted-foreground">Reserve your spot via WhatsApp</p>
                </div>
                <span className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-amber-500/15 text-amber-600 transition-colors group-hover:bg-amber-500 group-hover:text-white">
                  <MessageCircle className="h-3.5 w-3.5" />
                </span>
              </motion.a>

              <motion.a
                href={`https://wa.me/${worksContent.phoneE164}?text=${WA_ORDER}`}
                target="_blank"
                rel="noopener noreferrer"
                initial={{ opacity: 0, x: -12 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.16 }}
                className="group flex items-center gap-3 rounded-xl border border-border/60 bg-background/60 p-3 transition-colors hover:border-[#25D366]/40 hover:bg-[#25D366]/5"
              >
                <span className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-[#25D366] to-[#128C7E] text-white">
                  <MessageCircle className="h-4 w-4" />
                </span>
                <div className="min-w-0 flex-1">
                  <p className="text-sm font-semibold text-foreground">Place an order</p>
                  <p className="text-[11px] text-muted-foreground">Takeaway or collection</p>
                </div>
                <span className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-[#25D366]/15 text-[#25D366] transition-colors group-hover:bg-[#25D366] group-hover:text-white">
                  <MessageCircle className="h-3.5 w-3.5" />
                </span>
              </motion.a>

              <motion.a
                href={`https://wa.me/${worksContent.phoneE164}?text=${WA_ENQUIRE}`}
                target="_blank"
                rel="noopener noreferrer"
                initial={{ opacity: 0, x: -12 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.24 }}
                className="group flex items-center gap-3 rounded-xl border border-border/60 bg-background/60 p-3 transition-colors hover:border-[#25D366]/40 hover:bg-[#25D366]/5"
              >
                <span className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-[#25D366] to-[#128C7E] text-white">
                  <Phone className="h-4 w-4" />
                </span>
                <div className="min-w-0 flex-1">
                  <p className="text-sm font-semibold text-foreground">General enquiry</p>
                  <p className="text-[11px] text-muted-foreground">Ask us anything</p>
                </div>
                <span className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-[#25D366]/15 text-[#25D366] transition-colors group-hover:bg-[#25D366] group-hover:text-white">
                  <MessageCircle className="h-3.5 w-3.5" />
                </span>
              </motion.a>

              <div className="mt-1 flex items-center justify-center gap-1.5 border-t border-border/60 pt-2 text-[10px] text-muted-foreground">
                <MapPin className="h-3 w-3" />
                {worksContent.address}
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      <motion.button
        type="button"
        onClick={() => setOpen((o) => !o)}
        initial={{ scale: 0, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ delay: 1.8, type: "spring", stiffness: 260, damping: 18 }}
        whileHover={{ scale: 1.06 }}
        whileTap={{ scale: 0.94 }}
        className={cn(
          "relative flex h-14 w-14 items-center justify-center rounded-full shadow-[0_10px_30px_-8px_rgba(37,211,102,0.5)] transition-colors",
          open ? "bg-foreground" : "bg-[#25D366]",
        )}
        aria-label={open ? "Close WhatsApp" : "Open WhatsApp chat"}
      >
        {open ? (
          <X className="h-6 w-6 text-foreground" />
        ) : (
          <>
            <svg
              viewBox="0 0 24 24"
              fill="currentColor"
              className="h-7 w-7 text-white"
              aria-hidden="true"
            >
              <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.149-.197.297-.767.967-.94 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.074-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" />
            </svg>
            {!open && (
              <span className="absolute -right-0.5 -top-0.5 flex h-3.5 w-3.5">
                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#25D366] opacity-60" />
                <span className="relative inline-flex h-3.5 w-3.5 rounded-full bg-[#25D366] ring-2 ring-card" />
              </span>
            )}
          </>
        )}
      </motion.button>
    </div>
  );
}