function Toolbar({ offer, onChange, onPreview, previewing, onUndo, canUndo }) {
  const ChipBtn = ({active, children, onClick}) => (
    <button onClick={onClick} style={{
      padding:'6px 14px', borderRadius:999, fontSize:12, fontWeight:600,
      border:'1px solid '+(active?'var(--ulab-navy)':'var(--border-strong)'),
      background:active?'var(--ulab-navy)':'#fff',
      color:active?'#fff':'var(--ulab-navy)', cursor:'pointer',
      fontFamily:'var(--font-sans)', letterSpacing:'.02em',
    }}>{children}</button>
  );
  return (
    <header style={{
      height:64, background:'#fff', borderBottom:'1px solid var(--border)',
      display:'flex', alignItems:'center', padding:'0 24px', gap:16, flexShrink:0,
    }}>
      <div>
        <div style={{fontSize:11, color:'var(--fg-muted)', letterSpacing:'.14em', textTransform:'uppercase', fontWeight:600}}>Offert #{offer.number}</div>
        <div style={{fontSize:15, fontWeight:600, color:'var(--ulab-navy)'}}>{offer.customer || 'Namnlös offert'}</div>
      </div>
      <div style={{display:'flex', gap:8, marginLeft:24}}>
        <ChipBtn active={!previewing} onClick={() => onPreview(false)}>Redigera</ChipBtn>
        <ChipBtn active={previewing} onClick={() => onPreview(true)}>Förhandsgranska</ChipBtn>
      </div>
      <button onClick={onUndo} disabled={!canUndo} title="Ångra (⌘Z)" style={{
        marginLeft:12, padding:'8px 12px', fontFamily:'var(--font-sans)', fontSize:13, fontWeight:600,
        border:'1px solid var(--border-strong)', borderRadius:4, background:'#fff',
        color: canUndo ? 'var(--ulab-navy)' : 'var(--fg-muted)',
        cursor: canUndo ? 'pointer' : 'not-allowed', opacity: canUndo ? 1 : 0.55,
        display:'inline-flex', alignItems:'center', gap:6,
      }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/></svg>
        Ångra
      </button>
      <div style={{marginLeft:'auto', display:'flex', gap:8, alignItems:'center'}}>
        <select value={offer.status} onChange={e => onChange({status:e.target.value})} style={{
          fontFamily:'var(--font-sans)', fontSize:13, padding:'8px 10px',
          border:'1px solid var(--border-strong)', borderRadius:4, color:'var(--ulab-navy)',
        }}>
          <option>Utkast</option><option>Skickad</option><option>Godkänd</option><option>Avslagen</option>
        </select>
        <button style={btn('ghost')}><Icon name="duplicate" size={14}/> Duplicera</button>
        <button onClick={() => { onPreview(true); setTimeout(() => window.print(), 350); }} style={btn('ghost')}><Icon name="print" size={14}/> Skriv ut</button>
        <button onClick={() => {
          onPreview(true);
          setTimeout(() => {
            const original = document.title;
            document.title = `ULAB Offert ${offer.number || ''} ${offer.customer || ''}`.trim();
            window.print();
            setTimeout(() => { document.title = original; }, 500);
          }, 350);
        }} style={btn('secondary')}><Icon name="file" size={14}/> Spara som PDF</button>
        <button style={btn('primary')}><Icon name="send" size={14}/> Skicka offert</button>
      </div>
    </header>
  );
}
function btn(kind) {
  const base = {
    fontFamily:'var(--font-sans)', fontSize:13, fontWeight:600, padding:'9px 14px',
    borderRadius:4, cursor:'pointer', display:'inline-flex', alignItems:'center', gap:6,
    border:'1px solid transparent', letterSpacing:'.02em',
  };
  if (kind==='primary') return {...base, background:'var(--ulab-navy)', color:'#fff'};
  if (kind==='secondary') return {...base, background:'#fff', color:'var(--ulab-navy)', borderColor:'var(--ulab-navy)'};
  return {...base, background:'transparent', color:'var(--ulab-navy)'};
}
window.Toolbar = Toolbar; window.btn = btn;