import { Search } from "lucide-react";
import { COLORS, FONT } from "./theme";
import { PresetPicker } from "./PresetPicker";

/** Top-of-grid toolbar: layout presets on the left, scrollback search on the right (search is a mock). */
export function CenterToolbar({ selected, onSelect, onOpenSearch, paneCount, searchDisabled = false }: { selected: string; onSelect: (id: string) => void; onOpenSearch: () => void; paneCount: number; searchDisabled?: boolean }) {
  return (
    <div style={{ position: "relative", zIndex: 20, display: "flex", alignItems: "center", gap: 8, padding: "0 12px", height: 46, background: COLORS.elevatedGlass, backdropFilter: COLORS.panelBlur, WebkitBackdropFilter: COLORS.panelBlur, borderBottom: `1px solid ${COLORS.borderSubtle}` }}>
      <PresetPicker selected={selected} onSelect={onSelect} minSlots={paneCount} />
      <div style={{ flex: 1 }} />
      <div
        title={searchDisabled ? "Поиск недоступен в панели с агентом (полноэкранный TUI)" : "Search scrollback"}
        onClick={searchDisabled ? undefined : onOpenSearch}
        style={{
          display: "flex", alignItems: "center", gap: 6, height: 24, padding: "0 8px", borderRadius: 6,
          background: COLORS.bgPanel, border: `1px solid ${COLORS.borderSubtle}`,
          cursor: searchDisabled ? "not-allowed" : "pointer", opacity: searchDisabled ? 0.4 : 1,
        }}>
        <Search size={12} color={COLORS.textMuted} />
        <span style={{ fontFamily: FONT.ui, fontSize: 11, color: COLORS.textMuted }}>Search scrollback</span>
        <span style={{ fontFamily: FONT.mono, fontSize: 11, color: COLORS.textMuted }}>⌘F</span>
      </div>
    </div>
  );
}
