'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Check, ExternalLink, Eye, Laptop, Loader2, Monitor, Settings2, Smartphone, Tablet, TriangleAlert, } from 'lucide-react';
import { VIEWPORTS } from './viewports.js';
const VIEWPORT_ICONS = {
    monitor: Monitor,
    laptop: Laptop,
    tablet: Tablet,
    smartphone: Smartphone,
};
const STATUS_TEXT = {
    DRAFT: { label: 'Draft', className: 'text-amber-600 dark:text-amber-400' },
    PUBLISHED: { label: 'Published', className: 'text-emerald-600 dark:text-emerald-400' },
    SCHEDULED: { label: 'Scheduled', className: 'text-amber-600 dark:text-amber-400' },
    ARCHIVED: { label: 'Archived', className: 'text-muted-foreground' },
};
export function EditorTopBar({ title, status, dirty, saveState, publishing, canEdit, canPublish, viewport, backLabel = 'Pages', onViewport, onBack, onPreview, onViewOnSite, onOpenSettings, onSaveDraft, onPublish, }) {
    const statusInfo = STATUS_TEXT[status];
    return (_jsxs("header", { className: "bg-card border-border flex h-14 shrink-0 items-center justify-between gap-4 border-b px-4", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsxs("nav", { "aria-label": "Breadcrumb", className: "flex min-w-0 items-center gap-1.5 text-sm", children: [_jsx("button", { type: "button", onClick: onBack, className: "text-muted-foreground hover:text-foreground shrink-0", children: backLabel }), _jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "/" }), _jsx("span", { className: "text-foreground truncate font-medium", children: title || 'Untitled page' })] }), _jsx("span", { className: `ml-2 shrink-0 text-xs font-medium ${statusInfo.className}`, "aria-label": `Status: ${statusInfo.label}`, children: statusInfo.label }), _jsx(SaveStatus, { state: saveState, dirty: dirty })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "border-border bg-background hidden items-center gap-0.5 rounded-lg border p-0.5 md:flex", role: "group", "aria-label": "Preview viewport", children: VIEWPORTS.map((v) => {
                            const Icon = VIEWPORT_ICONS[v.icon] ?? Monitor;
                            const active = v.id === viewport;
                            return (_jsxs("button", { type: "button", onClick: () => onViewport(v.id), "aria-pressed": active, title: `${v.label} (${v.width}px)`, className: `flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors ${active
                                    ? 'bg-primary text-primary-foreground'
                                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'}`, children: [_jsx(Icon, { className: "h-3.5 w-3.5", "aria-hidden": true }), _jsx("span", { className: "hidden lg:inline", children: v.label })] }, v.id));
                        }) }), _jsx("button", { type: "button", onClick: onOpenSettings, "aria-label": "Page settings", title: "Page settings", className: "text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2", children: _jsx(Settings2, { className: "h-4 w-4", "aria-hidden": true }) }), _jsx("button", { type: "button", onClick: onPreview, "aria-label": "Preview page", title: "Preview page", className: "text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2", children: _jsx(Eye, { className: "h-4 w-4", "aria-hidden": true }) }), onViewOnSite && (_jsx("button", { type: "button", onClick: onViewOnSite, "aria-label": "View draft on site", title: "View draft on site", className: "text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2", children: _jsx(ExternalLink, { className: "h-4 w-4", "aria-hidden": true }) })), _jsx("button", { type: "button", onClick: onSaveDraft, disabled: !canEdit || saveState === 'saving' || (!dirty && saveState !== 'error'), className: "border-border text-foreground hover:bg-accent rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50", children: saveState === 'saving' ? 'Saving…' : 'Save Draft' }), _jsxs("button", { type: "button", onClick: onPublish, disabled: !canPublish || publishing || saveState === 'saving', className: "bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50", children: [publishing && _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": true }), "Publish"] })] })] }));
}
function SaveStatus({ state, dirty }) {
    if (state === 'saving') {
        return (_jsxs("span", { className: "text-muted-foreground ml-2 inline-flex items-center gap-1 text-xs", "aria-live": "polite", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin", "aria-hidden": true }), "Saving\u2026"] }));
    }
    if (state === 'error') {
        return (_jsxs("span", { className: "text-destructive ml-2 inline-flex items-center gap-1 text-xs", "aria-live": "polite", children: [_jsx(TriangleAlert, { className: "h-3 w-3", "aria-hidden": true }), "Failed to save"] }));
    }
    if (dirty) {
        return (_jsx("span", { className: "text-muted-foreground ml-2 text-xs", "aria-live": "polite", children: "Unsaved changes" }));
    }
    if (state === 'saved') {
        return (_jsxs("span", { className: "text-muted-foreground ml-2 inline-flex items-center gap-1 text-xs", "aria-live": "polite", children: [_jsx(Check, { className: "h-3 w-3", "aria-hidden": true }), "Saved"] }));
    }
    return null;
}
//# sourceMappingURL=EditorTopBar.js.map