import { TOUR_SPOTLIGHT_PADDING } from '@/lib/application-tour/constants';
import type { TargetRect } from '@/lib/application-tour/position';
import { cn } from '@/lib/utils';

type TourSpotlightOverlayProps = {
    rect: TargetRect | null;
};

export function TourSpotlightOverlay({ rect }: TourSpotlightOverlayProps) {
    if (!rect) {
        return (
            <div
                className="animate-in fade-in-0 fixed inset-0 z-[60] bg-black/55 duration-200"
                aria-hidden="true"
            />
        );
    }

    const top = rect.top - TOUR_SPOTLIGHT_PADDING;
    const left = rect.left - TOUR_SPOTLIGHT_PADDING;
    const width = rect.width + TOUR_SPOTLIGHT_PADDING * 2;
    const height = rect.height + TOUR_SPOTLIGHT_PADDING * 2;

    const panelClass =
        'fixed z-[60] bg-black/55 animate-in fade-in-0 duration-200 motion-reduce:animate-none transition-[top,left,width,height] duration-300 ease-out motion-reduce:transition-none';

    return (
        <>
            <div
                className={panelClass}
                style={{ top: 0, left: 0, right: 0, height: top }}
                aria-hidden="true"
            />
            <div
                className={panelClass}
                style={{
                    top: top + height,
                    left: 0,
                    right: 0,
                    bottom: 0,
                }}
                aria-hidden="true"
            />
            <div
                className={panelClass}
                style={{ top, left: 0, width: left, height }}
                aria-hidden="true"
            />
            <div
                className={panelClass}
                style={{ top, left: left + width, right: 0, height }}
                aria-hidden="true"
            />
            <div
                className={cn(
                    'tour-target-ring pointer-events-none fixed z-[61] motion-reduce:animate-none transition-[top,left,width,height] duration-300 ease-out motion-reduce:transition-none',
                )}
                style={{
                    top,
                    left,
                    width,
                    height,
                    borderRadius: 'var(--radius)',
                }}
                aria-hidden="true"
            />
        </>
    );
}