'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { ChevronLeft, Undo2, Redo2, Monitor, Tablet, Smartphone, Loader2, Sparkles, } from 'lucide-react';
const STATUS_STYLES = {
    DRAFT: 'bg-muted text-muted-foreground',
    PUBLISHED: 'bg-primary/10 text-primary',
    SCHEDULED: 'bg-accent text-accent-foreground',
};
export function BuilderToolbar({ collectionSlug, pageSettings, status, dirty, saving, canUndo, canRedo, deviceMode, onNavigate, onTitleChange, onUndo, onRedo, onDeviceMode, onSave, onPublish, onOpenAI, }) {
    const collectionLabel = collectionSlug.charAt(0).toUpperCase() + collectionSlug.slice(1);
    return (_jsxs("div", { className: "bg-card border-border flex h-14 shrink-0 items-center gap-3 border-b px-4", role: "toolbar", "aria-label": "Page builder toolbar", children: [_jsxs("button", { onClick: () => onNavigate(`/collections/${collectionSlug}`), className: "text-muted-foreground hover:text-foreground flex items-center gap-1 text-sm transition-colors", "aria-label": `Back to ${collectionLabel}`, children: [_jsx(ChevronLeft, { size: 16 }), _jsx("span", { className: "hidden sm:inline", children: collectionLabel })] }), _jsx("div", { className: "bg-border h-6 w-px" }), _jsx("input", { type: "text", value: pageSettings.title, onChange: (e) => onTitleChange(e.target.value), placeholder: "Untitled Page", className: "text-foreground focus-visible:ring-ring placeholder:text-muted-foreground min-w-0 flex-1 rounded-sm border-none bg-transparent text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-offset-2", "aria-label": "Page title" }), _jsx("span", { className: `rounded-md px-2 py-0.5 text-xs font-medium whitespace-nowrap ${STATUS_STYLES[status] ?? STATUS_STYLES.DRAFT}`, children: status }), dirty && !saving && (_jsx("span", { className: "bg-destructive h-2 w-2 shrink-0 rounded-full", title: "Unsaved changes", "aria-label": "Unsaved changes" })), _jsx("div", { className: "bg-border h-6 w-px" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { onClick: onUndo, disabled: !canUndo, className: "text-muted-foreground hover:text-foreground hover:bg-muted rounded-md p-1.5 transition-colors disabled:pointer-events-none disabled:opacity-30", "aria-label": "Undo", children: _jsx(Undo2, { size: 16 }) }), _jsx("button", { onClick: onRedo, disabled: !canRedo, className: "text-muted-foreground hover:text-foreground hover:bg-muted rounded-md p-1.5 transition-colors disabled:pointer-events-none disabled:opacity-30", "aria-label": "Redo", children: _jsx(Redo2, { size: 16 }) })] }), _jsx("div", { className: "bg-border h-6 w-px" }), _jsxs("div", { className: "bg-muted flex items-center gap-0.5 rounded-md p-0.5", children: [_jsx(DeviceButton, { active: deviceMode === 'desktop', onClick: () => onDeviceMode('desktop'), label: "Desktop view", children: _jsx(Monitor, { size: 16 }) }), _jsx(DeviceButton, { active: deviceMode === 'tablet', onClick: () => onDeviceMode('tablet'), label: "Tablet view", children: _jsx(Tablet, { size: 16 }) }), _jsx(DeviceButton, { active: deviceMode === 'mobile', onClick: () => onDeviceMode('mobile'), label: "Mobile view", children: _jsx(Smartphone, { size: 16 }) })] }), _jsx("div", { className: "bg-border h-6 w-px" }), onOpenAI && (_jsxs(_Fragment, { children: [_jsxs("button", { onClick: onOpenAI, className: "text-primary bg-primary/10 hover:bg-primary/20 flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium transition-colors", "aria-label": "Generate page with AI", children: [_jsx(Sparkles, { size: 14 }), _jsx("span", { className: "hidden sm:inline", children: "AI" })] }), _jsx("div", { className: "bg-border h-6 w-px" })] })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { onClick: onSave, disabled: saving || !dirty, className: "bg-muted text-muted-foreground hover:bg-muted/80 flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50", children: [saving && _jsx(Loader2, { size: 14, className: "animate-spin" }), saving ? 'Saving...' : 'Save'] }), _jsx("button", { onClick: onPublish, disabled: saving, className: "bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-3 py-1.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50", children: "Publish" })] })] }));
}
function DeviceButton({ active, onClick, label, children, }) {
    return (_jsx("button", { onClick: onClick, className: `rounded-md p-1.5 transition-colors ${active
            ? 'bg-background text-foreground shadow-sm'
            : 'text-muted-foreground hover:text-foreground'}`, "aria-label": label, "aria-pressed": active, children: children }));
}
//# sourceMappingURL=BuilderToolbar.js.map