story-generator/src/pages/student-dashboard/PhonicsPage.tsx

import { useState } from "react";
import { CategoryTabs } from "@/components/phonics/CategoryTabs";
import { ExerciseGrid } from "@/components/phonics/ExerciseGrid";
import { ExercisePlayer } from "@/components/phonics/ExercisePlayer";
import { usePhonicsExercises } from "@/hooks/phonics/usePhonicsExercises";
import { useAuth } from "@/hooks/useAuth";

export function PhonicsPage() {
  const [selectedCategory, setSelectedCategory] = useState<string>();
  const [selectedExercise, setSelectedExercise] = useState<string>();
  const { user } = useAuth();
  const { data: exercises } = usePhonicsExercises(selectedCategory);

  const handleExerciseComplete = () => {
    setSelectedExercise(undefined);
  };

  if (!user) return null;

  if (selectedExercise) {
    const exercise = exercises?.find(ex => ex.id === selectedExercise);
    if (!exercise) return null;

    return (
      <ExercisePlayer
        exercise={exercise}
        student_id={user.id}
        onComplete={handleExerciseComplete}
        onExit={() => setSelectedExercise(undefined)}
      />
    );
  }

  return (
    <div className="container py-6 space-y-8">
      <div className="space-y-2">
        <h1 className="text-2xl font-bold">Exercícios Fônicos</h1>
        <p className="text-muted-foreground">
          Pratique seus conhecimentos com exercícios interativos
        </p>
      </div>

      <CategoryTabs
        selectedCategory={selectedCategory}
        onSelectCategory={setSelectedCategory}
      />

      <ExerciseGrid
        categoryId={selectedCategory}
        studentId={user.id}
        onSelectExercise={setSelectedExercise}
      />
    </div>
  );
}