/**
 * Settings → Integrations → Blocks, shortcodes & template tags.
 *
 * One tile per page element: shortcode, block markup or PHP, with a copy button and the
 * element's options. Names, descriptions and fields come from the element registry
 * (`config.elements`); add-ons list extra shortcodes through `streamsera_admin_data` (`shortcodes`).
 */
import { __, sprintf } from '@wordpress/i18n';
import { useMemo, useState } from '@wordpress/element';
import { registerSettingsSection } from '../../player/extensions';
import { Section, I } from '../ui';
import { config } from '../api';

type Field = {
	key: string;
	label: string;
	type: string;
	default: string | number | boolean;
	options: Array< [ string, string ] >;
};
type Element = {
	id: string;
	label: string;
	description: string;
	block: string;
	pro?: boolean;
	fields: Field[];
};
type Format = 'shortcode' | 'block' | 'php';
type Item = {
	id: string;
	label: string;
	description: string;
	cat: string;
	icon: string;
	shortcode: string;
	tag: string;
	block: string;
	fields: Field[];
};

const CATS: Record< string, { label: string; icon: string } > = {
	player: { label: __( 'Player', 'streamsera' ), icon: 'player' },
	stations: { label: __( 'Stations', 'streamsera' ), icon: 'broadcast' },
	schedule: { label: __( 'Schedule', 'streamsera' ), icon: 'calendar' },
	hosts: { label: __( 'Hosts', 'streamsera' ), icon: 'listeners' },
	more: { label: __( 'More', 'streamsera' ), icon: 'grid' },
};

/** Element id → [ category, icon ]. */
const META: Record< string, [ string, string ] > = {
	player: [ 'player', 'player' ],
	'now-playing': [ 'player', 'music' ],
	'listen-button': [ 'player', 'button' ],
	'recently-played': [ 'player', 'history' ],
	history: [ 'player', 'search' ],
	charts: [ 'player', 'like' ],
	station: [ 'stations', 'broadcast' ],
	'station-list': [ 'stations', 'grid' ],
	schedule: [ 'schedule', 'calendar' ],
	'now-next': [ 'schedule', 'clock' ],
	show: [ 'schedule', 'megaphone' ],
	'show-list': [ 'schedule', 'list' ],
	host: [ 'hosts', 'user' ],
	'host-list': [ 'hosts', 'listeners' ],
};

const ALIAS: Record< string, string > = {
	'': 'player',
	stations: 'station-list',
	shows: 'show-list',
	hosts: 'host-list',
};

function elementId( tag: string ) {
	const id = tag.replace( /^streamsera_?/, '' ).replace( /_/g, '-' );
	return ALIAS[ id ] ?? id;
}

/**
 * Attributes written in an example shortcode, e.g. [ [ 'style', 'card|horizontal' ] ].
 * @param sc
 */
function attrs( sc: string ): Array< [ string, string ] > {
	const out: Array< [ string, string ] > = [];
	sc.replace( /(\w+)="([^"]*)"/g, ( _m, k, v ) => {
		out.push( [ k, v ] );
		return '';
	} );
	return out;
}

function fieldFor( item: Item, attr: string ) {
	const keys =
		'id' === attr ? [ 'player' ] : [ attr, `show_${ attr }`, `${ attr }s` ];
	return item.fields.find( ( f ) => keys.includes( f.key ) );
}

/**
 * The shortcode with only the chosen attributes.
 * @param item
 * @param on
 */
function build( item: Item, on: string[] ) {
	const parts = attrs( item.shortcode )
		.filter( ( [ k ] ) => on.includes( k ) )
		.map( ( [ k, v ] ) => `${ k }="${ v.split( '|' )[ 0 ] }"` );
	return `[${ item.tag }${ parts.length ? ' ' + parts.join( ' ' ) : '' }]`;
}

function codeFor( item: Item, format: Format, sc: string ) {
	if ( 'block' === format ) {
		return item.block ? `<!-- wp:${ item.block } /-->` : '';
	}
	if ( 'php' === format ) {
		return 'player' === item.id
			? `<?php streamsera_player( 1, [ 'layout' => 'card' ] ); ?>`
			: `<?php echo do_shortcode( '${ sc }' ); ?>`;
	}
	return sc;
}

/**
 * Coloured shortcode: tag, attribute names and values.
 * @param root0
 * @param root0.code
 * @param root0.format
 */
function Pretty( { code, format }: { code: string; format: Format } ) {
	if ( 'shortcode' !== format ) {
		return <span className="ss-sc__plain">{ code }</span>;
	}
	const [ , head = '', rest = '' ] = code.match( /^\[(\S+)\s?(.*)\]$/ ) || [];
	const parts: any[] = [];
	let last = 0;
	rest.replace( /(\w+)="([^"]*)"/g, ( m, k, v, at ) => {
		parts.push( rest.slice( last, at ) );
		parts.push(
			<span key={ at }>
				<span className="ss-sc__k">{ k }</span>=
				<span className="ss-sc__v">&quot;{ v }&quot;</span>
			</span>
		);
		last = at + m.length;
		return m;
	} );
	parts.push( rest.slice( last ) );
	return (
		<>
			<span className="ss-sc__p">[</span>
			<span className="ss-sc__t">{ head }</span>
			{ rest ? ' ' : '' }
			{ parts }
			<span className="ss-sc__p">]</span>
		</>
	);
}

function CopyBtn( {
	code,
	compact = false,
}: {
	code: string;
	compact?: boolean;
} ) {
	const [ done, setDone ] = useState( false );
	const copy = async () => {
		try {
			await navigator.clipboard.writeText( code );
		} catch {
			const ta = document.createElement( 'textarea' );
			ta.value = code;
			document.body.appendChild( ta );
			ta.select();
			document.execCommand( 'copy' );
			ta.remove();
		}
		setDone( true );
		setTimeout( () => setDone( false ), 1600 );
	};
	return (
		<button
			type="button"
			className={ `ss-sc__copy ${ compact ? 'is-compact' : '' } ${
				done ? 'is-done' : ''
			}` }
			onClick={ copy }
			aria-label={
				done ? __( 'Copied', 'streamsera' ) : __( 'Copy', 'streamsera' )
			}
			title={
				done ? __( 'Copied', 'streamsera' ) : __( 'Copy', 'streamsera' )
			}
		>
			<I name={ done ? 'check' : 'copy' } size={ 14 } />
			{ compact
				? null
				: done
				? __( 'Copied', 'streamsera' )
				: __( 'Copy', 'streamsera' ) }
		</button>
	);
}

function Tile( {
	item,
	format,
	open,
	onToggle,
}: {
	item: Item;
	format: Format;
	open: boolean;
	onToggle: () => void;
} ) {
	const all = attrs( item.shortcode );
	const defaults = all.map( ( [ k ] ) => k );
	const [ on, setOn ] = useState< string[] >( defaults );
	const sc = build( item, on );
	const code = codeFor( item, format, sc );
	const changed = on.join() !== defaults.join();
	const flip = ( k: string ) =>
		setOn(
			on.includes( k )
				? on.filter( ( x ) => x !== k )
				: defaults.filter( ( x ) => x === k || on.includes( x ) )
		);
	const rows = all.map( ( [ k, v ] ) => {
		const f = fieldFor( item, k );
		const values = v.includes( '|' )
			? v.split( '|' ).join( ' · ' )
			: f?.options?.length
			? f.options.map( ( o ) => o[ 0 ] ).join( ' · ' )
			: '';
		return {
			k,
			label: f?.label || k,
			values,
			val: v.split( '|' )[ 0 ],
		};
	} );
	const canOpen = rows.length > 0 && 'block' !== format;
	return (
		<div className={ `ss-sc ${ open && canOpen ? 'is-open' : '' }` }>
			<div className="ss-sc__line">
				<span className="ss-sc__ic">
					<I name={ item.icon } size={ 17 } />
				</span>
				<span className="ss-sc__title">
					<span className="ss-sc__name">
						{ item.label }
						<span className="ss-sc__cat">
							{ ( CATS[ item.cat ] || CATS.more ).label }
						</span>
					</span>
					{ item.description ? (
						<span
							className="ss-sc__desc"
							title={ item.description }
						>
							{ item.description }
						</span>
					) : null }
				</span>
				{ code ? (
					<div className="ss-sc__code">
						<code title={ code }>
							<Pretty code={ code } format={ format } />
						</code>
						<CopyBtn code={ code } compact />
					</div>
				) : (
					<p className="ss-sc__none">
						{ __( 'Available as a shortcode only.', 'streamsera' ) }
					</p>
				) }
				<span className="ss-sc__optsw">
					{ canOpen ? (
						<button
							type="button"
							className="ss-sc__opts"
							aria-expanded={ open }
							onClick={ onToggle }
						>
							<I name="sliders" size={ 14 } />
							{ open
								? __( 'Hide options', 'streamsera' )
								: __( 'Options', 'streamsera' ) }
							<I
								name={ open ? 'chevronUp' : 'chevronDown' }
								size={ 14 }
							/>
						</button>
					) : null }
				</span>
			</div>
			{ open && canOpen ? (
				<>
					<div className="ss-sc__attrs" role="table">
						<div className="ss-sc__row is-head" role="row">
							<span className="ss-sc__hattr" role="columnheader">
								{ __( 'Attribute', 'streamsera' ) }
							</span>
							<span className="ss-sc__what" role="columnheader">
								{ __( 'What it does', 'streamsera' ) }
							</span>
							<span className="ss-sc__hval" role="columnheader">
								{ __( 'Value', 'streamsera' ) }
							</span>
						</div>
						{ rows.map( ( r ) => {
							const active = on.includes( r.k );
							return (
								<div
									className={ `ss-sc__row ${
										active ? 'is-on' : ''
									}` }
									key={ r.k }
								>
									<button
										type="button"
										className="ss-sc__attr"
										aria-pressed={ active }
										onClick={ () => flip( r.k ) }
										title={
											active
												? __(
														'Remove from the shortcode',
														'streamsera'
												  )
												: __(
														'Add to the shortcode',
														'streamsera'
												  )
										}
									>
										<span
											className="ss-sc__box"
											aria-hidden="true"
										>
											{ active ? (
												<svg
													width="11"
													height="11"
													viewBox="0 0 24 24"
													fill="none"
													stroke="currentColor"
													strokeWidth="3.2"
													strokeLinecap="round"
													strokeLinejoin="round"
												>
													<path d="M5 12.5 10 17.5 19 7" />
												</svg>
											) : null }
										</span>
										{ r.k }
									</button>
									<span className="ss-sc__what">
										{ r.label }
										{ r.values ? (
											<em>{ r.values }</em>
										) : null }
									</span>
									<code className="ss-sc__val">
										&quot;{ r.val }&quot;
									</code>
								</div>
							);
						} ) }
					</div>
					<div className="ss-sc__foot">
						<I name="info" size={ 14 } />
						<span>
							{ __(
								'Tick an attribute to add it to the shortcode — Copy takes the shortcode exactly as shown.',
								'streamsera'
							) }
						</span>
						{ changed ? (
							<button
								type="button"
								onClick={ () => setOn( defaults ) }
							>
								<I name="undo" size={ 13 } />
								{ __( 'Reset', 'streamsera' ) }
							</button>
						) : null }
					</div>
				</>
			) : null }
		</div>
	);
}

const CORE_SHORTCODES: Array< [ string, string ] > = [
	[ __( 'Player', 'streamsera' ), '[streamsera id="1" layout="card"]' ],
	[
		__( 'Now Playing', 'streamsera' ),
		'[streamsera_now_playing station="" artwork="1" listeners="0" compact="0"]',
	],
	[
		__( 'Listen Button', 'streamsera' ),
		'[streamsera_listen_button label="Listen live" target="listen" style="fill|outline|pill" size="md"]',
	],
	[
		__( 'Station', 'streamsera' ),
		'[streamsera_station station="" style="card|horizontal"]',
	],
	[ __( 'Station List', 'streamsera' ), '[streamsera_stations columns="3"]' ],
];

const VISIBLE = 6;

function EmbeddingSection() {
	const format: Format = 'shortcode';
	const [ cat, setCat ] = useState( 'all' );
	const [ q, setQ ] = useState( '' );
	const [ open, setOpen ] = useState< string >( '' );
	const [ all, setAll ] = useState( false );

	const items = useMemo( () => {
		const elements = ( ( config as any ).elements || [] ) as Element[];
		const list = [
			...CORE_SHORTCODES,
			...( ( ( config as any ).shortcodes || [] ) as Array<
				[ string, string ]
			> ),
		];
		const seen = new Set< string >();
		return list
			.map( ( [ label, sc ] ): Item | null => {
				const tag = ( sc.match( /^\[(\S+)/ ) || [] )[ 1 ] || '';
				if ( ! tag || seen.has( tag ) ) {
					return null;
				}
				seen.add( tag );
				const id = elementId( tag );
				const el = elements.find( ( e ) => e.id === id );
				const [ c, icon ] = META[ id ] || [ 'more', 'code' ];
				return {
					id,
					label: el?.label || label,
					description: el?.description || '',
					cat: c,
					icon,
					shortcode: sc,
					tag,
					block: el?.block || '',
					fields: el?.fields || [],
				};
			} )
			.filter( Boolean ) as Item[];
	}, [] );

	const counts = useMemo( () => {
		const n: Record< string, number > = { all: items.length };
		items.forEach( ( i ) => ( n[ i.cat ] = ( n[ i.cat ] || 0 ) + 1 ) );
		return n;
	}, [ items ] );

	const needle = q.trim().toLowerCase();
	const shown = items.filter(
		( i ) =>
			( 'all' === cat || i.cat === cat ) &&
			( ! needle ||
				`${ i.label } ${ i.description } ${ i.tag } ${ i.block }`
					.toLowerCase()
					.includes( needle ) )
	);
	const limited = all || needle || 'all' !== cat;
	const visible = limited ? shown : shown.slice( 0, VISIBLE );

	return (
		<Section
			title={ __( 'Shortcodes', 'streamsera' ) }
			description={ __(
				'Paste one into any post, page, widget or page builder. Each is also a block in the “StreamSera” category.',
				'streamsera'
			) }
			icon="code"
		>
			<div className="ss-scs">
				<div className="ss-scs__bar">
					<div className="ss-scs__search">
						<I name="search" size={ 16 } />
						<input
							type="search"
							value={ q }
							onChange={ ( e ) => setQ( e.target.value ) }
							placeholder={ __(
								'Filter components',
								'streamsera'
							) }
							aria-label={ __(
								'Filter components',
								'streamsera'
							) }
						/>
					</div>
					<div
						className="ss-scs__cats"
						role="radiogroup"
						aria-label={ __( 'Category', 'streamsera' ) }
					>
						{ [ 'all', ...Object.keys( CATS ) ]
							.filter( ( c ) => 'all' === c || counts[ c ] )
							.map( ( c ) => (
								<button
									key={ c }
									type="button"
									role="radio"
									aria-checked={ cat === c }
									className={ cat === c ? 'is-on' : '' }
									onClick={ () => setCat( c ) }
								>
									<I
										name={
											'all' === c
												? 'grid'
												: CATS[ c ].icon
										}
										size={ 15 }
									/>
									{ 'all' === c
										? __( 'All', 'streamsera' )
										: CATS[ c ].label }
									<span>{ counts[ c ] }</span>
								</button>
							) ) }
					</div>
				</div>
				<div className="ss-scs__grid">
					{ visible.map( ( item ) => (
						<Tile
							key={ item.tag }
							item={ item }
							format={ format }
							open={ open === item.tag }
							onToggle={ () =>
								setOpen( open === item.tag ? '' : item.tag )
							}
						/>
					) ) }
					{ ! shown.length ? (
						<p className="ss-scs__empty">
							{ __(
								'Nothing matches that filter.',
								'streamsera'
							) }
						</p>
					) : null }
				</div>
				{ ! limited && shown.length > VISIBLE ? (
					<div className="ss-scs__more">
						<button type="button" onClick={ () => setAll( true ) }>
							<I name="plus" size={ 15 } />
							{ sprintf(
								/* translators: %d: number of hidden components. */
								__( 'Show %d more', 'streamsera' ),
								shown.length - VISIBLE
							) }
							<I name="chevronDown" size={ 15 } />
						</button>
					</div>
				) : null }
			</div>
		</Section>
	);
}

registerSettingsSection( {
	id: 'embedding',
	label: __( 'Shortcodes', 'streamsera' ),
	icon: 'code',
	order: 10,
	group: 'integrations',
	hint: __( 'Copy a shortcode for any page', 'streamsera' ),
	Component: EmbeddingSection,
} );