// Envelope that opens into a letter, shown after the heart is complete.
(function () {
  const { useState, useEffect, useRef } = React;
  const FLAP_OPEN_MS = 700;

  function LetterModal({ name, onClose }) {
    const [isOpen, setIsOpen] = useState(false);
    const [showLetter, setShowLetter] = useState(false);
    const closeRef = useRef(null);
    const letter = window.LETTER;
    const greeting =
      name && name !== letter.recipient ? letter.greetingWithName.replace("{name}", name) : letter.greeting;

    useEffect(() => {
      closeRef.current?.focus();
      const onKey = (e) => {
        if (e.key === "Escape") onClose();
      };
      window.addEventListener("keydown", onKey);
      return () => window.removeEventListener("keydown", onKey);
    }, [onClose]);

    useEffect(() => {
      if (!isOpen) return undefined;
      const id = setTimeout(() => setShowLetter(true), FLAP_OPEN_MS);
      return () => clearTimeout(id);
    }, [isOpen]);

    return (
      <div className="letter-overlay" role="dialog" aria-modal="true" aria-label="A letter for you" onClick={onClose}>
        <button ref={closeRef} className="letter-close" onClick={onClose} aria-label="Close letter">
          ×
        </button>
        <div className="letter-scene" onClick={(e) => e.stopPropagation()}>
          {!showLetter ? (
            <button
              className={`envelope${isOpen ? " open" : ""}`}
              onClick={() => setIsOpen(true)}
              aria-label="Open the envelope"
            >
              <span className="env-back" />
              <span className="env-paper" />
              <span className="env-front" />
              <span className="env-flap" />
              <span className="env-seal">♥</span>
              {!isOpen && <span className="env-hint">tap to open</span>}
            </button>
          ) : (
            <article className="letter-paper">
              <p className="letter-greeting">{greeting}</p>
              {letter.paragraphs.map((p, i) => (
                <p key={i} className="letter-body" style={{ animationDelay: `${0.25 + i * 0.25}s` }}>
                  {p}
                </p>
              ))}
              <p className="letter-closing">{letter.closing}</p>
              <p className="letter-signature">{letter.signature}</p>
            </article>
          )}
        </div>
      </div>
    );
  }

  window.LetterModal = LetterModal;
})();