'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { AlertTriangle, ChevronDown, ChevronRight, ImageIcon, Library, Loader2, Trash2, Upload, } from 'lucide-react';
import { useRef, useState } from 'react';
import { MediaPickerModal } from '../../components/MediaPickerModal.js';
import { SettingsCard, SettingsControlRow, SettingsSubsection } from './components.js';
import { FAVICON_MIME, LOGO_MIME, } from './useAppearanceSettings.js';
// Derive the file-input accept strings from the validation allow-lists so the
// picker and the validator can never drift apart.
const LOGO_ACCEPT = LOGO_MIME.join(',');
const FAVICON_ACCEPT = FAVICON_MIME.join(',');
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, onSelectFromLibrary, onRemove, }) {
    const inputRef = useRef(null);
    const [pickerOpen, setPickerOpen] = useState(false);
    // Remember a preview URL that failed to load so a broken/expired asset shows
    // the neutral placeholder icon instead of the browser's broken-image glyph.
    const [thumbErrorUrl, setThumbErrorUrl] = useState(null);
    const assetId = brand[field];
    const asset = assetId ? assets[assetId] : undefined;
    const uploading = uploadingField === field;
    const inputId = `brand-${field}`;
    const showPreview = Boolean(asset?.url) && asset?.url !== thumbErrorUrl;
    const thumbnail = (_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: showPreview ? (
        // 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", onError: () => setThumbErrorUrl(asset.url) })) : (_jsx(ImageIcon, { size: 18, className: "text-muted-foreground", "aria-hidden": "true" })) }));
    const controls = (_jsxs(_Fragment, { children: [_jsx("input", { ref: inputRef, id: inputId, type: "file", accept: accept, "aria-label": label, 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 = '';
                } }), 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.toLowerCase()}`, children: [_jsx(Trash2, { size: 14, "aria-hidden": "true" }), " Remove"] })), _jsxs("button", { type: "button", onClick: () => setPickerOpen(true), disabled: !canEdit || uploading, "aria-label": `Choose ${label.toLowerCase()} from media library`, 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: [_jsx(Library, { size: 14, "aria-hidden": "true" }), " Media library"] }), _jsxs("button", { type: "button", onClick: () => inputRef.current?.click(), disabled: !canEdit || uploading, "aria-label": `${asset ? 'Replace' : 'Upload'} ${label.toLowerCase()}`, 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'] }), _jsx(MediaPickerModal, { open: pickerOpen, onClose: () => setPickerOpen(false), accept: accept, libraryOnly: true, onSelect: () => { }, onSelectItem: (item) => {
                    onSelectFromLibrary(field, {
                        id: item.id,
                        url: item.url,
                        mimeType: item.mimeType,
                        width: item.width,
                        height: item.height,
                    });
                } })] }));
    return (_jsxs("div", { children: [_jsx(SettingsControlRow, { leading: thumbnail, label: label, description: helper, control: controls }), 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] }))] }));
}
function AdminBrandSourceToggle({ mode, canEdit, onChange, }) {
    return (_jsx("div", { role: "radiogroup", "aria-label": "Brand source", className: "border-border bg-muted inline-flex rounded-md border p-0.5", children: [
            ['inheritPublicBrand', 'Inherit public brand'],
            ['customAdminBrand', 'Custom admin logo'],
        ].map(([value, text]) => {
            const active = mode === value;
            return (_jsx("button", { type: "button", role: "radio", "aria-checked": active, disabled: !canEdit, onClick: () => onChange(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));
        }) }));
}
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';
    const logoFieldProps = {
        accept: LOGO_ACCEPT,
        brand: s.brand,
        assets: s.assets,
        uploadingField: s.uploadingField,
        canEdit,
        onUpload: s.uploadAsset,
        onSelectFromLibrary: s.selectAsset,
        onRemove: s.removeAsset,
    };
    return (_jsxs(SettingsCard, { title: "Branding", description: "Logos shown in the admin sidebar and on the public site.", children: [_jsxs("div", { className: "space-y-5", children: [_jsx(LogoField, { label: "Primary logo", helper: "SVG, PNG, WebP, JPEG, GIF, or AVIF, up to 1MB. Best for the public header and full admin sidebar.", field: "publicPrimaryLogoAssetId", warning: warningFor('publicPrimaryLogoAssetId'), ...logoFieldProps }), _jsx(LogoField, { label: "Favicon / app icon source", helper: "32\u00D732 SVG, PNG, or WebP. A larger square image is fine \u2014 it scales down cleanly.", field: "faviconSourceAssetId", square: true, warning: warningFor('faviconSourceAssetId'), ...logoFieldProps, accept: FAVICON_ACCEPT }), _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", square: true, warning: warningFor('publicLogoMarkAssetId'), ...logoFieldProps }), _jsx(LogoField, { label: "Dark mode logo", helper: "Optional. Used on dark backgrounds or the dark admin theme.", field: "publicDarkLogoAssetId", darkSurface: true, warning: warningFor('publicDarkLogoAssetId'), ...logoFieldProps })] }))] }), _jsx(SettingsSubsection, { title: "Admin branding", description: "By default the admin reuses your public brand. Override it for a distinct internal look.", children: _jsxs("div", { className: "mt-4 space-y-5", children: [_jsx(SettingsControlRow, { label: "Brand source", description: "Choose whether the admin inherits the public brand or uses a custom logo.", control: _jsx(AdminBrandSourceToggle, { mode: s.brand.mode, canEdit: canEdit, onChange: s.setBrandingMode }) }), custom && (_jsxs("div", { className: "space-y-5", children: [_jsx(LogoField, { label: "Admin primary logo", helper: "Shown in the admin sidebar instead of the public logo.", field: "adminPrimaryLogoAssetId", warning: warningFor('adminPrimaryLogoAssetId'), ...logoFieldProps }), _jsx(LogoField, { label: "Admin logo mark", helper: "Square mark for the collapsed admin sidebar.", field: "adminLogoMarkAssetId", square: true, warning: warningFor('adminLogoMarkAssetId'), ...logoFieldProps })] }))] }) }), _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