import { formatTime, choiceTime } from './dateTime';
import * as React from 'react';
import { __ } from '@wordpress/i18n';
import type { BookingApi } from './api';
import type { Slot, BookingResource } from './types';
/** Rendering state only. Every selectable end and duration comes from the backend. */
export function useBookingTimes(api: BookingApi, route: string, query: Record<string, string>, initialStart = '', initialEnd = '', initialSlot?: Slot, preserveExistingTerm = false) {
    const initialResource = React.useRef(query.resource_id).current;
    const [start, setStart] = React.useState(initialStart), [end, setEnd] = React.useState(initialEnd || initialSlot?.end_times[0]?.ends_at || '');
    const [revision, refresh] = React.useReducer(n => n + 1, 0);
    const key = query.resource_id && query.date ? JSON.stringify(query) : '';
    const [state, setState] = React.useState({ key: '', slots: initialSlot ? [initialSlot] : [] as Slot[], loading: !!key, error: '', restricted: [] as (Slot & {
            booking_restriction_message?: string;
            booking_contact_tel?: string;
            booking_contact_phone?: string;
        })[], reason: '' });
    React.useEffect(() => {
        let alive = true;
        if (!key) {
            setState({ key, slots: [], loading: false, error: '', restricted: [], reason: '' });
            return;
        }
        setState(old => ({ ...old, key, loading: true, error: '' }));
        api.request<{
            intervals: Slot[];
            restricted_intervals?: typeof state.restricted;
            booking_restriction_message?: string;
        }>(route, 'GET', undefined, JSON.parse(key)).then(value => { if (alive) {
            setState({ key, slots: value.intervals, loading: false, error: '', restricted: value.restricted_intervals ?? [], reason: value.booking_restriction_message ?? '' });
        } }).catch(e => { if (alive)
            setState({ key, slots: [], loading: false, error: e.message, restricted: [], reason: '' }); });
        return () => { alive = false; };
    }, [api, route, key, start, revision]);
    const selected = state.slots.find(slot => slot.starts_at === start), ends = selected?.end_times ?? [];
    // Historical terms remain visible for notes-only edits. Changed terms still use backend ends.
    const originalTerm = preserveExistingTerm && !!initialEnd && end === initialEnd && start === initialStart && query.resource_id === initialResource && query.date === initialStart.slice(0, 10);
    const selectedEnd = ends.find(choice => choice.ends_at === end) ?? (originalTerm ? undefined : ends[0]);
    React.useEffect(() => { if (key && state.key === key && !state.loading && !originalTerm) {
        setEnd(old => ends.some(choice => choice.ends_at === old) ? old : ends[0]?.ends_at ?? '');
    } }, [key, state.key, state.loading, selected, originalTerm]);
    const valid = !!key && state.key === key && !state.loading && !!selected && !!selectedEnd;
    const unavailable = !!start && !!key && state.key === key && !state.loading && !selected;
    function chooseStart(value: string) { setStart(value); setEnd(''); }
    return { start, end: selectedEnd?.ends_at ?? end, setEnd, chooseStart, clear: () => { setStart(''); setEnd(''); }, slots: state.slots, ends, duration: selectedEnd?.duration_minutes ?? 0, valid, unavailable, loading: state.loading || state.key !== key, error: state.error, restrictionContact: state.restricted.find(slot => slot.starts_at === start) ?? state.restricted[0], restriction: state.restricted.find(slot => slot.starts_at === start)?.booking_restriction_message || state.reason || state.restricted[0]?.booking_restriction_message || '', refresh };
}
export type BookingTimesState = ReturnType<typeof useBookingTimes>;
export function BookingTerm({ resources, date, onDate, resource, onResource, resourceName, times, disabled = false, focusEnd = false, customTime = false }: {
    resources: BookingResource[];
    date: string;
    onDate: (v: string) => void;
    resource: string;
    onResource: (v: string) => void;
    resourceName?: string;
    times: BookingTimesState;
    disabled?: boolean;
    focusEnd?: boolean;
    customTime?: boolean;
}) {
    return <section className="asb-reservation-section"><h3>{__('Date and time', 'abece-booking')}</h3><div className="asb-reservation-columns">
    <label>{__('Date', 'abece-booking')}<input aria-label={__('Date', 'abece-booking')} required type="date" value={date} disabled={disabled} onChange={e => onDate(e.target.value)}/></label>
    <label>{__('Resource', 'abece-booking')}<select aria-label={__('Resource', 'abece-booking')} required value={resource} disabled={disabled} onChange={e => onResource(e.target.value)}><option value="">{__('Select…', 'abece-booking')}</option>{resource && !resources.some(r => String(r.id) === resource) && <option value={resource}>{resourceName || __('Selected resource', 'abece-booking')}</option>}{resources.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}</select></label>
    {!customTime && <><label>{__('From', 'abece-booking')}<select aria-label={__('From', 'abece-booking')} required={!customTime} value={times.start} disabled={disabled || !resource || !date || times.loading} onChange={e => times.chooseStart(e.target.value)}><option value="">{__('Select…', 'abece-booking')}</option>{times.start && !times.slots.some(s => s.starts_at === times.start) && <option value={times.start}>{clock(times.start)}</option>}{times.slots.map(s => <option key={s.starts_at} value={s.starts_at}>{choiceTime(s.starts_at, times.slots.map(slot => slot.starts_at))}</option>)}</select></label>
    <label>{__('To', 'abece-booking')}<select data-asb-initial-focus={focusEnd || undefined} aria-label={__('To', 'abece-booking')} required={!customTime} value={times.end} disabled={disabled || !times.start || times.loading} onChange={e => times.setEnd(e.target.value)}>{!times.end && <option value="">{__('Select…', 'abece-booking')}</option>}{times.end && !times.ends.some(end => end.ends_at === times.end) && <option value={times.end}>{clock(times.end)}</option>}{times.ends.map(end => <option key={end.ends_at} value={end.ends_at}>{choiceTime(end.ends_at, times.ends.map(choice => choice.ends_at))}</option>)}</select></label></>}
  </div>{times.loading && <p role="status">{__('Checking available times…', 'abece-booking')}</p>}{times.error && <p role="alert">{times.error}</p>}{times.restriction && <p role="alert">{times.restriction}{times.restrictionContact?.booking_contact_tel && <> <a href={times.restrictionContact.booking_contact_tel}>{times.restrictionContact.booking_contact_phone}</a></>}</p>}{!customTime && times.unavailable && !times.restriction && <p role="alert">{__('A booking can no longer be made at this time.', 'abece-booking')}</p>}{!customTime && !times.loading && !times.start && resource && date && !times.slots.length && <p>{__('No available times for this date.', 'abece-booking')}</p>}</section>;
}
export function clock(iso: string): string { return formatTime(iso); }