import React from "react";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import * as SeparatorPrimitive from "@radix-ui/react-separator";
import { Loader2 } from "lucide-react";
import { cn } from "../../lib/utils";

const TooltipProvider = TooltipPrimitive.Provider;
const Tooltip = TooltipPrimitive.Root;
const TooltipTrigger = TooltipPrimitive.Trigger;

const TooltipContent = React.forwardRef(
    ({ className, sideOffset = 6, ...props }, ref) => (
        <TooltipPrimitive.Portal>
            <TooltipPrimitive.Content
                ref={ref}
                sideOffset={sideOffset}
                className={cn(
                    "z-50 rounded-md border border-border bg-card px-2.5 py-1.5 text-xs text-foreground shadow-glow animate-fade-in",
                    className
                )}
                {...props}
            />
        </TooltipPrimitive.Portal>
    )
);
TooltipContent.displayName = "TooltipContent";

const Separator = React.forwardRef(
    ({ className, orientation = "horizontal", ...props }, ref) => (
        <SeparatorPrimitive.Root
            ref={ref}
            orientation={orientation}
            className={cn(
                "shrink-0 bg-border",
                orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
                className
            )}
            {...props}
        />
    )
);
Separator.displayName = "Separator";

function Badge({ className, variant = "default", ...props }) {
    const variants = {
        default: "border-primary/30 bg-primary/10 text-primary",
        violet: "border-secondary/30 bg-secondary/10 text-secondary",
        muted: "border-border bg-muted text-muted-foreground",
        destructive:
            "border-destructive/30 bg-destructive/10 text-destructive",
    };
    return (
        <span
            className={cn(
                "inline-flex items-center rounded-full border px-2 py-0.5 font-mono text-[10px] font-medium uppercase tracking-wider",
                variants[variant],
                className
            )}
            {...props}
        />
    );
}

function Spinner({ className, label = "Loading" }) {
    return (
        <div
            className={cn(
                "flex items-center gap-2 text-sm text-muted-foreground",
                className
            )}
        >
            <Loader2 className="h-4 w-4 animate-spin text-primary" />
            <span className="font-mono text-xs uppercase tracking-wide">
                {label}
            </span>
        </div>
    );
}

export {
    TooltipProvider,
    Tooltip,
    TooltipTrigger,
    TooltipContent,
    Separator,
    Badge,
    Spinner,
};
