"use client";

import { useEffect, useRef, useState } from "react";
import { Share2 } from "lucide-react";
import { getShareLinks } from "@/components/common/constant";

interface ShareButtonProps {
  title: string;
}

const ShareButton: React.FC<ShareButtonProps> = ({ title }) => {
  const [shareUrl, setShareUrl] = useState("");
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    setShareUrl(window.location.href);
  }, []);

  // Close popover on outside click (mobile only)
  useEffect(() => {
    if (!open) return;
    const handler = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        setOpen(false);
      }
    };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, [open]);

  const shareLinks = getShareLinks(
    encodeURIComponent(shareUrl),
    encodeURIComponent(title),
  );

  return (
    <div ref={ref} className="relative group/share flex items-center shrink-0">
      <button
        className="ml-1 text-[#9ca3af] hover:text-[#4b5563] transition-colors cursor-pointer shrink-0"
        onClick={() => setOpen((v) => !v)}
        aria-label="Share"
      >
        <Share2 className="h-4 w-4" />
      </button>

      {/* Mobile (< sm): dropdown popover below the button */}
      {open && (
        <div className="sm:hidden absolute right-0 top-full mt-2 z-50 bg-white rounded-xl shadow-lg border border-[#e5e7eb] px-3 py-2 flex items-center gap-2">
          {/* Arrow */}
          <div className="absolute -top-1.5 right-2 w-3 h-3 bg-white border-l border-t border-[#e5e7eb] rotate-45" />
          {shareLinks.map((link) => (
            <a
              key={link.platform}
              href={link.url}
              target="_blank"
              rel="noopener noreferrer"
              aria-label={link.platform}
              title={link.platform}
              onClick={() => setOpen(false)}
              style={{ backgroundColor: link.bg }}
              className="w-7 h-7 rounded-full flex items-center justify-center shrink-0 hover:scale-110 transition-transform duration-200"
            >
              <span className="w-6.5 h-6.5 flex items-center justify-center [&>svg]:w-full [&>svg]:h-full">
                {link.svg}
              </span>
            </a>
          ))}
        </div>
      )}

      {/* sm+ : slide-out inline on hover (desktop behaviour) */}
      <div
        className="hidden sm:flex items-center gap-1.5 overflow-hidden transition-[max-width] duration-300 ease-out
          max-w-0 group-hover/share:max-w-50"
      >
        <div className="flex items-center gap-1.5 px-2 py-0.5">
          {shareLinks.map((link, idx) => (
            <a
              key={link.platform}
              href={link.url}
              target="_blank"
              rel="noopener noreferrer"
              aria-label={link.platform}
              title={link.platform}
              style={{
                backgroundColor: link.bg,
                transitionDelay: `${idx * 60}ms`,
              }}
              className="w-7 h-7 rounded-full flex items-center justify-center transition duration-200 ease-out shrink-0 hover:scale-110 opacity-0 group-hover/share:opacity-100"
            >
              <span className="w-6.5 h-6.5 flex items-center justify-center [&>svg]:w-full [&>svg]:h-full">
                {link.svg}
              </span>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
};

export default ShareButton;