"use client";

import React from "react";
import { usePathname } from "next/navigation";
import { HelpCircle } from "lucide-react";
import { useHelpGuide } from "@/hooks/useHelpGuide";
import { resolveHelpContent } from "@/content/help/registry";
import HelpGuideModal from "./HelpGuideModal";

/**
 * The site's single help entry point — a floating round button, present on
 * every page (mounted once in the root layout). Content is resolved from
 * the current route via content/help/registry.ts, falling back to general
 * baseline content (how to register / view tickets) for any page without a
 * dedicated guide yet.
 */
// Unattended/operator-driven screens where a floating help button would just
// get in the way (kiosk touchscreen, first-run setup wizard) — this hook
// still runs, it just renders nothing there.
const EXCLUDED_PREFIXES = ["/self-service", "/setup"];

export default function HelpFab() {
  const pathname = usePathname() || "/";
  const { slug, content } = resolveHelpContent(pathname);
  const { open, openGuide, closeGuide } = useHelpGuide(slug);

  if (EXCLUDED_PREFIXES.some(prefix => pathname.startsWith(prefix))) {
    return null;
  }

  return (
    <>
      <button
        type="button"
        onClick={openGuide}
        aria-label="Help"
        // bottom-20 on mobile clears BottomNav (fixed, h-16 + safe-area, z-50).
        className="fixed z-40 bottom-20 md:bottom-6 right-4 md:right-6 w-12 h-12 rounded-full bg-brand-600 text-white shadow-lg hover:bg-brand-700 hover:scale-105 hover:shadow-xl active:scale-95 flex items-center justify-center transition-all"
      >
        <HelpCircle className="w-6 h-6" />
      </button>
      {open && <HelpGuideModal content={content} onClose={closeGuide} />}
    </>
  );
}