import { useEffect, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { getStaticImage } from "@/lib/utils";
import { Image, Select } from "@/components";
import { filterInput } from "@/lib/utils/sensitiveWords";

export interface LetterToHuangyanpeiProps {
  /** 是否可见 */
  visible?: boolean;
  /** 关闭回调 */
  onClose?: () => void;
  /** 提交回调 */
  onSubmit?: (values: string[]) => void;
}

/**
 * LetterToHuangyanpei 组件 - 写给黄炎培先生的信
 * 包含飞入和放大动画
 */
const LetterToHuangyanpei = ({
  visible = false,
  onClose,
  onSubmit,
}: LetterToHuangyanpeiProps) => {
  // 下划线可填写内容
  const [blankValues, setBlankValues] = useState<string[]>([]);
  // 每个空的校验状态：true 表示该空当前不符合要求
  const [blankErrors, setBlankErrors] = useState<boolean[]>([]);

  // 是否已提交：提交后隐藏编辑信件，展示只读信件
  const [submitted, setSubmitted] = useState(false);

  // 填空类型定义：0=填空1（限填），1=填空2（任填），2=填空3（任填），3=填空4（限填）
  const BLANK_1_ANSWER = "手脑并用";
  const BLANK_4_ANSWER = "有业者乐业";

  // 填空1的选项
  const BLANK_1_OPTIONS = [
    "手脑并用",
    "有业者乐业",
    // "知行合一",
    // "学以致用",
    // "理论实践"
  ];

  // 填空4的选项
  const BLANK_4_OPTIONS = [
    "手脑并用",
    "有业者乐业",
    // "有业者敬业",
    // "有业者精业",
    // "有业者成业",
  ];

  // 校验输入：确保所有填空符合标准
  const validateBlanks = () => {
    // 计算占位总数，防止有些没被输入过而是 undefined
    const placeholderCount = (letterContent.match(/____/g) || []).length;

    const nextErrors: boolean[] = Array(placeholderCount).fill(false);
    const nextValues: string[] = [...blankValues];
    let hasError = false;

    for (let i = 0; i < placeholderCount; i++) {
      const raw = nextValues[i] || "";
      const v = raw.trim();

      if (i === 0) {
        // 填空1：限填，必须选择"手脑并用"
        if (!v || v !== BLANK_1_ANSWER) {
          nextValues[i] = "";
          nextErrors[i] = true;
          hasError = true;
        }
      } else if (i === 1 || i === 2) {
        // 填空2、3：任填，不能为空，不超过20个字
        if (!v || v.length > 20) {
          nextValues[i] = "";
          nextErrors[i] = true;
          hasError = true;
        }
      } else if (i === 3) {
        // 填空4：限填，必须选择"有业者乐业"
        if (!v || v !== BLANK_4_ANSWER) {
          nextValues[i] = "";
          nextErrors[i] = true;
          hasError = true;
        }
      }
    }

    setBlankValues(nextValues);
    setBlankErrors(nextErrors);

    return !hasError;
  };

  // 弹窗关闭后重置内容，方便下次重新填写
  useEffect(() => {
    if (!visible) {
      setSubmitted(false);
      setBlankValues([]);
      setBlankErrors([]);
    }
  }, [visible]);

  // 信件内容模板（根据设计稿）
  const letterContent = `敬爱的黄炎培先生：

您好！

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

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

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

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

  return (
    <AnimatePresence>
      {visible && (
        <>
          {/* 遮罩层 */}
          <motion.div
            className="fixed inset-0 bg-black/50 z-[100]"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.3 }}
            onClick={onClose}
          />

          {/* 信件容器 */}
          <motion.div
            className="fixed inset-0 z-[101] flex items-center justify-center pointer-events-none"
            initial={{ opacity: 0, scale: 0.5, y: 100 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.5, y: 100 }}
            transition={{
              type: "spring",
              stiffness: 300,
              damping: 30,
              duration: 0.6,
            }}
          >
            <div
              className="relative w-[1200px] h-full pointer-events-auto"
              onClick={(e) => e.stopPropagation()}
              style={{ perspective: "1200px" }}
            >
              {/* 编辑态 / 只读态：Y 轴翻转切换 */}
              <motion.div
                className="relative w-full h-full"
                initial={false}
                animate={{ rotateY: submitted ? 180 : 0 }}
                transition={{ duration: 0.7, ease: "easeInOut" }}
                style={{ transformStyle: "preserve-3d" }}
              >
                {/* 前面：编辑态 */}
                <div
                  className="absolute inset-0"
                  style={{
                    backfaceVisibility: "hidden",
                    // 编辑态展示时才响应事件，避免与背面点击冲突
                    pointerEvents: submitted ? "none" : "auto",
                  }}
                >
                  {/* 编辑态：信纸背景 */}
                  <img
                    src={getStaticImage("components/letter/信底")}
                    alt="信纸"
                    className="absolute inset-0 w-full h-full object-contain"
                  />

                  {/* 标题 - 垂直显示在左侧 */}
                  <div className="absolute left-[160px] top-20 bottom-0 [text-shadow:_0px_0px_4px_#b37921,_6px_6px_4px_#b37921,_6px_6px_4px_#b37921,_6px_6px_4px_#b37921]">
                    <div
                      className="text-white text-6xl font-bold tracking-[20px]"
                      style={{
                        writingMode: "vertical-rl",
                        textOrientation: "upright",
                      }}
                    >
                      写给黄炎培先生的信
                    </div>
                  </div>

                  {/* 信件内容区域（可编辑） */}
                  <div className="absolute w-[700px] left-[320px] right-[180px] top-[80px] bottom-[180px] z-99">
                    <div className="text-[#4e402e] text-[26px] leading-relaxed">
                      {(() => {
                        let placeholderIndex = 0;
                        let foundNiHao = false;
                        return letterContent
                          .split("\n")
                          .map((line, lineIndex) => {
                            // 检测是否已经找到"您好"行
                            if (line.includes("您好")) {
                              foundNiHao = true;
                            }

                            // "您好"行之后的非空行需要首行缩进
                            const needsIndent =
                              foundNiHao &&
                              line.trim() !== "" &&
                              !line.includes("您好");

                            const segments = line.split("____");
                            return (
                              <div
                                key={lineIndex}
                                style={needsIndent ? { textIndent: "2em" } : {}}
                              >
                                {segments.map((part, partIndex) => {
                                  const isLast =
                                    partIndex === segments.length - 1;
                                  if (isLast) {
                                    return (
                                      <span
                                        key={`part-${lineIndex}-${partIndex}`}
                                      >
                                        {part}
                                      </span>
                                    );
                                  }

                                  const currentIndex = placeholderIndex++;
                                  const isLimitedFill =
                                    currentIndex === 0 || currentIndex === 3; // 填空1和填空4为限填
                                  const options =
                                    currentIndex === 0
                                      ? BLANK_1_OPTIONS
                                      : BLANK_4_OPTIONS;

                                  return (
                                    <span
                                      key={`part-${lineIndex}-${partIndex}`}
                                    >
                                      {part}
                                      {isLimitedFill ? (
                                        // 限填：下拉选择
                                        <Select
                                          className="inline"
                                          options={options.map((opt) => ({
                                            value: opt,
                                            label: opt,
                                          }))}
                                          value={
                                            blankValues[currentIndex] ?? ""
                                          }
                                          onChange={(selectedValue) => {
                                            const next = [...blankValues];
                                            next[currentIndex] = selectedValue;
                                            setBlankValues(next);

                                            // 用户再次选择时，清除该空的错误高亮
                                            if (blankErrors[currentIndex]) {
                                              const nextErrs = [...blankErrors];
                                              nextErrs[currentIndex] = false;
                                              setBlankErrors(nextErrs);
                                            }
                                          }}
                                          placeholder="请选择"
                                          error={blankErrors[currentIndex]}
                                          zIndex={10000}
                                          fitContent={true}
                                        />
                                      ) : (
                                        // 任填：文本输入，限制20个字，敏感词过滤
                                        <input
                                          name={`blank-${currentIndex}`}
                                          className={`inline-block w-[100px] h-[36px] mx-2 bg-transparent border-b-2 border-dashed [font-size:26px_!important] text-center outline-none ${
                                            blankErrors[currentIndex]
                                              ? "border-red-500"
                                              : "border-[#4e402e]"
                                          }`}
                                          autoComplete="off"
                                          value={
                                            blankValues[currentIndex] ?? ""
                                          }
                                          maxLength={20}
                                          onChange={(e) => {
                                            const rawValue = e.target.value;
                                            // 应用敏感词过滤
                                            const filteredValue =
                                              filterInput(rawValue);

                                            const next = [...blankValues];
                                            next[currentIndex] = filteredValue;
                                            setBlankValues(next);

                                            // 用户再次输入时，清除该空的错误高亮
                                            if (blankErrors[currentIndex]) {
                                              const nextErrs = [...blankErrors];
                                              nextErrs[currentIndex] = false;
                                              setBlankErrors(nextErrs);
                                            }
                                          }}
                                        />
                                      )}
                                    </span>
                                  );
                                })}
                              </div>
                            );
                          });
                      })()}
                    </div>
                  </div>

                  {/* 笔的图片 */}
                  <div className="absolute bottom-[150px] -right-30">
                    <img
                      src={getStaticImage("components/letter/笔")}
                      alt="笔"
                      className="w-full h-full object-contain"
                    />
                  </div>

                  {/* 提交按钮：切换到只读信件态 */}
                  <div className="absolute bottom-[80px] left-1/2 transform -translate-x-1/2 z-99">
                    <Image
                      src={getStaticImage("components/letter/可提交状态")}
                      alt="可提交状态"
                      onClick={() => {
                        if (!validateBlanks()) return;
                        setSubmitted(true);
                      }}
                      button
                    />
                  </div>
                </div>

                {/* 背面：只读态 */}
                <div
                  className="absolute inset-0"
                  style={{
                    transform: "rotateY(180deg)",
                    backfaceVisibility: "hidden",
                    // 只读态展示时才响应事件
                    pointerEvents: submitted ? "auto" : "none",
                  }}
                >
                  {/* 只读态：新背景 */}
                  <img
                    src={getStaticImage("components/letter/信")}
                    alt="信件"
                    className="absolute inset-0 w-full h-full object-contain"
                  />
                  <Image
                    src={getStaticImage("components/close")}
                    alt="信纸"
                    className="absolute right-38 top-0"
                    button
                    onClick={() => {
                      setSubmitted(false);
                    }}
                  />

                  {/* 信件内容区域（只读） */}
                  <div className="absolute w-[700px] left-[260px] right-[180px] top-[80px] bottom-[180px] z-99">
                    <div className="text-[#4e402e] text-[26px] leading-relaxed">
                      {(() => {
                        let placeholderIndex = 0;
                        let foundNiHao = false;
                        return letterContent
                          .split("\n")
                          .map((line, lineIndex) => {
                            if (line.includes("您好")) {
                              foundNiHao = true;
                            }

                            const needsIndent =
                              foundNiHao &&
                              line.trim() !== "" &&
                              !line.includes("您好");

                            const segments = line.split("____");
                            return (
                              <div
                                key={lineIndex}
                                style={needsIndent ? { textIndent: "2em" } : {}}
                              >
                                {segments.map((part, partIndex) => {
                                  const isLast =
                                    partIndex === segments.length - 1;
                                  if (isLast) {
                                    return (
                                      <span
                                        key={`part-${lineIndex}-${partIndex}`}
                                      >
                                        {part}
                                      </span>
                                    );
                                  }

                                  const currentIndex = placeholderIndex++;
                                  const value = blankValues[currentIndex] ?? "";

                                  return (
                                    <span
                                      key={`part-${lineIndex}-${partIndex}`}
                                    >
                                      {part}
                                      {value || "　　"}
                                    </span>
                                  );
                                })}
                              </div>
                            );
                          });
                      })()}
                    </div>
                  </div>

                  {/* 寄出按钮：关闭窗口 */}
                  <div className="absolute bottom-[80px] left-1/2 transform -translate-x-1/2 z-99">
                    <Image
                      src={getStaticImage("components/letter/寄出")}
                      alt="寄出"
                      onClick={() => {
                        // 寄出前再次校验，确保所有填空符合标准
                        if (validateBlanks()) {
                          onSubmit?.(blankValues);
                        }
                      }}
                      button
                    />
                  </div>
                </div>
              </motion.div>
            </div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
};

export default LetterToHuangyanpei;