/**
 * Tutorial Overlay Component
 * Guides new players through game mechanics
 */

import React from 'react';
import { useSettingsStore } from '../../stores/settingsStore';
import { tutorialSteps } from '../../data/tutorialSteps';
import './TutorialOverlay.css';

export const TutorialOverlay = ({ step, onNext, onPrevious, onSkip }: any) => {
  if (!step) return null;

  const { tutorial } = useSettingsStore() as any;

  if (tutorial.completed || tutorial.skipped) {
    return null;
  }

  const currentStepIndex = tutorialSteps.findIndex(s => s.id === step.id);
  const isFirstStep = currentStepIndex === 0;
  const isLastStep = currentStepIndex === tutorialSteps.length - 1;

  const getPositionClass = () => {
    switch (step.position) {
      case 'top': return 'position-top';
      case 'bottom': return 'position-bottom';
      case 'left': return 'position-left';
      case 'right': return 'position-right';
      default: return 'position-center';
    }
  };

  return (
    <>
      {/* Spotlight overlay */}
      <div className="tutorial-overlay">
        {step.highlight && <div className="tutorial-spotlight" />}
      </div>

      {/* Tutorial box */}
      <div className={`tutorial-box ${getPositionClass()}`}>
        <div className="tutorial-header">
          <div className="tutorial-title-section">
            <h3>{step.title}</h3>
            <div className="tutorial-progress">
              Step {currentStepIndex + 1} / {tutorialSteps.length}
            </div>
          </div>

          {/* Navigation buttons in header */}
          <div className="tutorial-header-buttons">
            {!isFirstStep && (
              <button className="tutorial-btn-small prev-btn-small" onClick={onPrevious} title="Previous Step">
                ←
              </button>
            )}

            {step.nextTrigger === 'manual' && (
              <button className="tutorial-btn-small next-btn-small" onClick={onNext} title="Next Step">
                →
              </button>
            )}

            <button className="tutorial-btn-small skip-btn-small" onClick={onSkip} title="Skip Tutorial">
              ✕
            </button>
          </div>
        </div>

        <div className="tutorial-content">
          <p>{step.content}</p>

          {/* Action hint for non-manual steps */}
          {step.nextTrigger !== 'manual' && (
            <div className="tutorial-hint-content">
              {step.nextTrigger === 'player_moved' && '➡️ Try moving with WASD to continue'}
              {step.nextTrigger === 'room_changed' && '➡️ Walk to the edge to continue'}
              {step.nextTrigger === 'challenge_started' && '➡️ Press SPACE on the challenge to continue'}
              {step.nextTrigger === 'era_changed' && '➡️ Click a different time period to continue'}
            </div>
          )}
        </div>

        {/* Bottom action buttons - larger for important actions */}
        {step.nextTrigger === 'manual' && (
          <div className="tutorial-footer">
            <button className="tutorial-btn-large next-btn-large" onClick={onNext}>
              {isLastStep ? '🎉 Start Playing!' : 'Continue →'}
            </button>
          </div>
        )}
      </div>
    </>
  );
};

export default TutorialOverlay;