import * as React from 'react';
import { __ } from '@wordpress/i18n';
import type { BookingApi } from '../booking-ui/api';
import { formatDateTime, formatRange } from '../booking-ui/dateTime';
interface DailyRow {
    id: number;
    reference: string;
    resource_name: string;
    customer_name: string;
    starts_at: string;
    ends_at: string;
    admin_note: string | null;
    customer_note: string | null;
    cancelled_at?: string | null;
    cancelled_by_name?: string;
    cancelled_by_role?: string | null;
    cancellation_reason?: string | null;
}
interface DailyData {
    date: string;
    timezone: string;
    admin_notes: DailyRow[];
    customer_notes: DailyRow[];
    cancelled_bookings: DailyRow[];
}
export function DailyOverview({ api, date, refresh, onBooking }: {
    api: BookingApi;
    date: string;
    refresh: number;
    onBooking: (id: number) => void;
}) {
    const [data, setData] = React.useState<DailyData | null>(null), [error, setError] = React.useState('');
    React.useEffect(() => { let live = true; setData(null); setError(''); if (date)
        api.request<DailyData>('admin/daily-overview', 'GET', undefined, { date }).then(d => { if (live)
            setData(d); }).catch(e => { if (live)
            setError(e.message); }); return () => { live = false; }; }, [api, date, refresh]);
    const sections = [{ key: 'admin_notes' as const, title: __('Operational notes', 'abece-booking'), empty: __('No operational notes.', 'abece-booking') }, { key: 'customer_notes' as const, title: __('Booking notes', 'abece-booking'), empty: __('No customer notes.', 'abece-booking') }, { key: 'cancelled_bookings' as const, title: __('Cancelled bookings', 'abece-booking'), empty: __('No cancelled bookings.', 'abece-booking') }];
    return <section className="asb-daily-overview" aria-label={__('Daily overview', 'abece-booking')}><h2>{__('Daily overview', 'abece-booking')}</h2>{error && <p role="alert">{error}</p>}{!data && !error && <p role="status">{__('Loading…', 'abece-booking')}</p>}{data && sections.map(s => <section key={s.key}><h3>{s.title}</h3>{data[s.key].length ? <div className="asb-table-scroll"><table className="widefat striped"><thead><tr><th scope="col">{s.key === 'cancelled_bookings' ? __('Original time', 'abece-booking') : __('Time', 'abece-booking')}</th><th scope="col">{__('Resource', 'abece-booking')}</th><th scope="col">{__('Customer', 'abece-booking')}</th><th scope="col">{__('Reference', 'abece-booking')}</th><th scope="col">{s.key === 'admin_notes' ? __('Internal note', 'abece-booking') : s.key === 'customer_notes' ? __('Note', 'abece-booking') : __('Cancellation reason', 'abece-booking')}</th>{s.key === 'cancelled_bookings' && <><th scope="col">{__('Cancelled by', 'abece-booking')}</th><th scope="col">{__('Cancelled at', 'abece-booking')}</th></>}<th scope="col">{__('Actions', 'abece-booking')}</th></tr></thead><tbody>{data[s.key].map(b => <tr key={b.id}><td>{formatRange(b.starts_at, b.ends_at, data.timezone, false)}</td><td>{b.resource_name}</td><td>{b.customer_name}</td><td>{b.reference}</td><td className="asb-operation-note">{s.key === 'admin_notes' ? b.admin_note : s.key === 'customer_notes' ? b.customer_note : b.cancellation_reason || '—'}</td>{s.key === 'cancelled_bookings' && <><td>{b.cancelled_by_name}{b.cancelled_by_role && <small>{b.cancelled_by_role === 'admin' ? __('Admin', 'abece-booking') : __('Customer', 'abece-booking')}</small>}</td><td>{formatDateTime(b.cancelled_at, data.timezone)}</td></>}<td><button className="button" aria-label={`${__('Details', 'abece-booking')} ${b.reference}`} onClick={() => onBooking(b.id)}>{__('Details', 'abece-booking')}</button></td></tr>)}</tbody></table></div> : <p>{s.empty}</p>}</section>)}</section>;
}