/**
 * Shortcode options, from one spec (Razorbooking_Shortcodes::spec(), served
 * at `shortcodes`):
 *
 *  - ShortcodeBuilder (Embed dialog): the shortcode, and a control per option
 *    that rewrites it. Only options that differ from their default are written.
 *  - ShortcodeReference (Support): every shortcode, option, value and default.
 */

import { useEffect, useMemo, useState } from 'react';
import { CopyField, Select, Switch, TextField, cn } from '../ds';
import { teamFor, type EmbedCatalog, type EmbedShows } from '../design-system/embed/embed-snippet';
import { SHOWS_OPTIONS } from '../../common/embed';
import { api } from '../lib/api';
import { useAsync } from '../lib/useAsync';

export interface ShortcodeAttr {
	name: string;
	label: string;
	type: 'service' | 'variation' | 'quantity' | 'category' | 'member' | 'select' | 'switch' | 'number' | 'text';
	/**
	 * The value when left out. `null` means no value expresses the default
	 * (an omitted title is the booking site's own), so the option is written
	 * whenever it is set, empty included.
	 */
	default: string | null;
	/** What an empty field shows. */
	placeholder?: string;
	/** The builder's initial value when it differs from `default` (so it is written out). */
	start?: string;
	options?: { value: string; label: string; disabled?: boolean }[];
	min?: number;
	max?: number;
	help?: string;
	required?: boolean;
	/** Shown only while another option holds one of these values. */
	when?: Record< string, string[] >;
}

export interface ShortcodeSpec {
	tag: string;
	title: string;
	description: string;
	block: string;
	attrs: ShortcodeAttr[];
}

let specCache: Promise< ShortcodeSpec[] > | null = null;

/** Fetched once per page load. */
function useShortcodeSpec() {
	return useAsync< ShortcodeSpec[] >( () => {
		specCache = specCache ?? api.get< ShortcodeSpec[] >( 'shortcodes' ).catch( ( caught ) => {
			specCache = null;
			throw caught;
		} );
		return specCache;
	} );
}

/** The embed catalog, plus whether each service and person is active and bookable. */
type Catalog = Omit< EmbedCatalog, 'services' | 'team' > & {
	services: ( EmbedCatalog[ 'services' ][ number ] & { active?: boolean } )[];
	team: ( EmbedCatalog[ 'team' ][ number ] & { active?: boolean; bookable?: boolean } )[];
};

/** Each option's current value: what was set, else where the builder starts, else the default. */
function resolve( spec: ShortcodeSpec, values: Record< string, string > ): Record< string, string > {
	return Object.fromEntries( spec.attrs.map( ( a ) => [ a.name, values[ a.name ] ?? a.start ?? a.default ?? '' ] ) );
}

/**
 * `[tag a="1" b="yes"]`, writing only visible options that differ from their
 * default. An option with a `null` default is written whenever it was set,
 * so `title=""` means "no title".
 */
function buildShortcode( spec: ShortcodeSpec, values: Record< string, string > ): string {
	const current = resolve( spec, values );
	const parts = spec.attrs
		.filter( ( attr ) => visible( attr, current ) )
		.filter( ( attr ) => ( attr.default === null ? attr.name in values : clampToLimits( attr, current[ attr.name ] ) !== attr.default ) )
		// A shortcode value cannot contain a straight double quote.
		.map( ( attr ) => `${ attr.name }="${ clampToLimits( attr, current[ attr.name ] ).replace( /"/g, '”' ) }"` );

	return `[${ [ spec.tag, ...parts ].join( ' ' ) }]`;
}

/** A number option clamped to its min and max, as PHP reads it. */
function clampToLimits( attr: ShortcodeAttr, value: string ): string {
	if ( attr.type !== 'number' || value === '' || Number.isNaN( Number( value ) ) ) return value;
	return String( clamp( Math.floor( Number( value ) ), attr.min, attr.max ) );
}

const clamp = ( n: number, min?: number, max?: number ) => Math.min( max ?? Infinity, Math.max( min ?? -Infinity, n ) );

function visible( attr: ShortcodeAttr, values: Record< string, string > ): boolean {
	if ( ! attr.when ) return true;
	return Object.entries( attr.when ).every( ( [ name, allowed ] ) => allowed.includes( values[ name ] ?? '' ) );
}

/** The options "Shows" governs, in the order they are asked. */
const SCOPE = [ 'service', 'variation', 'quantity', 'category', 'staff' ];

/** Select has no empty value; this stands for "any" (anyone, any variation). */
const ANY = 'any';

let catalogCache: Promise< Catalog > | null = null;

/** Fetched once per page load, and only for a shortcode with a service option. */
function useCatalog( needed: boolean ) {
	return useAsync< Catalog | null >( () => {
		if ( ! needed ) return Promise.resolve( null );
		catalogCache = catalogCache ?? api.get< Catalog >( 'embed-catalog' ).catch( ( caught ) => {
			catalogCache = null;
			throw caught;
		} );
		return catalogCache;
	}, [ needed ] );
}

export interface ShortcodeBuilderProps {
	tag: string;
	/** Options the embed already decided — the service, category or person it is for. */
	initial?: Record< string, string >;
	className?: string;
}

export function ShortcodeBuilder( { tag, initial = {}, className }: ShortcodeBuilderProps ) {
	const specs = useShortcodeSpec();
	const spec = specs.data?.find( ( s ) => s.tag === tag );
	const [ values, setValues ] = useState< Record< string, string > >( initial );
	const scoped = !! spec?.attrs.some( ( a ) => a.name === 'service' );
	const catalog = useCatalog( scoped ).data ?? null;

	const merged = useMemo( () => ( spec ? resolve( spec, values ) : {} ), [ spec, values ] );

	const shows: EmbedShows = merged.service ? 'service' : merged.category ? 'category' : 'all';
	const chosen = catalog?.services.find( ( s ) => String( s.id ) === merged.service ) ?? null;
	const scopeId = shows === 'service' ? merged.service : shows === 'category' ? merged.category : null;
	const team = useMemo(
		() =>
			catalog
				? ( teamFor( catalog, shows, scopeId ) as Catalog[ 'team' ] ).filter( ( p ) => ( p.active !== false && p.bookable !== false ) || String( p.id ) === merged.staff )
				: [],
		[ catalog, shows, scopeId, merged.staff ]
	);

	// Clear the team member when they no longer offer what it shows.
	useEffect( () => {
		if ( catalog && merged.staff && ! team.some( ( p ) => String( p.id ) === merged.staff ) ) {
			setValues( ( current ) => ( { ...current, staff: '' } ) );
		}
	}, [ catalog, team, merged.staff ] );

	// Until the spec loads (or if it fails), show the shortcode with the item's own options.
	if ( ! spec ) {
		const fallback = `[${ [ tag, ...Object.entries( initial ).map( ( [ k, v ] ) => `${ k }="${ v }"` ) ].join( ' ' ) }]`;
		return <CopyField label="Shortcode" value={ fallback } mono className={ className } />;
	}

	/** `null` unsets an option: the shortcode leaves it out. */
	const set = ( name: string, value: string | null ) =>
		setValues( ( current ) => {
			if ( value !== null ) return { ...current, [ name ]: value };
			const rest = { ...current };
			delete rest[ name ];
			return rest;
		} );
	const setService = ( id: string ) => setValues( ( current ) => ( { ...current, service: id, variation: '', quantity: '' } ) );
	const choose = ( next: EmbedShows ) =>
		setValues( ( current ) => ( {
			...current,
			service: next === 'service' ? current.service || initial.service || String( catalog?.services.find( ( s ) => s.active !== false )?.id ?? '' ) : '',
			variation: '',
			quantity: '',
			category: next === 'category' ? current.category || initial.category || String( catalog?.categories[ 0 ]?.id ?? '' ) : '',
		} ) );

	// Variation and quantity apply only to a service that has them.
	const applies = ( attr: ShortcodeAttr ) => {
		switch ( attr.name ) {
			case 'service':
				return shows === 'service';
			case 'variation':
				return shows === 'service' && !! chosen?.versions.length;
			case 'quantity':
				return shows === 'service' && !! chosen?.quantity;
			case 'category':
				return shows === 'category';
			default:
				return true;
		}
	};

	const scopeAttrs = scoped ? spec.attrs.filter( ( a ) => SCOPE.includes( a.name ) && applies( a ) ) : [];
	const rest = spec.attrs.filter( ( a ) => ! ( scoped && SCOPE.includes( a.name ) ) && visible( a, merged ) );

	const control = ( attr: ShortcodeAttr ) => (
		<AttrControl
			key={ attr.name }
			attr={ attr }
			value={ merged[ attr.name ] ?? '' }
			isSet={ attr.name in values }
			onChange={ ( v ) => ( attr.name === 'service' ? setService( v ?? '' ) : set( attr.name, v ) ) }
			catalog={ catalog }
			chosen={ chosen }
			team={ team }
		/>
	);

	return (
		<div className={ cn( 'grid gap-4', className ) }>
			<CopyField label="Shortcode" value={ buildShortcode( spec, values ) } mono />

			<fieldset className="m-0 grid gap-3.5 rounded-card border border-border-subtle p-4">
				<legend className="px-1 text-label font-semibold text-foreground">Options</legend>
				<p className="m-0 -mt-1 text-caption leading-normal text-muted-foreground-2">The shortcode above updates as you change these.</p>
				<div className="grid gap-3.5 sm:grid-cols-2">
					{ scoped ? <Select label="Shows" aria-label="Shows" value={ shows } options={ [ ...SHOWS_OPTIONS ] } onChange={ ( v ) => choose( v as EmbedShows ) } /> : null }
					{ scopeAttrs.map( control ) }
					{ rest.map( control ) }
				</div>
			</fieldset>
		</div>
	);
}

interface AttrControlProps {
	attr: ShortcodeAttr;
	value: string;
	/** Set in this builder (for a `null` default: whether it is written at all). */
	isSet: boolean;
	/** `null` unsets it. */
	onChange: ( value: string | null ) => void;
	catalog: Catalog | null;
	chosen: Catalog[ 'services' ][ number ] | null;
	team: Catalog[ 'team' ];
}

function AttrControl( { attr, value, isSet, onChange, catalog, chosen, team }: AttrControlProps ) {
	const wide = attr.type === 'switch' || attr.type === 'text';
	const span = wide ? 'sm:col-span-2' : '';

	switch ( attr.type ) {
		case 'switch':
			return (
				<div className={ span }>
					<Switch label={ attr.label } checked={ value === 'yes' } onChange={ ( on ) => onChange( on ? 'yes' : 'no' ) } />
				</div>
			);
		case 'select':
			return (
				<div className={ span }>
					<Select label={ attr.label } aria-label={ attr.label } value={ value } options={ attr.options ?? [] } onChange={ onChange } />
					{ attr.help ? <p className="m-0 mt-1.5 text-caption text-muted-foreground-2">{ attr.help }</p> : null }
				</div>
			);
		case 'service':
			return (
				<Select
					label="Service"
					aria-label="Service"
					value={ value || undefined }
					options={ ( catalog?.services ?? [] ).map( ( s ) => ( { label: s.active === false ? `${ s.name } (hidden)` : s.name, value: String( s.id ) } ) ) }
					placeholder="Choose a service"
					onChange={ onChange }
				/>
			);
		case 'variation':
			return (
				<Select
					label={ attr.label }
					aria-label={ attr.label }
					value={ value || ANY }
					options={ [ { label: 'Any version — customers choose', value: ANY }, ...( chosen?.versions ?? [] ).map( ( v ) => ( { label: v.name, value: String( v.id ) } ) ) ] }
					onChange={ ( v ) => onChange( v === ANY ? '' : v ) }
				/>
			);
		case 'quantity': {
			const q = chosen?.quantity;
			const least = String( q?.min ?? 1 );
			return (
				<ClampedNumber
					label={ attr.label }
					min={ q?.min }
					max={ q?.max }
					value={ value || least }
					fallback={ least }
					hint={ q ? `${ q.min }–${ q.max }. ${ attr.help ?? '' }` : attr.help }
					// The minimum is the default, so it is not written.
					onCommit={ ( next ) => onChange( ! q || next === '' || Number( next ) === q.min ? '' : next ) }
				/>
			);
		}
		case 'category':
			return (
				<Select
					label="Category"
					aria-label="Category"
					value={ value || undefined }
					options={ ( catalog?.categories ?? [] ).map( ( c ) => ( { label: c.name, value: String( c.id ) } ) ) }
					placeholder="Choose a category"
					onChange={ onChange }
				/>
			);
		case 'member':
			return (
				<Select
					label={ attr.label }
					aria-label={ attr.label }
					value={ value || ANY }
					options={ [ { label: 'Anyone — customers choose', value: ANY }, ...team.map( ( m ) => ( { label: m.name, value: String( m.id ) } ) ) ] }
					onChange={ ( v ) => onChange( v === ANY ? '' : v ) }
				/>
			);
		case 'number':
			return (
				<ClampedNumber
					label={ attr.label }
					min={ attr.min }
					max={ attr.max }
					value={ value }
					fallback={ attr.default ?? '' }
					hint={ attr.help }
					onCommit={ onChange }
				/>
			);
		default:
			// A `null` default (a content title) has three states, as in the block:
			// left out (the booking site's own), a text, or none (`title=""`).
			if ( attr.default === null ) {
				const shown = ! ( isSet && value === '' );
				return (
					<div className={ cn( span, 'grid gap-2' ) }>
						<Switch label={ `Show a ${ attr.label.toLowerCase() }` } checked={ shown } onChange={ ( on ) => onChange( on ? null : '' ) } />
						{ shown ? (
							<TextField
								label={ attr.label }
								value={ value }
								hint={ attr.help }
								placeholder={ attr.placeholder }
								onChange={ ( e ) => onChange( e.target.value === '' ? null : e.target.value ) }
							/>
						) : null }
					</div>
				);
			}
			return (
				<div className={ span }>
					<TextField
						label={ attr.label }
						value={ value }
						hint={ attr.help }
						placeholder={ attr.placeholder }
						onChange={ ( e ) => onChange( e.target.value ) }
					/>
				</div>
			);
	}
}

interface ClampedNumberProps {
	label: string;
	value: string;
	min?: number;
	max?: number;
	/** What an emptied field goes back to when it loses focus. */
	fallback: string;
	hint?: string;
	onCommit: ( value: string ) => void;
}

/**
 * A number field that commits only in-range values while typing (so "12" can
 * be typed with a minimum of 2) and clamps on blur.
 */
function ClampedNumber( { label, value, min, max, fallback, hint, onCommit }: ClampedNumberProps ) {
	const [ text, setText ] = useState( value );
	useEffect( () => setText( value ), [ value ] );

	return (
		<TextField
			label={ label }
			type="number"
			inputMode="numeric"
			min={ min }
			max={ max }
			value={ text }
			hint={ hint }
			onChange={ ( e ) => {
				const raw = e.target.value.replace( /[^\d]/g, '' );
				setText( raw );
				if ( raw !== '' && clamp( Number( raw ), min, max ) === Number( raw ) ) onCommit( String( Number( raw ) ) );
			} }
			onBlur={ () => {
				const next = text === '' ? fallback : String( clamp( Number( text ), min, max ) );
				setText( next );
				onCommit( next );
			} }
		/>
	);
}

const VALUES: Partial< Record< ShortcodeAttr[ 'type' ], string > > = {
	service: 'a service ID',
	variation: 'a version’s ID',
	quantity: 'a number, within the service’s limits',
	category: 'a category ID',
	member: 'a team member ID',
	switch: 'yes or no',
	text: 'any text',
};

function valuesOf( attr: ShortcodeAttr ): string {
	if ( attr.options ) return attr.options.map( ( o ) => o.value ).join( ', ' );
	if ( attr.type === 'number' ) return attr.min != null && attr.max != null ? `${ attr.min }–${ attr.max }` : 'a number';
	return VALUES[ attr.type ] ?? '';
}

export function ShortcodeReference() {
	const specs = useShortcodeSpec();

	if ( ! specs.data ) {
		return <p className="m-0 text-body-sm text-muted-foreground">{ specs.error ? 'Couldn’t load the list of shortcodes.' : 'Loading…' }</p>;
	}

	return (
		<div className="grid gap-6">
			<p className="m-0 text-body-sm leading-normal text-muted-foreground">
				Everything here can also be added with a shortcode, in widget areas, page builders, and theme templates. The easiest
				way to get one is to click <strong className="font-semibold text-foreground">Embed</strong> on the item (on Add to site,
				Services, Categories, or Team). It builds the shortcode as you choose options, IDs included. In the booking shortcode,
				use service (plus variation and quantity) or category to narrow what it shows, or leave both out for all services. Use
				staff to pick a team member.
			</p>
			{ specs.data.map( ( spec ) => (
				<section key={ spec.tag } className="grid gap-2.5" id={ `shortcode-${ spec.tag }` }>
					<div className="grid gap-0.5">
						<h3 className="m-0 text-body font-semibold text-foreground">{ spec.title }</h3>
						<p className="m-0 text-body-sm leading-normal text-muted-foreground">{ spec.description }</p>
					</div>
					<CopyField value={ `[${ spec.tag }]` } mono aria-label={ `${ spec.title } shortcode` } />
					{ spec.attrs.length ? (
						<div className="overflow-x-auto rounded-card border border-border-subtle">
							<table className="w-full min-w-[520px] border-collapse text-left text-body-sm">
								<thead className="bg-muted/50 text-caption font-semibold uppercase tracking-wide text-muted-foreground-2">
									<tr>
										<th className="px-3 py-2 font-semibold">Option</th>
										<th className="px-3 py-2 font-semibold">What it does</th>
										<th className="px-3 py-2 font-semibold">Values</th>
										<th className="px-3 py-2 font-semibold">Default</th>
									</tr>
								</thead>
								<tbody>
									{ spec.attrs.map( ( attr ) => (
										<tr key={ attr.name } className="border-t border-border-subtle align-top">
											<td className="whitespace-nowrap px-3 py-2 font-mono text-caption text-foreground">{ attr.name }</td>
											<td className="px-3 py-2 text-foreground">
												{ attr.label }
												{ attr.help ? <span className="block text-caption text-muted-foreground-2">{ attr.help }</span> : null }
											</td>
											<td className="px-3 py-2 text-muted-foreground">{ valuesOf( attr ) }</td>
											<td className="whitespace-nowrap px-3 py-2 font-mono text-caption text-muted-foreground">
												{ attr.required ? 'required' : attr.default === null ? attr.placeholder ?? '—' : attr.default === '' ? '—' : attr.default }
											</td>
										</tr>
									) ) }
								</tbody>
							</table>
						</div>
					) : null }
				</section>
			) ) }
		</div>
	);
}