"use client"

import { useTranslations } from "next-intl"
import { Input } from "@/shared/components/ui/input"
import { Label } from "@/shared/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/components/ui/select"
import { SUBJECTS, GRADES } from "../constants"

/**
 * 教材表单字段共享组件。
 *
 * 用于 TextbookFormDialog（创建模式）和 TextbookSettingsDialog（编辑模式），
 * 消除 title/subject/grade/publisher 四个字段的 JSX 重复。
 *
 * - 创建模式：不传 defaultValues，字段使用 placeholder
 * - 编辑模式：传 defaultValues，字段使用 defaultValue
 */
export interface TextbookFormFieldsProps {
  /** 编辑模式下的默认值；创建模式不传 */
  defaultValues?: {
    title?: string | null
    subject?: string | null
    grade?: string | null
    publisher?: string | null
  }
}

export function TextbookFormFields({ defaultValues }: TextbookFormFieldsProps): React.ReactNode {
  const t = useTranslations("textbooks")
  const isEdit = defaultValues !== undefined
  // null → undefined 转换：Input/Select 的 defaultValue 不接受 null
  const dv = defaultValues ?? {}
  const title = dv.title ?? undefined
  const subject = dv.subject ?? undefined
  const grade = dv.grade ?? undefined
  const publisher = dv.publisher ?? undefined

  return (
    <div className="grid gap-4 py-4">
      <div className="grid grid-cols-4 items-center gap-4">
        <Label htmlFor="title" className="text-right">
          {t("field.title")}
        </Label>
        <Input
          id="title"
          name="title"
          defaultValue={title}
          placeholder={isEdit ? undefined : t("field.titlePlaceholder")}
          className="col-span-3"
          required
        />
      </div>
      <div className="grid grid-cols-4 items-center gap-4">
        <Label htmlFor="subject" className="text-right">
          {t("field.subject")}
        </Label>
        <Select name="subject" defaultValue={subject} required>
          <SelectTrigger className="col-span-3">
            <SelectValue placeholder={t("field.subjectPlaceholder")} />
          </SelectTrigger>
          <SelectContent>
            {SUBJECTS.map((s) => (
              <SelectItem key={s.value} value={s.value}>
                {t(`subject.${s.labelKey}`)}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
      <div className="grid grid-cols-4 items-center gap-4">
        <Label htmlFor="grade" className="text-right">
          {t("field.grade")}
        </Label>
        <Select name="grade" defaultValue={grade} required>
          <SelectTrigger className="col-span-3">
            <SelectValue placeholder={t("field.gradePlaceholder")} />
          </SelectTrigger>
          <SelectContent>
            {GRADES.map((g) => (
              <SelectItem key={g.value} value={g.value}>
                {t(`grade.${g.labelKey}`)}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
      <div className="grid grid-cols-4 items-center gap-4">
        <Label htmlFor="publisher" className="text-right">
          {t("field.publisher")}
        </Label>
        <Input
          id="publisher"
          name="publisher"
          defaultValue={publisher}
          placeholder={isEdit ? undefined : t("field.publisherPlaceholder")}
          className="col-span-3"
        />
      </div>
    </div>
  )
}
