'use client';

import { useEffect } from 'react';
import { driver } from 'driver.js';
import 'driver.js/dist/driver.css';

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

        if (hasCompletedOnboarding) {
            return;
        }

        const driverObj = driver({
            showProgress: true,
            animate: true,
            allowClose: true,
            doneBtnText: 'Done',
            nextBtnText: 'Next',
            prevBtnText: 'Previous',
            onDestroyed: () => {
                localStorage.setItem('hoerdle_onboarding_completed', 'true');
            },
            steps: [
                {
                    element: '#tour-genres',
                    popover: {
                        title: 'Genres & Specials',
                        description: 'Choose a specific genre or a curated special event here.',
                        side: 'bottom',
                        align: 'start'
                    }
                },
                {
                    element: '#tour-news',
                    popover: {
                        title: 'News',
                        description: 'Stay updated with the latest news and announcements.',
                        side: 'top',
                        align: 'start'
                    }
                },
                {
                    element: '#tour-title',
                    popover: {
                        title: 'Hördle',
                        description: 'This is the daily puzzle. One new song every day per genre.',
                        side: 'bottom',
                        align: 'start'
                    }
                },
                {
                    element: '#tour-status',
                    popover: {
                        title: 'Attempts',
                        description: 'You have a limited number of attempts to guess the song.',
                        side: 'bottom',
                        align: 'start'
                    }
                },
                {
                    element: '#tour-score',
                    popover: {
                        title: 'Score',
                        description: 'Your current score. Try to keep it high!',
                        side: 'bottom',
                        align: 'start'
                    }
                },
                {
                    element: '#tour-player',
                    popover: {
                        title: 'Player',
                        description: 'Listen to the snippet. Each additional play reduces your potential score.',
                        side: 'top',
                        align: 'start'
                    }
                },
                {
                    element: '#tour-input',
                    popover: {
                        title: 'Input',
                        description: 'Type your guess here. Search for artist or title.',
                        side: 'top',
                        align: 'start'
                    }
                },
                {
                    element: '#tour-controls',
                    popover: {
                        title: 'Controls',
                        description: 'Start the music or skip to the next snippet if you\'re stuck.',
                        side: 'top',
                        align: 'start'
                    }
                }
            ]
        });

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

    }, []);

    return null;
}