import { useNavigate } from 'react-router-dom'

export function GNB() {
  const nav = useNavigate()
  const user = (() => { try { return JSON.parse(sessionStorage.getItem('gm_user') ?? 'null') } catch { return null } })()

  const logout = () => {
    sessionStorage.removeItem('gm_token')
    sessionStorage.removeItem('gm_user')
    nav('/login')
  }

  return (
    <header style={{
      height: 'var(--gnb-h)',
      background: '#ffffff',
      borderBottom: '1px solid #E2E8F0',
      boxShadow: '0 1px 8px rgba(0,51,102,.06)',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 24px', flexShrink: 0, position: 'sticky', top: 0, zIndex: 100,
    }}>
      {/* 로고 — Variant 스타일 */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          width: 32, height: 32, borderRadius: 8,
          background: 'linear-gradient(135deg, #003366, #00A0C8)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', fontWeight: 900, fontSize: 16, flexShrink: 0,
        }}>G</div>
        <span style={{ color: '#003366', fontWeight: 800, fontSize: 15, letterSpacing: '-.01em' }}>
          GUARDiA Manager
        </span>
        <span style={{
          fontSize: 10, fontWeight: 700, color: '#00A0C8',
          background: 'rgba(0,160,200,.1)', borderRadius: 20,
          padding: '2px 8px', letterSpacing: '.04em',
        }}>v2.0</span>
      </div>

      {/* 우측 */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <a href="http://zioinfo.co.kr:8443" target="_blank" rel="noreferrer"
          style={{
            color: '#64748B', fontSize: 12, display: 'flex', alignItems: 'center', gap: 4,
            textDecoration: 'none', padding: '5px 10px', borderRadius: 6,
            border: '1px solid #E2E8F0',
          }}>
          🌐 ITSM 바로가기
        </a>
        {user && (
          <>
            <span style={{
              background: 'rgba(0,90,140,.08)', color: '#005A8C',
              padding: '4px 14px', borderRadius: 20, fontSize: 12, fontWeight: 600,
              border: '1px solid rgba(0,90,140,.18)',
            }}>
              👤 {user.display_name ?? user.username}
            </span>
            <button onClick={logout} style={{
              background: 'transparent', border: '1px solid #E2E8F0',
              color: '#64748B', padding: '5px 12px', borderRadius: 6, fontSize: 12, cursor: 'pointer',
            }}>로그아웃</button>
          </>
        )}
      </div>
    </header>
  )
}
