// Top bar: department + staff filter, date nav, new booking button

const TopBar = ({ department, onDeptChange, staffFilter, onStaffFilterChange, date, onDateChange, onNewBooking, search, onSearchChange, allStaff }) => {
  const fmt = new Intl.DateTimeFormat('da-DK', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
  const dateLabel = fmt.format(date).replace(/^./, c => c.toUpperCase());

  const shiftDay = (n) => {
    const d = new Date(date);
    d.setDate(d.getDate() + n);
    onDateChange(d);
  };

  return (
    <div style={{
      height: 56, flexShrink: 0,
      borderBottom: '1px solid #EAEAE3',
      background: '#fff',
      display: 'flex', alignItems: 'center',
      padding: '0 16px', gap: 12,
    }}>
      {/* Left: filters */}
      <FilterPill label="Afdeling" value={department.name} />
      <FilterPill label="Medarbejder" value={staffFilter === 'all' ? 'Alle medarbejdere' : allStaff.find(s => s.id === staffFilter)?.name || 'Alle'}
                   onClick={() => onStaffFilterChange(staffFilter === 'all' ? allStaff[0].id : 'all')} />

      {/* Center: date nav */}
      <div style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 12 }}>
        <button onClick={() => shiftDay(-1)} style={navBtnStyle}><IconChevL size={18} /></button>
        <button onClick={() => onDateChange(new Date(2024, 5, 6))} style={{
          background: '#FBFAF6', border: '1px solid #EAEAE3', borderRadius: 8,
          padding: '7px 16px', fontSize: 13, fontWeight: 500, cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'inherit',
          minWidth: 220, justifyContent: 'center',
        }}>
          <IconCalendar size={14} stroke="#666" />
          {dateLabel}
        </button>
        <button onClick={() => shiftDay(1)} style={navBtnStyle}><IconChevR size={18} /></button>
      </div>

      {/* Right: search + new booking */}
      <div style={{ position: 'relative' }}>
        <div style={{ position: 'absolute', left: 10, top: 9, color: '#999' }}><IconSearch size={14} /></div>
        <input value={search} onChange={e => onSearchChange(e.target.value)} placeholder="Søg kunde…"
          style={{ ...inputStyle, paddingLeft: 32, padding: '7px 10px 7px 32px', width: 180, fontSize: 13, background: '#FBFAF6' }} />
      </div>
      <button style={navBtnStyle}><IconEye size={16} /></button>
      <PrimaryBtn onClick={() => onNewBooking()}>
        <IconPlus size={14} style={{ marginRight: 6, verticalAlign: 'middle' }} />
        Ny booking
      </PrimaryBtn>
    </div>
  );
};

const navBtnStyle = {
  background: '#FBFAF6', border: '1px solid #EAEAE3', borderRadius: 8,
  width: 34, height: 34, cursor: 'pointer',
  display: 'flex', alignItems: 'center', justifyContent: 'center',
  color: '#555', fontFamily: 'inherit',
};

const FilterPill = ({ label, value, onClick }) => (
  <button onClick={onClick} style={{
    background: '#FBFAF6', border: '1px solid #EAEAE3', borderRadius: 8,
    padding: '7px 12px', cursor: onClick ? 'pointer' : 'default',
    display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'inherit', fontSize: 13,
  }}>
    <span style={{ color: '#888' }}>{label}:</span>
    <span style={{ fontWeight: 500, color: '#1a1a1a' }}>{value}</span>
    <IconChevD size={12} stroke="#888" />
  </button>
);

Object.assign(window, { TopBar });