import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useState } from "react";
import { Bug, PanelLeft, SlidersHorizontal, UserCircle } from "lucide-react";
import { SettingsCard as Card } from "../SettingsCard";
import { SettingsPanelLayout } from "../SettingsPanelLayout";
import { Switch } from "../../../components/ui/switch";
import { Button } from "../../../components/ui/button";
import { Avatar } from "../../../components/ui/avatar";
import { useEditContext } from "../../client/editContext";
import { uploadAvatar } from "../../services/userService";
const ACCEPTED_TYPES = ["image/png", "image/jpeg", "image/webp", "image/gif"];
const MAX_BYTES = 1024 * 1024; // keep in sync with the backend cap
function PreferenceToggle({ checked, description, icon, label, testId, onCheckedChange, }) {
    return (_jsxs("div", { className: "border-border-default flex items-center justify-between gap-4 border-b py-4 last:border-b-0", children: [_jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [_jsx("div", { className: "border-border-default bg-neutral-grey-5 text-neutral-grey-50 mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded border", children: icon }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-neutral-grey-100 text-sm font-medium", children: label }), _jsx("div", { className: "text-neutral-grey-50 mt-1 text-xs leading-5", children: description })] })] }), _jsx(Switch, { checked: checked, onCheckedChange: onCheckedChange, "aria-label": label, "data-testid": testId })] }));
}
function AvatarSection() {
    const editContext = useEditContext();
    const fileInputRef = useRef(null);
    const [error, setError] = useState(null);
    const [busy, setBusy] = useState(false);
    const currentUser = editContext?.user;
    // Prefer the live session copy (kept fresh by the active-sessions broadcast) so the
    // preview reflects the latest avatar even after re-opening Settings.
    const mySession = editContext?.activeSessions.find((s) => s.sessionId === editContext?.sessionId);
    const seededAvatarUrl = mySession?.user.avatarUrl ?? currentUser?.avatarUrl;
    const [avatarUrl, setAvatarUrl] = useState(seededAvatarUrl ?? undefined);
    if (!currentUser || currentUser.isLimitedPreviewUser) {
        return null;
    }
    const displayName = currentUser.fullName || currentUser.name;
    const sessionColor = mySession?.color;
    const handleSelect = (event) => {
        const file = event.target.files?.[0];
        event.target.value = ""; // allow re-selecting the same file
        if (!file)
            return;
        setError(null);
        if (!ACCEPTED_TYPES.includes(file.type)) {
            setError("Unsupported image type. Use PNG, JPEG, WebP, or GIF.");
            return;
        }
        if (file.size > MAX_BYTES) {
            setError("Image is too large (max 1 MB).");
            return;
        }
        setBusy(true);
        uploadAvatar(file)
            .then((result) => {
            setAvatarUrl(result.avatarUrl);
        })
            .catch((err) => {
            setError(err instanceof Error ? err.message : "Failed to upload avatar.");
        })
            .finally(() => setBusy(false));
    };
    return (_jsx(Card, { icon: _jsx(UserCircle, { strokeWidth: 1, className: "h-5 w-5" }), title: "Avatar", description: "Upload a picture shown next to your name for other editors.", children: _jsxs("div", { className: "flex items-center gap-4 py-2", children: [_jsx(Avatar, { src: avatarUrl, name: displayName, fallbackColor: sessionColor, size: "lg", className: "size-16 text-xl" }), _jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsx("input", { ref: fileInputRef, type: "file", accept: ACCEPTED_TYPES.join(","), onChange: handleSelect, className: "hidden", "data-testid": "user-preferences-avatar-input" }), _jsx("div", { children: _jsx(Button, { variant: "outline", size: "sm", onClick: () => fileInputRef.current?.click(), disabled: busy, "data-testid": "user-preferences-avatar-upload", children: busy ? "Uploading…" : "Upload image" }) }), _jsx("div", { className: "text-neutral-grey-50 text-xs leading-5", children: "PNG, JPEG, WebP, or GIF, up to 1\u00A0MB. A square image works best." }), error && _jsx("div", { className: "text-destructive text-xs", children: error })] })] }) }));
}
export function UserPreferencesPanel() {
    const editContext = useEditContext();
    const preferences = editContext?.userInfo.preferences;
    const showSidebarLabels = preferences?.showSidebarLabels ?? false;
    const showDebugButtons = preferences?.showDebugButtons ?? false;
    return (_jsxs(SettingsPanelLayout, { testId: "user-preferences-panel", contentClassName: "flex flex-col gap-4", children: [_jsx(AvatarSection, {}), _jsx(Card, { icon: _jsx(SlidersHorizontal, { strokeWidth: 1, className: "h-5 w-5" }), title: "Editor Interface", description: "Choose how navigation and optional debug controls appear.", children: _jsxs("div", { className: "divide-y-0", children: [_jsx(PreferenceToggle, { checked: showSidebarLabels, description: "Show text labels below sidebar and workspace icons.", icon: _jsx(PanelLeft, { strokeWidth: 1.5, className: "h-4 w-4" }), label: "Show sidebar labels", testId: "user-preferences-show-sidebar-labels", onCheckedChange: (checked) => editContext?.setUserPreferences({ showSidebarLabels: checked }) }), _jsx(PreferenceToggle, { checked: showDebugButtons, description: "Persist the debug button preference for features that opt into it.", icon: _jsx(Bug, { strokeWidth: 1.5, className: "h-4 w-4" }), label: "Show debug buttons", testId: "user-preferences-show-debug-buttons", onCheckedChange: (checked) => editContext?.setUserPreferences({ showDebugButtons: checked }) })] }) })] }));
}
export default UserPreferencesPanel;
//# sourceMappingURL=UserPreferencesPanel.js.map