import { useScrollProgress } from '@/hooks/use-scroll-progress';

/**
 * Paw prints sorted bottom-to-top by their Y position in the SVG viewBox (0 0 396 347).
 * Each threshold is the scroll progress (0–1) at which that print becomes visible.
 */
const PAWS = [
    {
        id: 'paw-bottom',
        threshold: 0.05,
        d: 'M31.1294 292.304C35.7403 291.179 41.373 297.379 44.9911 306.863C51.1878 298.385 58.5611 293.725 62.7766 296.139C67.779 299.003 66.4409 310.744 59.7878 322.363C55.4402 329.955 49.8983 335.615 45.184 337.827C44.442 338.629 43.5848 339.171 42.6191 339.407C42.3446 339.474 42.0664 339.513 41.7853 339.529C36.8981 341.422 27.4458 338.751 18.3753 332.498C7.35225 324.9 1.06811 314.892 4.33959 310.146C7.1581 306.057 16.1472 307.21 25.6314 312.465C24.252 301.986 26.3892 293.46 31.1294 292.304Z',
    },
    {
        id: 'paw-lower-mid',
        threshold: 0.22,
        d: 'M145.999 243.334C150.289 245.365 150.759 253.728 147.596 263.374C157.749 260.691 166.411 261.716 168.165 266.246C170.246 271.621 161.812 279.898 149.327 284.732C141.168 287.891 133.299 288.797 128.243 287.546C127.162 287.702 126.155 287.583 125.256 287.158C125.001 287.037 124.761 286.892 124.533 286.728C119.544 285.121 113.884 277.092 110.777 266.522C107 253.677 108.422 241.946 113.953 240.32C118.717 238.919 124.973 245.476 129.03 255.532C134.559 246.523 141.589 241.247 145.999 243.334Z',
    },
    {
        id: 'paw-mid',
        threshold: 0.39,
        d: 'M112.344 139.976C117.024 140.761 119.756 148.679 119.34 158.822C128.378 153.474 136.992 152.1 139.914 155.98C143.381 160.585 137.522 170.847 126.826 178.9C119.836 184.163 112.511 187.18 107.306 187.354C106.308 187.797 105.307 187.957 104.327 187.793C104.049 187.746 103.777 187.673 103.513 187.576C98.275 187.389 90.6421 181.207 84.7724 171.884C77.6392 160.554 75.8108 148.879 80.6887 145.808C84.891 143.162 92.6967 147.765 99.3398 156.334C102.205 146.161 107.531 139.169 112.344 139.976Z',
    },
    {
        id: 'paw-upper-mid',
        threshold: 0.56,
        d: 'M247.503 117.591C250.861 120.945 248.494 128.98 242.273 137.002C252.737 137.887 260.551 141.763 260.681 146.618C260.835 152.381 250.11 157.342 236.727 157.7C227.98 157.934 220.263 156.143 215.922 153.266C214.852 153.049 213.944 152.598 213.241 151.896C213.041 151.697 212.863 151.48 212.704 151.248C208.545 148.058 205.912 138.595 206.537 127.595C207.297 114.228 212.578 103.657 218.333 103.984C223.291 104.266 226.98 112.543 227.422 123.377C235.657 116.75 244.05 114.143 247.503 117.591Z',
    },
    {
        id: 'paw-top',
        threshold: 0.73,
        d: 'M228.85 25.324C233.259 27.0801 234.256 35.3969 231.706 45.2229C241.67 41.9058 250.379 42.3828 252.415 46.793C254.831 52.0268 246.935 60.8186 234.78 66.4297C226.835 70.0967 219.038 71.4973 213.914 70.5672C212.845 70.79 211.833 70.7348 210.91 70.3671C210.647 70.2626 210.398 70.1332 210.16 69.9832C205.08 68.6932 198.926 61.0376 195.159 50.6849C190.581 38.1036 191.261 26.3061 196.678 24.3347C201.344 22.6367 208.001 28.7864 212.683 38.5661C217.633 29.2274 224.317 23.519 228.85 25.324Z',
    },
    {
        id: 'paw-topmost',
        threshold: 0.88,
        d: 'M366.871 13.7083C371.161 15.7387 371.631 24.1017 368.468 33.7476C378.621 31.0649 387.283 32.0897 389.037 36.6195C391.118 41.9951 382.684 50.2719 370.199 55.106C362.04 58.2651 354.17 59.1716 349.114 57.9206C348.034 58.0756 347.027 57.9567 346.128 57.5316C345.873 57.4109 345.633 57.266 345.405 57.1016C340.416 55.4951 334.756 47.4663 331.649 36.896C327.873 24.051 329.294 12.3198 334.825 10.6939C339.589 9.29333 345.846 15.8502 349.902 25.9055C355.431 16.8972 362.461 11.6211 366.871 13.7083Z',
    },
];

function containerOpacity(progress: number): number {
    if (progress <= 0) return 0;
    if (progress >= 0.9) return 1 - (progress - 0.9) / 0.1;
    return 1;
}

interface Props {
    elementId: string;
    side: 'left' | 'right';
}

export function PawsScrollAnimation({ elementId, side }: Props) {
    const progress = useScrollProgress(elementId);

    return (
        <div
            aria-hidden="true"
            className={`pointer-events-none fixed top-1/2 hidden -translate-y-1/2 lg:block ${side === 'left' ? 'left-8' : 'right-8'}`}
            style={{
                opacity: containerOpacity(progress),
                transition: 'opacity 0.4s ease',
                width: '14rem',
            }}
        >
            <svg
                    viewBox="0 0 396 347"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="w-full h-auto"
                    style={side === 'left' ? { transform: 'scaleX(-1)' } : undefined}
                >
                {PAWS.map((paw) => {
                    const visible = progress >= paw.threshold;
                    return (
                        <path
                            key={paw.id}
                            d={paw.d}
                            fill="#8A8A8A"
                            style={{
                                opacity: visible ? 0.35 : 0,
                                transform: visible ? 'translateY(0)' : 'translateY(10px)',
                                transition: 'opacity 0.5s ease, transform 0.5s ease',
                            }}
                        />
                    );
                })}
            </svg>
        </div>
    );
}