import { Button } from '@/components/ui/button';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { useTranslation } from '@/hooks/use-translation';
import { cn } from '@/lib/utils';
import { Link } from '@inertiajs/react';
import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';

type Tone = 'default' | 'danger' | 'success';

type CommonProps = {
    icon: ReactNode;
    label: string;
    tooltipTitle: string;
    tooltipTechnical: string;
    tone?: Tone;
    showLabel?: boolean;
    disabled?: boolean;
    className?: string;
};

type ButtonProps = CommonProps & {
    as?: 'button';
    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
    type?: 'button' | 'submit';
};

type LinkProps = CommonProps & {
    as: 'link';
    href: string;
    method?: 'get' | 'post' | 'put' | 'patch' | 'delete';
    preserveScroll?: boolean;
    download?: boolean | string;
    target?: string;
    rel?: string;
};

type AnchorProps = CommonProps & {
    as: 'anchor';
    href: string;
    download?: boolean | string;
    target?: string;
    rel?: string;
};

export type ActionButtonProps = ButtonProps | LinkProps | AnchorProps;

const toneClasses: Record<Tone, string> = {
    default: 'text-white/80 hover:text-white hover:bg-white/10',
    danger: 'text-red-300 hover:text-red-100 hover:bg-red-500/20',
    success: 'text-secondary hover:text-white hover:bg-secondary/30',
};

export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>((props, ref) => {
    const { t } = useTranslation();
    const {
        icon,
        label,
        tooltipTitle,
        tooltipTechnical,
        tone = 'default',
        showLabel = true,
        disabled,
        className,
    } = props;

    const baseClasses = cn(
        'h-7 gap-1 rounded-md px-2 py-1 text-xs font-normal transition-colors',
        'disabled:cursor-not-allowed disabled:opacity-50',
        toneClasses[tone],
        className,
    );

    const content = (
        <>
            <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center">{icon}</span>
            {showLabel && <span className="hidden text-xs sm:inline">{label}</span>}
        </>
    );

    let trigger: ReactNode;

    if (props.as === 'link') {
        const { href, method = 'get', preserveScroll = true, download, target, rel } = props;
        trigger = (
            <Link
                href={href}
                method={method}
                as={method === 'get' ? undefined : 'button'}
                preserveScroll={preserveScroll}
                download={download}
                target={target}
                rel={rel}
                className={cn('inline-flex items-center', baseClasses)}
                aria-label={label}
                aria-disabled={disabled}
                tabIndex={disabled ? -1 : 0}
            >
                {content}
            </Link>
        );
    } else if (props.as === 'anchor') {
        const { href, download, target, rel } = props;
        trigger = (
            <a
                href={href}
                download={download}
                target={target}
                rel={rel}
                className={cn('inline-flex items-center', baseClasses)}
                aria-label={label}
            >
                {content}
            </a>
        );
    } else {
        const { onClick, type = 'button' } = props as ButtonProps;
        trigger = (
            <Button
                ref={ref}
                type={type}
                variant="ghost"
                size="sm"
                onClick={onClick}
                disabled={disabled}
                aria-label={label}
                className={baseClasses}
            >
                {content}
            </Button>
        );
    }

    return (
        <Tooltip>
            <TooltipTrigger asChild>{trigger}</TooltipTrigger>
            <TooltipContent className="max-w-xs">
                <div className="font-semibold">{tooltipTitle}</div>
                <div className="mt-1 text-[10px] leading-snug text-white/70">
                    {t('crm', 'tooltip_technical_prefix')} : {tooltipTechnical}
                </div>
            </TooltipContent>
        </Tooltip>
    );
});

ActionButton.displayName = 'ActionButton';

/**
 * Wrapper for a trigger that opens its own dialog/drawer (Radix DialogTrigger asChild).
 * The dialog component passes its own onClick/aria; we only decorate the visual + tooltip.
 * Use this when you can't control the onClick yourself (e.g. DialogTrigger asChild).
 */
export const ActionButtonTrigger = forwardRef<
    HTMLButtonElement,
    Omit<ButtonProps, 'as'> & ComponentPropsWithoutRef<'button'>
>(({ icon, label, tooltipTitle, tooltipTechnical, tone = 'default', showLabel = true, className, disabled, ...buttonProps }, ref) => {
    const { t } = useTranslation();

    return (
        <Tooltip>
            <TooltipTrigger asChild>
                <Button
                    ref={ref}
                    type="button"
                    variant="ghost"
                    size="sm"
                    disabled={disabled}
                    aria-label={label}
                    className={cn(
                        'h-7 gap-1 rounded-md px-2 py-1 text-xs font-normal transition-colors',
                        'disabled:cursor-not-allowed disabled:opacity-50',
                        toneClasses[tone],
                        className,
                    )}
                    {...buttonProps}
                >
                    <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center">{icon}</span>
                    {showLabel && <span className="hidden text-xs sm:inline">{label}</span>}
                </Button>
            </TooltipTrigger>
            <TooltipContent className="max-w-xs">
                <div className="font-semibold">{tooltipTitle}</div>
                <div className="mt-1 text-[10px] leading-snug text-white/70">
                    {t('crm', 'tooltip_technical_prefix')} : {tooltipTechnical}
                </div>
            </TooltipContent>
        </Tooltip>
    );
});

ActionButtonTrigger.displayName = 'ActionButtonTrigger';