import { Button, Modal } from '@/Components/ui';
import { Link } from '@inertiajs/react';
import { ArrowRight, Sparkles } from 'lucide-react';

type Props = {
    open: boolean;
    onClose: () => void;
    kitName: string;
    /**
     * In-dashboard upgrade handler. When provided (Projects surfaces, where the
     * AppNav-mounted `<UpgradeModal />` exists), the CTA opens the in-app upgrade
     * modal instead of routing to /pricing. Marketing surfaces omit it — no
     * AppNav there, so they keep the full-page /pricing Link fallback.
     */
    onUpgrade?: () => void;
};

/**
 * Shown when a logged-in free-plan user clicks a Pro-only template card.
 * Replaces the older silent `/pricing` redirect that made the gate feel like
 * a routing glitch — the modal explains the gate, names the kit by title,
 * and offers an explicit upgrade CTA before sending the user to Pricing.
 *
 * Mounts on the marketing surfaces (KitGridSection + TemplatesTeaserSection)
 * via the `useKitCta` hook in `marketing/shared.tsx`. Anon visitors and Pro
 * users never see it — they skip the gate entirely.
 */
export function PremiumKitGateModal({ open, onClose, kitName, onUpgrade }: Props) {
    return (
        <Modal
            open={open}
            onClose={onClose}
            size="md"
            data-testid="premium-kit-gate-modal"
        >
            <Modal.Body className="space-y-5 px-7 py-8 text-center">
                <div className="mx-auto inline-flex h-12 w-12 items-center justify-center rounded-full bg-accent/10 text-accent">
                    <Sparkles className="h-5 w-5" />
                </div>
                <div className="space-y-2">
                    <p className="text-[11px] font-semibold uppercase tracking-wider text-accent">
                        Pro template
                    </p>
                    <h2 className="font-display text-2xl font-medium leading-tight text-foreground">
                        {kitName} is a Pro template
                    </h2>
                    <p className="text-sm leading-relaxed text-muted-foreground">
                        Upgrade to paid plan to use this kit and every other
                        Pro template in the library.
                    </p>
                </div>
            </Modal.Body>
            <Modal.Footer className="flex flex-col gap-2 px-7 pb-7">
                {onUpgrade ? (
                    <Button
                        size="md"
                        className="w-full"
                        onClick={() => {
                            onClose();
                            onUpgrade();
                        }}
                    >
                        Upgrade
                        <ArrowRight className="h-3.5 w-3.5" />
                    </Button>
                ) : (
                    <Link href="/pricing" className="w-full">
                        <Button size="md" className="w-full">
                            Upgrade
                            <ArrowRight className="h-3.5 w-3.5" />
                        </Button>
                    </Link>
                )}
                <Button
                    type="button"
                    variant="ghost"
                    size="md"
                    className="w-full"
                    onClick={onClose}
                    data-testid="premium-kit-gate-cancel"
                >
                    Maybe later
                </Button>
            </Modal.Footer>
        </Modal>
    );
}
