"use client";

import { usePathname } from "next/navigation";

import type { DesktopShell } from "@/lib/desktop-shell";
import { PAGE_TITLES } from "@/lib/desktop/page-titles";
import { useDesktopShell } from "@/lib/desktop/store";

import { WindowControls } from "./WindowControls";

/** 窗口顶部 40px. 整条连同里面的文字都是拖拽区 (data-tauri-drag-region="deep"), 按钮除外. 侧栏开关只在侧栏顶部. */
export const DesktopTitlebar = ({ platform }: { platform: DesktopShell["platform"] }) => {
  const pathname = usePathname();
  const title = useDesktopShell((s) => s.title);
  const center = title ?? PAGE_TITLES[pathname] ?? "";

  return (
    <div
      data-tauri-drag-region="deep"
      className="flex h-10 shrink-0 select-none items-center border-b border-border bg-background"
    >
      <div className="flex items-center pl-2">
        {platform === "macos" && <span data-testid="traffic-light-inset" className="w-[70px]" aria-hidden />}
      </div>
      <div className="flex min-w-0 flex-1 items-center justify-center text-[13px]">
        <span className="max-w-[40vw] truncate font-medium text-foreground">{center}</span>
      </div>
      {platform === "windows" && <WindowControls />}
    </div>
  );
};
