'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Calendar, Check, ExternalLink, Eye, Globe, History, Laptop, Loader2, Monitor, Settings2, Smartphone, Tablet, TriangleAlert, } from 'lucide-react';
import { EditorSeoScoreBadge } from '../../components/seo/EditorSeoScoreBadge.js';
import { VIEWPORTS } from './viewports.js';
const VIEWPORT_ICONS = {
    monitor: Monitor,
    laptop: Laptop,
    tablet: Tablet,
    smartphone: Smartphone,
};
const STATUS_TEXT = {
    DRAFT: { label: 'Draft', className: 'text-warning dark:text-amber-400' },
    PUBLISHED: { label: 'Published', className: 'text-emerald-600 dark:text-emerald-400' },
    SCHEDULED: { label: 'Scheduled', className: 'text-warning dark:text-amber-400' },
    ARCHIVED: { label: 'Archived', className: 'text-muted-foreground' },
};
export function EditorTopBar({ title, status, dirty, saveState, publishing, canEdit, canPublish, publishReady = true, publishDisabledReason, viewport, backLabel = 'Pages', onViewport, onBack, onPreview, onViewOnSite, onHistory, sitePreview = false, onToggleSitePreview, onOpenSettings, onOpenSeo, seoOpen = false, seoScore = 0, onSaveDraft, onPublish, onSchedule, scheduleReady = true, scheduledAt = null, scheduledUnpublishAt = null, structuralTypes = [], }) {
    const statusInfo = STATUS_TEXT[status];
    // With custom section types on the page the canvas (and the eye preview,
    // which reuses the admin renderers) only shows structure — the real design
    // preview is the public site, so promote "View on site" to a labeled button.
    const structural = structuralTypes.length > 0;
    const previewLabel = structural
        ? 'Preview structure (custom sections show placeholders)'
        : 'Preview page';
    const publishBlocked = !canPublish || !publishReady || publishing || saveState === 'saving';
    const publishTitle = publishing
        ? 'Publishing…'
        : saveState === 'saving'
            ? 'Wait for the current save to finish'
            : canPublish && !publishReady && publishDisabledReason
                ? publishDisabledReason
                : !canPublish
                    ? 'You do not have permission to publish'
                    : undefined;
    const scheduleBlocked = !onSchedule ||
        !canPublish ||
        !publishReady ||
        !scheduleReady ||
        publishing ||
        saveState === 'saving';
    const scheduleTitle = saveState === 'saving'
        ? 'Wait for the current save to finish'
        : !scheduleReady
            ? 'Save before scheduling'
            : canPublish && !publishReady && publishDisabledReason
                ? publishDisabledReason
                : !canPublish
                    ? 'You do not have permission to schedule'
                    : scheduledAt
                        ? `Reschedule — currently publishes ${formatScheduleLabel(scheduledAt)}`
                        : 'Schedule a future publish date';
    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 }), scheduledAt && (_jsxs("span", { className: "text-muted-foreground ml-1 hidden shrink-0 text-xs sm:inline", title: scheduledUnpublishAt
                            ? `Publishes ${formatScheduleLabel(scheduledAt)} · Unpublishes ${formatScheduleLabel(scheduledUnpublishAt)}`
                            : `Publishes ${formatScheduleLabel(scheduledAt)}`, children: ["\u00B7 ", formatScheduleLabel(scheduledAt)] })), _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 }) }), onOpenSeo && (_jsxs("button", { type: "button", onClick: onOpenSeo, "aria-pressed": seoOpen, "aria-label": `SEO, score ${seoScore} out of 100`, title: `SEO — score ${seoScore}/100. Meta tags, social preview, schema, and analysis.`, className: `inline-flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-sm font-medium transition-colors ${seoOpen
                            ? 'bg-primary text-primary-foreground'
                            : 'text-muted-foreground hover:text-foreground hover:bg-accent'}`, children: [_jsx(EditorSeoScoreBadge, { score: seoScore, inverted: seoOpen }), _jsx("span", { className: "hidden sm:inline", children: "SEO" })] })), onHistory && (_jsx("button", { type: "button", onClick: onHistory, "aria-label": "Version history", title: "Version history", className: "text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2", children: _jsx(History, { className: "h-4 w-4", "aria-hidden": true }) })), _jsx("button", { type: "button", onClick: onPreview, "aria-label": previewLabel, title: previewLabel, 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 }) }), onToggleSitePreview && (_jsx("button", { type: "button", onClick: onToggleSitePreview, "aria-pressed": sitePreview, "aria-label": sitePreview ? 'Back to editor canvas' : 'Inline site preview', title: sitePreview
                            ? 'Back to editor canvas'
                            : 'Inline site preview — render the draft through your public site, in place', className: `rounded-lg p-2 transition-colors ${sitePreview
                            ? 'bg-primary text-primary-foreground'
                            : 'text-muted-foreground hover:text-foreground hover:bg-accent'}`, children: _jsx(Globe, { className: "h-4 w-4", "aria-hidden": true }) })), onViewOnSite &&
                        (structural ? (_jsxs("button", { type: "button", onClick: onViewOnSite, title: "Open the draft on your public site \u2014 the real design preview", className: "border-border text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors", children: [_jsx(ExternalLink, { className: "h-3.5 w-3.5", "aria-hidden": true }), "View on site"] })) : (_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' }), onSchedule && (_jsxs("button", { type: "button", onClick: onSchedule, disabled: scheduleBlocked, title: scheduleTitle, "aria-label": scheduledAt ? 'Reschedule publish' : 'Schedule publish', className: "border-border text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50", children: [_jsx(Calendar, { className: "h-3.5 w-3.5", "aria-hidden": true }), _jsx("span", { className: "hidden sm:inline", children: scheduledAt ? 'Reschedule' : 'Schedule' })] })), _jsxs("button", { type: "button", onClick: onPublish, disabled: publishBlocked, title: publishTitle, "aria-disabled": publishBlocked, 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;
}
function formatScheduleLabel(iso) {
    const d = new Date(iso);
    if (Number.isNaN(d.getTime()))
        return iso;
    return d.toLocaleString(undefined, {
        month: 'short',
        day: 'numeric',
        year: 'numeric',
        hour: 'numeric',
        minute: '2-digit',
    });
}
//# sourceMappingURL=EditorTopBar.js.map