import * as React from 'react';
import { __ } from '@wordpress/i18n';
import { BookingApi } from '../booking-ui/api';
import type { Config } from './types';
import { formatDate, formattingLocale } from '../booking-ui/dateTime';
const formatNumber = (v: number) => new Intl.NumberFormat(formattingLocale(), { maximumFractionDigits: 2 }).format(v);
interface Report {
    summary: {
        booking_count: number;
        venue_seconds: number;
        cancelled: number;
        no_show: number;
        utilization: number | null;
    };
    resources?: {
        items: {
            id: number;
            name: string;
            booking_count: number;
            venue_seconds: number;
            utilization: number | null;
        }[];
    };
    cancellations?: {
        items: {
            id: number;
            reference: string;
            date: string;
            resource_name: string;
            status: string;
        }[];
    };
    trend?: {
        date: string;
        venue_seconds: number;
    }[];
}
export function BasicStatisticsApp({ config }: {
    config: Config;
}) {
    const api = React.useMemo(() => new BookingApi(config), [config]);
    const [section, setSection] = React.useState('overview'), [from, setFrom] = React.useState(''), [to, setTo] = React.useState(''), [report, setReport] = React.useState<Report | null>(null), [error, setError] = React.useState(''), [revision, refresh] = React.useReducer(n => n + 1, 0);
    React.useEffect(() => { let live = true; api.request<{
        defaults: {
            date_from: string;
            date_to: string;
        };
    }>('admin/statistics/options').then(d => { if (live) {
        setFrom(d.defaults.date_from);
        setTo(d.defaults.date_to);
    } }).catch(e => { if (live)
        setError(e.message); }); return () => { live = false; }; }, [api]);
    React.useEffect(() => { if (!from || !to)
        return; let live = true; setError(''); api.request<Report>(`admin/statistics/${section}`, 'GET', undefined, { date_from: from, date_to: to, per_page: '100' }).then(d => { if (live)
        setReport(d); }).catch(e => { if (live)
        setError(e.message); }); return () => { live = false; }; }, [api, section, revision, from, to]);
    const tabs = [['overview', __('Overview', 'abece-booking')], ['resources', __('Resources', 'abece-booking')], ['cancellations', __('Cancellations and no-show', 'abece-booking')]];
    return <div className="asb-admin asb-statistics"><h1>{__('Statistics', 'abece-booking')}</h1>{error && <p role="alert">{error}</p>}<form className="asb-form-grid" onSubmit={e => { e.preventDefault(); refresh(); }}><label>{__('From', 'abece-booking')}<input type="date" required value={from} onChange={e => setFrom(e.target.value)}/></label><label>{__('To', 'abece-booking')}<input type="date" min={from} required value={to} onChange={e => setTo(e.target.value)}/></label><button className="button">{__('Apply filters', 'abece-booking')}</button></form><nav className="nav-tab-wrapper">{tabs.map(([k, label]) => <button key={k} className="nav-tab" aria-pressed={section === k} onClick={() => setSection(k)}>{label}</button>)}</nav>{report && <><dl>{[[__('Total bookings', 'abece-booking'), report.summary.booking_count], [__('Booked venue hours', 'abece-booking'), formatNumber(report.summary.venue_seconds / 3600)], [__('Cancellations', 'abece-booking'), report.summary.cancelled], [__('No-show', 'abece-booking'), report.summary.no_show], [__('Utilization (%)', 'abece-booking'), report.summary.utilization === null ? '—' : formatNumber(report.summary.utilization)]].map(([label, value]) => <React.Fragment key={label}><dt>{label}</dt><dd>{value}</dd></React.Fragment>)}</dl><div className="asb-table-scroll">{section === 'resources' ? <table className="widefat striped"><thead><tr><th>{__('Resource', 'abece-booking')}</th><th>{__('Total bookings', 'abece-booking')}</th><th>{__('Booked venue hours', 'abece-booking')}</th><th>{__('Utilization (%)', 'abece-booking')}</th></tr></thead><tbody>{report.resources?.items.map(r => <tr key={r.id}><th>{r.name}</th><td>{r.booking_count}</td><td>{formatNumber(r.venue_seconds / 3600)}</td><td>{r.utilization === null ? '—' : formatNumber(r.utilization)}</td></tr>)}</tbody></table> : section === 'cancellations' ? <table className="widefat striped"><tbody>{report.cancellations?.items.map(r => <tr key={r.id}><td>{formatDate(r.date)}</td><td>{r.reference}</td><td>{r.resource_name}</td><td>{r.status === 'cancelled' ? __('Cancelled', 'abece-booking') : __('No-show', 'abece-booking')}</td></tr>)}</tbody></table> : <table className="widefat striped"><thead><tr><th>{__('Date', 'abece-booking')}</th><th>{__('Booked venue hours', 'abece-booking')}</th></tr></thead><tbody>{report.trend?.map(r => <tr key={r.date}><td>{formatDate(r.date)}</td><td>{formatNumber(r.venue_seconds / 3600)}</td></tr>)}</tbody></table>}</div></>}</div>;
}