import { AppSidebar } from "@/modules/layout/components/app-sidebar"
import { SidebarProvider } from "@/modules/layout/components/sidebar-provider"
import { SiteHeader } from "@/modules/layout/components/site-header"
import {
  AiClientProvider,
} from "@/modules/ai/context/ai-client-provider"
import { AiAssistantWidget } from "@/modules/ai/components/ai-assistant-widget"
import {
  aiChatAction,
  suggestSimilarQuestionsAction,
  suggestGradingAction,
  generateLessonContentAction,
  generateQuestionVariantAction,
  analyzeWeaknessAction,
  generateChildSummaryAction,
  recommendStudyPathAction,
  getAiUsageStatsAction,
} from "@/modules/ai/actions"
import type { AiClientService } from "@/modules/ai/types"

const aiClientService: AiClientService = {
  chat: aiChatAction,
  suggestSimilarQuestions: suggestSimilarQuestionsAction,
  suggestGrading: suggestGradingAction,
  generateLessonContent: generateLessonContentAction,
  generateQuestionVariant: generateQuestionVariantAction,
  analyzeWeakness: analyzeWeaknessAction,
  generateChildSummary: generateChildSummaryAction,
  recommendStudyPath: recommendStudyPathAction,
  getAiUsageStats: getAiUsageStatsAction,
}

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}): React.ReactNode {
  return (
    <AiClientProvider service={aiClientService}>
      <SidebarProvider sidebar={<AppSidebar />}>
        <a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 focus:bg-background focus:text-foreground focus:border focus:border-border focus:rounded-md focus:m-2">
          Skip to main content
        </a>
        <SiteHeader />
        <main id="main-content" className="flex-1 overflow-auto p-6">
          {children}
        </main>
        <AiAssistantWidget />
      </SidebarProvider>
    </AiClientProvider>
  )
}
