// v2 App shell — top nav + active stage mount

const V2_STAGES = [
  {id:'data',       num:'01', label:'DATA',       sub:'자료실'},
  {id:'analysis',   num:'02', label:'ANALYSIS',   sub:'분석'},
  {id:'ideate',     num:'03', label:'IDEATE',     sub:'아이디에이션'},
  {id:'references', num:'04', label:'REFERENCES', sub:'레퍼런스'},
  {id:'final',      num:'05', label:'FINAL',      sub:'최종'},
];

const V2TopNav = ({stage, setStage, project, user, onHome, onSignOut, onAnalyzeAll, runningJob}) => (
  <header style={{
    display:'flex',alignItems:'center',gap:24,
    height:60,padding:'0 22px',
    background:'var(--paper)',borderBottom:'1px solid var(--rule)',
    flexShrink:0,position:'relative',zIndex:5,
  }}>
    <div onClick={onHome} style={{display:'flex',alignItems:'center', cursor:'pointer'}}>
      <span style={{fontFamily:'var(--font-mono)',fontSize:13,fontWeight:700,letterSpacing:'.18em',color:'var(--ink)'}}>PALETTE</span>
      <span style={{fontFamily:'var(--font-mono)',fontSize:13,fontWeight:400,letterSpacing:'.06em',color:'var(--muted)',marginLeft:8}}>Mosaic</span>
    </div>
    <div style={{height:24,width:1,background:'var(--rule)'}}/>
    <div>
      <div style={{fontSize:13.5,fontWeight:600}}>{project?.name || 'Untitled'}</div>
      <div className="mono" style={{fontSize:10,color:'var(--muted)',marginTop:1,letterSpacing:'.04em'}}>
        {project?.client || ''}{project?.code ? ' · ' + project.code : ''}
      </div>
    </div>

    <nav style={{marginLeft:'auto',display:'flex',gap:2,padding:3,background:'var(--bg-2)',borderRadius:10}}>
      {V2_STAGES.map(s => (
        <button key={s.id} onClick={()=>setStage(s.id)} style={{
          display:'flex',alignItems:'center',gap:8,
          padding:'7px 14px',borderRadius:8,
          border:'none',background:stage===s.id?'var(--paper)':'transparent',
          boxShadow:stage===s.id?'var(--shadow-1)':'none',
          cursor:'pointer', fontFamily:'inherit',
        }}>
          <span className="mono" style={{
            fontSize:9.5,fontWeight:700,letterSpacing:'.06em',
            color:stage===s.id?'var(--accent)':'var(--muted)'
          }}>{s.num}</span>
          <span style={{
            fontSize:11.5,fontWeight:stage===s.id?600:500,
            color:stage===s.id?'var(--ink)':'var(--sub)'
          }}>{s.label}</span>
        </button>
      ))}
    </nav>

    <button className="btn" onClick={onAnalyzeAll} disabled={!!runningJob}>
      {runningJob
        ? <><V2Spinner size="sm" color="var(--accent)"/> <span>{runningJob}</span></>
        : <><V2Icon name="sparkles" size={13}/> Run agent</>}
    </button>
    {user && (
      <div title={user.email} onClick={onSignOut} style={{
        width:30,height:30,borderRadius:15,background:'var(--accent)',color:'#fff',
        display:'flex',alignItems:'center',justifyContent:'center',
        fontSize:11,fontWeight:600,cursor:'pointer'
      }}>{(user.name || user.email || '?').slice(0,1).toUpperCase()}</div>
    )}
  </header>
);

window.V2TopNav = V2TopNav;
window.V2_STAGES = V2_STAGES;