"use client"

import * as React from "react"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip"
import { cn } from "../../lib/utils"

export interface FeatureGateProps {
  /** Whether the feature is available. When false, applies mode behavior. */
  enabled: boolean
  /**
   * How to render when enabled=false:
   * - 'disable' (default): renders children as disabled with a tooltip
   * - 'hide': renders nothing
   * - 'badge': renders children with a 'Coming soon' badge overlay
   */
  mode?: "disable" | "hide" | "badge"
  /** Tooltip text shown in 'disable' mode. Defaults to 'Coming soon'. */
  tooltip?: string
  children: React.ReactNode
  className?: string
}

/**
 * Gates a UI element behind a feature flag.
 *
 * Use this to wrap any button, link, or UI section that is not yet implemented.
 * This prevents shipping clickable elements with no handlers.
 *
 * @example
 * // Disable a button with a tooltip
 * <FeatureGate enabled={false}>
 *   <Button onClick={handleReply}>Reply</Button>
 * </FeatureGate>
 *
 * @example
 * // Hide completely
 * <FeatureGate enabled={false} mode="hide">
 *   <Button>Archive</Button>
 * </FeatureGate>
 */
export function FeatureGate({
  enabled,
  mode = "disable",
  tooltip = "Coming soon",
  children,
  className,
}: FeatureGateProps) {
  if (enabled) {
    return <>{children}</>
  }

  if (mode === "hide") {
    return null
  }

  if (mode === "badge") {
    return (
      <div className={cn("relative inline-flex", className)}>
        <div className="opacity-60 pointer-events-none select-none">{children}</div>
        <span className="absolute -top-1.5 -right-1.5 rounded-full bg-muted text-muted-foreground text-[10px] font-medium px-1.5 py-0.5 leading-none border">
          Soon
        </span>
      </div>
    )
  }

  // mode === 'disable' (default): wrap in tooltip, disable interaction
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <span
            className={cn("inline-flex cursor-not-allowed", className)}
            aria-disabled="true"
          >
            <span className="pointer-events-none opacity-50 select-none">
              {children}
            </span>
          </span>
        </TooltipTrigger>
        <TooltipContent>
          <p>{tooltip}</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}