// topbar.jsx — top toolbar with date nav, view switcher, search, +New

function Topbar({
  anchorDate, setAnchorDate,
  today,
  view, setView,
  search, setSearch,
  onNewBooking,
  dark, setDark,
  onCalendar = true,
  pageTitle,
}) {
  const goToday = () => setAnchorDate(new Date(today));
  const stepDays = (n) => {
    const d = new Date(anchorDate);
    d.setDate(d.getDate() + n);
    setAnchorDate(d);
  };

  // Compute window-end based on view
  let windowEnd;
  if (view === 'timeline') {
    windowEnd = new Date(anchorDate);
    windowEnd.setDate(windowEnd.getDate() + 13);
  } else if (view === 'week') {
    windowEnd = new Date(anchorDate);
    windowEnd.setDate(windowEnd.getDate() + 6);
  } else {
    windowEnd = anchorDate;
  }
  const dateLabel = view === 'month'
    ? `${MONTH_VN[anchorDate.getMonth()]} ${anchorDate.getFullYear()}`
    : view === 'day'
      ? formatDateVN(anchorDate)
      : formatRange(anchorDate, windowEnd);

  const step = view === 'timeline' ? 7 : view === 'week' ? 7 : view === 'month' ? 30 : 1;

  return (
    <div className="topbar">
      {onCalendar ? (
        <>
          <button className="tb-today" onClick={goToday}>Hôm nay</button>
          <div className="tb-arrows">
            <button onClick={() => stepDays(-step)} aria-label="Trước">
              <Icon name="chevron_left" size={20} />
            </button>
            <button onClick={() => stepDays(step)} aria-label="Sau">
              <Icon name="chevron_right" size={20} />
            </button>
          </div>
          <div className="tb-date">{dateLabel}</div>
        </>
      ) : (
        <div className="tb-date" style={{ minWidth: 0 }}>{pageTitle}</div>
      )}

      <div className="tb-spacer" />

      <div className="tb-search">
        <Icon name="search" size={16} className="ico" />
        <input
          type="text"
          placeholder="Tìm khách, mã đặt phòng, số phòng…"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
      </div>

      {onCalendar && (
        <div className="tb-views">
          {[
            { k: 'day',      l: 'Ngày'   },
            { k: 'week',     l: 'Tuần'   },
            { k: 'month',    l: 'Tháng'  },
            { k: 'timeline', l: 'Sơ đồ'  },
          ].map(v => (
            <button
              key={v.k}
              className={view === v.k ? 'active' : ''}
              onClick={() => setView(v.k)}
            >
              {v.l}
            </button>
          ))}
        </div>
      )}

      <button className="tb-icon-btn" onClick={() => setDark(!dark)} title={dark ? 'Sáng' : 'Tối'}>
        <Icon name={dark ? 'sun' : 'moon'} size={18} />
      </button>
      <button className="tb-icon-btn" title="Thông báo"><Icon name="bell" size={18} /></button>
      <button className="tb-icon-btn" title="Cài đặt"><Icon name="settings" size={18} /></button>

      <button className="tb-new" onClick={onNewBooking}>
        <Icon name="plus" size={16} stroke={2.5} />
        <span>Đặt phòng mới</span>
      </button>
    </div>
  );
}

window.Topbar = Topbar;