"use client"

import { Loader2, Sparkles, BookOpen } from "lucide-react"
import { cn } from "@/shared/lib/utils"
import { Button } from "@/shared/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/shared/components/ui/card"

type ExamModeSelectorProps = {
  mode: "manual" | "ai"
  setMode: (mode: "manual" | "ai") => void
  isPending: boolean
  handleCreateClick: () => void
}

export function ExamModeSelector({
  mode,
  setMode,
  isPending,
  handleCreateClick,
}: ExamModeSelectorProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Assembly Mode</CardTitle>
        <CardDescription>
          Choose how to build the exam structure.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex flex-col space-y-3">
          <button
            type="button"
            className={cn(
              "relative flex cursor-pointer flex-col rounded-lg border p-4 shadow-sm outline-none transition-all hover:bg-accent hover:text-accent-foreground text-left",
              mode === "manual" ? "border-primary ring-1 ring-primary" : "border-border"
            )}
            onClick={() => setMode("manual")}
          >
            <div className="flex items-center gap-2">
              <BookOpen className="h-4 w-4 text-primary" />
              <span className="font-medium">Manual Assembly</span>
            </div>
            <span className="mt-1 text-xs text-muted-foreground">
              Manually select questions from the bank and organize structure.
            </span>
          </button>

          <button
            type="button"
            className={cn(
              "relative flex cursor-pointer flex-col rounded-lg border p-4 shadow-sm outline-none transition-all hover:bg-accent hover:text-accent-foreground text-left",
              mode === "ai" ? "border-primary ring-1 ring-primary" : "border-border"
            )}
            onClick={() => setMode("ai")}
          >
            <div className="flex items-center gap-2">
              <Sparkles className="h-4 w-4 text-primary" />
              <span className="font-medium">AI Generation</span>
            </div>
            <span className="mt-1 text-xs text-muted-foreground">
              Automatically generate a draft exam based on your input.
            </span>
          </button>
        </div>
      </CardContent>
      <CardFooter>
        <Button type="button" className="w-full" disabled={isPending} onClick={handleCreateClick}>
          {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
          {isPending
            ? "Creating Draft..."
            : mode === "ai"
              ? "后台生成试卷"
              : "Create & Start Building"}
        </Button>
      </CardFooter>
    </Card>
  )
}
