"use client"

import type { HomeworkAssignmentQuestionAnalytics } from "@/modules/homework/types"
import { useTranslations } from "next-intl"
import dynamic from "next/dynamic"

import { Skeleton } from "@/shared/components/ui/skeleton"

function ExamErrorExplorerFallback() {
  const t = useTranslations("examHomework")
  return (
    <div className="grid grid-cols-1 gap-0 md:grid-cols-3 h-[600px] divide-y md:divide-y-0 md:divide-x">
      <div className="md:col-span-2 flex h-full flex-col overflow-hidden">
        <div className="border-b px-6 py-4 bg-muted/5 flex items-center justify-between">
          <span className="text-sm font-medium">{t("homework.analytics.questionPreview")}</span>
        </div>
        <div className="flex-1 p-6 space-y-6">
          <Skeleton className="h-8 w-[60%]" />
          <div className="space-y-3">
            <Skeleton className="h-4 w-full" />
            <Skeleton className="h-4 w-[90%]" />
            <Skeleton className="h-4 w-[80%]" />
          </div>
          <div className="space-y-3 pt-4">
            <Skeleton className="h-12 w-full rounded-md" />
            <Skeleton className="h-12 w-full rounded-md" />
            <Skeleton className="h-12 w-full rounded-md" />
          </div>
        </div>
      </div>

      <div className="flex h-full flex-col overflow-hidden bg-muted/5">
        <div className="border-b px-6 py-4">
          <div className="text-sm font-medium">{t("homework.analytics.errorAnalysis")}</div>
        </div>
        <div className="flex-1 p-6 space-y-6">
          <div className="flex items-center gap-4 p-4 bg-background rounded-lg border shadow-sm">
            <Skeleton className="size-16 rounded-full shrink-0" />
            <div className="space-y-2 flex-1">
              <Skeleton className="h-4 w-20" />
              <Skeleton className="h-3 w-32" />
            </div>
          </div>

          <div className="space-y-4">
            <div className="text-xs font-medium text-muted-foreground uppercase tracking-wider">{t("homework.analytics.wrongAnswers")}</div>
            <div className="space-y-3">
              <Skeleton className="h-14 w-full rounded-md" />
              <Skeleton className="h-14 w-full rounded-md" />
              <Skeleton className="h-14 w-full rounded-md" />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

const LazyHomeworkAssignmentExamErrorExplorer = dynamic(
  () =>
    import("./homework-assignment-exam-error-explorer").then((m) => ({
      default: m.HomeworkAssignmentExamErrorExplorer,
    })),
  { ssr: false, loading: ExamErrorExplorerFallback }
)

export function HomeworkAssignmentExamErrorExplorerLazy({
  structure,
  questions,
  gradedSampleCount,
}: {
  structure: unknown
  questions: HomeworkAssignmentQuestionAnalytics[]
  gradedSampleCount: number
}) {
  return (
    <LazyHomeworkAssignmentExamErrorExplorer
      structure={structure}
      questions={questions}
      gradedSampleCount={gradedSampleCount}
    />
  )
}

