import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useTheme } from '../../../theme';
const DEFAULT_EMPTY_STATE = 'No previous sessions yet.';
const FALLBACK_TITLE = 'Untitled session';
const formatTimestamp = (timestamp) => {
    if (!timestamp) {
        return 'No recent activity';
    }
    try {
        return new Intl.DateTimeFormat(undefined, {
            dateStyle: 'medium',
            timeStyle: 'short'
        }).format(new Date(timestamp));
    }
    catch (error) {
        console.error('Failed to format session timestamp', error);
        return new Date(timestamp).toLocaleString();
    }
};
const formatMessageCount = (count) => {
    if (!Number.isFinite(count) || count <= 0) {
        return 'No messages yet';
    }
    if (count === 1) {
        return '1 message';
    }
    return `${count} messages`;
};
const sanitizePreview = (preview) => {
    if (!preview) {
        return '';
    }
    return preview.replace(/\s+/g, ' ').trim();
};
export const SessionHistory = ({ sessions, activeSessionId, emptyStateMessage = DEFAULT_EMPTY_STATE, onResume, onDelete, title = 'Previous sessions', id }) => {
    const theme = useTheme();
    const hasSessions = sessions.length > 0;
    return (_jsxs("div", { className: theme.sessionHistory.container, id: id, children: [_jsx("div", { className: theme.sessionHistory.header, children: _jsx("h2", { className: theme.sessionHistory.title, children: title }) }), !hasSessions && (_jsx("div", { className: theme.sessionHistory.emptyState, children: emptyStateMessage })), hasSessions && (_jsx("ul", { className: theme.sessionHistory.list, children: sessions.map((session) => {
                    const sessionTitle = session.title?.trim() || FALLBACK_TITLE;
                    const isActive = session.id === activeSessionId;
                    const buttonClasses = [
                        theme.sessionHistory.itemButton,
                        isActive ? theme.sessionHistory.itemButtonActive : null,
                        'pr-11'
                    ].filter(Boolean).join(' ');
                    const messageCountLabel = formatMessageCount(session.messageCount);
                    const lastActivity = formatTimestamp(session.lastMessageAt ?? session.updatedAt ?? session.createdAt);
                    const preview = sanitizePreview(session.lastMessagePreview);
                    return (_jsxs("li", { className: `${theme.sessionHistory.item} relative`, children: [_jsx("button", { type: 'button', onClick: () => onResume(session.id), className: buttonClasses, "aria-label": `Resume session “${sessionTitle}”`, children: _jsxs("div", { className: theme.sessionHistory.itemContent, children: [_jsxs("span", { className: theme.sessionHistory.itemMeta, children: [lastActivity, " \u2022 ", messageCountLabel] }), preview && (_jsx("span", { className: theme.sessionHistory.itemPreview, children: preview }))] }) }), _jsx("button", { type: 'button', onClick: (event) => {
                                    event.preventDefault();
                                    event.stopPropagation();
                                    onDelete(session.id);
                                }, className: `${theme.sessionHistory.deleteButton} absolute right-3 top-3 z-10`, "aria-label": `Delete session “${sessionTitle}”`, children: _jsx("span", { "aria-hidden": 'true', className: theme.sessionHistory.deleteIcon, children: "\u00D7" }) })] }, session.id));
                }) }))] }));
};
export default SessionHistory;
