import { Link, router } from '@inertiajs/react';
import { useEffect, useState } from 'react';

type BillingBlock = { code: string; message: string };

/**
 * Watches Inertia shared `flash.billing_block` for plan-gate denials raised
 * by `App\Services\Plans::abort402`. Renders an editorial toast pinned to the
 * bottom of the screen with a "View plans" CTA.
 */
export function UpgradeToast() {
    const [block, setBlock] = useState<BillingBlock | null>(null);
    const [visible, setVisible] = useState(false);

    useEffect(() => {
        const readBlock = (page: any): BillingBlock | null =>
            page?.props?.flash?.billing_block ?? null;

        setBlock(readBlock((router as any).page));

        return router.on('navigate', (event: any) => {
            setBlock(readBlock(event.detail.page));
        });
    }, []);

    useEffect(() => {
        if (block) {
            setVisible(true);
            const t = setTimeout(() => setVisible(false), 7000);
            return () => clearTimeout(t);
        }
    }, [block?.code, block?.message]);

    if (!block || !visible) return null;

    return (
        <div className="fixed bottom-5 left-1/2 -translate-x-1/2 z-50 max-w-md w-[calc(100%-2rem)] animate-fade-up">
            <div className="bg-foreground text-background rounded-2xl shadow-[0_25px_60px_-20px_rgba(0,0,0,0.5)] flex items-center gap-4 p-4 pr-3">
                <div className="w-10 h-10 rounded-xl bg-primary/[0.18] flex items-center justify-center shrink-0">
                    <svg className="w-5 h-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M12 2 4 6v6c0 4.5 3.3 8.5 8 9 4.7-.5 8-4.5 8-9V6l-8-3z" />
                    </svg>
                </div>
                <div className="flex-1 min-w-0">
                    <p className="text-[10.5px] font-medium tracking-[0.22em] uppercase text-primary mb-0.5">
                        Plan limit reached
                    </p>
                    <p className="text-[13px] leading-snug text-background/90">{block.message}</p>
                </div>
                <Link
                    href="/pricing"
                    className="bg-background text-foreground rounded-xl px-4 py-2.5 text-[12.5px] font-medium tracking-tight hover:bg-background/95 transition-colors shrink-0"
                >
                    View plans
                </Link>
                <button
                    onClick={() => setVisible(false)}
                    className="text-background/55 hover:text-background transition-colors shrink-0 p-1 -m-1"
                    aria-label="Dismiss"
                >
                    <svg className="w-3.5 h-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                        <path d="m4 4 8 8M12 4l-8 8" />
                    </svg>
                </button>
            </div>
        </div>
    );
}