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

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

  if (!tour) return null;

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

/** اجرای خودکار وظیفهٔ خود صفحه است؛ این دکمه فقط دستی اجرا می‌کند. */
function TourLauncher({ tourId }: { tourId: string }) {
  const { start } = useTour(tourId);

  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>
  );
}
