"use client";
import { useState, useRef } from "react";
import { useRouter, usePathname } from "next/navigation";
import { Plus, Camera, Package, X } from "lucide-react";

const ACTIONS = [
  {
    label: "Sell Item",
    icon: Package,
    href: "/marketplace/create",
    color: "var(--accent)",
  },
  {
    label: "Add Photos",
    icon: Camera,
    href: "/marketplace/create?step=photos",
    color: "#a78bfa",
  },
];

export function MarketplaceFAB() {
  const router = useRouter();
  const pathname = usePathname();
  const [expanded, setExpanded] = useState(false);
  const pressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);

  // Hide FAB on pages that have their own fixed bottom action bars
  // to prevent the "+" button from overlapping critical action buttons
  const hiddenOnPaths = ["/marketplace/listing/", "/marketplace/messages"];
  if (hiddenOnPaths.some((p) => pathname.startsWith(p))) return null;

  const handlePress = () => {
    if (!expanded) {
      router.push("/marketplace/create");
    } else {
      setExpanded(false);
    }
  };

  const handleLongPressStart = () => {
    pressTimer.current = setTimeout(() => setExpanded(true), 400);
  };

  const handleLongPressEnd = () => {
    if (pressTimer.current) clearTimeout(pressTimer.current);
  };

  return (
    <div
      className="md:hidden flex flex-col items-center gap-2"
      style={{
        position: "fixed",
        bottom: "calc(30px + env(safe-area-inset-bottom, 0px))",
        left: "50%",
        transform: "translateX(-50%)",
        zIndex: 50,
      }}
    >
      {/* Quick actions (shown when expanded) */}
      {expanded &&
        ACTIONS.map((action, i) => (
          <button
            key={action.label}
            onClick={() => {
              setExpanded(false);
              router.push(action.href);
            }}
            style={{
              display: "flex",
              alignItems: "center",
              gap: 6,
              padding: "7px 14px",
              borderRadius: 20,
              background: action.color,
              color: "#fff",
              fontSize: 11,
              fontWeight: 700,
              border: "none",
              cursor: "pointer",
              boxShadow: `0 4px 14px ${action.color}60`,
              animation: `fab-action-in 0.22s ${i * 0.06}s both`,
            }}
          >
            <action.icon size={13} />
            {action.label}
          </button>
        ))}

      {/* Main FAB button */}
      <button
        onClick={handlePress}
        onMouseDown={handleLongPressStart}
        onMouseUp={handleLongPressEnd}
        onTouchStart={handleLongPressStart}
        onTouchEnd={handleLongPressEnd}
        onContextMenu={(e) => {
          e.preventDefault();
          setExpanded(true);
        }}
        aria-label="Create listing"
        className="flex items-center justify-center"
        style={{
          width: 52,
          height: 52,
          borderRadius: "50%",
          background: "linear-gradient(135deg, var(--accent) 0%, #ff4040 100%)",
          border: "none",
          cursor: "pointer",
          boxShadow: "0 4px 20px rgba(252,0,0,0.45), 0 1px 6px rgba(0,0,0,0.3)",
          transition: "transform 0.15s, box-shadow 0.15s",
        }}
        onMouseEnter={(e) => {
          (e.currentTarget as HTMLElement).style.transform = "scale(1.06)";
        }}
        onMouseLeave={(e) => {
          (e.currentTarget as HTMLElement).style.transform = "scale(1)";
        }}
      >
        <div
          style={{
            transition: "transform 0.2s",
            transform: expanded ? "rotate(45deg)" : "none",
          }}
        >
          <Plus size={22} color="#fff" strokeWidth={2.5} />
        </div>
      </button>

      <style>{`
        @keyframes fab-action-in {
          from { opacity: 0; transform: translateY(12px) scale(0.85); }
          to   { opacity: 1; transform: translateY(0)   scale(1); }
        }
      `}</style>
    </div>
  );
}