/* LoginRequiredModal — 비로그인 상태에서 보호 화면 접근 시 노출.
 * screenId: 사용자가 가려던 화면 ID (mock | apply | my)
 * onNavigate: 로그인/회원가입으로 이동
 * onClose:    모달 닫기
 */
function LoginRequiredModal({ open, screenId, onNavigate, onClose }) {
  if (!open) return null;

  const meta = {
    mock:  { icon: 'sparkles',  ko: 'AI 모의 면접',   en: 'AI Mock Interview',
             why: '연습 기록과 코칭 리포트는 개인 계정에 저장돼요.' },
    apply: { icon: 'send',      ko: '지원하기',       en: 'Apply',
             why: '이력서·자소서·지원 이력은 계정 단위로 관리돼요.' },
    my:    { icon: 'list-checks', ko: '지원 현황',    en: 'My Applications',
             why: '내가 낸 지원과 진행 상태는 로그인 후에만 확인할 수 있어요.' },
  }[screenId] || {
    icon: 'lock', ko: '이 기능',    en: 'This feature',
    why: '로그인이 필요한 기능이에요.',
  };

  return (
    <div style={backdrop} role="dialog" aria-modal="true" aria-labelledby="loginModalTitle"
         onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div style={modal}>
        {/* Close */}
        <button onClick={onClose} aria-label="닫기 · Close" style={closeX}>
          <Icon name="x" size={16}/>
        </button>

        {/* Lock illustration */}
        <div style={lockCircle}>
          <div style={lockCircleInner}>
            <Icon name="lock" size={22}/>
          </div>
        </div>

        <div style={{ textAlign: 'center', marginTop: 18 }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 5,
            padding: '3px 10px', background: 'var(--brand-50)',
            color: 'var(--brand-700)', borderRadius: 999,
            fontSize: 10.5, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
          }}>
            <Icon name={meta.icon} size={11}/>
            {meta.ko} · {meta.en}
          </div>
          <h2 id="loginModalTitle" style={{
            fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em',
            margin: '12px 0 6px', color: 'var(--fg-1)',
          }}>
            로그인이 필요해요
          </h2>
          <div style={{ fontSize: 13.5, color: 'var(--fg-3)', fontWeight: 500 }}>
            Login required to continue
          </div>
        </div>

        <div style={{
          marginTop: 20, padding: '14px 16px',
          background: 'var(--neutral-50)', border: '1px solid var(--border-subtle)',
          borderRadius: 10, fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.6,
        }}>
          <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
            <Icon name="info" size={14} style={{ marginTop: 2, color: 'var(--brand-500)' }}/>
            <span>{meta.why}</span>
          </div>
        </div>

        <div style={{ display: 'grid', gap: 8, marginTop: 20 }}>
          <button onClick={() => { onClose(); onNavigate('login'); }} style={primaryBtn}>
            <Icon name="log-in" size={14}/>
            로그인 (Login)
          </button>
          <button onClick={() => { onClose(); onNavigate('signup'); }} style={secondaryBtn}>
            <Icon name="user-plus" size={14}/>
            회원가입 (Sign up)
          </button>
          <button onClick={onClose} style={ghostBtn}>
            나중에 (Later)
          </button>
        </div>

        <div style={{
          marginTop: 16, fontSize: 11, color: 'var(--fg-3)', textAlign: 'center', lineHeight: 1.5,
        }}>
          데모용 목업입니다. 개인정보는 브라우저에만 저장돼요.<br/>
          Demo mockup. Data stays in your browser.
        </div>
      </div>
    </div>
  );
}

const backdrop = {
  position: 'fixed', inset: 0, zIndex: 200,
  background: 'rgba(6, 19, 63, 0.55)', backdropFilter: 'blur(4px)',
  display: 'flex', alignItems: 'center', justifyContent: 'center',
  padding: 20, animation: 'cisFadeIn 160ms ease-out',
};
const modal = {
  position: 'relative',
  width: '100%', maxWidth: 380,
  background: 'var(--neutral-0)', borderRadius: 16,
  padding: '28px 26px 24px',
  boxShadow: '0 24px 60px rgba(6, 19, 63, 0.32)',
  animation: 'cisPopIn 200ms cubic-bezier(0.16,1,0.3,1)',
};
const closeX = {
  position: 'absolute', top: 12, right: 12,
  width: 30, height: 30, borderRadius: 8,
  background: 'transparent', border: 'none', cursor: 'pointer',
  color: 'var(--fg-3)',
  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
};
const lockCircle = {
  width: 72, height: 72, borderRadius: 999, margin: '0 auto',
  background: 'linear-gradient(135deg, var(--brand-500), var(--violet-500, #7C55F2))',
  display: 'flex', alignItems: 'center', justifyContent: 'center',
  boxShadow: '0 10px 30px rgba(31, 95, 255, 0.32)',
};
const lockCircleInner = {
  width: 60, height: 60, borderRadius: 999,
  background: 'rgba(255,255,255,0.16)',
  color: '#fff',
  display: 'flex', alignItems: 'center', justifyContent: 'center',
  border: '1px solid rgba(255,255,255,0.24)',
};
const primaryBtn = {
  padding: '12px 16px',
  background: 'var(--brand-500)', color: '#fff', border: 'none', borderRadius: 10,
  fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: 'var(--font-sans)',
  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
};
const secondaryBtn = {
  padding: '11px 16px',
  background: 'var(--neutral-0)', color: 'var(--fg-1)',
  border: '1px solid var(--border-strong)', borderRadius: 10,
  fontSize: 13.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'var(--font-sans)',
  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
};
const ghostBtn = {
  padding: '9px 16px',
  background: 'transparent', color: 'var(--fg-3)',
  border: 'none', borderRadius: 8,
  fontSize: 12.5, fontWeight: 500, cursor: 'pointer', fontFamily: 'var(--font-sans)',
};

// Global keyframes (idempotent)
(function ensureKeyframes(){
  if (document.getElementById('cis-modal-keyframes')) return;
  const s = document.createElement('style'); s.id = 'cis-modal-keyframes';
  s.textContent = `
    @keyframes cisFadeIn { from { opacity: 0 } to { opacity: 1 } }
    @keyframes cisPopIn  { from { opacity: 0; transform: scale(0.94) translateY(6px) } to { opacity: 1; transform: none } }
  `;
  document.head.appendChild(s);
})();

window.LoginRequiredModal = LoginRequiredModal;