import { useEffect, useRef, useState } from "react";
import { Headphones, Send, X } from "lucide-react";
import { cn } from "@/lib/utils";

const links = [
  {
    id: "channel",
    href: "https://t.me/carding_vai",
    title: "Telegram Channel",
    sub: "CARDING VAI",
    icon: Send,
  },
  {
    id: "support",
    href: "https://t.me/carding_vai1",
    title: "Telegram Support",
    sub: "CARDING VAI ONE",
    icon: Headphones,
  },
] as const;

export function SupportWidget() {
  const [open, setOpen] = useState(false);
  const rootRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) return;
    function onPointerDown(e: PointerEvent) {
      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
    }
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape") setOpen(false);
    }
    document.addEventListener("pointerdown", onPointerDown);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("pointerdown", onPointerDown);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  return (
    <div
      ref={rootRef}
      className="fixed right-4 bottom-[max(1rem,env(safe-area-inset-bottom))] z-50 flex flex-col items-end gap-3"
    >
      {open && (
        <div
          role="menu"
          aria-label="Customer Support"
          className="panel w-[min(17rem,calc(100vw-2rem))] origin-bottom-right animate-[fade-in_0.2s_ease-out] space-y-1.5 rounded-2xl p-2 shadow-[0_0_24px_hsl(var(--primary)/0.18)] backdrop-blur-lg"
        >
          {links.map((l) => (
            <a
              key={l.id}
              role="menuitem"
              href={l.href}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-3 rounded-xl border border-primary/25 bg-background/40 p-2.5 transition-all duration-200 hover:border-primary/50 hover:bg-primary/10 hover:shadow-[0_0_16px_hsl(var(--primary)/0.25)] active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
            >
              <span className="grid size-9 shrink-0 place-items-center rounded-full bg-primary/15">
                <l.icon className="size-4 text-primary" aria-hidden />
              </span>
              <span className="min-w-0">
                <span className="block truncate font-display text-sm font-semibold">{l.title}</span>
                <span className="block truncate text-xs text-muted-foreground">{l.sub}</span>
              </span>
            </a>
          ))}
        </div>
      )}

      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-label="Customer Support"
        aria-expanded={open}
        aria-haspopup="menu"
        className={cn(
          "relative grid size-14 place-items-center rounded-full bg-primary text-primary-foreground",
          "shadow-[0_0_20px_hsl(var(--primary)/0.45)] transition-transform hover:scale-105",
          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
        )}
      >
        <span
          aria-hidden
          className="absolute inset-0 rounded-full bg-primary/30 animate-[pulse_3.5s_cubic-bezier(0.4,0,0.6,1)_infinite]"
        />
        {open ? (
          <X className="relative size-6" aria-hidden />
        ) : (
          <Headphones className="relative size-6" aria-hidden />
        )}
      </button>
    </div>
  );
}