// Top bar — brand, project switcher, step indicator, CTAs.
const topbarStyles = {
  bar: {
    display:'grid', gridTemplateColumns:'280px 1fr 360px', alignItems:'center',
    height: 64, padding:'0 24px', borderBottom:'1px solid var(--line)',
    background:'var(--paper)', position:'sticky', top:0, zIndex:20,
  },
  brand: { display:'flex', alignItems:'center', gap:12, cursor:'pointer' },
  logo: {
    width:34, height:34, display:'flex', alignItems:'center', justifyContent:'center',
  },
  logoImg: { width:34, height:34, display:'block' },
  wordmark: { fontFamily:'var(--serif)', fontSize:22, letterSpacing:'-.01em', color:'var(--ink)' },
  product: { fontFamily:'var(--mono)', fontSize:10, letterSpacing:'.18em', color:'var(--ink-3)', textTransform:'uppercase' },
  steps: { display:'flex', alignItems:'center', gap:18, justifyContent:'center' },
  stepBtn: (a) => ({
    display:'flex', alignItems:'center', gap:8, padding:'6px 2px',
    color: a ? 'var(--ink)' : 'var(--ink-4)', cursor:'pointer', border:'none', background:'transparent',
    fontFamily:'var(--mono)', fontSize:11, letterSpacing:'.08em', textTransform:'uppercase',
    borderBottom: a ? '1px solid var(--ink)' : '1px solid transparent',
  }),
  num: (a) => ({
    width:18, height:18, borderRadius:'50%', display:'inline-flex', alignItems:'center', justifyContent:'center',
    fontSize:10, fontFamily:'var(--mono)',
    background: a ? 'var(--ink)' : 'transparent', color: a ? 'var(--paper)' : 'var(--ink-4)',
    border: a ? '1px solid var(--ink)' : '1px solid var(--line-2)',
  }),
  actions: { display:'flex', alignItems:'center', gap:10, justifyContent:'flex-end' },
  btn: {
    height:32, padding:'0 14px', border:'1px solid var(--line-2)', background:'var(--paper)',
    borderRadius:999, fontFamily:'var(--sans)', fontSize:12, color:'var(--ink)', cursor:'pointer',
    display:'inline-flex', alignItems:'center', gap:6,
  },
  btnDark: {
    height:32, padding:'0 14px', border:'1px solid var(--ink)', background:'var(--ink)',
    borderRadius:999, fontFamily:'var(--sans)', fontSize:12, color:'var(--paper)', cursor:'pointer',
    display:'inline-flex', alignItems:'center', gap:6,
  },
  avatarStack: { display:'flex' },
  avatar: (i) => ({
    width:24, height:24, borderRadius:'50%', marginLeft: i===0 ? 0 : -6,
    background: ['#f4511c','#31303a','#4f5eff'][i%3],
    color:'var(--paper)', fontSize:10, fontFamily:'var(--mono)',
    display:'flex', alignItems:'center', justifyContent:'center',
    border:'2px solid var(--paper)',
  }),
};

function TopBar({ project, step, setStep, onNewProject, onAnalyzeAll, user, onSignOut }) {
  const goToStep = (i) => {
    setStep(i);
    // Step 0=Dataroom col, 1=Analysis col, 2=Brainstorm col top, 3=Videos
    // section inside Brainstorm col, 4=Final keywords section inside same col.
    const shell = document.getElementById('palette-shell');
    if (!shell) return;
    const colIdx = i >= 2 ? 2 : i;
    const target = shell.children[colIdx];
    if (target) {
      target.scrollIntoView({ behavior:'smooth', inline:'start', block:'nearest' });
      const prevShadow = target.style.boxShadow;
      target.style.transition = 'box-shadow .6s ease-out';
      target.style.boxShadow = 'inset 0 0 0 2px var(--accent)';
      setTimeout(() => { target.style.boxShadow = prevShadow || ''; }, 700);
    }
    const anchorId = i === 3 ? 'board-references' : i === 4 ? 'board-pinned' : null;
    if (anchorId) {
      const el = document.getElementById(anchorId);
      if (el) setTimeout(() => el.scrollIntoView({behavior:'smooth', block:'center'}), 300);
    }
  };
  return (
    <div style={topbarStyles.bar}>
      <div style={topbarStyles.brand} onClick={() => goToStep(0)}>
        <div style={topbarStyles.logo}>
          <img src="https://pltt.ai/landing_logo.svg" alt="Palette"
               style={topbarStyles.logoImg}
               onError={(e) => { e.currentTarget.style.display='none'; }}/>
        </div>
        <div>
          <div style={topbarStyles.wordmark}>Palette</div>
          <div style={topbarStyles.product}>Keyword Agent · 0.4</div>
        </div>
      </div>
      <div style={topbarStyles.steps}>
        {[
          ['자료실 · Data','01'],
          ['분석 · Analysis','02'],
          ['아이디어 · Ideate','03'],
          ['레퍼런스 · References','04'],
          ['최종 · Final','05'],
        ].map(([label, n], i) => (
          <button key={label} style={topbarStyles.stepBtn(i === step)} onClick={() => goToStep(i)}>
            <span style={topbarStyles.num(i === step)}>{n}</span>{label}
          </button>
        ))}
      </div>
      <div style={topbarStyles.actions}>
        {user ? (
          <>
            <div title={user.email} style={{...topbarStyles.avatar(0), marginRight:2}}>
              {(user.email || 'U')[0].toUpperCase()}
            </div>
            <button style={topbarStyles.btn} onClick={onAnalyzeAll}><Ico.sparkle s={11}/> Run agent</button>
            <button style={topbarStyles.btnDark} onClick={onNewProject}>New project <Ico.plus s={11}/></button>
            <button style={{...topbarStyles.btn, padding:'0 10px'}} onClick={onSignOut} title="Sign out">⎋</button>
          </>
        ) : (
          <>
            <button style={topbarStyles.btn} onClick={onAnalyzeAll}><Ico.sparkle s={11}/> Run agent</button>
            <button style={topbarStyles.btnDark} onClick={onNewProject}>New project <Ico.plus s={11}/></button>
          </>
        )}
      </div>
    </div>
  );
}

window.TopBar = TopBar;