import {
    eachDay,
    formatDay,
    formatMonthYear,
    sameMonth,
    todayIso,
} from '@/lib/date';
import { cn } from '@/lib/utils';
import type { CalendarMeeting } from '@/types';
import MeetingChip from './meeting-chip';

type Props = {
    range: { from: string; to: string };
    meetingsByDay: Map<string, CalendarMeeting[]>;
    /** Shown when the whole range is empty. */
    emptyState: React.ReactNode;
};

export default function AgendaList({
    range,
    meetingsByDay,
    emptyState,
}: Props) {
    const today = todayIso();
    const days = eachDay(range.from, range.to).filter(
        (day) => (meetingsByDay.get(day)?.length ?? 0) > 0,
    );

    if (days.length === 0) {
        return <div className="flex flex-1 items-center p-6">{emptyState}</div>;
    }

    return (
        <div className="min-h-0 flex-1 overflow-auto">
            <ol className="divide-y">
                {days.map((day, index) => {
                    const meetings = meetingsByDay.get(day) ?? [];
                    const isToday = day === today;
                    const startsNewMonth =
                        index > 0 && !sameMonth(day, days[index - 1]);

                    return (
                        <li key={day}>
                            {startsNewMonth && (
                                <p className="text-muted-foreground bg-muted/40 px-4 py-1.5 text-xs font-medium">
                                    {formatMonthYear(day)}
                                </p>
                            )}

                            <div className="flex flex-col gap-2 px-4 py-3 sm:flex-row sm:gap-6">
                                <h3
                                    className={cn(
                                        'shrink-0 text-sm font-medium sm:w-48 sm:pt-2',
                                        isToday
                                            ? 'text-foreground'
                                            : 'text-muted-foreground',
                                    )}
                                >
                                    {isToday && (
                                        <span className="bg-primary text-primary-foreground mr-2 rounded-full px-2 py-0.5 text-[11px]">
                                            Oggi
                                        </span>
                                    )}
                                    {formatDay(day)}
                                </h3>

                                <ul className="min-w-0 flex-1 space-y-1">
                                    {meetings.map((meeting) => (
                                        <li key={meeting.id}>
                                            <MeetingChip
                                                meeting={meeting}
                                                variant="row"
                                            />
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        </li>
                    );
                })}
            </ol>
        </div>
    );
}