/**
 * 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',
          },
        },
      ];

      // Chat step: highlight the bottom-right corner of the viewport where the
      // Bloby chat bubble lives. We point at a fixed 100×100 anchor (rendered
      // below) instead of the bubble element itself, so it works even in
      // dev:workspace mode where the widget isn't injected.
      steps.push({
        element: '#tour-chat-anchor',
        popover: {
          title: 'Chat',
          description: 'Your Bloby lives down here. Click here to talk with your Bloby.',
          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 works just like a normal app — you can add it to your phone's home screen and get notifications, and it only pings you when something actually matters. Ask Bloby to explain how to install it on your phone.</p>
            </div>
          `,
        },
      });

      const d = driver({
        showProgress: true,
        animate: true,
        allowClose: true,
        overlayColor: '#000',
        overlayOpacity: 0.92,
        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]);

  // Invisible, non-interactive anchor pinned to the bottom-right 100×100 of the
  // viewport. The chat tour step highlights this, so the overlay cutout frames
  // the corner where the Bloby chat bubble sits.
  return (
    <div
      id="tour-chat-anchor"
      aria-hidden
      style={{ position: 'fixed', right: 0, bottom: 0, width: 100, height: 100, pointerEvents: 'none', zIndex: 0 }}
    />
  );
}