'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { AlertTriangle, Loader2 } from 'lucide-react';
import { AdminThemeCard } from './AdminThemeCard.js';
import { BrandPreviewCard } from './BrandPreviewCard.js';
import { BrandingCard } from './BrandingCard.js';
import { SettingsSaveBar, SettingsValidationSummary } from './components.js';
import { TypographyMotionCard } from './TypographyMotionCard.js';
import { useAppearanceSettings } from './useAppearanceSettings.js';
function CardSkeleton() {
    return _jsx("div", { className: "border-border bg-card h-48 animate-pulse rounded-lg border" });
}
export function AppearanceTab({ role, config }) {
    const canEdit = role === 'ADMIN';
    const s = useAppearanceSettings(canEdit, config);
    if (s.loading) {
        return (_jsxs("div", { className: "space-y-4", "aria-busy": "true", children: [_jsx(CardSkeleton, {}), _jsx(CardSkeleton, {}), _jsx(CardSkeleton, {})] }));
    }
    if (s.loadError) {
        return (_jsxs("div", { role: "alert", className: "border-destructive/30 bg-destructive/10 text-destructive flex items-center justify-between gap-4 rounded-lg border p-4 text-sm", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(AlertTriangle, { size: 16, "aria-hidden": "true" }), " ", s.loadError] }), _jsxs("button", { type: "button", onClick: s.reload, className: "border-destructive/40 text-destructive hover:bg-destructive/10 inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5", children: [_jsx(Loader2, { size: 14, "aria-hidden": "true" }), " Retry"] })] }));
    }
    return (_jsxs("div", { className: "space-y-4", children: [!canEdit && (_jsx("p", { className: "text-muted-foreground border-border bg-muted rounded-lg border p-3 text-sm", children: "You have read-only access to appearance settings." })), _jsx(SettingsValidationSummary, { issues: s.issues }), _jsx(BrandingCard, { s: s, canEdit: canEdit }), _jsx(AdminThemeCard, { s: s, canEdit: canEdit }), _jsx(TypographyMotionCard, { s: s, canEdit: canEdit }), _jsx(BrandPreviewCard, { s: s }), _jsx(SettingsSaveBar, { dirty: s.dirty, canEdit: canEdit, hasErrors: s.issues.some((i) => i.severity === 'error'), saveState: s.saveState, onSave: s.save, onReset: s.reset })] }));
}
//# sourceMappingURL=AppearanceTab.js.map