import { formatDate, formatDateTime } from '../booking-ui/dateTime';
import * as React from 'react';
import { __, sprintf } from '@wordpress/i18n';
import { CatalogApi } from './api';
import { ScheduleForm } from './ScheduleForm';
import { blockTypes, scheduleLabels, weekdays } from './scheduleFields';
import type { Config, Payload, Resource, ScheduleItem, SchedulePage } from './types';
export function ScheduleAdminApp({ config }: {
    config: Config & {
        page: SchedulePage;
    };
}): React.ReactElement {
    const api = React.useMemo(() => new CatalogApi(config), [config]);
    const [items, setItems] = React.useState<ScheduleItem[]>([]);
    const [resources, setResources] = React.useState<Resource[]>([]);
    const [page, setPage] = React.useState(1);
    const [pages, setPages] = React.useState(1);
    const [total, setTotal] = React.useState(0);
    const [revision, refresh] = React.useReducer((value: number) => value + 1, 0);
    const [loading, setLoading] = React.useState(true);
    const [busy, setBusy] = React.useState(false);
    const [error, setError] = React.useState('');
    const [notice, setNotice] = React.useState('');
    const [editor, setEditor] = React.useState<{
        item: ScheduleItem | null;
    } | null>(null);
    const [deleting, setDeleting] = React.useState<ScheduleItem | null>(null);
    React.useEffect(() => {
        let active = true;
        setLoading(true);
        setError('');
        void Promise.all([api.list<ScheduleItem>(config.page, page), api.all<Resource>('resources'), api.sports()])
            .then(([result, allResources, sports]) => { if (active) {
            setItems(result.items);
            setPages(Math.max(1, result.pages));
            setTotal(result.total);
            setResources(allResources.map(r => ({ ...r, sport_name: sports.find(s => s.id === r.sport_id)?.name })));
        } })
            .catch(cause => { if (active)
            setError(cause instanceof Error ? cause.message : __('The request failed. Please try again.', 'abece-booking')); })
            .finally(() => { if (active)
            setLoading(false); });
        return () => { active = false; };
    }, [api, config.page, page, revision]);
    async function save(payload: Payload): Promise<void> { await api.save(config.page, payload, editor?.item?.id); setEditor(null); setNotice(__('Changes saved.', 'abece-booking')); refresh(); }
    async function remove(): Promise<void> {
        if (!deleting)
            return;
        setBusy(true);
        setError('');
        try {
            await api.remove(config.page, deleting.id);
            setDeleting(null);
            setNotice(__('Changes saved.', 'abece-booking'));
            if (items.length === 1 && page > 1)
                setPage(page - 1);
            else
                refresh();
        }
        catch (cause) {
            setError(cause instanceof Error ? cause.message : __('The request failed. Please try again.', 'abece-booking'));
        }
        finally {
            setBusy(false);
        }
    }
    const labels = scheduleLabels[config.page];
    const hours = config.page === 'opening-hours';
    const blocks = config.page === 'resource-blocks';
    const headers = [__('Resource', 'abece-booking'), hours ? __('Day of week', 'abece-booking') : blocks ? __('Starts at', 'abece-booking') : __('Date', 'abece-booking'),
        hours ? __('Opening mode', 'abece-booking') : blocks ? __('Ends at', 'abece-booking') : __('Reason', 'abece-booking'),
        blocks ? __('Block type', 'abece-booking') : __('Hours', 'abece-booking'), __('Actions', 'abece-booking')];
    const resourceName = (id: number | null): string => id === null ? __('Global (entire club)', 'abece-booking') : resources.find(resource => resource.id === id)?.name ?? `#${id}`;
    function hoursText(item: ScheduleItem): string {
        if (item.is_closed)
            return __('Closed', 'abece-booking');
        if (item.opening_mode === 'sun')
            return `${__('Sunrise offset (minutes)', 'abece-booking')}: ${item.sunrise_offset_minutes ?? 0}, ${__('Sunset offset (minutes)', 'abece-booking')}: ${item.sunset_offset_minutes ?? 0}; ${__('Earliest opening time', 'abece-booking')}: ${String(item.min_open_time ?? '—')}; ${__('Latest closing time', 'abece-booking')}: ${String(item.max_close_time ?? '—')}`;
        return `${String(item.opens_at ?? '').slice(0, 5)}–${String(item.closes_at ?? '').slice(0, 5)}`;
    }
    return <div className="asb-admin"><h1>{__('Operations', 'abece-booking')}</h1>
    <nav className="nav-tab-wrapper asb-operations-tabs" aria-label={__('Operations', 'abece-booking')}>
      {[['opening-hours', '', __('Opening hours', 'abece-booking')], ['schedule-exceptions', 'exceptions', __('Exceptions', 'abece-booking')], ['resource-blocks', 'blocks', __('Blocks', 'abece-booking')]].map(([page, tab, label]) => <a key={page} className={`nav-tab ${config.page === page ? 'nav-tab-active' : ''}`} aria-current={config.page === page ? 'page' : undefined} href={`${config.operationsUrl}${tab ? `&tab=${tab}` : ''}`}>{label}</a>)}
    </nav><div className="asb-heading"><h1>{labels.title}</h1><button className="button button-primary" disabled={loading || busy || editor !== null || deleting !== null} onClick={() => { setNotice(''); setEditor({ item: null }); }}>{labels.add}</button></div>
    {!hours && <p>{blocks ? __('Temporarily prevents bookings for a selected resource, for example due to maintenance, a tournament or weather.', 'abece-booking') : __('Changes the standard opening hours for a specific date.', 'abece-booking')}</p>}
    <p>{sprintf(__('Times use the WordPress timezone: %s.', 'abece-booking'), config.timezone)}</p>
    {!blocks && <p>{__('Resource rules replace global rules for that day. Exceptions override opening hours. A closed rule closes the selected scope.', 'abece-booking')}</p>}
    {notice && <div className="notice notice-success inline" role="status"><p>{notice}</p></div>}
    {error && <div className="notice notice-error inline" role="alert"><p>{error} <button className="button" onClick={refresh}>{__('Retry', 'abece-booking')}</button></p></div>}
    {editor && <ScheduleForm key={editor.item?.id ?? 'new'} kind={config.page} item={editor.item} resources={resources} onSave={save} onCancel={() => setEditor(null)}/>}
    {deleting && <section className="asb-editor" role="alert"><p>{__('Delete this rule? Removing it changes availability immediately.', 'abece-booking')}</p><p className="asb-actions"><button className="button" disabled={busy} onClick={() => void remove()}>{__('Delete', 'abece-booking')}</button><button className="button" disabled={busy} onClick={() => setDeleting(null)}>{__('Cancel', 'abece-booking')}</button></p></section>}
    {loading && <p role="status">{__('Loading…', 'abece-booking')}</p>}
    {!loading && !error && <><p>{sprintf(__('Total items: %d', 'abece-booking'), total)}</p><div className="asb-table-scroll"><table className="widefat striped"><thead><tr>{headers.map(label => <th key={label} scope="col">{label}</th>)}</tr></thead><tbody>
      {items.length === 0 ? <tr><td colSpan={headers.length}>{__('No items found.', 'abece-booking')}</td></tr> : items.map(item => <tr key={item.id} data-id={item.id}>
        <td>{item.resource_ids ? (item.target === 'all' ? __('Global (entire club)', 'abece-booking') : (item.resource_ids as number[]).map(resourceName).join(', ')) : resourceName(item.resource_id)}{item.public_title && <strong className="asb-group-title">{String(item.public_title)}</strong>}</td><td>{hours ? weekdays.find(([value]) => value === String(item.day_of_week))?.[1] : blocks ? formatDateTime(String(item.starts_at)) : formatDate(String(item.exception_date))}</td>
        <td>{hours ? item.opening_mode === 'sun' ? __('Sun-based', 'abece-booking') : __('Fixed', 'abece-booking') : blocks ? formatDateTime(String(item.ends_at)) : String(item.reason ?? '—')}</td>
        <td>{blocks ? blockTypes.find(([value]) => value === item.block_type)?.[1] : hoursText(item)}</td><td><div className="asb-actions"><button className="button" disabled={busy || editor !== null || deleting !== null} onClick={() => setEditor({ item })}>{__('Edit', 'abece-booking')}</button><button className="button" disabled={busy || editor !== null || deleting !== null} onClick={() => setDeleting(item)}>{__('Delete', 'abece-booking')}</button></div></td>
      </tr>)}
    </tbody></table></div><div className="asb-pagination"><button className="button" disabled={page <= 1 || editor !== null || deleting !== null || busy} onClick={() => setPage(page - 1)}>{__('Previous', 'abece-booking')}</button><span>{sprintf(__('Page %1$d of %2$d', 'abece-booking'), page, pages)}</span><button className="button" disabled={page >= pages || editor !== null || deleting !== null || busy} onClick={() => setPage(page + 1)}>{__('Next', 'abece-booking')}</button></div></>}
  </div>;
}