"use client"

import { useTranslations } from "next-intl"
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
}

export function ExamBasicInfoForm({
  control,
  subjects,
  grades,
  loadingSubjects,
  loadingGrades,
}: ExamBasicInfoFormProps) {
  const t = useTranslations("examHomework")

  const DIFFICULTY_OPTIONS = [
    { value: "1", label: t("exam.form.difficultyLevel1") },
    { value: "2", label: t("exam.form.difficultyLevel2") },
    { value: "3", label: t("exam.form.difficultyLevel3") },
    { value: "4", label: t("exam.form.difficultyLevel4") },
    { value: "5", label: t("exam.form.difficultyLevel5") },
  ]

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t("exam.form.detailsTitle")}</CardTitle>
        <CardDescription>
          {t("exam.form.detailsDesc")}
        </CardDescription>
      </CardHeader>
      <CardContent className="grid gap-6">
        <TextField
          control={control}
          name="title"
          label={t("exam.form.title")}
          placeholder={t("exam.form.titlePlaceholder")}
        />

        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          <SelectField
            control={control}
            name="subject"
            label={t("exam.form.subject")}
            placeholder={loadingSubjects ? t("exam.form.loadingSubjects") : t("exam.form.subjectPlaceholder")}
            options={subjects.map((s) => ({ value: s.id, label: s.name }))}
            disabled={loadingSubjects}
          />
          <SelectField
            control={control}
            name="grade"
            label={t("exam.form.grade")}
            placeholder={loadingGrades ? t("exam.form.loadingGrades") : t("exam.form.gradePlaceholder")}
            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={t("exam.form.difficulty")}
            placeholder={t("exam.form.difficultyPlaceholder")}
            options={DIFFICULTY_OPTIONS}
          />
          <TextField
            control={control}
            name="totalScore"
            label={t("exam.form.totalScore")}
            type="number"
          />
          <TextField
            control={control}
            name="durationMin"
            label={t("exam.form.durationMin")}
            type="number"
          />
        </div>

        <TextField
          control={control}
          name="scheduledAt"
          label={t("exam.form.scheduledAt")}
          type="datetime-local"
          description={t("exam.form.scheduledAtDesc")}
        />
      </CardContent>
    </Card>
  )
}
