import LetterTemplate, { type LetterFieldConfig } from './LetterTemplate'

export interface LetterToHuangyanpeiProps {
  visible?: boolean
  onClose?: () => void
  onSubmit?: (values: string[]) => void
  onAnimationEnd?: () => void
  audioSrc?: string
  showVideo?: boolean
  videoSrc?: string
  replyImageSrc?: string
  replyVideoSrc?: string
}

const commonSelectField: LetterFieldConfig = {
  type: 'select',
  placeholder: '请选择',
  fitContent: false,
  className: '!w-[120px] !min-w-[120px] shrink-0 px-0',
  options: [
    { value: '手脑并用', label: '手脑并用' },
    { value: '有业者乐业', label: '有业者乐业' },
  ],
}

const letterContent = `敬爱的黄炎培先生：
您好！

今天，我循着您的足迹，走进了川沙小学堂的新式课堂，亲历了中华职业学校“手脑并用”的实训时光。那些您为破除旧教育桎梏的奔走、为推广职业教育的坚守、为支援国家危亡的热忱，不再是书本上的文字，而是可感可触的精神力量，深深烙印在我心中。

我终于明白，您喊出的“双手万能、____”，不是一句口号，而是我们的立身之本；您践行的“教育救国、实业报国”，不是一段历史，而是我们这代人接续的使命；您坚守的“因时求变”，不是一种选择，而是我们面对未来的底气。

我是____专业的学生，今后，我会在实训课堂上精益求精，像当年中华职校的学长学姐那样，把技能练到极致；我会在志愿服务中践行担当，用所学知识为身边人、为社会做实事；我更会紧跟时代步伐，努力成为____领域的技能人才，为中国制造升级、为民族产业振兴添砖加瓦！

请您放心，您播下的职教火种，我们会让它在新时代燃烧得更旺；您毕生追求的“使无业者有业，使____”的愿景，我们会用青春和汗水去实现！`

const fields: Record<number, LetterFieldConfig> = {
  0: {
    ...commonSelectField,
    correctValue: '手脑并用',
    hints: {
      error: '“双手万能、手脑并用”是黄炎培职业教育思想的核心理念之一。',
    },
    readOnlyFallback: '手脑并用',
  },
  1: {
    type: 'input',
    maxLength: 12,
    widthClassName: 'w-[120px]',
    readOnlyFallback: '',
  },
  2: {
    type: 'input',
    maxLength: 12,
    widthClassName: 'w-[120px]',
    readOnlyFallback: '',
  },
  3: {
    ...commonSelectField,
    correctValue: '有业者乐业',
    hints: {
      error: '黄炎培把职业教育的目的概括为“使无业者有业，使有业者乐业”。',
    },
    readOnlyFallback: '有业者乐业',
  },
}

const LetterToHuangyanpei = ({
  visible = false,
  onClose,
  onSubmit,
  onAnimationEnd,
  audioSrc = 'audio/letter/4不忘初心.m4a',
  showVideo = true,
  videoSrc = 'video/letter/neihua_jixin.mp4',
  replyImageSrc = 'components/letter/点击信详情-黄炎培',
  replyVideoSrc = 'video/letter/huangyanpei_gaizhang.mp4',
}: LetterToHuangyanpeiProps) => {
  return (
    <LetterTemplate
      visible={visible}
      onClose={onClose}
      onSubmit={onSubmit}
      onAnimationEnd={onAnimationEnd}
      title="写给黄炎培先生的信"
      letterContent={letterContent}
      fields={fields}
      contentClassName="!text-[25px]"
      audioSrc={audioSrc}
      showVideo={showVideo}
      videoSrc={videoSrc}
      replyVideoSrc={replyVideoSrc}
      replyImageSrc={replyImageSrc}
    />
  )
}

export default LetterToHuangyanpei