'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { AlertTriangle, ChevronDown, ChevronRight, ImageIcon, Loader2, Trash2, Upload, } from 'lucide-react';
import { useRef } from 'react';
const LOGO_ACCEPT = 'image/svg+xml,image/png';
function previewSurface(dark) {
    return dark ? 'bg-foreground border-border' : 'bg-muted border-border';
}
function LogoField({ label, helper, field, accept, square, darkSurface, brand, assets, uploadingField, canEdit, warning, onUpload, onRemove, }) {
    const inputRef = useRef(null);
    const assetId = brand[field];
    const asset = assetId ? assets[assetId] : undefined;
    const uploading = uploadingField === field;
    const inputId = `brand-${field}`;
    return (_jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: `flex shrink-0 items-center justify-center overflow-hidden rounded-md border p-2 ${previewSurface(Boolean(darkSurface))} ${square ? 'h-12 w-12' : 'h-12 w-20'}`, "aria-hidden": !asset, children: asset?.url ? (
                // Never stretch/crop — contain preserves aspect ratio + transparency.
                _jsx("img", { src: asset.url, alt: `${label} preview`, className: "max-h-full max-w-full object-contain" })) : (_jsx(ImageIcon, { size: 18, className: "text-muted-foreground", "aria-hidden": "true" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("label", { htmlFor: inputId, className: "text-foreground block text-base font-medium", children: label }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-sm", children: helper }), _jsxs("div", { className: "mt-2 flex items-center gap-2", children: [_jsx("input", { ref: inputRef, id: inputId, type: "file", accept: accept, className: "sr-only", disabled: !canEdit || uploading, onChange: (e) => {
                                    const file = e.target.files?.[0];
                                    if (file)
                                        onUpload(field, file);
                                    if (inputRef.current)
                                        inputRef.current.value = '';
                                } }), _jsxs("button", { type: "button", onClick: () => inputRef.current?.click(), disabled: !canEdit || uploading, className: "border-border text-foreground hover:bg-accent inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50", children: [uploading ? (_jsx(Loader2, { size: 14, className: "animate-spin", "aria-hidden": "true" })) : (_jsx(Upload, { size: 14, "aria-hidden": "true" })), asset ? 'Replace' : `Upload ${label.toLowerCase()}`] }), asset && (_jsxs("button", { type: "button", onClick: () => onRemove(field), disabled: !canEdit, className: "text-muted-foreground hover:text-destructive inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50", "aria-label": `Remove ${label}`, children: [_jsx(Trash2, { size: 14, "aria-hidden": "true" }), " Remove"] }))] }), warning && (_jsxs("p", { className: "text-warning mt-2 flex items-start gap-1.5 text-sm", role: "status", "aria-live": "polite", children: [_jsx(AlertTriangle, { size: 14, className: "mt-0.5 shrink-0", "aria-hidden": "true" }), " ", warning] }))] })] }));
}
export function BrandingCard({ s, canEdit }) {
    const warningFor = (field) => s.issues.find((i) => i.field === field && i.severity === 'warning')?.message;
    const custom = s.brand.mode === 'customAdminBrand';
    return (_jsxs("section", { className: "border-border bg-card rounded-lg border p-6", children: [_jsxs("header", { className: "mb-4", children: [_jsx("h3", { className: "text-foreground text-lg font-medium", children: "Branding" }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-sm", children: "Logos shown in the admin sidebar and on the public site." })] }), _jsxs("div", { className: "space-y-5", children: [_jsx(LogoField, { label: "Primary Logo", helper: "SVG or PNG, up to 1MB. Best for the public header and full admin sidebar.", field: "publicPrimaryLogoAssetId", accept: LOGO_ACCEPT, brand: s.brand, assets: s.assets, uploadingField: s.uploadingField, canEdit: canEdit, warning: warningFor('publicPrimaryLogoAssetId'), onUpload: s.uploadAsset, onRemove: s.removeAsset }), _jsx(LogoField, { label: "Favicon / App Icon Source", helper: "32\u00D732 PNG or SVG. A larger square image is fine \u2014 it scales down cleanly.", field: "faviconSourceAssetId", accept: LOGO_ACCEPT, square: true, brand: s.brand, assets: s.assets, uploadingField: s.uploadingField, canEdit: canEdit, warning: warningFor('faviconSourceAssetId'), onUpload: s.uploadAsset, onRemove: s.removeAsset }), _jsxs("div", { className: "border-border border-t pt-4", children: [_jsxs("button", { type: "button", onClick: () => s.setShowAdvanced(!s.showAdvanced), "aria-expanded": s.showAdvanced, className: "text-foreground hover:text-brand inline-flex items-center gap-1.5 text-sm font-medium transition-colors", children: [s.showAdvanced ? (_jsx(ChevronDown, { size: 16, "aria-hidden": "true" })) : (_jsx(ChevronRight, { size: 16, "aria-hidden": "true" })), "Advanced logo variants"] }), s.showAdvanced && (_jsxs("div", { className: "mt-4 space-y-5", children: [_jsx(LogoField, { label: "Logo Mark", helper: "Square icon or mark. Used for the collapsed sidebar, compact UI, and app icons.", field: "publicLogoMarkAssetId", accept: LOGO_ACCEPT, square: true, brand: s.brand, assets: s.assets, uploadingField: s.uploadingField, canEdit: canEdit, warning: warningFor('publicLogoMarkAssetId'), onUpload: s.uploadAsset, onRemove: s.removeAsset }), _jsx(LogoField, { label: "Dark Mode Logo", helper: "Optional. Used on dark backgrounds or the dark admin theme.", field: "publicDarkLogoAssetId", accept: LOGO_ACCEPT, darkSurface: true, brand: s.brand, assets: s.assets, uploadingField: s.uploadingField, canEdit: canEdit, warning: warningFor('publicDarkLogoAssetId'), onUpload: s.uploadAsset, onRemove: s.removeAsset })] }))] }), _jsxs("div", { className: "border-border border-t pt-4", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-foreground text-base font-medium", children: "Admin branding" }) }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-sm", children: "Admin uses the public brand by default." }), _jsx("div", { role: "radiogroup", "aria-label": "Admin branding mode", className: "border-border bg-muted mt-2 inline-flex rounded-md border p-0.5", children: [
                                    ['inheritPublicBrand', 'Inherit public brand'],
                                    ['customAdminBrand', 'Custom admin logo'],
                                ].map(([value, text]) => {
                                    const active = s.brand.mode === value;
                                    return (_jsx("button", { type: "button", role: "radio", "aria-checked": active, disabled: !canEdit, onClick: () => s.setBrandingMode(value), className: `rounded px-3 py-1.5 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${active
                                            ? 'bg-card text-foreground shadow-sm'
                                            : 'text-muted-foreground hover:text-foreground'}`, children: text }, value));
                                }) }), custom && (_jsxs("div", { className: "mt-4 space-y-5", children: [_jsx(LogoField, { label: "Admin Primary Logo", helper: "Shown in the admin sidebar instead of the public logo.", field: "adminPrimaryLogoAssetId", accept: LOGO_ACCEPT, brand: s.brand, assets: s.assets, uploadingField: s.uploadingField, canEdit: canEdit, warning: warningFor('adminPrimaryLogoAssetId'), onUpload: s.uploadAsset, onRemove: s.removeAsset }), _jsx(LogoField, { label: "Admin Logo Mark", helper: "Square mark for the collapsed admin sidebar.", field: "adminLogoMarkAssetId", accept: LOGO_ACCEPT, square: true, brand: s.brand, assets: s.assets, uploadingField: s.uploadingField, canEdit: canEdit, warning: warningFor('adminLogoMarkAssetId'), onUpload: s.uploadAsset, onRemove: s.removeAsset })] }))] }), _jsxs("div", { className: "border-border border-t pt-4", children: [_jsx("label", { htmlFor: "brand-alt", className: "text-foreground block text-base font-medium", children: "Logo alt text" }), _jsx("p", { className: "text-muted-foreground mt-0.5 mb-2 text-sm", children: "Used by screen readers on the public site. Defaults to the Site Title when empty." }), _jsx("input", { id: "brand-alt", type: "text", value: s.brand.defaultLogoAltText ?? '', disabled: !canEdit, onChange: (e) => s.setAltText(e.target.value), placeholder: "Site Title", className: "border-border bg-input-background text-foreground focus-visible:ring-ring w-full max-w-md rounded-md border px-3 py-2 text-base focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50" })] })] }), s.saveError && (_jsx("p", { className: "text-destructive mt-4 text-sm", role: "alert", children: s.saveError }))] }));
}
//# sourceMappingURL=BrandingCard.js.map