// Letter open experience — 3 stages:
//   stage 0: sealed envelope (tap to crack)
//   stage 1: seal breaks, flap opens
//   stage 2: letter unfolds
//   stage 3: reading view

function LetterScreen({ stage, setStage, letter, tweaks, motion, onClose }) {
  // Auto-advance through stages with delays
  useEffect(() => {
    if (stage === 1) {
      const t = setTimeout(() => setStage(2), 1600 * motion.base);
      return () => clearTimeout(t);
    }
    if (stage === 2) {
      const t = setTimeout(() => setStage(3), 1800 * motion.base);
      return () => clearTimeout(t);
    }
  }, [stage, motion.base]);

  const handleTap = () => {
    if (stage === 0) setStage(1);
  };

  return (
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      cursor: stage === 0 ? 'pointer' : 'default',
    }} onClick={handleTap}>

      {/* Ambient light shift as letter opens */}
      <div style={{
        position: 'absolute', inset: 0,
        background: stage >= 2
          ? `radial-gradient(60% 50% at 50% 40%, rgba(255,240,225,0.55) 0%, transparent 80%)`
          : 'transparent',
        transition: `all ${2.5 * motion.base}s ease`,
        pointerEvents: 'none',
      }} />

      {/* Close affordance — top right */}
      <button onClick={(e) => { e.stopPropagation(); onClose(); }} style={{
        position: 'absolute', top: 70, right: 24, zIndex: 10,
        background: 'transparent', border: 'none',
        fontFamily: sans, fontSize: 10, letterSpacing: 2.5,
        color: MUTED, textTransform: 'uppercase', cursor: 'pointer',
        opacity: stage === 3 ? 0 : 0.7,
        transition: 'opacity 0.4s ease',
        pointerEvents: stage === 3 ? 'none' : 'auto',
      }}>Close</button>

      {/* Stage 0-2: Envelope + letter emerging */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        opacity: stage < 3 ? 1 : 0,
        transition: `opacity ${0.8 * motion.base}s ease`,
        pointerEvents: stage < 3 ? 'auto' : 'none',
      }}>
        <LetterOpenSequence stage={stage} motion={motion} tweaks={tweaks} />
      </div>

      {/* Stage 3: Reading view */}
      <div style={{
        position: 'absolute', inset: 0,
        opacity: stage >= 3 ? 1 : 0,
        transform: stage >= 3 ? 'translateY(0)' : 'translateY(30px)',
        transition: `opacity ${1.2 * motion.base}s ease ${0.2 * motion.base}s, transform ${1.4 * motion.base}s cubic-bezier(.2,.7,.2,1) ${0.2 * motion.base}s`,
        pointerEvents: stage >= 3 ? 'auto' : 'none',
      }}>
        <ReadingView letter={letter} tweaks={tweaks} onClose={onClose} />
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────
// The 3-stage opening sequence (single composition)
// ─────────────────────────────────────────────
function LetterOpenSequence({ stage, motion, tweaks }) {
  // Stage 0: sealed, resting
  // Stage 1: seal cracks (0.8s), wax falls away
  // Stage 2: flap opens upward, letter rises out
  const showCracks = stage >= 1;
  const wax1 = stage >= 1 ? { x: -18, y: 14, r: -25, opacity: 1 } : { x: 0, y: 0, r: 0, opacity: 0 };
  const wax2 = stage >= 1 ? { x: 22, y: 18, r: 30, opacity: 1 } : { x: 0, y: 0, r: 0, opacity: 0 };

  const W = 280, H = 186;
  const t = motion.base;
  const receiverName = tweaks.letterReceiver || 'Kefilwe';

  return (
    <div style={{
      position: 'relative', width: W + 40, height: H + 80,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <svg width={W + 40} height={H + 60} viewBox={`${-(W+40)/2} ${-(H+60)/2} ${W+40} ${H+60}`} style={{ overflow: 'visible' }}>
        <defs>
          <linearGradient id="o-face" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="var(--env-face-1)"/>
            <stop offset="1" stopColor="var(--env-face-2)"/>
          </linearGradient>
          <linearGradient id="o-flap" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="var(--env-flap-1)"/>
            <stop offset="1" stopColor="var(--env-flap-2)"/>
          </linearGradient>
          <linearGradient id="o-letter" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#F1F2F6"/>
            <stop offset="1" stopColor="#E2E4EC"/>
          </linearGradient>
          <radialGradient id="o-wax" cx="0.35" cy="0.3" r="0.9">
            <stop offset="0" stopColor="var(--wax-light)"/>
            <stop offset="0.5" stopColor="var(--wax-mid)"/>
            <stop offset="1" stopColor="var(--wax-dark)"/>
          </radialGradient>
        </defs>

        {/* Envelope body */}
        <g transform={`translate(${-W/2}, ${-H/2 + 20})`}>
          {/* Back panel */}
          <rect x="0" y="0" width={W} height={H} rx="3" fill="url(#o-face)"/>

          {/* Letter emerging */}
          <g style={{
            transform: stage >= 2 ? `translateY(${-H * 0.9}px)` : `translateY(0px)`,
            transition: `transform ${1.4 * t}s cubic-bezier(.3,.7,.2,1) ${0.3 * t}s`,
          }}>
            <rect x="18" y="18" width={W - 36} height={H - 36} rx="2" fill="url(#o-letter)" stroke="#A4A8BA" strokeWidth="0.5"/>
            {/* Letter text hints */}
            <g opacity="0.55" stroke={INK} strokeWidth="0.4" strokeLinecap="round">
              <line x1="34" y1="42" x2={W - 70} y2="42"/>
              <line x1="34" y1="56" x2={W - 40} y2="56"/>
              <line x1="34" y1="70" x2={W - 80} y2="70"/>
              <line x1="34" y1="84" x2={W - 50} y2="84"/>
              <line x1="34" y1="98" x2={W - 90} y2="98"/>
            </g>
            <text x={W - 38} y={H - 24} textAnchor="end" style={{
              fontFamily: script, fontSize: 18, fill: ROSE, opacity: 0.7,
            }}>{tweaks.letterSignature || 'Dexter'}</text>
          </g>

          {/* Flap */}
          <g style={{
            transformOrigin: `${W/2}px 0px`,
            transform: stage >= 2 ? 'rotateX(-170deg) translateY(-2px)' : 'rotateX(0deg)',
            transformStyle: 'preserve-3d',
            transition: `transform ${1.5 * t}s cubic-bezier(.4,.1,.2,1)`,
          }}>
            <path d={`M0 0 L${W/2} ${H*0.55} L${W} 0 Z`} fill="url(#o-flap)"/>
          </g>

          {/* Inside-flap shadow area (behind flap when closed, visible when open) */}
          <path d={`M0 0 L${W/2} ${H*0.55} L${W} 0 Z`}
            fill="#A9ADBD" opacity={stage >= 2 ? 0.55 : 0}
            style={{ transition: `opacity ${0.8 * t}s ease ${0.4 * t}s` }}/>

          {/* Address (fades when letter rises) */}
          <g opacity={stage >= 2 ? 0 : 1} style={{ transition: `opacity ${0.6 * t}s ease` }}>
            <text x={W/2} y={H*0.78} textAnchor="middle" style={{
              fontFamily: script, fontSize: 30, fill: INK, opacity: 0.75,
            }}>{receiverName}</text>
            <text x={W/2} y={H*0.92} textAnchor="middle" style={{
              fontFamily: sans, fontSize: 9, fill: MUTED, letterSpacing: 3, textTransform: 'uppercase', opacity: 0.7,
            }}>From the one who means it</text>
          </g>

          {/* WAX SEAL (breaks into two halves at stage 1) */}
          <g transform={`translate(${W/2}, ${H*0.55})`}>
            {/* Left half */}
            <g style={{
              transform: stage >= 1
                ? `translate(${wax1.x}px, ${wax1.y}px) rotate(${wax1.r}deg)`
                : 'translate(0,0) rotate(0)',
              transformOrigin: '0 0',
              transition: `transform ${0.7 * t}s cubic-bezier(.3,.6,.4,1)`,
              opacity: stage >= 2 ? 0 : 1,
            }}>
              <g style={{ transition: `opacity ${0.6 * t}s ease ${0.8 * t}s` }}>
                <path
                  d="M-22 -1 C -22 -13, -12 -22, 0 -22 L 0 22 C -12 22, -22 11, -22 -1 Z"
                  fill="url(#o-wax)"
                />
                {/* jagged break edge */}
                <path d="M-2 -22 L 1 -14 L -3 -6 L 2 2 L -4 10 L 2 18 L 0 22"
                  fill="#2A0708" opacity="0.25"/>
              </g>
            </g>
            {/* Right half */}
            <g style={{
              transform: stage >= 1
                ? `translate(${wax2.x}px, ${wax2.y}px) rotate(${wax2.r}deg)`
                : 'translate(0,0) rotate(0)',
              transformOrigin: '0 0',
              transition: `transform ${0.7 * t}s cubic-bezier(.3,.6,.4,1)`,
              opacity: stage >= 2 ? 0 : 1,
            }}>
              <g style={{ transition: `opacity ${0.6 * t}s ease ${0.8 * t}s` }}>
                <path
                  d="M0 -22 C 14 -22, 22 -13, 22 0 C 22 12, 13 22, 1 22 L 0 22 L 0 -22 Z"
                  fill="url(#o-wax)"
                />
                <path d="M2 -22 L -1 -14 L 3 -6 L -2 2 L 4 10 L -2 18 L 0 22"
                  fill="#2A0708" opacity="0.25"/>
              </g>
            </g>

            {/* Monogram — fades as seal breaks */}
            <text textAnchor="middle" dominantBaseline="central" y="1" style={{
              fontFamily: serifDisplay, fontStyle: 'italic', fontSize: 22,
              fill: '#E3C98A', fontWeight: 600,
              opacity: stage >= 1 ? 0 : 0.88,
              transition: `opacity ${0.3 * t}s ease`,
            }}>D&amp;K</text>

            {/* Wax particles on break */}
            {stage >= 1 && (
              <g>
                {[[-30,-8,-40],[-8,30,35],[30,-12,25],[18,28,-30],[-22,18,-50]].map(([x,y,r], i) => (
                  <circle key={i} cx={x} cy={y} r="1.4" fill="var(--wax-mid)" opacity="0">
                    <animate attributeName="opacity" values="0;1;0" dur={`${1*t}s`} begin={`${i*0.05}s`} fill="freeze"/>
                    <animate attributeName="cy" from={y-20} to={y+6} dur={`${1*t}s`} begin={`${i*0.05}s`} fill="freeze"/>
                  </circle>
                ))}
              </g>
            )}
          </g>
        </g>
      </svg>

      {/* Hint under envelope */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, textAlign: 'center',
        fontFamily: sans, fontSize: 10, letterSpacing: 2.5,
        color: MUTED, textTransform: 'uppercase',
        opacity: stage === 0 ? 0.7 : 0,
        transition: 'opacity 0.4s ease',
      }}>
        Tap the seal
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────
// Reading view — focused letter reading
// ─────────────────────────────────────────────
function ReadingView({ letter, tweaks, onClose }) {
  const [favorite, setFavorite] = useState(letter ? letter.favorite : false);
  
  const title = letter ? letter.title : tweaks.letterTitle;
  const body = letter ? letter.body : tweaks.letterBody;
  const signature = letter ? letter.signature : tweaks.letterSignature;
  const mood = letter ? letter.mood : 'Tender';
  
  const paragraphs = useMemo(() => body.split('\n\n').filter(Boolean), [body]);

  // If there's an actual letter, update the favorite status on toggle
  async function toggleFavorite() {
    setFavorite(v => !v);
    if (letter && window.BetweenUsBackend?.saveLetter) {
       await window.BetweenUsBackend.saveLetter({ ...letter, favorite: !favorite });
    }
  }

  // Mark a real letter as read
  useEffect(() => {
    if (letter && letter.status === 'unread' && window.BetweenUsBackend?.saveLetter) {
       window.BetweenUsBackend.saveLetter({ ...letter, status: 'read' });
       letter.status = 'read'; // eager update
    }
  }, [letter]);

  return (
    <div style={{
      position: 'absolute', inset: 0,
      overflowY: 'auto',
      padding: '58px 0 120px',
    }}>
      {/* Top bar */}
      <div style={{
        position: 'sticky', top: 0, zIndex: 2,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '10px 22px 16px',
        background: `linear-gradient(to bottom, ${PAPER} 65%, transparent)`,
      }}>
        <button onClick={onClose} style={{
          background: 'transparent', border: 'none', cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: 6,
          fontFamily: sans, fontSize: 10, letterSpacing: 2, color: MUTED, textTransform: 'uppercase',
          padding: 0,
        }}>
          {Icon.chevron(MUTED, 'left')} Close
        </button>
        <button onClick={toggleFavorite} style={{
          background: 'transparent', border: 'none', cursor: 'pointer', padding: 0,
        }}>
          {Icon.heart(favorite ? ROSE : MUTED, favorite)}
        </button>
      </div>

      {/* Letter paper card */}
      <div style={{
        margin: '4px 20px 0',
        background: '#EFF0F5',
        padding: '36px 30px 40px',
        position: 'relative',
        boxShadow: '0 1px 0 rgba(255,255,255,0.6) inset, 0 16px 40px rgba(20,26,58,0.10)',
        borderRadius: 2,
      }}>
        {/* Corner flourishes */}
        <svg style={{ position: 'absolute', top: 10, left: 10 }} width="22" height="22" viewBox="0 0 22 22" fill="none">
          <path d="M1 1 L1 8 M1 1 L8 1" stroke={GOLD} strokeWidth="0.7"/>
          <circle cx="1" cy="1" r="0.8" fill={GOLD}/>
        </svg>
        <svg style={{ position: 'absolute', top: 10, right: 10, transform: 'scaleX(-1)' }} width="22" height="22" viewBox="0 0 22 22" fill="none">
          <path d="M1 1 L1 8 M1 1 L8 1" stroke={GOLD} strokeWidth="0.7"/>
          <circle cx="1" cy="1" r="0.8" fill={GOLD}/>
        </svg>

        {/* Date */}
        <div style={{
          fontFamily: sans, fontSize: 10, letterSpacing: 2.5,
          color: MUTED, textTransform: 'uppercase', textAlign: 'center',
        }}>{letter ? letter.date : 'April · Twenty Twenty Six'}</div>

        {/* Title */}
        <h1 style={{
          fontFamily: serifDisplay, fontStyle: 'italic', fontWeight: 400,
          fontSize: 34, lineHeight: '40px', color: INK,
          margin: '12px 0 4px', textAlign: 'center', letterSpacing: -0.3,
        }}>{title}</h1>

        {/* Divider */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          gap: 10, margin: '14px 0 28px', opacity: 0.6,
        }}>
          <div style={{ width: 34, height: 1, background: GOLD }} />
          <div style={{ width: 4, height: 4, transform: 'rotate(45deg)', background: GOLD }} />
          <div style={{ width: 34, height: 1, background: GOLD }} />
        </div>

        {/* Body */}
        <div style={{
          fontFamily: serif, fontSize: 17, lineHeight: '28px',
          color: INK, textWrap: 'pretty',
        }}>
          {paragraphs.map((p, i) => (
            <p key={i} style={{
              margin: i === 0 ? '0 0 20px' : '0 0 20px',
              fontStyle: i === 0 ? 'italic' : 'normal',
              textIndent: i === 0 ? 0 : 14,
            }}>
              {i === 0 && <span style={{
                fontFamily: serifDisplay, fontSize: 48, lineHeight: 0.8,
                float: 'left', marginRight: 6, marginTop: 6, color: ROSE,
                fontStyle: 'italic',
              }}>{p[0]}</span>}
              {i === 0 ? p.slice(1) : p}
            </p>
          ))}
        </div>

        {/* Signature */}
        {signature && (
          <div style={{ marginTop: 28, textAlign: 'right' }}>
            <div style={{
              fontFamily: sans, fontSize: 9, letterSpacing: 2.5,
              color: MUTED, textTransform: 'uppercase', marginBottom: 6,
            }}>Signed</div>
            <div style={{
              fontFamily: script, fontSize: 38, color: ROSE, lineHeight: 1,
            }}>{signature}</div>
          </div>
        )}

        {/* Footer tag */}
        <div style={{
          marginTop: 32, paddingTop: 18,
          borderTop: `0.5px solid ${GOLD}`, opacity: 0.7,
          display: 'flex', justifyContent: 'space-between',
          fontFamily: sans, fontSize: 9, letterSpacing: 2, color: MUTED, textTransform: 'uppercase',
        }}>
          <span>{mood}</span>
          <span>For K., always</span>
        </div>
      </div>

      {/* Pagination dots (just decorative for now) */}
      <div style={{
        display: 'flex', justifyContent: 'center', gap: 6,
        marginTop: 28,
      }}>
        <div style={{ width: 5, height: 5, borderRadius: 99, background: ROSE }}/>
        <div style={{ width: 5, height: 5, borderRadius: 99, background: BLUSH }}/>
        <div style={{ width: 5, height: 5, borderRadius: 99, background: BLUSH }}/>
      </div>
    </div>
  );
}

Object.assign(window, { LetterScreen, LetterOpenSequence, ReadingView });