import React, { useMemo } from 'react';
import { __ } from '@wordpress/i18n';
import { EmptyState, StatusBadge } from '../../../shared/ui';
import { formatDate, formatTime, splitDateTime } from '../../core/format';

/** List view: bookings grouped by day. */
export default function AgendaList({ events, onOpen }) {
	const groups = useMemo(() => {
		const map = new Map();
		[...events]
			.sort((a, b) => String(a.start).localeCompare(String(b.start)))
			.forEach((e) => {
				const d = splitDateTime(e.start).date;
				if (!map.has(d)) map.set(d, []);
				map.get(d).push(e);
			});
		return Array.from(map.entries());
	}, [events]);

	if (!groups.length) {
		return (
			<EmptyState icon="calendar" title={__('No bookings in this period', 'pointly-booking')}>
				{__('Try another week, or adjust the filters.', 'pointly-booking')}
			</EmptyState>
		);
	}

	return (
		<div className="bp-cal-agenda">
			{groups.map(([date, list]) => (
				<section key={date} className="bp-cal-agenda__day">
					<h3 className="bp-cal-agenda__date">{formatDate(date, { weekday: 'long', day: 'numeric', month: 'long' })}</h3>
					<ul>
						{list.map((e) => (
							<li key={e.id}>
								<button type="button" className="bp-dash-row" onClick={() => onOpen(e)}>
									<span className="bp-dash-row__time">{formatTime(splitDateTime(e.start).time)}</span>
									<span className="bp-dash-row__text">
										<strong>{e.customer_name || '—'}</strong>
										<span className="bp-text-muted">{[e.service_name, e.agent_name].filter(Boolean).join(' · ')}</span>
									</span>
									<StatusBadge status={e.status} size="sm" />
								</button>
							</li>
						))}
					</ul>
				</section>
			))}
		</div>
	);
}