client/src/components/TutorialRefinity.tsx

import React from 'react';
import Refinity from './Refinity';

interface TutorialRefinityProps {
  weekNumber: number;
}

/**
 * Tutorial-specific wrapper for Deep Revision (Refinity)
 * - Only admin can create/edit tasks
 * - Users can only access admin-created tasks
 * - Users cannot see other users' revisions (individual practice)
 * - Uses separate backend storage for tutorial data
 */
const TutorialRefinity: React.FC<TutorialRefinityProps> = ({ weekNumber }) => {
  // Set tutorial mode in localStorage synchronously BEFORE rendering Refinity
  // This ensures Refinity detects tutorial mode on first render
  React.useLayoutEffect(() => {
    localStorage.setItem('refinityMode', 'tutorial');
    localStorage.setItem('tutorialWeekNumber', weekNumber.toString());
    return () => {
      localStorage.removeItem('refinityMode');
      localStorage.removeItem('tutorialWeekNumber');
    };
  }, [weekNumber]);

  // Also set it synchronously on first render
  if (typeof window !== 'undefined') {
    try {
      localStorage.setItem('refinityMode', 'tutorial');
      localStorage.setItem('tutorialWeekNumber', weekNumber.toString());
    } catch {}
  }

  return (
    <div className="tutorial-refinity-container" style={{ minHeight: '600px' }}>
      <Refinity />
    </div>
  );
};

export default TutorialRefinity;