/**
 * First-time workspace onboarding tour.
 * Uses driver.js to highlight key areas of the workspace.
 *
 * This entire folder (deleteme_onboarding) can be safely deleted
 * once you no longer need the tour. Just remove the import
 * from App.tsx as well.
 */

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

const TOUR_KEY = 'bloby_workspace_tour_done';

export default function WorkspaceTour({ disabled = false }: { disabled?: boolean }) {
  useEffect(() => {
    if (disabled) return;
    const val = localStorage.getItem(TOUR_KEY);
    if (val === '1') return;

    const timer = setTimeout(() => {
      // Prevent StrictMode double-fire
      if (localStorage.getItem(TOUR_KEY) === '1') return;

      // Build steps dynamically — skip missing elements
      const steps: any[] = [
        {
          element: '#tour-sidebar',
          popover: {
            title: 'Your Sidebar',
            description: 'When you ask Bloby to build something, it creates an App that shows up right here. Think of it as your personal app launcher.',
            side: 'right',
            align: 'start',
          },
        },
        {
          element: '#tour-dashboard',
          popover: {
            title: 'Your Dashboard',
            description: 'Bloby can add widgets here with a summary of your apps, the weather in your city, home automation controls... whatever you need at a glance.',
            side: 'left',
            align: 'start',
          },
        },
      ];

      // Only add chat step if the widget exists (not present in dev:workspace mode)
      if (document.getElementById('bloby-widget-toggle')) {
        steps.push({
          element: '#bloby-widget-toggle',
          popover: {
            title: 'Chat with Bloby',
            description: 'This is where you talk to your Bloby. Tell it what to build, ask questions, or just chat. It is always here for you.',
            side: 'left',
            align: 'end',
          },
        });
      }

      steps.push({
        popover: {
          title: 'A few things to know',
          description: `
            <div style="display:flex;flex-direction:column;gap:12px;font-size:13px;line-height:1.5">
              <p><strong>Make it yours.</strong> These widgets are just examples. You own this workspace and Bloby can transform it into anything you want.</p>
              <p><strong>Set a workspace password.</strong> By default, your workspace is open. Ask Bloby to add a password so only you can see your apps and data.</p>
              <p><strong>Keep your chat password safe.</strong> It controls access to Bloby, which has full access to this machine. Use a strong one. If you ever lose it, run <code style="background:rgba(255,255,255,0.1);padding:2px 6px;border-radius:4px;font-size:12px">bloby password-reset</code> in your terminal.</p>
              <p><strong>Bloby does more than build apps.</strong> It can research topics, manage files, run commands, and help with just about anything. Just ask.</p>
              <p><strong>Bloby wakes up on its own.</strong> Every 30 minutes, it checks in and can take action proactively. You can adjust this anytime.</p>
              <p><strong>Schedule anything.</strong> Ask things like "Every day at 6am, send me a briefing" or "In 40 minutes, remind me to call the dentist." Bloby handles cron jobs and one-time reminders.</p>
              <p><strong>Install it on your phone.</strong> Bloby is a PWA. You can add it to your home screen and enable push notifications. It only pings you when something actually matters, and you can tune that by asking.</p>
            </div>
          `,
        },
      });

      const d = driver({
        showProgress: true,
        animate: true,
        allowClose: true,
        overlayColor: '#000',
        overlayOpacity: 0.75,
        stagePadding: 12,
        stageRadius: 16,
        popoverClass: 'bloby-tour-popover',
        nextBtnText: 'Next →',
        prevBtnText: '← Back',
        doneBtnText: 'Got it!',
        onDestroyed: () => {
          localStorage.setItem(TOUR_KEY, '1');
        },
        steps,
      });

      d.drive();
    }, 800);

    return () => clearTimeout(timer);
  }, [disabled]);

  return null;
}
