import * as React from 'react';
import { __ } from '@wordpress/i18n';
import type { Config } from './types';
type Step = {
    key: string;
    label: string;
    status: string;
    url: string | null;
};
type Start = {
    steps: Step[];
    page_state: string;
    booking_url: string | null;
    dismissed: boolean;
};
type Health = {
    checks: {
        key: string;
        label: string;
        status: string;
        value: string;
    }[];
    report: string;
};
const statusLabels: Record<string, string> = { ok: __('OK', 'abece-booking'), warning: __('Warning', 'abece-booking'), error: __('Error', 'abece-booking'), info: __('Info', 'abece-booking'), optional: __('Optional', 'abece-booking') };
const pageLabels: Record<string, string> = { ready: __('Booking page is ready.', 'abece-booking'), missing: __('No booking page is selected.', 'abece-booking'), deleted: __('The selected booking page was deleted.', 'abece-booking'), unpublished: __('The selected booking page is not published.', 'abece-booking'), shortcode_missing: __('The booking page does not contain the booking shortcode.', 'abece-booking') };
export function PilotToolsApp({ config }: {
    config: Config;
}) {
    const [start, setStart] = React.useState<Start | null>(null), [health, setHealth] = React.useState<Health | null>(null), [error, setError] = React.useState(''), [notice, setNotice] = React.useState(''), [busy, setBusy] = React.useState(false), [recipient, setRecipient] = React.useState(''), [confirmation, setConfirmation] = React.useState(''), [showReport, setShowReport] = React.useState(false);
    const system = config.page === 'system-status';
    async function request(path: string, method = 'GET', body?: unknown) { const url = new URL(config.restUrl + 'admin/tools/' + path); url.searchParams.set('_locale', 'user'); const response = await fetch(url, { method, headers: { 'X-WP-Nonce': config.nonce, 'Content-Type': 'application/json' }, ...(body !== undefined ? { body: JSON.stringify(body) } : {}) }); const data = await response.json(); if (!response.ok)
        throw new Error(data.message || __('The request could not be completed.', 'abece-booking')); return data; }
    async function load() { setError(''); try {
        if (system)
            setHealth(await request('status'));
        else
            setStart(await request('onboarding'));
    }
    catch (e) {
        setError((e as Error).message);
    } }
    React.useEffect(() => { void load(); }, [system]);
    async function action(operation: () => Promise<void>) { setError(''); setNotice(''); setBusy(true); try {
        await operation();
    }
    catch (e) {
        setError((e as Error).message);
    }
    finally {
        setBusy(false);
    } }
    return <div className="asb-admin asb-pilot-tools"><h1>{system ? __('System Status', 'abece-booking') : __('Getting Started', 'abece-booking')}</h1><nav className="asb-settings-links"><a className="button" href="admin.php?page=abece-booking-getting-started">{__('Getting Started', 'abece-booking')}</a><a className="button" href="admin.php?page=abece-booking-system-status">{__('System Status', 'abece-booking')}</a></nav>
 {error && <div className="notice notice-error" role="alert"><p>{error}</p></div>}{notice && <div className="notice notice-success" role="status"><p>{notice}</p></div>}
 {!system && start && <><p>{__('Follow these steps to prepare your venue. Nothing creates sample bookings or accounts automatically.', 'abece-booking')}</p>{start.dismissed && <p>{__('You marked this checklist as complete. You can still review every step.', 'abece-booking')}</p>}<ol className="asb-setup-checklist">{start.steps.map(step => <li key={step.key}><span className={'asb-health asb-health-' + step.status}>{step.status === 'ok' ? '✓' : step.status === 'warning' ? '⚠' : '○'} {statusLabels[step.status]}</span><strong>{step.label}</strong>{step.url && <a className="button" href={step.url} {...(step.key === 'test' ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>{__('Go to step', 'abece-booking')}</a>}</li>)}</ol><section className="asb-panel"><h2>{__('Booking page', 'abece-booking')}</h2><p>{pageLabels[start.page_state]}</p><p>{__('Use an existing published page with [abece_booking], or explicitly create one. An existing booking page will be reused.', 'abece-booking')}</p><button className="button" disabled={busy} onClick={() => void action(async () => { setStart(await request('booking-page', 'POST', {})); setNotice(__('Booking page is ready.', 'abece-booking')); })}>{__('Create or select booking page', 'abece-booking')}</button></section><button className="button" disabled={busy} onClick={() => void action(async () => setStart(await request('onboarding', 'PATCH', { dismissed: !start.dismissed })))}>{start.dismissed ? __('Reopen checklist', 'abece-booking') : __('Mark checklist as complete', 'abece-booking')}</button></>}
 {system && health && <><p>{__('Status checks do not repair or change your data. The support report excludes customer data, credentials and full bank details.', 'abece-booking')}</p><div className="asb-pilot-actions"><button className="button" disabled={busy} onClick={() => void load()}>{__('Refresh', 'abece-booking')}</button><button className="button" onClick={() => void action(async () => { if (navigator.clipboard) {
        try {
            await navigator.clipboard.writeText(health.report);
            setNotice(__('System report copied.', 'abece-booking'));
            return;
        }
        catch { /* Manual copy remains available. */ }
    } setShowReport(true); setNotice(__('Select the report text and copy it manually.', 'abece-booking')); })}>{__('Copy system report', 'abece-booking')}</button></div>{showReport && <div><label htmlFor="asb-system-report">{__('System report', 'abece-booking')}</label><textarea id="asb-system-report" readOnly value={health.report} rows={12} onFocus={e => e.currentTarget.select()} style={{ width: '100%', boxSizing: 'border-box' }}/></div>}<div className="asb-table-scroll"><table className="widefat striped"><thead><tr><th>{__('Check', 'abece-booking')}</th><th>{__('Status', 'abece-booking')}</th><th>{__('Details', 'abece-booking')}</th></tr></thead><tbody>{health.checks.map(c => <tr key={c.key}><th scope="row">{c.label}</th><td><span className={'asb-health asb-health-' + c.status}>{statusLabels[c.status]}</span></td><td>{c.key === 'page' ? pageLabels[c.value] || c.value : c.value}</td></tr>)}</tbody></table></div><p>{__('A named regional time zone handles daylight saving time automatically. A fixed UTC offset does not.', 'abece-booking')}</p><section className="asb-panel"><h2>{__('Send a test email', 'abece-booking')}</h2><p>{__('This only tests submission to WordPress mail transport. Confirm actual delivery with the recipient.', 'abece-booking')}</p><form onSubmit={e => { e.preventDefault(); void action(async () => { const result = await request('test-email', 'POST', { recipient }); if (result.submitted)
        setNotice(result.message);
    else
        setError(result.message); }); }}><label htmlFor="asb-test-recipient">{__('Recipient email', 'abece-booking')}</label><input id="asb-test-recipient" type="email" required value={recipient} onChange={e => setRecipient(e.target.value)}/><button className="button" disabled={busy}>{__('Send test email', 'abece-booking')}</button></form></section><section className="asb-panel asb-danger"><h2>{__('Remove all ABeCe Booking data', 'abece-booking')}</h2><p>{__('This removes bookings, members, memberships, financial records, credits, settings and plugin tables, and deactivates the plugin. It cannot be undone without a backup. WordPress users and pages are retained. Create and verify a database backup first.', 'abece-booking')}</p><form onSubmit={e => { e.preventDefault(); if (!window.confirm(__('Permanently remove all ABeCe Booking data?', 'abece-booking')))
        return; void action(async () => { const result = await request('data', 'DELETE', { confirmation }); if (result.complete) {
        setHealth(null);
        setNotice(__('Plugin data removed. The plugin is deactivated. WordPress users and pages are retained.', 'abece-booking'));
    }
    else {
        setHealth(null);
        setError(__('Some data could not be removed. The plugin is deactivated. Contact your administrator.', 'abece-booking'));
    } }); }}><label htmlFor="asb-delete-confirmation">{__('Type DELETE DATA to confirm', 'abece-booking')}</label><p><code>{__('DELETE DATA', 'abece-booking')}</code></p><input id="asb-delete-confirmation" autoComplete="off" value={confirmation} onChange={e => setConfirmation(e.target.value)}/><button className="button asb-danger-button" disabled={busy || confirmation !== __('DELETE DATA', 'abece-booking')}>{__('Remove plugin data', 'abece-booking')}</button></form></section></>}
 {!start && !health && !error && !notice && <p role="status">{__('Loading…', 'abece-booking')}</p>}</div>;
}