// Shared 4-letter blocks (used in result + share)
function FourLetterBlocks({ code, size = 'md' }) {
  const sizes = {
    sm: { w: 36, h: 44, fs: 22, gap: 5, br: 8 },
    md: { w: 48, h: 60, fs: 28, gap: 8, br: 10 },
    lg: { w: 90, h: 120, fs: 60, gap: 12, br: 18 },
  };
  const s = sizes[size];
  return (
    <div style={{ display: 'flex', gap: s.gap }}>
      {code.split('').map((letter, i) => {
        const dim = DIMS[['DE','RA','SO','PM'][i]];
        return (
          <div key={i} style={{
            width: s.w, height: s.h, borderRadius: s.br,
            background: dim.color, color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: s.fs,
            boxShadow: `0 4px 14px ${dim.color}55`,
            transform: `rotate(${[-3,1.5,-1.5,3][i]}deg)`,
          }}>{letter}</div>
        );
      })}
    </div>
  );
}

// Dimension bars
function DimBars({ scores, compact = false }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: compact ? 8 : 12 }}>
      {['DE','RA','SO','PM'].map(k => {
        const d = DIMS[k];
        const score = scores[k]; // 0..3
        const right = score >= 2;
        const pct = (score / 3) * 100;
        return (
          <div key={k}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4, gap: 8 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-body)', fontSize: 11, color: '#7D6347', whiteSpace: 'nowrap' }}>
                <span style={{ fontSize: 13 }}>{d.emoji}</span>
                <span style={{ fontWeight: 600 }}>{d.name}</span>
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 12, fontWeight: 700, color: d.color, whiteSpace: 'nowrap' }}>
                {right ? d.rightLabel : d.leftLabel}
              </div>
            </div>
            <div style={{
              position: 'relative', height: 8, borderRadius: 4,
              background: '#F0E6D6', overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', top: 0, bottom: 0,
                left: right ? '50%' : `${50 - pct/2}%`,
                width: right ? `${pct/2}%` : `${pct/2}%`,
                background: d.color, borderRadius: 4,
              }} />
              <div style={{ position: 'absolute', top: 0, bottom: 0, left: '50%', width: 1, background: 'rgba(0,0,0,0.1)' }} />
            </div>
          </div>
        );
      })}
    </div>
  );
}

// Screen 4: Result page
function ResultScreen({ result, onShare, onRetry }) {
  const { code, scores } = result;
  const type = TYPES[code];
  const [show, setShow] = React.useState(false);
  React.useEffect(() => { setShow(true); }, []);

  return (
    <div style={{
      width: '100%', minHeight: '100vh', overflow: 'auto',
      background: '#FAF4E9',
      paddingTop: 30, paddingBottom: 40,
    }}>
      <style>{`
        .res-section { opacity: 0; transform: translateY(12px); transition: all 500ms cubic-bezier(.2,.8,.2,1); }
        .res-section.in { opacity: 1; transform: translateY(0); }
      `}</style>

      <div style={{ padding: '20px 20px 24px' }}>
        {/* Hero card — the screenshot money shot */}
        <div className={'res-section ' + (show ? 'in' : '')} style={{ transitionDelay: '50ms' }}>
          <div style={{
            borderRadius: 28, padding: '32px 24px 28px',
            background: type.bg,
            color: (code === 'ERSP') ? '#FFF8EE' : '#2A1F14',
            position: 'relative', overflow: 'hidden',
            boxShadow: '0 16px 40px rgba(42,31,20,0.15)',
          }}>
            {/* Accent corner */}
            <div style={{
              position: 'absolute', top: -40, right: -40, width: 160, height: 160, borderRadius: '50%',
              background: type.accent + '33',
            }} />

            <div style={{
              fontFamily: 'var(--font-body)', fontSize: 11, letterSpacing: 4,
              opacity: 0.6, marginBottom: 4, fontWeight: 500,
            }}>FAMILY · TYPE</div>
            <div style={{ marginBottom: 12 }}>
              <div style={{ fontSize: 56, lineHeight: 1, marginBottom: 8, filter: `drop-shadow(0 4px 12px ${type.accent}55)` }}>{type.emoji}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 30, fontWeight: 800, lineHeight: 1.1, letterSpacing: -0.5, whiteSpace: 'nowrap' }}>{type.name}</div>
            </div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, lineHeight: 1.5, marginBottom: 20, opacity: 0.85, fontStyle: 'italic' }}>
              "{type.oneline}"
            </div>

            <FourLetterBlocks code={code} size="md" />

            <div style={{ height: 20 }} />
            <div style={{ background: 'rgba(255,255,255,0.5)', borderRadius: 16, padding: 14 }}>
              <DimBars scores={scores} />
            </div>
          </div>
        </div>

        {/* Description */}
        <div className={'res-section ' + (show ? 'in' : '')} style={{ transitionDelay: '200ms', marginTop: 20 }}>
          <div style={{
            background: '#fff', borderRadius: 20, padding: '20px 18px',
            boxShadow: '0 4px 16px rgba(42,31,20,0.06)',
            fontFamily: 'var(--font-body)', fontSize: 14, color: '#3D2F1F', lineHeight: 1.7,
            textWrap: 'pretty',
          }}>
            {type.desc}
          </div>
        </div>

        {/* Three sections */}
        {[
          { label: '超能力', icon: '⚡', color: '#5BA86F', text: type.power },
          { label: '容易踩的坑', icon: '⚠️', color: '#E8804A', text: type.pit },
          { label: '试试看', icon: '🌱', color: '#3F8CCB', text: type.try },
        ].map((s, i) => (
          <div key={s.label} className={'res-section ' + (show ? 'in' : '')} style={{ transitionDelay: `${300 + i * 100}ms`, marginTop: 12 }}>
            <div style={{
              background: '#fff', borderRadius: 20, padding: '18px 18px',
              boxShadow: '0 4px 16px rgba(42,31,20,0.06)',
              borderTop: `3px solid ${s.color}`,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <span style={{ fontSize: 18 }}>{s.icon}</span>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 700, color: s.color }}>{s.label}</span>
              </div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: '#3D2F1F', lineHeight: 1.65, textWrap: 'pretty' }}>{s.text}</div>
            </div>
          </div>
        ))}

        {/* Buttons */}
        <div className={'res-section ' + (show ? 'in' : '')} style={{ transitionDelay: '700ms', marginTop: 24 }}>
          <button onClick={onShare} style={{
            width: '100%', height: 56, borderRadius: 28,
            background: '#2A1F14', color: '#FFF8EE', border: 'none',
            fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600,
            cursor: 'pointer', boxShadow: '0 8px 20px rgba(42,31,20,0.25)',
            letterSpacing: 1,
          }}>📸 保存结果图</button>

          <button style={{
            width: '100%', height: 52, borderRadius: 26,
            background: 'transparent', color: '#7D6347',
            border: '1.5px solid #D4C4A8',
            fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 500,
            cursor: 'not-allowed', marginTop: 10, letterSpacing: 1,
          }}>邀请家人测一测  ·  即将上线</button>

          <div style={{ textAlign: 'center', marginTop: 14 }}>
            <button onClick={onRetry} style={{
              background: 'none', border: 'none', cursor: 'pointer',
              fontFamily: 'var(--font-body)', fontSize: 13, color: '#9C7A52',
              textDecoration: 'underline', textUnderlineOffset: 3,
            }}>再测一次</button>
          </div>
        </div>

        {/* Footer note */}
        <div style={{
          marginTop: 24, fontFamily: 'var(--font-body)', fontSize: 10,
          color: '#A89378', textAlign: 'center', lineHeight: 1.6, padding: '0 12px',
        }}>
          维度参考 Olson Circumplex Model · FCP Theory · Baumrind Typology<br/>
          趣味自测，不构成专业心理评估
        </div>
      </div>
    </div>
  );
}

window.FourLetterBlocks = FourLetterBlocks;
window.DimBars = DimBars;
window.ResultScreen = ResultScreen;