import { Link } from '@inertiajs/react';
import { Sparkles } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { dashboard } from '@/routes';
import { mine as myGrowthScore } from '@/routes/growth-score';

type TourWelcomeDialogProps = {
    onOpenChange: (open: boolean) => void;
    onSkip: () => void;
    onStart: () => void;
    open: boolean;
};

export function TourWelcomeDialog({
    onOpenChange,
    onSkip,
    onStart,
    open,
}: TourWelcomeDialogProps) {
    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-md">
                <DialogHeader>
                    <div className="mx-auto mb-2 flex size-12 items-center justify-center rounded-full bg-primary/10 text-primary">
                        <Sparkles className="size-6" />
                    </div>
                    <DialogTitle className="text-center">
                        Quick tour of Monily
                    </DialogTitle>
                    <DialogDescription className="text-center">
                        Take a 60-second guided tour to learn where your
                        dashboard, Growth IQ, and AI Advisor live.
                    </DialogDescription>
                </DialogHeader>
                <DialogFooter className="sm:justify-center">
                    <Button type="button" variant="ghost" onClick={onSkip}>
                        Skip for now
                    </Button>
                    <Button type="button" onClick={onStart}>
                        Start tour
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}

type TourCompletionDialogProps = {
    onClose: () => void;
    open: boolean;
};

export function TourCompletionDialog({
    onClose,
    open,
}: TourCompletionDialogProps) {
    return (
        <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
            <DialogContent className="sm:max-w-md">
                <DialogHeader>
                    <div className="tour-completion-check mx-auto mb-2 flex size-12 items-center justify-center rounded-full bg-primary text-primary-foreground">
                        <Sparkles className="size-6" />
                    </div>
                    <DialogTitle className="text-center">
                        You&apos;re all set!
                    </DialogTitle>
                    <DialogDescription className="text-center">
                        You can replay this tour anytime from the help button
                        in the bottom-right corner.
                    </DialogDescription>
                </DialogHeader>
                <DialogFooter className="sm:justify-center">
                    <Button type="button" variant="outline" asChild>
                        <Link href={myGrowthScore.url()} onClick={onClose}>
                            Explore Growth IQ
                        </Link>
                    </Button>
                    <Button type="button" asChild>
                        <Link href={dashboard.url()} onClick={onClose}>
                            Go to Dashboard
                        </Link>
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}