'use client';

import { useEffect } from 'react';
import { useTranslations } from 'next-intl';
import { driver } from 'driver.js';
import 'driver.js/dist/driver.css';

export default function OnboardingTour() {
    const t = useTranslations('OnboardingTour');
    
    useEffect(() => {
        const hasCompletedOnboarding = localStorage.getItem('hoerdle_onboarding_completed');

        if (hasCompletedOnboarding) {
            return;
        }

        const driverObj = driver({
            showProgress: true,
            animate: true,
            allowClose: true,
            doneBtnText: t('done'),
            nextBtnText: t('next'),
            prevBtnText: t('previous'),
            onDestroyed: () => {
                localStorage.setItem('hoerdle_onboarding_completed', 'true');
            },
            steps: [
                {
                    element: '#tour-genres',
                    popover: {
                        title: t('genresSpecials'),
                        description: t('genresSpecialsDescription'),
                        side: 'bottom',
                        align: 'start'
                    }
                },
                {
                    element: '#tour-news',
                    popover: {
                        title: t('news'),
                        description: t('newsDescription'),
                        side: 'top',
                        align: 'start'
                    }
                },
                {
                    element: '#tour-title',
                    popover: {
                        title: t('hoerdle'),
                        description: t('hoerdleDescription'),
                        side: 'bottom',
                        align: 'start'
                    }
                },
                {
                    element: '#tour-status',
                    popover: {
                        title: t('attempts'),
                        description: t('attemptsDescription'),
                        side: 'bottom',
                        align: 'start'
                    }
                },
                {
                    element: '#tour-score',
                    popover: {
                        title: t('score'),
                        description: t('scoreDescription'),
                        side: 'bottom',
                        align: 'start'
                    }
                },
                {
                    element: '#tour-player',
                    popover: {
                        title: t('player'),
                        description: t('playerDescription'),
                        side: 'top',
                        align: 'start'
                    }
                },
                {
                    element: '#tour-input',
                    popover: {
                        title: t('input'),
                        description: t('inputDescription'),
                        side: 'top',
                        align: 'start'
                    }
                },
                {
                    element: '#tour-controls',
                    popover: {
                        title: t('controls'),
                        description: t('controlsDescription'),
                        side: 'top',
                        align: 'start'
                    }
                }
            ]
        });

        // Small delay to ensure DOM is ready
        setTimeout(() => {
            driverObj.drive();
        }, 1000);

    }, [t]);

    return null;
}