'use client';

/**
 * Example usage of ExerciseSolver components
 * This file demonstrates how to use all the exercise components together
 */

import { ExerciseSolver, ExerciseCard } from './index';

/**
 * Example 1: Using ExerciseSolver with a complete exercise object
 */
export function ExerciseExample1() {
  const exercise = {
    id: 'ex-1',
    title: 'Quadratic Equation',
    description: 'Solve for x in the given quadratic equation',
    question: 'x^2 - 5x + 6 = 0',
    difficulty: 'easy' as const,
    points: 10,
    timeLimit: 300, // 5 minutes
    hints: [
      'Factor the quadratic expression',
      'Set each factor equal to zero',
      'Solve for x in both equations',
    ],
    status: 'not-started' as const,
  };

  const handleComplete = (_attempt: unknown) => {
    // Exercise completed! Handle attempt data
    // Award points, update progress, etc.
  };

  const handleSkip = () => {
    // Exercise skipped - move to next exercise
  };

  return (
    <div className="container mx-auto py-8">
      <ExerciseSolver
        exercise={exercise}
        onComplete={handleComplete}
        onSkip={handleSkip}
        enableHints={true}
        enableTimer={true}
      />
    </div>
  );
}

/**
 * Example 2: Exercise card grid for browsing exercises
 */
export function ExerciseGridExample() {
  const exercises = [
    {
      id: 'ex-1',
      title: 'Quadratic Equation',
      description: 'Solve for x in the given quadratic equation',
      question: 'x^2 - 5x + 6 = 0',
      difficulty: 'easy' as const,
      points: 10,
      hints: ['Factor the quadratic expression'],
    },
    {
      id: 'ex-2',
      title: 'Derivative Calculation',
      description: 'Find the derivative of the function',
      question: 'f(x) = 3x^2 + 2x - 1',
      difficulty: 'medium' as const,
      points: 20,
      hints: ['Use the power rule', 'Differentiate term by term'],
    },
    {
      id: 'ex-3',
      title: 'Integral Evaluation',
      description: 'Evaluate the definite integral',
      question: '\\int_0^1 x^2 dx',
      difficulty: 'hard' as const,
      points: 30,
      hints: ['Find the antiderivative', 'Apply the limits'],
    },
  ];

  return (
    <div className="container mx-auto py-8">
      <h1 className="text-3xl font-bold mb-6">Available Exercises</h1>
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {exercises.map((exercise) => (
          <ExerciseCard
            key={exercise.id}
            exercise={exercise}
            onClick={() => {
              // Navigate to exercise
            }}
            compact={false}
          />
        ))}
      </div>
    </div>
  );
}

/**
 * Example 3: Using ExerciseSolverWrapper with exercise ID
 * Note: This example requires ExerciseSolverWrapper to be implemented
 */
// export function ExerciseWrapperExample() {
//   return (
//     <div className="container mx-auto py-8">
//       <ExerciseSolverWrapper
//         exerciseId="ex-1"
//         onComplete={(attempt) => console.log('Completed:', attempt)}
//         onSkip={() => console.log('Skipped')}
//       />
//     </div>
//   );
// }

/**
 * Example 4: Compact exercise cards for a dashboard
 */
export function ExerciseDashboardExample() {
  const recentExercises = [
    {
      id: 'ex-1',
      title: 'Quadratic Equation',
      description: 'Solve for x',
      question: 'x^2 - 5x + 6 = 0',
      difficulty: 'easy' as const,
      points: 10,
      status: 'completed' as const,
      attempts: 2,
      bestScore: 100,
      hints: [],
    },
    {
      id: 'ex-2',
      title: 'Derivative Calculation',
      description: 'Find the derivative',
      question: 'f(x) = 3x^2 + 2x - 1',
      difficulty: 'medium' as const,
      points: 20,
      status: 'in-progress' as const,
      attempts: 1,
      hints: [],
    },
  ];

  return (
    <div className="space-y-4">
      <h2 className="text-xl font-semibold">Recent Exercises</h2>
      {recentExercises.map((exercise) => (
        <ExerciseCard
          key={exercise.id}
          exercise={exercise}
          onClick={() => {
            // Continue exercise
          }}
          compact={true}
        />
      ))}
    </div>
  );
}

/**
 * Example 5: Exercise with real-time validation
 */
export function ExerciseWithValidation() {
  const exercise = {
    id: 'ex-math-1',
    title: 'Solve the Equation',
    description: 'Find all real solutions for x',
    question: '2x + 3 = 11',
    difficulty: 'easy' as const,
    points: 5,
    hints: [
      'Subtract 3 from both sides',
      'Divide by 2',
    ],
  };

  return (
    <ExerciseSolver
      exercise={exercise}
      onComplete={(_attempt) => {
        // Update user progress
        // Award achievements
        // Sync with backend
      }}
      enableHints={true}
      showSolutionButton={true}
    />
  );
}

/**
 * Example 6: Timed exercise session
 */
export function TimedExerciseSession() {
  const exercises = [
    {
      id: 'quiz-1',
      title: 'Quick Math Quiz',
      description: 'Solve as many as you can in 5 minutes',
      question: '15 + 27 = ?',
      difficulty: 'easy' as const,
      points: 5,
      timeLimit: 300,
      hints: [],
    },
  ];

  return (
    <div className="container mx-auto py-8">
      <div className="max-w-2xl mx-auto">
        <h1 className="text-2xl font-bold mb-4">Timed Challenge</h1>
        <p className="text-muted-foreground mb-6">
          You have 5 minutes to complete as many exercises as possible!
        </p>
        {exercises[0] ? (
          <ExerciseSolver
            exercise={exercises[0]}
            enableTimer={true}
            enableHints={false}
            onComplete={() => {
              // Completed in time!
            }}
          />
        ) : (
          <p>No exercises available</p>
        )}
      </div>
    </div>
  );
}
