"use client";
import * as React from "react";
import Link from "next/link";
import { ChevronLeft, Menu } from "lucide-react";
import { useApp } from "@/components/app/store";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

/**
 * Compact 48 px page bar shared by Projects / Library / Prompts.
 * Phone: hamburger (opens the drawer) or a back link; title truncates; actions on the right (icon buttons).
 * Desktop: same bar, so pages keep a stable top edge across the workspace.
 */
export function WorkspacePageHeader({ title, subtitle, back, actions, leading, className }: { title: React.ReactNode; subtitle?: React.ReactNode; back?: string; actions?: React.ReactNode; leading?: React.ReactNode; className?: string }) {
  const { setSidebarOpen } = useApp();
  return (
    <header className={cn("flex h-12 shrink-0 items-center gap-1.5 border-b border-border px-2 sm:px-4", className)}>
      {back ? (
        <Button asChild variant="ghost" size="icon-sm" className="tap -ml-0.5">
          <Link href={back} aria-label="Back">
            <ChevronLeft />
          </Link>
        </Button>
      ) : (
        <Button variant="ghost" size="icon-sm" className="tap md:hidden" onClick={() => setSidebarOpen(true)} aria-label="Open sidebar">
          <Menu />
        </Button>
      )}
      {leading}
      <div className="min-w-0 flex-1">
        <h1 className="truncate text-[15px] font-semibold leading-5 tracking-tight">{title}</h1>
        {subtitle ? <p className="truncate text-[11.5px] leading-4 text-fg-subtle">{subtitle}</p> : null}
      </div>
      {actions ? <div className="flex shrink-0 items-center gap-1">{actions}</div> : null}
    </header>
  );
}

/** Scrollable page body under the header (the document never scrolls). */
export function WorkspacePageBody({ children, className, width = "max-w-5xl" }: { children: React.ReactNode; className?: string; width?: string }) {
  return (
    <main className="min-h-0 flex-1 overflow-y-auto scrollbar-thin contain-scroll">
      <div className={cn("mx-auto w-full px-4 py-4 sm:px-6 sm:py-6 lg:px-8", width, className)}>{children}</div>
    </main>
  );
}