"use client";

import { useEffect, useState } from "react";

interface DesktopOnlyGuardProps {
    children: React.ReactNode;
    /** Breakpoint in pixels below which to show the desktop-only message */
    breakpoint?: number;
}

/**
 * Shows a "desktop only" message on mobile devices
 * Used for complex canvases that cannot be made responsive without breaking PDF export
 */
export function DesktopOnlyGuard({ children, breakpoint = 768 }: DesktopOnlyGuardProps) {
    const [isMobile, setIsMobile] = useState(false);
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        setMounted(true);
        const checkMobile = () => setIsMobile(window.innerWidth < breakpoint);
        checkMobile();
        window.addEventListener("resize", checkMobile);
        return () => window.removeEventListener("resize", checkMobile);
    }, [breakpoint]);

    // Avoid hydration mismatch
    if (!mounted) {
        return <>{children}</>;
    }

    if (isMobile) {
        return (
            <div className="min-h-[400px] flex flex-col items-center justify-center p-8 text-center bg-gray-50 border-2 border-dashed border-gray-300 rounded-xl mx-4 my-8">
                <div className="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mb-4">
                    <svg
                        className="w-8 h-8 text-gray-500"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                        />
                    </svg>
                </div>
                <h3 className="text-lg font-semibold text-gray-900 mb-2">
                    Canevas accessible uniquement sur ordinateur
                </h3>
                <p className="text-sm text-gray-600 max-w-sm">
                    Ce canevas nécessite un écran plus large pour être utilisé correctement.
                    Veuillez y accéder depuis un ordinateur de bureau ou une tablette en mode paysage.
                </p>
            </div>
        );
    }

    return <>{children}</>;
}