"use client";

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

const WA_MESSAGE = encodeURIComponent(
  "Hello StratOps, I would like to enquire about your consulting services.",
);

const WA_SCHEDULE_MESSAGE = encodeURIComponent(
  "Hello StratOps, I would like to schedule a discovery session with one of the founders. Please share your available times.",
);

export function WhatsAppWidget() {
  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-[280px] 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">
                    Chat on WhatsApp
                  </p>
                  <p className="text-[10px] text-white/70">
                    Direct to a founder
                  </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">
              {founders.map((f, i) => (
                <motion.a
                  key={f.name}
                  href={`https://wa.me/${f.phone.replace(/\D/g, "")}?text=${WA_MESSAGE}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  initial={{ opacity: 0, x: -12 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: 0.08 + i * 0.1 }}
                  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] font-display text-sm font-bold text-white">
                    {f.initials}
                  </span>
                  <div className="min-w-0 flex-1">
                    <p className="truncate text-sm font-semibold text-foreground">
                      {f.name}
                    </p>
                    <p className="truncate text-[11px] text-muted-foreground">
                      {f.role.split(" · ")[1] ?? f.role}
                    </p>
                    <p className="flex items-center gap-1 font-mono-num text-[10px] text-muted-foreground">
                      <Phone className="h-2.5 w-2.5" />
                      {f.phone}
                    </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>
              ))}
              {/* Schedule a meeting via WhatsApp */}
              <motion.a
                href={`https://wa.me/${founders[0].phone.replace(/\D/g, "")}?text=${WA_SCHEDULE_MESSAGE}`}
                target="_blank"
                rel="noopener noreferrer"
                initial={{ opacity: 0, x: -12 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.08 + founders.length * 0.1 }}
                className="group mt-1 flex items-center gap-3 rounded-xl border border-gold/30 bg-gold/5 p-3 transition-colors hover:border-gold/50 hover:bg-gold/10"
              >
                <span className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-gold to-gold-deep text-white">
                  <Calendar className="h-4 w-4" />
                </span>
                <div className="min-w-0 flex-1">
                  <p className="text-sm font-semibold text-foreground">
                    Schedule a meeting
                  </p>
                  <p className="text-[11px] text-muted-foreground">
                    Request available slots via WhatsApp
                  </p>
                </div>
                <span className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-gold/20 text-gold transition-colors group-hover:bg-gold group-hover:text-white">
                  <Calendar className="h-3.5 w-3.5" />
                </span>
              </motion.a>
              <p className="px-1 pt-1 text-center text-[10px] text-muted-foreground">
                Replies during business hours · SAST
              </p>
            </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>
  );
}