function Toolbar({ offer, onChange, onPreview, previewing, onUndo, canUndo, onDuplicate, onOpenHistory, onPrint, onSend, canEdit = true }) {
  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={{
      minHeight:64, background:'#fff', borderBottom:'1px solid var(--border)',
      display:'flex', alignItems:'center', padding:'10px 24px', gap:16, flexShrink:0,
      flexWrap:'wrap', rowGap:10,
    }}>
      <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', flexWrap:'wrap', rowGap:8}}>
        <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)',
          opacity: canEdit ? 1 : 0.6, cursor: canEdit ? 'pointer' : 'not-allowed',
        }} disabled={!canEdit}>
          <option>Utkast</option><option>Skickad</option><option>Godkänd</option><option>Avslagen</option>
        </select>
        <button onClick={onOpenHistory} style={btn('ghost')}><Icon name="file" size={14}/> Historik</button>
        <button onClick={onDuplicate} style={btn('ghost')}><Icon name="duplicate" size={14}/> Duplicera</button>
        {/* Utskriften startades tidigare efter en fast fördröjning på 350 ms.
            Hann inte produktbladen (bilagorna) laddas klart innan dess saknades
            de i PDF:en, och sidnumreringen blev fel. Nu väntar onPrint tills
            dokumentet faktiskt är komplett. */}
        <button onClick={() => onPrint()} style={btn('ghost')}><Icon name="print" size={14}/> Skriv ut</button>
        <button onClick={() => onPrint(`ULAB Offert ${offer.number || ''} ${offer.customer || ''}`.trim())}
          style={btn('secondary')}><Icon name="file" size={14}/> Spara som PDF</button>
        {/* Knappen saknade tidigare onClick helt och gjorde alltså ingenting alls.
            Nu öppnar den "Klar att skicka?" — en genomgång av vad som saknas,
            och möjligheten att markera offerten som skickad med bevakningsdatum. */}
        <button onClick={onSend} disabled={!canEdit} title={canEdit ? 'Gå igenom offerten och markera den som skickad' : 'Offerten tillhör en annan säljare'}
          style={{...btn('primary'), opacity: canEdit ? 1 : 0.5, cursor: canEdit ? 'pointer' : 'not-allowed'}}>
          <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;