'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useDroppable } from '@dnd-kit/core';
import { cn } from '../../../lib/utils.js';
const MAX_VISIBLE_ITEMS = 3;
export function CalendarDayCell({ date, workItems, projectPrefix, stateMap, isCurrentMonth, isToday, onItemClick, }) {
    const dateKey = formatDateKey(date);
    const { setNodeRef, isOver } = useDroppable({ id: `day-${dateKey}` });
    const visibleItems = workItems.slice(0, MAX_VISIBLE_ITEMS);
    const overflowCount = workItems.length - MAX_VISIBLE_ITEMS;
    return (_jsxs("div", { ref: setNodeRef, "data-testid": `calendar-day-${dateKey}`, className: cn('flex min-h-[100px] flex-col border-r border-b p-1.5', !isCurrentMonth && 'bg-muted/30', isOver && 'bg-accent/40'), children: [_jsx("span", { className: cn('mb-1 inline-flex h-6 w-6 items-center justify-center rounded-full text-xs', isToday && 'bg-primary text-primary-foreground font-semibold', !isToday && !isCurrentMonth && 'text-muted-foreground/50', !isToday && isCurrentMonth && 'text-foreground'), children: date.getDate() }), _jsxs("div", { className: "flex flex-1 flex-col gap-0.5 overflow-hidden", children: [visibleItems.map((item) => (_jsx(CalendarItemChip, { workItem: item, projectPrefix: projectPrefix, state: stateMap.get(item.stateId), onClick: onItemClick }, item.id))), overflowCount > 0 && (_jsxs("span", { className: "text-muted-foreground mt-0.5 text-[10px]", children: ["+", overflowCount, " more"] }))] })] }));
}
function CalendarItemChip({ workItem, projectPrefix, state, onClick }) {
    const identifier = `${projectPrefix}-${workItem.sequenceId}`;
    return (_jsxs("button", { type: "button", "data-testid": `calendar-chip-${identifier}`, className: cn('flex w-full items-center gap-1 truncate rounded px-1 py-0.5 text-left text-[10px]', 'hover:bg-accent cursor-pointer transition-colors'), onClick: () => onClick?.(workItem), children: [state ? (_jsx("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full", style: { backgroundColor: state.color } })) : null, _jsx("span", { className: "text-muted-foreground shrink-0 font-mono", children: identifier }), _jsx("span", { className: "truncate", children: workItem.title })] }));
}
/** Format a Date as YYYY-MM-DD for stable keys */
function formatDateKey(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}
export { formatDateKey };
