import type { ClassroomSupportPage } from '@/business/classroom-support/types';
import { ClassroomSupportFilters } from '@/components/classroom-support/ClassroomSupportFilters';
import { ClassroomSupportHeader } from '@/components/classroom-support/ClassroomSupportHeader';
import { ClassroomSupportTryToday } from '@/components/classroom-support/ClassroomSupportTryToday';
import { ClassroomStrategyDetailModal } from '@/components/classroom-support/ClassroomStrategyDetailModal';
import { ClassroomStrategyGrid } from '@/components/classroom-support/ClassroomStrategyGrid';

interface ClassroomSupportViewProps {
  readonly page: ClassroomSupportPage;
}

export function ClassroomSupportView({ page }: ClassroomSupportViewProps) {
  return (
    <div className="space-y-6">
      <ClassroomSupportHeader />
      <ClassroomSupportTryToday
        strategy={page.tryTodayStrategy}
        isLoading={page.isLoading}
        error={page.error}
      />
      <ClassroomSupportFilters
        filters={page.filters}
        favoriteCount={page.favoriteCount}
        onSearchChange={page.setSearchQuery}
        onCategoryChange={page.setCategoryFilter}
        onAgeChange={page.setAgeFilter}
        onZoneChange={page.setZoneFilter}
        onToggleFavoritesOnly={page.toggleFavoritesOnly}
        onClearSearch={page.clearSearch}
      />
      <p className="text-sm text-slate-500">{page.filteredStrategies.length} strategies found</p>
      <ClassroomStrategyGrid page={page} />
      <ClassroomStrategyDetailModal
        strategy={page.selectedStrategy}
        isFavorite={page.selectedStrategy ? page.favoriteStrategyIds.has(page.selectedStrategy.id) : false}
        onToggleFavorite={page.toggleFavorite}
        onClose={page.closeStrategy}
      />
    </div>
  );
}
