import * as React from 'react';
import { __, sprintf } from '@wordpress/i18n';
import { BookingApi } from '../booking-ui/api';
interface Rule {
    min_minutes_before: number;
    fee_percentage: string | null;
    fee_amount: number | null;
    priority: number;
}
interface Policy {
    id?: number;
    name: string;
    sport_id: number | null;
    resource_id: number | null;
    no_show_fee_percentage: string;
    priority: number;
    is_active: boolean;
    rules: Rule[];
}
interface Options {
    sports: {
        id: number;
        name: string;
    }[];
    resources: {
        id: number;
        name: string;
        sport_id: number | null;
    }[];
}
const blank = (): Policy => ({ name: '', sport_id: null, resource_id: null, no_show_fee_percentage: '100', priority: 0, is_active: true, rules: [{ min_minutes_before: 1440, fee_percentage: '0', fee_amount: null, priority: 0 }, { min_minutes_before: 720, fee_percentage: '20', fee_amount: null, priority: 0 }, { min_minutes_before: 360, fee_percentage: '50', fee_amount: null, priority: 0 }, { min_minutes_before: 0, fee_percentage: '100', fee_amount: null, priority: 0 }] });
export function CancellationAdminApp({ api }: {
    api: BookingApi;
}) {
    const precedenceId = React.useId();
    const [items, setItems] = React.useState<Policy[]>([]);
    const [total, setTotal] = React.useState(0);
    const [page, setPage] = React.useState(1);
    const [options, setOptions] = React.useState<Options>({ sports: [], resources: [] });
    const [edit, setEdit] = React.useState<Policy | null>(null);
    const [error, setError] = React.useState('');
    const [busy, setBusy] = React.useState(false);
    const [revision, setRevision] = React.useState(0);
    React.useEffect(() => { let live = true; setBusy(true); setError(''); Promise.all([api.list<Policy>('cancellation-policies', { page: String(page) }), api.request<Options>('cancellation-policy-options')]).then(([list, o]) => { if (live) {
        setItems(list.items);
        setTotal(list.total);
        setOptions(o);
    } }).catch(e => { if (live)
        setError(e.message); }).finally(() => { if (live)
        setBusy(false); }); return () => { live = false; }; }, [api, page, revision]);
    async function save(e: React.FormEvent) { e.preventDefault(); if (!edit)
        return; setBusy(true); setError(''); try {
        const { id, ...data } = edit;
        await api.request(id ? `cancellation-policies/${id}` : 'cancellation-policies', id ? 'PATCH' : 'POST', data);
        setEdit(null);
        setRevision(v => v + 1);
    }
    catch (e) {
        setError((e as Error).message);
    }
    finally {
        setBusy(false);
    } }
    async function toggle(p: Policy) { setBusy(true); setError(''); try {
        await api.request(`cancellation-policies/${p.id}`, 'PATCH', { is_active: !p.is_active });
        setRevision(v => v + 1);
    }
    catch (e) {
        setError((e as Error).message);
    }
    finally {
        setBusy(false);
    } }
    function change(fields: Partial<Policy>) { setEdit(p => p ? { ...p, ...fields } : p); }
    function rule(index: number, fields: Partial<Rule>) { if (edit)
        change({ rules: edit.rules.map((r, i) => i === index ? { ...r, ...fields } : r) }); }
    function open(p: Policy) { setError(''); setEdit({ id: p.id, name: p.name, sport_id: p.sport_id, resource_id: p.resource_id, priority: p.priority, is_active: p.is_active, no_show_fee_percentage: p.no_show_fee_percentage, rules: p.rules.map(r => ({ min_minutes_before: r.min_minutes_before, fee_percentage: r.fee_percentage, fee_amount: r.fee_amount, priority: r.priority })) }); }
    return <div><h1>{__('Cancellation and penalties', 'abece-booking')}</h1><p>{__('Policies for a specific resource take precedence over policies for its sport, then venue-wide policies. For the same scope, the higher number wins.', 'abece-booking')}</p>
 <p>{__('At each boundary, the highest threshold reached applies: exactly 12 hours uses the 12-hour rule. A zero-hour rule is required.', 'abece-booking')}</p>
 {error && <p role="alert">{error}</p>}<button onClick={() => { setError(''); setEdit(blank()); }} disabled={busy}>{__('Add cancellation policy', 'abece-booking')}</button>
 <table className="widefat striped"><thead><tr><th>{__('Name', 'abece-booking')}</th><th>{__('Scope', 'abece-booking')}</th><th>{__('Precedence for the same scope', 'abece-booking')}</th><th>{__('No-show percentage', 'abece-booking')}</th><th>{__('Status', 'abece-booking')}</th><th>{__('Actions', 'abece-booking')}</th></tr></thead><tbody>{items.map(p => <tr key={p.id}><td>{p.name}</td><td>{p.resource_id ? options.resources.find(r => r.id === p.resource_id)?.name : p.sport_id ? options.sports.find(s => s.id === p.sport_id)?.name : __('Global', 'abece-booking')}</td><td>{p.priority}</td><td>{p.no_show_fee_percentage} %</td><td>{p.is_active ? __('Active', 'abece-booking') : __('Inactive', 'abece-booking')}</td><td><button disabled={busy} onClick={() => open(p)}>{__('Edit', 'abece-booking')}</button><button disabled={busy} onClick={() => void toggle(p)}>{p.is_active ? __('Deactivate', 'abece-booking') : __('Activate', 'abece-booking')}</button></td></tr>)}</tbody></table>
 <p>{sprintf(__('Total items: %d', 'abece-booking'), total)}</p><button disabled={page === 1 || busy} onClick={() => setPage(p => p - 1)}>{__('Previous', 'abece-booking')}</button> {page} <button disabled={page * 25 >= total || busy} onClick={() => setPage(p => p + 1)}>{__('Next', 'abece-booking')}</button>
 {edit && <form onSubmit={save}><h2>{edit.id ? __('Edit cancellation policy', 'abece-booking') : __('Add cancellation policy', 'abece-booking')}</h2>
 <label>{__('Name', 'abece-booking')}<input aria-label={__('Name', 'abece-booking')} required maxLength={150} value={edit.name} onChange={e => change({ name: e.target.value })}/></label>
 <label>{__('Scope', 'abece-booking')}<select aria-label={__('Scope', 'abece-booking')} value={edit.resource_id ? 'resource' : edit.sport_id ? 'sport' : 'global'} onChange={e => change({ resource_id: e.target.value === 'resource' ? options.resources[0]?.id ?? null : null, sport_id: e.target.value === 'sport' ? options.sports[0]?.id ?? null : null })}><option value="global">{__('Global', 'abece-booking')}</option><option value="sport">{__('Sport', 'abece-booking')}</option><option value="resource">{__('Resource', 'abece-booking')}</option></select></label>
 {edit.resource_id !== null ? <label>{__('Resource', 'abece-booking')}<select aria-label={__('Resource', 'abece-booking')} value={edit.resource_id} onChange={e => change({ resource_id: Number(e.target.value), sport_id: null })}>{options.resources.map(r => <option key={r.id} value={r.id}>{r.name}</option>)}</select></label> : edit.sport_id !== null && <label>{__('Sport', 'abece-booking')}<select aria-label={__('Sport', 'abece-booking')} value={edit.sport_id} onChange={e => change({ sport_id: Number(e.target.value) })}>{options.sports.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}</select></label>}
 <div className="asb-precedence-field"><label htmlFor={precedenceId}>{__('Precedence for the same scope', 'abece-booking')}</label><input id={precedenceId} aria-describedby={`${precedenceId}-help`} type="number" step="1" required value={edit.priority} onChange={e => change({ priority: Number(e.target.value) })}/><p id={`${precedenceId}-help`} className="description">{__('Higher numbers take precedence between policies for the same resource, sport or the whole venue. Keep 0 if there is only one policy for that scope.', 'abece-booking')}</p></div>
 <label><input type="checkbox" checked={edit.is_active} onChange={e => change({ is_active: e.target.checked })}/>{__('Active', 'abece-booking')}</label>
 <label>{__('No-show percentage', 'abece-booking')}<input aria-label={__('No-show percentage', 'abece-booking')} type="number" min="0" max="100" step="0.001" required value={edit.no_show_fee_percentage} onChange={e => change({ no_show_fee_percentage: e.target.value })}/></label>
 <h3>{__('Cancellation rules', 'abece-booking')}</h3><table><thead><tr><th>{__('Cancel at least (hours before start)', 'abece-booking')}</th><th>{__('Fee type', 'abece-booking')}</th><th>{__('Fee', 'abece-booking')}</th><th>{__('Actions', 'abece-booking')}</th></tr></thead><tbody>{edit.rules.map((r, i) => <tr key={i}><td><input aria-label={sprintf(__('Threshold hours %d', 'abece-booking'), i + 1)} type="number" min="0" step="any" required value={r.min_minutes_before / 60} onChange={e => rule(i, { min_minutes_before: Math.round(Number(e.target.value) * 60) })}/></td><td><select aria-label={sprintf(__('Fee type %d', 'abece-booking'), i + 1)} value={r.fee_percentage === null ? 'fixed' : 'percentage'} onChange={e => rule(i, e.target.value === 'fixed' ? { fee_percentage: null, fee_amount: 0 } : { fee_percentage: '0', fee_amount: null })}><option value="percentage">{__('Percentage', 'abece-booking')}</option><option value="fixed">{__('Fixed amount', 'abece-booking')}</option></select></td><td>{r.fee_percentage !== null ? <input aria-label={sprintf(__('Fee percentage %d', 'abece-booking'), i + 1)} type="number" min="0" max="100" step="0.001" required value={r.fee_percentage} onChange={e => rule(i, { fee_percentage: e.target.value })}/> : <input aria-label={sprintf(__('Fixed fee %d', 'abece-booking'), i + 1)} type="number" min="0" step="1" required value={r.fee_amount ?? 0} onChange={e => rule(i, { fee_amount: Number(e.target.value) })}/>}</td><td><button type="button" onClick={() => change({ rules: edit.rules.filter((_, n) => n !== i) })}>{__('Remove rule', 'abece-booking')}</button></td></tr>)}</tbody></table>
 <p>{__('Fixed fees use the booking currency in its smallest units (for example, 10000 means 100.00 for a two-decimal currency). Fees never exceed the original booking price.', 'abece-booking')}</p>
 <button type="button" onClick={() => change({ rules: [...edit.rules, { min_minutes_before: 0, fee_percentage: '0', fee_amount: null, priority: 0 }] })}>{__('Add rule', 'abece-booking')}</button><button disabled={busy} type="submit">{__('Save', 'abece-booking')}</button><button type="button" disabled={busy} onClick={() => setEdit(null)}>{__('Cancel', 'abece-booking')}</button>
 </form>}</div>;
}