shanghai-residences/src/components/letter/LetterToSunzhongshan.tsx

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

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

/**
 * LetterToSunzhongshan 组件 - 写给孙中山爷爷的信
 * 包含飞入和放大动画
 */
const LetterToSunzhongshan = ({
  visible = false,
  onClose,
  onSubmit,
}: LetterToSunzhongshanProps) => {
  // 下划线可填写内容
  const [blankValues, setBlankValues] = useState<string[]>([]);

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

您好！

今天，我怀着崇敬的心情走进香山路7号，看着您亲手设计的房屋、勾画的《中国铁路全图》、撰写的《实业计划》手稿，仿佛能看到您为"振兴中华"奔走的身影。在李教授的解读中，我终于明白：您喊出的"____"，不是遥远的历史，而是我们这代人正在接续的接力；您追求的"____(空里填天下为公)"，不是抽象的理念，而是从服务身边人、做好专业事开始的担当；您秉持的"____(空里填与时俱进)"，不是过去的选择，而是面对未来时必须有的勇气。

我是____专业的学生，今后，我会以您"知难行易"的信念，在专业学习中攻克难题，就像您当年为了革命理想屡败屡战；我会以您"心系民众"的情怀，参与____，帮身边人解决实际困难；我更会记住您"适乎世界之潮流"的智慧，紧跟时代步伐，努力用____为民族复兴添砖加瓦。

请您放心，"革命尚未成功，同志仍须努力"的嘱托，我们从未忘记；"振兴中华"的初心，我们会用一生践行！`;

  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()}
            >
              {/* 信纸背景 */}
              <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}
                          className="mb-2"
                          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++;
                            return (
                              <span key={`part-${lineIndex}-${partIndex}`}>
                                {part}
                                <input
                                  className="inline-block w-[100px] h-[36px] mx-2 align-middle bg-transparent border-b-2 border-dashed border-[#4e402e] text-[24px] text-center outline-none"
                                  value={blankValues[currentIndex] ?? ""}
                                  onChange={(e) => {
                                    const next = [...blankValues];
                                    next[currentIndex] = e.target.value;
                                    setBlankValues(next);
                                  }}
                                />
                              </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={() => onSubmit?.(blankValues)}
                  button
                />
              </div>

              {/* 寄信图标（可选，如果需要的话） */}
              <div className="absolute top-[50px] right-[50px] w-[100px] h-[100px] opacity-80">
                <img
                  src={getStaticImage("components/letter/寄信图标")}
                  alt="寄信"
                  className="w-full h-full object-contain"
                />
              </div>
            </div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
};

export default LetterToSunzhongshan;