import { QuestionMarkCircleIcon } from '@heroicons/react/24/outline';
import { useTour } from '../../hooks/useTour';
import { getTour } from '../../lib/tour/registry';

/**
 * دکمهٔ «راهنمای این صفحه».
 *
 * وجود تور قبل از هر هوکی بررسی می‌شود تا صفحه‌ای که راهنما ندارد — یعنی بیشتر
 * صفحات پنل — هیچ درخواستی برای وضعیت تورها نفرستد.
 */
export default function TourButton({ tourId, ready = false }: { tourId?: string; ready?: boolean }) {
  const tour = getTour(tourId);

  if (!tour) return null;

  return <TourLauncher tourId={tour.id} ready={ready} />;
}

/**
 * `ready` یعنی محتوای صفحه نشسته است و اجرای خودکارِ بار اول مجاز است.
 * صفحه‌ای که دکمه را مستقیم می‌گذارد و آماده‌بودنش را نمی‌داند، آن را false می‌گذارد
 * و تور فقط با کلیک اجرا می‌شود.
 */
function TourLauncher({ tourId, ready }: { tourId: string; ready: boolean }) {
  const { start } = useTour(tourId, { ready });

  return (
    <button
      type="button"
      aria-label="راهنمای این صفحه"
      title="راهنمای این صفحه"
      onClick={start}
      style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: 30, height: 30, borderRadius: 'var(--r-pill)',
        background: 'transparent', border: 'none', cursor: 'pointer',
        color: 'var(--text-3)', flexShrink: 0,
      }}
      onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--primary)')}
      onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--text-3)')}
    >
      <QuestionMarkCircleIcon style={{ width: 20, height: 20 }} />
    </button>
  );
}