import { PrivacySettings } from './PrivacySettings';
import { type BankProfile, type ProfileAvailability } from './BankProfiles';
import { BookingRulesSettings } from './BookingRulesSettings';
import * as React from 'react';
import { __ } from '@wordpress/i18n';
import { BookingApi } from '../booking-ui/api';
import { CatalogApi } from './api';
import type { Config } from './types';
import { CalendarSettings } from './CalendarSettings';
import { ClubLocationForm } from './ClubLocationForm';
import { methodLabel } from '../booking-ui/credit';
interface SettingsOverview {
    sections: Record<string, boolean>;
    memberships_enabled: boolean;
}
interface BankAccount {
    country: string;
    recipient_name: string | null;
    account_number: string | null;
    bank_code: string | null;
    iban: string | null;
    bic: string | null;
    currency: string;
}
interface Payments {
    bank_profiles: BankProfile[];
    bank_profile_availability: Record<string, ProfileAvailability>;
    bank_profiles_warning: string | null;
    block_booking_with_outstanding_balance: boolean;
    outstanding_balance_grace_hours: number;
    qr_available?: boolean;
    qr_unavailable_reason?: string | null;
    enable_credit: boolean;
    enable_pay_on_site: boolean;
    enable_bank_transfer: boolean;
    enable_qr_payment: boolean;
    bank_account: BankAccount;
}
interface Integration {
    reservation_page_id: number | null;
    pages: {
        id: number;
        title: string;
    }[];
    url: string | null;
    edit_url: string | null;
    shortcode_present: boolean;
    shortcode_status: 'canonical' | 'legacy' | 'missing';
}
const tabs = () => [['general', __('General', 'abece-booking')], ['bookings', __('Bookings', 'abece-booking')], ['membership', __('Membership', 'abece-booking')], ['payments', __('Payments', 'abece-booking')], ['calendar', __('Calendar', 'abece-booking')], ['location', __('Location', 'abece-booking')], ['integrations', __('Integrations', 'abece-booking')], ['privacy', __('Privacy', 'abece-booking')]];
export function SettingsApp({ api, config }: {
    api: BookingApi;
    config: Config;
}) {
    const [overview, setOverview] = React.useState<SettingsOverview | null>(null), [tab, setTab] = React.useState(new URLSearchParams(location.search).get('tab') || 'general'), [error, setError] = React.useState('');
    const locationApi = React.useMemo(() => new CatalogApi(config), [config]);
    React.useEffect(() => { let alive = true; api.request<SettingsOverview>('settings').then(value => { if (alive) {
        setOverview(value);
        setTab(current => value.sections[current] ? current : 'general');
    } }).catch(e => { if (alive)
        setError(e.message); }); return () => { alive = false; }; }, [api]);
    React.useEffect(() => { const pop = () => setTab(new URLSearchParams(location.search).get('tab') || 'general'); addEventListener('popstate', pop); return () => removeEventListener('popstate', pop); }, []);
    function open(key: string) { const url = new URL(location.href); url.searchParams.set('tab', key); history.pushState(null, '', url); setTab(key); }
    return <div className="asb-admin asb-settings"><h1>{__('Settings', 'abece-booking')}</h1>{error && <p role="alert">{error}</p>}{!overview && !error && <p role="status">{__('Loading…', 'abece-booking')}</p>}{overview && <><nav className="asb-settings-tabs" aria-label={__('Settings sections', 'abece-booking')}>{tabs().filter(([key]) => overview.sections[key]).map(([key, label]) => <button className={tab === key ? 'button is-active' : 'button'} aria-current={tab === key ? 'page' : undefined} key={key} onClick={() => open(key)}>{label}</button>)}</nav><section className="asb-settings-panel" key={tab} aria-label={tabs().find(([key]) => key === tab)?.[1]}>
 {tab === 'privacy' && <PrivacySettings api={api}/>}{tab === 'general' && <GeneralSettings api={api}/>}{tab === 'bookings' && <>{overview.sections.booking_rules && <BookingRulesSettings api={api}/>} {overview.sections.cancellation && <section className="asb-form-section"><h2>{__('Cancellation and penalties', 'abece-booking')}</h2><p>{__('Manage cancellation deadlines, fees and no-show penalties.', 'abece-booking')}</p><a className="button" href={adminUrl('cancellation-policies')}>{__('Manage cancellation policies', 'abece-booking')}</a></section>}</>}{false}{tab === 'payments' && <PaymentSettings api={api} canManageBookings={config.canManageBookings}/>}{tab === 'calendar' && <CalendarSettings api={api}/>}{tab === 'location' && <ClubLocationForm api={locationApi}/>}{tab === 'integrations' && <IntegrationSettings api={api}/>}</section></>}</div>;
}
function adminUrl(page: string) { const url = new URL(location.href); url.search = ''; url.searchParams.set('page', 'abece-booking-' + page); return url.toString(); }
function GeneralSettings({ api }: {
    api: BookingApi;
}) { const [data, setData] = React.useState<{
    site_name: string;
    timezone: string;
    locale: string;
} | null>(null), [error, setError] = React.useState(''); React.useEffect(() => { let alive = true; api.request<typeof data>('settings/general').then(d => { if (alive)
    setData(d); }).catch(e => { if (alive)
    setError(e.message); }); return () => { alive = false; }; }, [api]); return <><h2>{__('General', 'abece-booking')}</h2>{error && <p role="alert">{error}</p>}{data && <><dl><dt>{__('Site name', 'abece-booking')}</dt><dd>{data.site_name}</dd><dt>{__('Timezone', 'abece-booking')}</dt><dd>{data.timezone}</dd></dl><p>{__('The site name and timezone follow the WordPress settings. Prices use the currency of their price list.', 'abece-booking')}</p></>}</>; }
function PaymentSettings({ api, canManageBookings }: {
    api: BookingApi;
    canManageBookings: boolean;
}) {
    const validated = React.useRef('');
    const [data, setData] = React.useState<Payments | null>(null), [busy, setBusy] = React.useState(false), [error, setError] = React.useState(''), [saved, setSaved] = React.useState(false);
    React.useEffect(() => { let alive = true; api.request<Payments>('settings/payments').then(d => { if (alive) {
        validated.current = JSON.stringify(d.bank_profiles);
        setData(d);
    } }).catch(e => { if (alive)
        setError(e.message); }); return () => { alive = false; }; }, [api]);
    async function save(e: React.FormEvent) { e.preventDefault(); if (!data)
        return; setBusy(true); setError(''); try {
        const { qr_available, qr_unavailable_reason, bank_profile_availability, bank_profiles_warning, bank_account, ...payload } = data;
        const result = await api.request<Payments>('settings/payments', 'PATCH', payload);
        validated.current = JSON.stringify(result.bank_profiles);
        setData(result);
        setSaved(true);
    }
    catch (e) {
        setError((e as Error).message);
    }
    finally {
        setBusy(false);
    } }
    const descriptions: Record<string, string> = { credit: __('Internal customer credit account. A manager can top it up manually.', 'abece-booking'), pay_on_site: __('The customer pays when they arrive. Record the actual payment medium when confirming receipt.', 'abece-booking'), bank_transfer: __('The customer receives payment details. The booking remains unpaid until a manager confirms receipt. International accounts are supported.', 'abece-booking'), qr_payment: __('Scan a supported bank QR code. Availability depends on the currency, bank profile and banking app.', 'abece-booking') };
    const dirtyProfiles = !!data && validated.current !== JSON.stringify(data.bank_profiles);
    const qrReason = data && !dirtyProfiles && !data.qr_available ? data.qr_unavailable_reason : null;
    return <><h2>{__('Payments', 'abece-booking')}</h2>{error && <p role="alert">{error}</p>}{saved && <p role="status">{__('Changes saved.', 'abece-booking')}</p>}{data ? <form onSubmit={save}><fieldset disabled={busy}><div className="asb-payment-cards">{(['credit', 'pay_on_site', 'bank_transfer', 'qr_payment'] as const).filter(m => m === 'pay_on_site' || false).map(method => <section className={`asb-payment-card${method === 'qr_payment' && qrReason ? ' is-unavailable' : ''}`} key={method}><label className="asb-payment-toggle"><input aria-label={methodLabel(method)} type="checkbox" disabled={method === 'qr_payment' && !!qrReason} checked={data[`enable_${method}`]} onChange={e => { setSaved(false); setData({ ...data, [`enable_${method}`]: e.target.checked }); }}/><strong>{methodLabel(method)}</strong></label><p>{descriptions[method]}</p>{method === 'qr_payment' && qrReason && <p role="status">{__('Unavailable', 'abece-booking')}: {qrReason}</p>}{method === 'credit' && <div className="asb-payment-card is-unavailable"><label className="asb-payment-toggle"><input disabled type="checkbox"/><strong>{__('Online top-up', 'abece-booking')}</strong></label><p>{__('Requires a supported online payment integration.', 'abece-booking')}</p></div>}</section>)}<section className="asb-payment-card is-unavailable"><label className="asb-payment-toggle"><input aria-label={__('Online payment', 'abece-booking')} type="checkbox" disabled/><strong>{__('Online payment', 'abece-booking')}</strong></label><p>{__('Requires WooCommerce or a supported payment integration.', 'abece-booking')}</p></section></div><section className="asb-form-section"><h3>{__('Outstanding amounts', 'abece-booking')}</h3><label className="asb-checkbox"><input type="checkbox" checked={data.block_booking_with_outstanding_balance} onChange={e => setData({ ...data, block_booking_with_outstanding_balance: e.target.checked })}/>{__('Block new online bookings with an unpaid amount', 'abece-booking')}</label><label>{__('Grace period after booking ends (hours)', 'abece-booking')}<input type="number" min={0} max={8760} required value={data.outstanding_balance_grace_hours} onChange={e => setData({ ...data, outstanding_balance_grace_hours: Number(e.target.value) })}/></label><p>{__('Zero hours means the unpaid amount becomes overdue when the booking ends.', 'abece-booking')}</p></section>{false}<button className="button button-primary">{busy ? __('Saving…', 'abece-booking') : __('Save settings', 'abece-booking')}</button></fieldset></form> : !error && <p role="status">{__('Loading…', 'abece-booking')}</p>}<p>{canManageBookings && <a className="button button-primary" href={adminUrl('receivables')}>{__('Show outstanding amounts', 'abece-booking')}</a>} {false}</p></>;
}
function IntegrationSettings({ api }: {
    api: BookingApi;
}) {
    const [data, setData] = React.useState<Integration | null>(null), [page, setPage] = React.useState(''), [busy, setBusy] = React.useState(false), [error, setError] = React.useState(''), [notice, setNotice] = React.useState('');
    React.useEffect(() => { let alive = true; api.request<Integration>('settings/integrations').then(d => { if (alive) {
        setData(d);
        setPage(String(d.reservation_page_id ?? ''));
    } }).catch(e => { if (alive)
        setError(e.message); }); return () => { alive = false; }; }, [api]);
    async function save(e: React.FormEvent) { e.preventDefault(); setBusy(true); setError(''); setNotice(''); try {
        setData(await api.request<Integration>('settings/integrations', 'PATCH', { reservation_page_id: page ? Number(page) : null }));
        setNotice(__('Changes saved.', 'abece-booking'));
    }
    catch (e) {
        setError((e as Error).message);
    }
    finally {
        setBusy(false);
    } }
    async function copy() { setError(''); try {
        try {
            if (!navigator.clipboard)
                throw new Error();
            await navigator.clipboard.writeText('[abece_booking]');
        }
        catch {
            const old = document.activeElement as HTMLElement | null, input = document.createElement('textarea');
            input.value = '[abece_booking]';
            input.readOnly = true;
            input.style.position = 'fixed';
            input.style.opacity = '0';
            document.body.append(input);
            input.select();
            const copied = document.execCommand('copy');
            input.remove();
            old?.focus();
            if (!copied)
                throw new Error(__('Copy the shortcode manually.', 'abece-booking'));
        }
        setNotice(__('Shortcode copied.', 'abece-booking'));
    }
    catch (e) {
        setError((e as Error).message);
    } }
    return <><h2>{__('Reservation page', 'abece-booking')}</h2><p>{__('Insert ABeCe Booking into a WordPress page using this shortcode:', 'abece-booking')}</p><p><code>[abece_booking]</code> <button className="button" onClick={() => void copy()}>{__('Copy shortcode', 'abece-booking')}</button></p><ol><li>{__('Create or open a page in WordPress.', 'abece-booking')}</li><li>{__('Add a Shortcode block.', 'abece-booking')}</li><li>{__('Insert [abece_booking].', 'abece-booking')}</li><li>{__('Publish the page.', 'abece-booking')}</li></ol><p>{__('Shortcode is the currently supported integration.', 'abece-booking')}</p>{error && <p role="alert">{error}</p>}{notice && <p role="status">{notice}</p>}<form onSubmit={save}><fieldset disabled={!data || busy}><label>{__('Reservation page', 'abece-booking')}<select aria-label={__('Reservation page', 'abece-booking')} value={page} onChange={e => setPage(e.target.value)}><option value="">{__('Select…', 'abece-booking')}</option>{data?.pages.map(p => <option key={p.id} value={p.id}>{p.title}</option>)}</select></label><button className="button button-primary">{__('Save', 'abece-booking')}</button></fieldset></form>{data?.reservation_page_id && <p className={data.shortcode_status === 'canonical' ? 'notice notice-success inline' : 'notice notice-warning inline'} role="status">{data.shortcode_status === 'legacy' ? __('This page uses the legacy shortcode [sports_booking]. Bookings will continue to work; we recommend using [abece_booking].', 'abece-booking') : data.shortcode_present ? __('Booking shortcode found.', 'abece-booking') : __('The selected page does not contain [abece_booking].', 'abece-booking')}</p>}{data?.url && <><p>{__('Reservation URL', 'abece-booking')}: <a href={data.url}>{data.url}</a></p><p className="asb-buttons"><a className="button" href={data.url} target="_blank" rel="noopener noreferrer">{__('Open page', 'abece-booking')}</a>{data.edit_url && <a className="button" href={data.edit_url}>{__('Edit page', 'abece-booking')}</a>}</p></>}</>;
}