@once
@push('scripts')
<script>
    // Tour System
    class SystemTour {
        constructor() {
            this.currentStep = 0;
            this.steps = [];
            this.isActive = false;
            this.overlay = null;
            this.tooltip = null;
        }

        init(steps) {
            this.steps = steps;
            
            if (localStorage.getItem('tour_completed') === 'true') {
                return;
            }
            
            if (!localStorage.getItem('tour_started')) {
                setTimeout(() => this.start(), 1500);
            }
        }

        start() {
            this.isActive = true;
            this.currentStep = 0;
            localStorage.setItem('tour_started', 'true');
            this.createOverlay();
            this.showStep(0);
        }

        createOverlay() {
            this.overlay = document.createElement('div');
            this.overlay.className = 'tour-overlay';
            this.overlay.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.7);
                z-index: 9998;
                display: none;
            `;
            document.body.appendChild(this.overlay);
        }

        showStep(index) {
            if (index >= this.steps.length) {
                this.complete();
                return;
            }

            const step = this.steps[index];
            let element = document.querySelector(step.selector);
            
            // Try alternative selectors if element not found
            if (!element && step.selector.includes(':contains')) {
                const text = step.selector.match(/:contains\("(.+)"\)/)[1];
                element = Array.from(document.querySelectorAll('.fi-sidebar-nav-item')).find(
                    el => el.textContent.trim().includes(text)
                );
            }
            
            if (!element) {
                console.warn('Element not found:', step.selector);
                this.next();
                return;
            }

            if (this.tooltip) {
                this.tooltip.remove();
            }

            this.overlay.style.display = 'block';
            const rect = element.getBoundingClientRect();
            this.highlightElement(rect);
            this.createTooltip(step, rect);
            element.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }

        highlightElement(rect) {
            const existingHighlight = document.querySelector('.tour-highlight');
            if (existingHighlight) existingHighlight.remove();

            const highlight = document.createElement('div');
            highlight.className = 'tour-highlight';
            highlight.style.cssText = `
                position: fixed;
                top: ${rect.top - 4}px;
                left: ${rect.left - 4}px;
                width: ${rect.width + 8}px;
                height: ${rect.height + 8}px;
                border-radius: 8px;
                box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.5), 0 0 0 9999px rgba(0, 0, 0, 0.7);
                z-index: 9999;
                pointer-events: none;
                transition: all 0.3s ease;
            `;
            document.body.appendChild(highlight);
        }

        createTooltip(step, rect) {
            this.tooltip = document.createElement('div');
            this.tooltip.className = 'tour-tooltip';
            this.tooltip.style.cssText = `
                position: fixed;
                z-index: 10000;
                background: white;
                border-radius: 12px;
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
                width: 320px;
                animation: slideIn 0.3s ease;
            `;

            const position = step.position || 'right';
            let top, left;
            
            switch(position) {
                case 'right':
                    top = rect.top + (rect.height / 2) - 100;
                    left = rect.right + 16;
                    break;
                case 'left':
                    top = rect.top + (rect.height / 2) - 100;
                    left = rect.left - 336;
                    break;
                default:
                    top = rect.top + (rect.height / 2) - 100;
                    left = rect.right + 16;
            }

            if (left < 16) left = 16;
            if (left + 320 > window.innerWidth - 16) left = window.innerWidth - 336;
            if (top < 16) top = 16;
            if (top + 200 > window.innerHeight - 16) top = window.innerHeight - 216;

            this.tooltip.style.top = `${top}px`;
            this.tooltip.style.left = `${left}px`;

            this.tooltip.innerHTML = `
                <div style="background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); padding: 12px 16px; border-radius: 12px 12px 0 0;">
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <svg style="width: 20px; height: 20px; color: white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                        <h3 style="color: white; font-size: 16px; font-weight: 600; margin: 0;">${step.title}</h3>
                    </div>
                </div>
                <div style="padding: 16px;">
                    <p style="color: #374151; font-size: 14px; line-height: 1.5; margin: 0 0 12px 0;">${step.description}</p>
                    ${step.features ? `
                        <div style="margin-top: 12px;">
                            <p style="color: #6b7280; font-size: 12px; font-weight: 600; margin: 0 0 8px 0;">FEATURES:</p>
                            <ul style="margin: 0; padding-left: 20px;">
                                ${step.features.map(f => `<li style="color: #4b5563; font-size: 12px; margin: 4px 0;">${f}</li>`).join('')}
                            </ul>
                        </div>
                    ` : ''}
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 20px;">
                        <div>
                            <span style="color: #9ca3af; font-size: 12px;">Step ${step.stepNumber || this.currentStep + 1} of ${this.steps.length}</span>
                        </div>
                        <div style="display: flex; gap: 8px;">
                            ${this.currentStep > 0 ? `<button class="tour-btn-back" style="background: #f3f4f6; color: #374151; border: none; padding: 6px 12px; border-radius: 6px; font-size: 13px; cursor: pointer;">Back</button>` : ''}
                            <button class="tour-btn-skip" style="background: #f3f4f6; color: #6b7280; border: none; padding: 6px 12px; border-radius: 6px; font-size: 13px; cursor: pointer;">Skip</button>
                            <button class="tour-btn-next" style="background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); color: white; border: none; padding: 6px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer;">
                                ${this.currentStep === this.steps.length - 1 ? 'Finish' : 'Next'}
                            </button>
                        </div>
                    </div>
                </div>
            `;

            document.body.appendChild(this.tooltip);

            this.tooltip.querySelector('.tour-btn-next')?.addEventListener('click', () => this.next());
            this.tooltip.querySelector('.tour-btn-back')?.addEventListener('click', () => this.back());
            this.tooltip.querySelector('.tour-btn-skip')?.addEventListener('click', () => this.skip());
        }

        next() {
            this.currentStep++;
            this.showStep(this.currentStep);
        }

        back() {
            if (this.currentStep > 0) {
                this.currentStep--;
                this.showStep(this.currentStep);
            }
        }

        skip() {
            this.complete();
        }

        complete() {
            this.isActive = false;
            localStorage.setItem('tour_completed', 'true');
            if (this.overlay) this.overlay.remove();
            if (this.tooltip) this.tooltip.remove();
            document.querySelector('.tour-highlight')?.remove();
        }

        restart() {
            localStorage.removeItem('tour_completed');
            localStorage.removeItem('tour_started');
            this.currentStep = 0;
            this.start();
        }
    }

    // Initialize tour when page loads
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(function() {
            if (window.tourSteps && window.tourSteps.length) {
                const tour = new SystemTour();
                tour.init(window.tourSteps);
                window.systemTour = tour;
            }
        }, 1000);
    });
</script>

<style>
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateX(-10px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    .tour-btn-next:hover, .tour-btn-back:hover, .tour-btn-skip:hover {
        transform: translateY(-1px);
    }
</style>
@endonce

@props(['steps' => []])

<script>
    window.tourSteps = @json($steps);
</script>

<button 
    onclick="if(window.systemTour) window.systemTour.restart(); else alert('Tour not loaded yet. Please refresh the page.')"
    class="fixed bottom-4 right-4 bg-gradient-to-r from-orange-500 to-pink-600 hover:from-orange-600 hover:to-pink-700 text-white rounded-full p-3 shadow-lg transition-all duration-200 z-50 group"
    title="Restart Tour"
>
    <svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
    </svg>
</button>