import { getCurrentWindow } from "@tauri-apps/api/window";
import { Outlet } from "react-router-dom";
import appLogo from "../../assets/app-logo.jpg";
import NotificationCenter from "./NotificationCenter";
import Sidebar from "./Sidebar";
import WindowControls from "./WindowControls";

export default function AppLayout() {
  async function startDragging() {
    try {
      await getCurrentWindow().startDragging();
    } catch (error) {
      console.error("Unable to drag window:", error);
    }
  }

  return (
    <div className="flex h-screen">
      <Sidebar />
      <main className="flex-1 overflow-y-auto bg-gray-50">
        <header className="sticky top-0 z-10 border-b border-gray-200 bg-gray-50/95 px-3 py-2 backdrop-blur">
          <div className="flex items-center gap-3">
            <div
              data-tauri-drag-region
              onMouseDown={(event) => {
                if (event.button === 0) {
                  void startDragging();
                }
              }}
              className="min-w-0 flex flex-1 items-center gap-2 select-none text-sm font-semibold text-gray-700"
            >
              <img
                src={appLogo}
                alt="Orchai logo"
                className="h-6 w-6 rounded-full object-cover ring-1 ring-gray-300"
              />
              <span>Orchai</span>
            </div>
            <NotificationCenter />
            <WindowControls />
          </div>
        </header>
        <Outlet />
      </main>
    </div>
  );
}
