'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import Link from 'next/link';
import { Copy, Minus, Square, X } from 'lucide-react';
import { ShepLogo } from '../../common/shep-logo/index.js';
import { ThemeToggle } from '../../common/theme-toggle/index.js';
import { TooltipProvider } from '../../ui/tooltip.js';
import { useAppsOnlyRouteGuard } from '../../../hooks/use-apps-only-route-guard.js';
import { cn } from '../../../lib/utils.js';
/**
 * Electron honors `-webkit-app-region` on the renderer to make the
 * frameless window move when the user drags the header; interactive
 * controls inside the draggable region need the inverse (`no-drag`)
 * or the click gets swallowed by the move handler.
 *
 * `-webkit-app-region` is NOT inherited by default. It must be set on
 * every interactive element explicitly — setting it only on the
 * enclosing div let the compositor silently claim clicks on our
 * buttons. The fix is: drag on the <header>, no-drag on the buttons.
 */
const DRAG_REGION = { WebkitAppRegion: 'drag' };
const NO_DRAG_REGION = { WebkitAppRegion: 'no-drag' };
function readWindowControls() {
    if (typeof window === 'undefined')
        return null;
    const bridge = window
        .shepElectron;
    return bridge?.windowControls ?? null;
}
export function AppsOnlyShell({ children }) {
    useAppsOnlyRouteGuard('apps-only');
    const [controls, setControls] = useState(null);
    const [isMaximized, setIsMaximized] = useState(false);
    useEffect(() => {
        const c = readWindowControls();
        setControls(c);
        c?.onMaximizedChange?.((v) => setIsMaximized(v));
    }, []);
    return (_jsx(TooltipProvider, { children: _jsxs("div", { className: cn('bg-background text-foreground relative flex h-screen flex-col overflow-hidden', 'rounded-xl border shadow-xl'), children: [_jsxs("header", { className: cn('relative z-20 flex h-10 shrink-0 items-center gap-3 border-b px-3 select-none', 'bg-background/80 supports-[backdrop-filter]:bg-background/60 backdrop-blur'), style: DRAG_REGION, onDoubleClick: () => controls?.maximizeToggle?.(), children: [_jsxs(Link, { href: "/applications", "aria-label": "Applications", className: "group flex items-center gap-2 rounded px-1 py-0.5 outline-none", style: NO_DRAG_REGION, children: [_jsx(ShepLogo, { size: 16, className: "opacity-90 transition-opacity group-hover:opacity-100" }), _jsxs("span", { className: "flex items-baseline gap-1 text-[12.5px] font-semibold tracking-tight", children: [_jsx("span", { className: "text-foreground", children: "shep" }), _jsx("span", { className: "text-muted-foreground font-normal", children: "\u00B7" }), _jsx("span", { className: "text-muted-foreground font-normal", children: "ui" })] })] }), _jsx("div", { className: "flex-1", "aria-hidden": true }), _jsxs("div", { className: "flex items-center gap-1", style: NO_DRAG_REGION, children: [_jsx("div", { style: NO_DRAG_REGION, children: _jsx(ThemeToggle, {}) }), _jsx("div", { className: "bg-border/70 mx-1 h-4 w-px", "aria-hidden": true }), _jsx(WindowButton, { label: "Minimize", onClick: () => controls?.minimize?.(), icon: _jsx(Minus, { className: "size-3", strokeWidth: 2.25 }) }), _jsx(WindowButton, { label: isMaximized ? 'Restore' : 'Maximize', onClick: () => controls?.maximizeToggle?.(), icon: isMaximized ? (_jsx(Copy, { className: "size-3 -rotate-90", strokeWidth: 2.25 })) : (_jsx(Square, { className: "size-[10px]", strokeWidth: 2.25 })) }), _jsx(WindowButton, { label: "Close", onClick: () => controls?.close?.(), icon: _jsx(X, { className: "size-3.5", strokeWidth: 2.25 }), variant: "danger" })] })] }), _jsx("main", { className: "min-h-0 flex-1 overflow-y-auto", children: children })] }) }));
}
/**
 * Small, sleek window-control button. Explicit `-webkit-app-region:
 * no-drag` on the button element is required — without it the
 * draggable header absorbs the click on Linux/Chromium frameless
 * windows, which is why clicks silently did nothing despite the IPC
 * chain being fully wired.
 */
function WindowButton({ label, onClick, icon, variant = 'default', }) {
    return (_jsx("button", { type: "button", "aria-label": label, title: label, onClick: onClick, style: NO_DRAG_REGION, className: cn('text-muted-foreground inline-flex h-6 w-6 items-center justify-center rounded transition-colors duration-150 ease-out', 'hover:text-foreground active:scale-[0.95]', variant === 'danger'
            ? 'hover:bg-destructive hover:text-destructive-foreground'
            : 'hover:bg-muted'), children: icon }));
}
