import * as React from 'react';
import { __ } from '@wordpress/i18n';
import type { BookingApi } from '../booking-ui/api';
import { money } from '../booking-ui/pricing';
import { formatDateTime } from '../booking-ui/dateTime';
import { Amounts, OutstandingTable, type OutstandingBalance } from '../booking-ui/receivables';
import { CalendarBookingPanel } from '../booking-ui/CalendarBookingPanel';
interface Debtor {
    customer_type: string;
    customer_id: number;
    customer_name: string;
    currency: string;
    outstanding_amount: number;
    item_count: number;
    oldest_debt: string;
    relevant_booking: string;
    booking_id: number;
}
function typeLabel(type: string) { return type === 'member' ? __('Club member', 'abece-booking') : type === 'registered_non_member' ? __('Registered non-member', 'abece-booking') : __('External / phone booking', 'abece-booking'); }
export function ReceivablesApp({ api }: {
    api: BookingApi;
}) {
    const [search, setSearch] = React.useState(''), [currency, setCurrency] = React.useState(''), [type, setType] = React.useState(''), [sort, setSort] = React.useState('oldest'), [page, setPage] = React.useState(1), [revision, setRevision] = React.useState(0);
    const [list, setList] = React.useState<{
        items: Debtor[];
        total: number;
        timezone: string;
    } | null>(null), [customer, setCustomer] = React.useState<Debtor | null>(null), [details, setDetails] = React.useState<OutstandingBalance | null>(null), [detailPage, setDetailPage] = React.useState(1), [booking, setBooking] = React.useState<number | null>(null), [error, setError] = React.useState('');
    React.useEffect(() => { let live = true; setError(''); setList(null); const timer = setTimeout(() => api.request<NonNullable<typeof list>>('admin/receivables', 'GET', undefined, { search, sort, page: String(page), ...(currency ? { currency } : {}), ...(type ? { customer_type: type } : {}) }).then(d => { if (live)
        setList(d); }).catch(e => { if (live)
        setError(e.message); }), 200); return () => { live = false; clearTimeout(timer); }; }, [api, search, currency, type, sort, page, revision]);
    React.useEffect(() => { let live = true; setDetails(null); if (customer)
        api.request<OutstandingBalance>(`admin/receivables/${customer.customer_type}/${customer.customer_id}`, 'GET', undefined, { page: String(detailPage) }).then(d => { if (live)
            setDetails(d); }).catch(e => { if (live)
            setError(e.message); }); return () => { live = false; }; }, [api, customer, detailPage, revision]);
    return <div className="asb-admin asb-receivables"><h1>{__('Outstanding amounts', 'abece-booking')}</h1><a className="button" href="admin.php?page=abece-booking-settings&tab=payments">{__('Payment settings', 'abece-booking')}</a><div className="asb-receivable-filters"><label>{__('Search customer or reference', 'abece-booking')}<input value={search} onChange={e => { setSearch(e.target.value); setPage(1); }}/></label><label>{__('Currency', 'abece-booking')}<input maxLength={3} placeholder="CZK" value={currency} onChange={e => { setCurrency(e.target.value.toUpperCase()); setPage(1); }}/></label><label>{__('Customer type', 'abece-booking')}<select value={type} onChange={e => { setType(e.target.value); setPage(1); }}><option value="">{__('All', 'abece-booking')}</option>{['member', 'registered_non_member', 'external'].map(t => <option value={t} key={t}>{typeLabel(t)}</option>)}</select></label><label>{__('Sort', 'abece-booking')}<select value={sort} onChange={e => { setSort(e.target.value); setPage(1); }}><option value="oldest">{__('Oldest debt', 'abece-booking')}</option><option value="largest">{__('Largest outstanding per currency', 'abece-booking')}</option></select></label><button className="button" onClick={() => setRevision(n => n + 1)}>{__('Refresh', 'abece-booking')}</button></div>{error && <p role="alert">{error}</p>}{!list && !error && <p role="status">{__('Loading…', 'abece-booking')}</p>}{list && <><div className="asb-table-scroll"><table className="widefat striped"><thead><tr>{[__('Customer', 'abece-booking'), __('Customer type', 'abece-booking'), __('Outstanding', 'abece-booking'), __('Currency', 'abece-booking'), __('Unpaid items', 'abece-booking'), __('Oldest debt', 'abece-booking'), __('Relevant booking', 'abece-booking'), __('Actions', 'abece-booking')].map(t => <th scope="col" key={t}>{t}</th>)}</tr></thead><tbody>{list.items.map(d => <tr key={`${d.customer_type}:${d.customer_id}:${d.currency}`}><td>{d.customer_name}</td><td>{typeLabel(d.customer_type)}</td><td>{money(d.outstanding_amount, d.currency)}</td><td>{d.currency}</td><td>{d.item_count}</td><td>{formatDateTime(d.oldest_debt, list.timezone)}</td><td>{d.relevant_booking}</td><td><button className="button" onClick={() => { setCustomer(d); setDetailPage(1); }}>{__('Details', 'abece-booking')}</button></td></tr>)}</tbody></table></div>{!list.items.length && <p>{__('No outstanding payments.', 'abece-booking')}</p>}<button className="button" disabled={page === 1} onClick={() => setPage(n => n - 1)}>{__('Previous', 'abece-booking')}</button> {page} <button className="button" disabled={page * 25 >= list.total} onClick={() => setPage(n => n + 1)}>{__('Next', 'abece-booking')}</button></>}{customer && <section className="asb-debtor-detail"><h2>{customer.customer_name}</h2>{details ? <><Amounts amounts={details.amounts_by_currency}/><OutstandingTable items={details.items} timezone={details.timezone} admin onDetail={setBooking}/><button className="button" disabled={detailPage === 1} onClick={() => setDetailPage(n => n - 1)}>{__('Previous', 'abece-booking')}</button> {detailPage} <button className="button" disabled={detailPage * 25 >= (details.total ?? 0)} onClick={() => setDetailPage(n => n + 1)}>{__('Next', 'abece-booking')}</button></> : <p role="status">{__('Loading…', 'abece-booking')}</p>}<button className="button" onClick={() => setCustomer(null)}>{__('Close details', 'abece-booking')}</button></section>}{booking && <CalendarBookingPanel id={booking} api={api} onClose={() => setBooking(null)} onChanged={() => setRevision(n => n + 1)}/>}</div>;
}