import * as React from "react";
import { HelpCircle, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";

/**
 * SupportAgentFAB — WealthX DS
 *
 * Floating action button that opens/closes the Support Agent panel.
 * Positioned fixed at bottom-right (or bottom-left) of the viewport.
 *
 * Features:
 *   - Nudge badge: red dot shown when the agent has a proactive suggestion
 *   - Nudge message: small dismissible tooltip bubble above the button
 *   - Toggles between HelpCircle (closed) and X (open) icon
 */

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

export interface SupportAgentFABProps {
  /** Whether the support panel is currently open. */
  isOpen?: boolean;
  /** Called when the FAB is clicked. */
  onClick: () => void;
  /** Show a red nudge dot on the button. */
  hasNudge?: boolean;
  /** Short message shown in a bubble above the FAB when hasNudge is true. */
  nudgeMessage?: string;
  /** Called when the user dismisses the nudge bubble. */
  onDismissNudge?: () => void;
  /** Position of the FAB on the screen. */
  position?: "bottom-right" | "bottom-left";
  className?: string;
}

// ---------------------------------------------------------------------------
// SupportAgentFAB
// ---------------------------------------------------------------------------

export function SupportAgentFAB({
  isOpen = false,
  onClick,
  hasNudge = false,
  nudgeMessage,
  onDismissNudge,
  position = "bottom-right",
  className,
}: SupportAgentFABProps) {
  const showBubble = hasNudge && !!nudgeMessage && !isOpen;

  return (
    <div
      className={cn(
        "fixed bottom-6 z-50 flex flex-col items-end gap-2",
        position === "bottom-right" ? "right-6" : "left-6",
        className
      )}
      data-slot="support-agent-fab"
    >
      {/* Nudge message bubble */}
      {showBubble && (
        <div className="relative flex max-w-[220px] items-start gap-2 border border-border bg-background px-3 py-2 shadow-md">
          <p className="flex-1 text-xs text-foreground leading-relaxed">
            {nudgeMessage}
          </p>
          {onDismissNudge && (
            <button
              type="button"
              onClick={onDismissNudge}
              className="mt-0.5 shrink-0 text-muted-foreground hover:text-foreground"
              aria-label="Dismiss"
            >
              <X className="size-3" />
            </button>
          )}
          {/* Bubble tail pointing down */}
          <span
            className="absolute -bottom-[5px] right-4 size-2.5 rotate-45 border-b border-r border-border bg-background"
            aria-hidden="true"
          />
        </div>
      )}

      {/* FAB button */}
      <div className="relative">
        <Button
          type="button"
          size="icon"
          onClick={onClick}
          className="size-12 rounded-full shadow-lg"
          aria-label={
            isOpen ? "Close support assistant" : "Open support assistant"
          }
          data-state={isOpen ? "open" : "closed"}
        >
          {isOpen ? (
            <X className="size-5" aria-hidden="true" />
          ) : (
            <HelpCircle className="size-5" aria-hidden="true" />
          )}
        </Button>

        {/* Nudge dot */}
        {hasNudge && !isOpen && (
          <span
            className="absolute -right-0.5 -top-0.5 size-3 rounded-full border-2 border-background bg-destructive"
            aria-label="New suggestion"
            role="status"
          />
        )}
      </div>
    </div>
  );
}