import { FolderGit2, PanelLeft, PanelRight, Search, Bell, Settings, ChevronDown } from "lucide-react";
import { COLORS, FONT } from "./theme";
import type { WorkspaceView } from "./layoutTypes";
import { leafIds } from "./layoutTypes";

/** Human-readable descriptor of the active workspace layout (mock until a real preset id is tracked). */
function describeLayout(w: WorkspaceView | null): string {
  if (!w || !w.layout) return "no layout";
  const n = leafIds(w.layout).length;
  return n === 1 ? "1 pane" : `${n} panes`;
}

function IconBtn({ icon, onClick, active, title }: { icon: React.ReactNode; onClick?: () => void; active?: boolean; title?: string }) {
  return (
    <button
      title={title}
      onClick={onClick}
      style={{
        display: "flex", alignItems: "center", justifyContent: "center",
        width: 26, height: 26, borderRadius: 6,
        background: active ? COLORS.bgElevated : "transparent",
        border: active ? `1px solid ${COLORS.borderSubtle}` : "1px solid transparent",
        color: active ? COLORS.textPrimary : COLORS.textSecondary,
      }}
    >
      {icon}
    </button>
  );
}

export function TopBar({
  active, eventsOpen, onToggleEvents, onShowEvents, sidebarOpen, onToggleSidebar, unread, onOpenSettings,
}: {
  active: WorkspaceView | null;
  eventsOpen: boolean;
  onToggleEvents: () => void;
  onShowEvents: () => void;
  sidebarOpen: boolean;
  onToggleSidebar: () => void;
  unread: number;
  onOpenSettings: () => void;
}) {
  return (
    <div
      style={{
        display: "flex", alignItems: "center", height: 40, flex: "0 0 40px",
        padding: "0 14px", gap: 12, background: COLORS.bgApp,
        borderBottom: `1px solid ${COLORS.borderSubtle}`,
      }}
    >
      {/* Left: sidebar toggle, flush to the left edge. */}
      <IconBtn icon={<PanelLeft size={15} />} onClick={onToggleSidebar} active={sidebarOpen} title="Toggle Sidebar" />

      {/* Workspace breadcrumb */}
      <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
        <FolderGit2 size={15} color={COLORS.textSecondary} />
        <span style={{ fontFamily: FONT.ui, fontSize: 13, fontWeight: 600, color: COLORS.textPrimary, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
          {active?.name ?? "spacesh"}
        </span>
        {active && (
          <>
            <span style={{ fontFamily: FONT.ui, fontSize: 13, color: COLORS.textMuted }}>/</span>
            <span style={{ fontFamily: FONT.ui, fontSize: 13, color: COLORS.textSecondary, whiteSpace: "nowrap" }}>
              {describeLayout(active)}
            </span>
          </>
        )}
      </div>

      <div style={{ flex: 1 }} />

      {/* Right cluster */}
      <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
        <IconBtn icon={<Search size={16} />} title="Search (mock)" />
        <div style={{ position: "relative", display: "flex" }}>
          <IconBtn icon={<Bell size={16} />} onClick={onShowEvents} active={eventsOpen} title="Open activity log" />
          {unread > 0 && (
            <span style={{
              position: "absolute", top: -2, right: -2, minWidth: 14, height: 14, padding: "0 3px",
              borderRadius: 7, background: COLORS.stError, color: "#fff",
              fontFamily: FONT.ui, fontSize: 9, fontWeight: 700,
              display: "flex", alignItems: "center", justifyContent: "center", boxSizing: "border-box",
            }}>
              {unread > 99 ? "99+" : unread}
            </span>
          )}
        </div>
        <IconBtn icon={<PanelRight size={15} />} onClick={onToggleEvents} active={eventsOpen} title="Toggle Event Center" />
        <IconBtn icon={<Settings size={16} />} onClick={onOpenSettings} title="Settings" />
        <span style={{ width: 1, height: 18, background: COLORS.borderStrong, margin: "0 2px" }} />
        <button
          title="Account (mock)"
          style={{
            display: "flex", alignItems: "center", gap: 6, height: 26, padding: "0 4px 0 4px",
            background: "transparent", border: "1px solid transparent", borderRadius: 6, color: COLORS.textSecondary,
          }}
        >
          <span style={{ width: 20, height: 20, borderRadius: "50%", background: COLORS.accent, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: FONT.ui, fontSize: 11, fontWeight: 700, color: "#fff" }}>
            V
          </span>
          <ChevronDown size={13} />
        </button>
      </div>
    </div>
  );
}