"use client"

import type { Control } from "react-hook-form"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/shared/components/ui/card"
import { TextField } from "@/shared/components/form-fields/text-field"
import { SelectField } from "@/shared/components/form-fields/select-field"
import type { ExamFormValues } from "./exam-form-types"

type ExamBasicInfoFormProps = {
  control: Control<ExamFormValues>
  subjects: { id: string; name: string }[]
  grades: { id: string; name: string }[]
  loadingSubjects: boolean
  loadingGrades: boolean
}

const DIFFICULTY_OPTIONS = [
  { value: "1", label: "Level 1 (Easy)" },
  { value: "2", label: "Level 2" },
  { value: "3", label: "Level 3 (Medium)" },
  { value: "4", label: "Level 4" },
  { value: "5", label: "Level 5 (Hard)" },
]

export function ExamBasicInfoForm({
  control,
  subjects,
  grades,
  loadingSubjects,
  loadingGrades,
}: ExamBasicInfoFormProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Exam Details</CardTitle>
        <CardDescription>
          Define the core information for your exam.
        </CardDescription>
      </CardHeader>
      <CardContent className="grid gap-6">
        <TextField
          control={control}
          name="title"
          label="Title"
          placeholder="e.g. Midterm Mathematics Exam"
        />

        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <SelectField
            control={control}
            name="subject"
            label="Subject"
            placeholder={loadingSubjects ? "Loading subjects..." : "Select subject"}
            options={subjects.map((s) => ({ value: s.id, label: s.name }))}
            disabled={loadingSubjects}
          />
          <SelectField
            control={control}
            name="grade"
            label="Grade Level"
            placeholder={loadingGrades ? "Loading grades..." : "Select grade level"}
            options={grades.map((g) => ({ value: g.id, label: g.name }))}
            disabled={loadingGrades}
          />
        </div>

        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
          <SelectField
            control={control}
            name="difficulty"
            label="Difficulty"
            placeholder="Select level"
            options={DIFFICULTY_OPTIONS}
          />
          <TextField
            control={control}
            name="totalScore"
            label="Total Score"
            type="number"
          />
          <TextField
            control={control}
            name="durationMin"
            label="Duration (min)"
            type="number"
          />
        </div>

        <TextField
          control={control}
          name="scheduledAt"
          label="Schedule Start Time (Optional)"
          type="datetime-local"
          description="If set, this exam will be scheduled for a specific time."
        />
      </CardContent>
    </Card>
  )
}
