"use client"

import { useRouter } from "next/navigation"
import { useTranslations } from "next-intl"
import { Loader2, Sparkles, BookOpen, FileText, ArrowRight } from "lucide-react"
import { cn } from "@/shared/lib/utils"
import { Button } from "@/shared/components/ui/button"

export type ExamCreationMode = "manual" | "ai" | "rich"

type ExamModeSelectorProps = {
  mode: ExamCreationMode
  setMode: (mode: ExamCreationMode) => void
  isPending: boolean
  handleCreateClick: () => void
}

export function ExamModeSelector({
  mode,
  setMode,
  isPending,
  handleCreateClick,
}: ExamModeSelectorProps) {
  const router = useRouter()
  const t = useTranslations("examHomework")

  const modes: Array<{
    key: ExamCreationMode
    icon: typeof BookOpen
    title: string
    description: string
  }> = [
    {
      key: "manual",
      icon: BookOpen,
      title: t("exam.form.modeManual"),
      description: t("exam.form.modeManualDesc"),
    },
    {
      key: "ai",
      icon: Sparkles,
      title: t("exam.form.modeAi"),
      description: t("exam.form.modeAiDesc"),
    },
    {
      key: "rich",
      icon: FileText,
      title: t("exam.form.modeRich"),
      description: t("exam.form.modeRichDesc"),
    },
  ]

  return (
    <div className="space-y-4">
      {/* 顶部3个大卡片 */}
      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
        {modes.map((m) => {
          const Icon = m.icon
          const isActive = mode === m.key
          return (
            <button
              key={m.key}
              type="button"
              className={cn(
                "relative flex cursor-pointer flex-col rounded-lg border-2 p-5 shadow-sm outline-none transition-all text-left",
                isActive
                  ? "border-primary bg-primary/5 ring-2 ring-primary/20"
                  : "border-border hover:border-primary/50 hover:bg-accent/50"
              )}
              onClick={() => setMode(m.key)}
            >
              <div className="flex items-center gap-2">
                <div className={cn(
                  "flex h-10 w-10 items-center justify-center rounded-lg",
                  isActive ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
                )}>
                  <Icon className="h-5 w-5" />
                </div>
                <span className="font-semibold">{m.title}</span>
              </div>
              <span className="mt-2 text-sm text-muted-foreground leading-relaxed">
                {m.description}
              </span>
              {isActive && (
                <div className="absolute right-3 top-3 h-2 w-2 rounded-full bg-primary" />
              )}
            </button>
          )
        })}
      </div>

      {/* 富文本模式: 显示跳转按钮 */}
      {mode === "rich" && (
        <div className="rounded-lg border bg-muted/30 p-6 text-center">
          <p className="text-sm text-muted-foreground mb-4">
            {t("exam.form.modeRichHint")}
          </p>
          <Button
            type="button"
            size="lg"
            onClick={() => router.push("/teacher/exams/new")}
            className="gap-2"
          >
            <FileText className="h-4 w-4" />
            {t("exam.form.modeRichAction")}
            <ArrowRight className="h-4 w-4" />
          </Button>
        </div>
      )}

      {/* 手动/AI 模式: 显示创建按钮 */}
      {mode !== "rich" && (
        <div className="flex justify-end">
          <Button
            type="button"
            size="lg"
            disabled={isPending}
            onClick={handleCreateClick}
            className="gap-2 min-w-[200px]"
          >
            {isPending && <Loader2 className="h-4 w-4 animate-spin" />}
            {isPending
              ? t("exam.form.creating")
              : mode === "ai"
                ? t("exam.form.modeAiAction")
                : t("exam.form.modeManualAction")}
          </Button>
        </div>
      )}
    </div>
  )
}
