'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { summarisePresence, } from '../lib/collaboration-provider.js';
/**
 * Small avatar / initials strip showing who else is currently editing the
 * document. Subscribes to the supplied `Awareness` instance for live
 * updates.
 *
 * The component is intentionally stateless about transport — it only reads
 * from Awareness and `status`. Wiring is the caller's job.
 */
export function PresenceChips({ awareness, status, hideSelf = true, maxVisible = 5, className, }) {
    const [snapshot, setSnapshot] = useState(() => summarisePresence(awareness));
    useEffect(() => {
        const update = () => {
            setSnapshot(summarisePresence(awareness));
        };
        update();
        awareness.on('update', update);
        awareness.on('change', update);
        return () => {
            awareness.off('update', update);
            awareness.off('change', update);
        };
    }, [awareness]);
    const visible = hideSelf
        ? snapshot.users.filter((u) => u.clientId !== snapshot.selfClientId)
        : snapshot.users;
    const overflow = Math.max(0, visible.length - maxVisible);
    const shown = visible.slice(0, maxVisible);
    return (_jsxs("div", { className: `inline-flex items-center gap-1.5 text-xs ${className ?? ''}`, "data-testid": "presence-chips", children: [status && _jsx(StatusPill, { status: status }), shown.length === 0 && status !== 'connecting' && (_jsx("span", { className: "text-gray-500", "data-testid": "presence-empty", children: "You're the only one here" })), shown.map(({ clientId, user }) => (_jsx(Chip, { name: user.name, color: user.color, avatarUrl: user.avatarUrl }, clientId))), overflow > 0 && (_jsxs("span", { className: "rounded-full bg-gray-100 px-2 py-0.5 text-gray-700", "data-testid": "presence-overflow", children: ["+", overflow] }))] }));
}
function StatusPill({ status }) {
    const palette = {
        connected: { dot: 'bg-emerald-500', label: 'Live', text: 'text-emerald-700' },
        connecting: { dot: 'bg-amber-400 animate-pulse', label: 'Connecting', text: 'text-amber-700' },
        disconnected: { dot: 'bg-gray-300', label: 'Offline', text: 'text-gray-500' },
    };
    const cfg = palette[status];
    return (_jsxs("span", { className: `inline-flex items-center gap-1 rounded-full bg-gray-50 px-2 py-0.5 ${cfg.text}`, "data-testid": `presence-status-${status}`, children: [_jsx("span", { className: `h-1.5 w-1.5 rounded-full ${cfg.dot}` }), cfg.label] }));
}
function Chip({ name, color, avatarUrl }) {
    const initials = nameToInitials(name);
    return (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-white px-1.5 py-0.5 ring-1 ring-gray-200", title: name, "data-testid": "presence-chip", children: [avatarUrl ? (_jsx("img", { src: avatarUrl, alt: "", className: "h-4 w-4 rounded-full object-cover", style: { boxShadow: `0 0 0 1.5px ${color}` } })) : (_jsx("span", { "aria-hidden": "true", className: "flex h-4 w-4 items-center justify-center rounded-full text-[8px] font-semibold text-white", style: { backgroundColor: color }, children: initials })), _jsx("span", { className: "max-w-[80px] truncate text-gray-700", children: name })] }));
}
/** Convert "Alice Cooper" → "AC", single names → "A", empty → "?". */
export function nameToInitials(name) {
    const cleaned = name.trim();
    if (!cleaned)
        return '?';
    const parts = cleaned.split(/\s+/).slice(0, 2);
    return (parts
        .map((p) => (p[0] ?? '').toUpperCase())
        .filter(Boolean)
        .join('') || '?');
}
//# sourceMappingURL=PresenceChips.js.map