import type { JSX } from "react"
import { Suspense } from "react"
import Link from "next/link"
import { ArrowLeft } from "lucide-react"
import { getTranslations } from "next-intl/server"
import { Button } from "@/shared/components/ui/button"
import { Skeleton } from "@/shared/components/ui/skeleton"
import { TemplatePicker } from "@/modules/lesson-preparation/components/template-picker"
import { LessonPlanProviderSetup } from "@/modules/lesson-preparation/providers/lesson-plan-provider-setup"

export const dynamic = "force-dynamic"

export default async function NewLessonPlanPage(): Promise<JSX.Element> {
  const t = await getTranslations("lessonPreparation")
  return (
    <div className="p-6">
      <div className="mb-6 flex items-center gap-4">
        <Button asChild variant="ghost" size="sm">
          <Link href="/teacher/lesson-plans">
            <ArrowLeft className="mr-2 h-4 w-4" aria-hidden="true" />
            {t("action.back")}
          </Link>
        </Button>
        <h1 className="text-2xl font-bold tracking-tight">{t("title.new")}</h1>
      </div>
      <LessonPlanProviderSetup>
        <Suspense
          fallback={
            <div className="max-w-3xl mx-auto p-6 space-y-6">
              <Skeleton className="h-10 w-full" />
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                {Array.from({ length: 4 }).map((_, i) => (
                  <Skeleton key={i} className="h-[100px] w-full" />
                ))}
              </div>
            </div>
          }
        >
          <TemplatePicker />
        </Suspense>
      </LessonPlanProviderSetup>
    </div>
  )
}
