import { Badge, Button, Tooltip } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { useTourStore } from '../../stores/tour.store';

/**
 * Floating help button (bottom-right corner) that opens the Tour Hub.
 * Shows a badge dot when there's a tour section in progress.
 */
export function TourTriggerButton() {
  const { openHub, sections, activeSectionId } = useTourStore();

  // Check if any section is in-progress (started but not completed)
  const hasInProgress = Object.values(sections).some(
    (s) => !s.completed && s.currentStep > 0
  );

  // Don't show the button if a tour is currently active (overlay is showing)
  if (activeSectionId) return null;

  return (
    <div
      style={{
        position: 'fixed',
        bottom: 24,
        right: 24,
        zIndex: 999,
      }}
    >
      <Tooltip title="Learning Tours" placement="left">
        <Badge dot={hasInProgress} offset={[-4, 4]}>
          <Button
            type="primary"
            shape="circle"
            size="large"
            icon={<QuestionCircleOutlined />}
            onClick={openHub}
            style={{ boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)' }}
          />
        </Badge>
      </Tooltip>
    </div>
  );
}
