import { formatDate, formatRange, formatTime } from './dateTime';
import * as React from 'react';
import { __ } from '@wordpress/i18n';
import type { BookingApi } from './api';
import type { Slot } from './types';
import './calendar.css';
import { calendarAxis } from './calendarLayout';
export interface CalendarPrefill {
    resource_id: number;
    date: string;
    starts_at: string;
    min_duration_minutes: number;
    resource_name?: string;
    availability?: Slot;
}
export interface CalendarEvent {
    id?: number;
    reference?: string;
    resource_id: number;
    starts_at: string;
    ends_at: string;
    state: string;
    label: string;
    is_own?: boolean;
    status?: string;
    booking_source?: string;
    block_type?: string;
    reason?: string;
    is_recurring?: boolean;
}
interface CalendarResource {
    exception_title?: string | null;
    id: number;
    name: string;
    sport_id: number | null;
    sport_name: string | null;
    surface: string | null;
    capacity: number | null;
    booking_step_minutes: number;
    opening_intervals: {
        starts_at: string;
        ends_at: string;
    }[];
    slots: {
        starts_at: string;
        ends_at: string;
        state: string;
        can_book: boolean;
        availability: Slot | null;
        booking_restriction_message?: string;
        booking_contact_tel?: string | null;
        booking_contact_phone?: string;
    }[];
    bookings: CalendarEvent[];
    blocks: CalendarEvent[];
}
interface CalendarData {
    date: string;
    today: string;
    previous_date: string;
    next_date: string;
    timezone: string;
    locale: string;
    now: string;
    admin: boolean;
    authenticated: boolean;
    sports: {
        id: number;
        name: string;
    }[];
    grid: {
        starts_at: string | null;
        ends_at: string | null;
        resource_specific_steps: boolean;
        ticks: {
            at: string;
            label: string;
            offset: string;
        }[];
    };
    resources: CalendarResource[];
}
function stateLabel(state: string): string { const labels: Record<string, string> = { online_closed: __('Online closed / phone only', 'abece-booking'), free: __('Free', 'abece-booking'), busy: __('Busy', 'abece-booking'), own: __('My booking', 'abece-booking'), blocked: __('Unavailable', 'abece-booking'), closed: __('Outside opening hours', 'abece-booking'), past: __('Past time', 'abece-booking'), unavailable: __('Unavailable', 'abece-booking') }; return labels[state] ?? state; }
function blockTypeLabel(type?: string): string { const labels: Record<string, string> = { maintenance: __('Maintenance', 'abece-booking'), tournament: __('Tournament', 'abece-booking'), club_event: __('Club event', 'abece-booking'), weather: __('Weather', 'abece-booking'), private: __('Private', 'abece-booking'), other: __('Other', 'abece-booking') }; return labels[type ?? ''] ?? __('Resource block', 'abece-booking'); }
export function Calendar({ api, admin = false, refresh = 0, paused = false, initialDate = '', onDateChange, onSelect, onBooking, onRefresh }: {
    api: BookingApi;
    admin?: boolean;
    refresh?: number;
    paused?: boolean;
    initialDate?: string;
    onDateChange?: (date: string) => void;
    onSelect?: (p: CalendarPrefill) => void;
    onBooking?: (id: number) => void;
    onRefresh?: () => void;
}) {
    const dateListener = React.useRef(onDateChange);
    dateListener.current = onDateChange;
    const [restriction, setRestriction] = React.useState<{
        message: string;
        tel?: string | null;
        phone?: string;
    } | null>(null);
    const [date, setDate] = React.useState(initialDate);
    const [sport, setSport] = React.useState('');
    const [data, setData] = React.useState<CalendarData | null>(null);
    const [error, setError] = React.useState('');
    const [loading, setLoading] = React.useState(false);
    const [revision, bump] = React.useReducer((n: number) => n + 1, 0);
    React.useEffect(() => {
        let alive = true;
        const abort = new AbortController();
        setLoading(true);
        setError('');
        const query: Record<string, string> = {};
        if (date)
            query.date = date;
        if (sport)
            query.sport_id = sport;
        api.request<CalendarData>(admin ? 'admin/calendar' : 'calendar', 'GET', undefined, query, abort.signal).then(value => { if (alive) {
            setData(value);
            dateListener.current?.(value.date);
        } }).catch(e => { if (alive)
            setError(e.message); }).finally(() => { if (alive)
            setLoading(false); });
        return () => { alive = false; abort.abort(); };
    }, [api, admin, date, sport, refresh, revision]);
    React.useEffect(() => { if (paused)
        return; const timer = window.setInterval(() => { if (document.visibilityState === 'visible')
        bump(); }, 45000); return () => window.clearInterval(timer); }, [paused]);
    // One formatting pass per distinct instant, instead of scanning every row for every slot.
    const times = React.useMemo(() => {
        const plain = new Map<string, string>(), rows = new Map<number, Map<string, string>>();
        let ticks = new Map<string, string>();
        function collect(values: string[]) {
            const choices = new Map<string, string>(), groups = new Map<string, string[]>();
            for (const at of values) {
                if (!plain.has(at))
                    plain.set(at, formatTime(at, data?.timezone));
                const label = plain.get(at)!;
                groups.set(label, [...(groups.get(label) ?? []), at]);
            }
            for (const [label, ats] of groups)
                ats.forEach((at, i) => choices.set(at, ats.length > 1 ? `${label} (${i === 0 ? __('First occurrence', 'abece-booking') : __('Second occurrence', 'abece-booking')})` : label));
            return choices;
        }
        if (data) {
            ticks = collect(calendarAxis(data.grid.starts_at, data.grid.ends_at).ticks);
            data.resources.forEach(row => rows.set(row.id, collect(row.slots.map(slot => slot.starts_at))));
        }
        return { plain, rows, ticks };
    }, [data]);
    const axis = React.useMemo(() => calendarAxis(data?.grid.starts_at ?? null, data?.grid.ends_at ?? null), [data?.grid.starts_at, data?.grid.ends_at]);
    const { start, end } = axis, span = end - start;
    const pixelsPerMinute = Math.max(44 / 30, 24 / Math.max(1, Math.min(...(data?.resources.map(r => r.booking_step_minutes) ?? [30]))));
    const axisWidth = Math.max(44, Math.ceil(span / 60000 * pixelsPerMinute));
    function position(from: string, to?: string): React.CSSProperties { const a = Math.max(start, Date.parse(from)), b = to ? Math.min(end, Date.parse(to)) : a; return { left: `${100 * (a - start) / span}%`, ...(to ? { width: `${100 * (b - a) / span}%` } : {}) }; }
    function event(event: CalendarEvent, resource: CalendarResource, block: boolean) {
        const label = block && admin ? `${__('Resource block', 'abece-booking')}: ${blockTypeLabel(event.block_type)} ${event.reason ?? ''}` : event.label;
        const time = formatRange(event.starts_at, event.ends_at, data?.timezone, false);
        const aria = `${resource.name}, ${time}, ${label}${event.is_recurring ? `, ${__('Recurring booking', 'abece-booking')}` : ''}`;
        const className = `asb-calendar-event asb-calendar-${block ? 'blocked' : event.state}${!block && admin && event.booking_source !== 'web' ? ' asb-calendar-admin-booking' : ''}`;
        const content = <><strong>{event.is_recurring && <span aria-label={__('Recurring booking', 'abece-booking')}>↻ </span>}{label}</strong><small>{time}</small></>;
        return !block && event.id && (admin || event.is_own) && onBooking ? <button key={`booking-${event.id}`} data-booking-id={event.id} aria-disabled={loading || paused} className={className} style={position(event.starts_at, event.ends_at)} aria-label={aria} title={aria} onClick={() => { if (!loading && !paused)
            onBooking(event.id!); }}>{content}</button> : <span key={`${block ? 'block' : 'booking'}-${event.starts_at}-${event.ends_at}`} className={className} style={position(event.starts_at, event.ends_at)} role="img" aria-label={aria} title={aria}>{content}</span>;
    }
    const now = data?.today === data?.date && data && Date.parse(data.now) >= start && Date.parse(data.now) <= end ? data.now : null;
    return <section className="asb-calendar" style={{ '--asb-axis-width': `${axisWidth}px` } as React.CSSProperties} aria-label={__('Booking calendar', 'abece-booking')}>
  <div className="asb-calendar-toolbar"><div className="asb-calendar-date">{(admin || (data && (date || data.date) > data.today)) && <button className="button" disabled={!data || loading || paused} onClick={() => data && setDate(data.previous_date)}>{__('Previous day', 'abece-booking')}</button>}<button className="button" disabled={!data || loading || paused} onClick={() => data && setDate(data.today)}>{__('Today', 'abece-booking')}</button><button className="button" disabled={!data || loading || paused} onClick={() => data && setDate(data.next_date)}>{__('Next day', 'abece-booking')}</button>
   <label>{__('Calendar date', 'abece-booking')}<input type="date" aria-label={__('Calendar date', 'abece-booking')} value={date || data?.date || ''} min={!admin ? data?.today : undefined} disabled={paused} onChange={e => { if (e.target.value && (admin || !data || e.target.value >= data.today))
        setDate(e.target.value); }}/></label></div>
   <label>{__('Calendar sport', 'abece-booking')}<select aria-label={__('Calendar sport', 'abece-booking')} value={sport} disabled={paused} onChange={e => setSport(e.target.value)}><option value="">{__('All resources', 'abece-booking')}</option>{data?.sports.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}</select></label>
   <button className="button" disabled={loading || paused} onClick={() => { bump(); onRefresh?.(); }}>{__('Refresh calendar', 'abece-booking')}</button>
  </div>
  {data && <p className="asb-calendar-day"><strong>{formatDate(data.date, 'full', data.locale)}</strong> · {data.timezone}</p>}
  <ul className="asb-calendar-legend" aria-label={__('Calendar legend', 'abece-booking')}>{['free', 'busy', 'own', 'blocked', 'closed', ...(!admin ? ['online_closed'] : []), 'past'].map(state => <li className={`asb-calendar-key asb-calendar-${state}`} key={state}>{state === 'blocked' && admin ? __('Resource block', 'abece-booking') : stateLabel(state)}</li>)}{admin && <li className="asb-calendar-key asb-calendar-admin-booking">{__('Admin / phone booking', 'abece-booking')}</li>}</ul>
  {restriction && <div className="asb-calendar-restriction" role="status"><p>{restriction.message}</p>{restriction.tel && <a href={restriction.tel}>{restriction.phone}</a>} <button onClick={() => setRestriction(null)}>{__('Close', 'abece-booking')}</button></div>}
  {error && <p role="alert">{error} <button onClick={() => { bump(); onRefresh?.(); }}>{__('Retry', 'abece-booking')}</button></p>}{loading && <p role="status">{__('Loading…', 'abece-booking')}</p>}
  {data && !error && <>{!data.resources.length && <p>{__('No resources found.', 'abece-booking')}</p>}{data.resources.length > 0 && !span && <p>{__('No opening hours or reservations for this date.', 'abece-booking')}</p>}
   <div className={`asb-calendar-scroll${loading ? ' is-loading' : ''}`} aria-busy={loading} tabIndex={0} aria-label={__('Resource time grid', 'abece-booking')}><div className="asb-calendar-grid">
    {span > 0 && <div className="asb-calendar-header"><div className="asb-calendar-resource">{__('Resource', 'abece-booking')}</div><div className="asb-calendar-axis">{axis.ticks.map((at, i) => <span key={at} style={position(at, axis.ticks[i + 1] ?? new Date(end).toISOString())} title={times.ticks.get(at)}>{times.ticks.get(at)}</span>)}</div></div>}
    {data.resources.map(r => <div className="asb-calendar-row" key={r.id} data-resource-id={r.id}>
     <div className="asb-calendar-resource"><strong title={[r.name, r.sport_name, r.surface].filter(Boolean).join(' · ')}>{[r.name, r.sport_name, r.surface].filter(Boolean).join(' · ')}</strong>{!span && <small>{r.exception_title || __('Outside opening hours', 'abece-booking')}</small>}</div>
     {span > 0 && <div className="asb-calendar-track">{axis.padding.map(p => <span key={p.starts_at} className="asb-calendar-slot asb-calendar-closed" style={position(p.starts_at, p.ends_at)} role="img" aria-label={stateLabel('closed')} title={stateLabel('closed')}/>)}{r.slots.map(s => {
                        const compact = (Date.parse(s.ends_at) - Date.parse(s.starts_at)) * axisWidth / span < 24;
                        const label = `${r.name}, ${times.rows.get(r.id)?.get(s.starts_at)}, ${s.state === 'closed' && r.exception_title ? r.exception_title : stateLabel(s.state)}`;
                        if (s.booking_restriction_message)
                            return <button key={s.starts_at} data-start={s.starts_at} className={`asb-calendar-slot asb-calendar-${s.state}`} style={position(s.starts_at, s.ends_at)} data-compact={compact || undefined} aria-label={label} title={s.booking_restriction_message} disabled={loading || paused} onClick={() => setRestriction({ message: s.booking_restriction_message!, tel: s.booking_contact_tel, phone: s.booking_contact_phone })}><span>{times.plain.get(s.starts_at)}</span><small>{admin ? stateLabel(s.state) : '☎'}</small></button>;
                        return s.can_book && s.availability && onSelect ? <button aria-disabled={loading || paused} data-start={s.starts_at} key={s.starts_at} className="asb-calendar-slot asb-calendar-free" style={position(s.starts_at, s.ends_at)} data-compact={compact || undefined} aria-label={label} title={label} onClick={() => { if (!loading && !paused)
                            onSelect({ resource_id: r.id, date: data.date, starts_at: s.starts_at, min_duration_minutes: s.availability!.min_duration_minutes, resource_name: r.name, availability: s.availability! }); }}><span>{times.plain.get(s.starts_at)}</span><small>{__('Free', 'abece-booking')}</small></button> : <span key={s.starts_at} className={`asb-calendar-slot asb-calendar-${s.state}`} style={position(s.starts_at, s.ends_at)} data-compact={compact || undefined} role="img" aria-label={['busy', 'own', 'blocked'].includes(s.state) ? undefined : label} aria-hidden={['busy', 'own', 'blocked'].includes(s.state) ? true : undefined} title={label}><small>{['busy', 'own', 'blocked'].includes(s.state) ? '' : s.state === 'closed' && r.exception_title ? r.exception_title : admin ? stateLabel(s.state) : '—'}</small></span>;
                    })}{r.blocks.map(b => event(b, r, true))}{r.bookings.map(b => event(b, r, false))}{now && <span className="asb-calendar-now" role="img" style={position(now)} aria-label={__('Current time', 'abece-booking')}/>}</div>}
    </div>)}
   </div></div>
  </>}
 </section>;
}
export function CalendarPanel({ title, onClose, children }: {
    title: string;
    onClose: () => void;
    children: React.ReactNode;
}) {
    const ref = React.useRef<HTMLDivElement>(null);
    const heading = React.useId();
    React.useEffect(() => {
        const previous = document.activeElement as HTMLElement | null;
        const fallback = previous?.closest('.asb-calendar')?.querySelector<HTMLElement>('.asb-calendar-scroll');
        const dialog = ref.current;
        const focus = () => { const input = dialog?.querySelector<HTMLElement>('[data-asb-initial-focus]:not(:disabled)'); if (input) {
            input.focus();
            return true;
        } return false; };
        dialog?.focus();
        const focused = focus();
        const observer = new MutationObserver(() => { if (focus())
            observer.disconnect(); });
        if (!focused && dialog)
            observer.observe(dialog, { childList: true, subtree: true, attributes: true, attributeFilter: ['disabled'] });
        return () => { observer.disconnect(); if (previous?.isConnected)
            previous.focus();
        else
            fallback?.focus(); };
    }, []);
    function keyboard(e: React.KeyboardEvent) { if (e.key === 'Escape') {
        e.preventDefault();
        onClose();
    } if (e.key === 'Tab') {
        const dialog = ref.current;
        if (!dialog)
            return;
        const controls = Array.from(dialog.querySelectorAll<HTMLElement>('button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), a[href], [tabindex="0"]')).filter(el => el.getClientRects().length > 0 && !el.closest('fieldset:disabled'));
        const first = controls[0], last = controls.at(-1);
        if (e.shiftKey && (document.activeElement === first || document.activeElement === dialog)) {
            e.preventDefault();
            last?.focus();
        }
        else if (!e.shiftKey && (document.activeElement === last || document.activeElement === dialog)) {
            e.preventDefault();
            first?.focus();
        }
    } }
    return <div className="asb-calendar-overlay"><div ref={ref} onKeyDown={keyboard} tabIndex={-1} className="asb-calendar-panel" role="dialog" aria-modal="true" aria-labelledby={heading}><div className="asb-calendar-panel-heading"><h2 id={heading}>{title}</h2><button className="asb-action-secondary" type="button" onClick={onClose} aria-label={__('Close calendar panel', 'abece-booking')}>{__('Close', 'abece-booking')}</button></div>{children}</div></div>;
}