/**
 * Embed dialog: one side menu of ways to place a player (preview, page, block,
 * shortcode, theme code, plus tabs registered by add-ons)
 * and a panel per option. Layout follows the "Embed dialog" boards of the builder
 * redesign canvas.
 */
import { __, sprintf } from '@wordpress/i18n';
import { Modal, Spinner } from '@wordpress/components';
import { useEffect, useMemo, useRef, useState } from '@wordpress/element';
import type { ReactNode } from 'react';
import {
	config,
	ss,
	openPreview,
	previewUrl,
	stations as stationsApi,
} from './api';
import { I } from './ui';
import { getEmbedTabs, onExtensionsChange } from '../player/extensions';

type Id = string | number;

/* ------------------------------------------------------------ primitives */

function copyText( text: string ): Promise< void > {
	if ( window.isSecureContext && navigator.clipboard?.writeText ) {
		return navigator.clipboard.writeText( text );
	}
	return new Promise( ( resolve, reject ) => {
		const ta = document.createElement( 'textarea' );
		ta.value = text;
		ta.setAttribute( 'readonly', '' );
		ta.style.position = 'fixed';
		ta.style.opacity = '0';
		document.body.appendChild( ta );
		ta.select();
		try {
			document.execCommand( 'copy' );
			resolve();
		} catch ( e ) {
			reject( e );
		}
		ta.remove();
	} );
}

/** Monospace snippet with a Copy button (works on http:// too). */
export function CodeBox( {
	code,
	large = false,
	wrap = false,
	compact = false,
}: {
	code: string;
	large?: boolean;
	wrap?: boolean;
	compact?: boolean;
} ) {
	const [ copied, setCopied ] = useState( false );
	const copy = () =>
		copyText( code ).then( () => {
			setCopied( true );
			window.setTimeout( () => setCopied( false ), 1600 );
		} );
	return (
		<div
			className={ `ss-em-code${ large ? ' is-large' : '' }${
				wrap ? ' is-wrap' : ''
			}${ compact ? ' is-compact' : '' }` }
		>
			<code>{ code }</code>
			<button
				type="button"
				onClick={ copy }
				className={ copied ? 'is-copied' : '' }
			>
				<I name={ copied ? 'check' : 'copy' } size={ 13 } />
				{ copied
					? __( 'Copied', 'streamsera' )
					: __( 'Copy', 'streamsera' ) }
			</button>
		</div>
	);
}

function Seg< T extends string >( {
	value,
	options,
	onChange,
	label,
}: {
	value: T;
	options: { value: T; label: string; icon?: string }[];
	onChange: ( v: T ) => void;
	label: string;
} ) {
	return (
		<span className="ss-em-seg" role="radiogroup" aria-label={ label }>
			{ options.map( ( o ) => (
				<button
					key={ o.value }
					type="button"
					role="radio"
					aria-checked={ value === o.value }
					className={ value === o.value ? 'is-active' : '' }
					onClick={ () => onChange( o.value ) }
				>
					{ o.icon ? <I name={ o.icon } size={ 13 } /> : null }
					{ o.label }
				</button>
			) ) }
		</span>
	);
}

function Hint( { children }: { children: ReactNode } ) {
	return (
		<div className="ss-em-hint">
			<I name="info" size={ 14 } />
			<span>{ children }</span>
		</div>
	);
}

function Field( {
	label,
	note,
	children,
}: {
	label: string;
	note?: string;
	children: ReactNode;
} ) {
	return (
		<div className="ss-em-field">
			<span className="ss-em-lbl">
				{ label }
				{ note ? <small>{ note }</small> : null }
			</span>
			{ children }
		</div>
	);
}

function Toggle( {
	checked,
	onChange,
	label,
}: {
	checked: boolean;
	onChange: ( v: boolean ) => void;
	label: string;
} ) {
	return (
		<button
			type="button"
			role="switch"
			aria-checked={ checked }
			aria-label={ label }
			className={ `ss-em-switch${ checked ? ' is-on' : '' }` }
			onClick={ () => onChange( ! checked ) }
		>
			<i />
		</button>
	);
}

/* ------------------------------------------------------------- Preview */

function PreviewPanel( { playerId }: { playerId: Id } ) {
	const [ theme, setTheme ] = useState< '' | 'light' | 'dark' >( '' );
	const [ device, setDevice ] = useState< '' | 'tablet' | 'phone' >( '' );
	const url = previewUrl( playerId, theme, device );
	return (
		<>
			<div className="ss-em-preview">
				<div className="ss-em-thumb" aria-hidden="true">
					<iframe
						key={ url }
						src={ url }
						title={ __( 'Player preview', 'streamsera' ) }
						tabIndex={ -1 }
						loading="lazy"
					/>
				</div>
				<div className="ss-em-preview__side">
					<button
						type="button"
						className="ss-em-btn is-primary is-lg"
						onClick={ () => openPreview( playerId, theme, device ) }
					>
						<I name="external" size={ 15 } />
						{ __( 'Open preview in a new tab', 'streamsera' ) }
					</button>
					<Field label={ __( 'Colour scheme', 'streamsera' ) }>
						<Seg
							label={ __( 'Colour scheme', 'streamsera' ) }
							value={ theme }
							onChange={ ( v: string ) => setTheme( v as any ) }
							options={ [
								{
									value: '',
									label: __( 'Player default', 'streamsera' ),
								},
								{
									value: 'light',
									label: __( 'Light', 'streamsera' ),
									icon: 'sun',
								},
								{
									value: 'dark',
									label: __( 'Dark', 'streamsera' ),
									icon: 'moon',
								},
							] }
						/>
					</Field>
					<Field label={ __( 'Device', 'streamsera' ) }>
						<Seg
							label={ __( 'Device', 'streamsera' ) }
							value={ device }
							onChange={ ( v: string ) => setDevice( v as any ) }
							options={ [
								{
									value: '',
									label: __( 'Desktop', 'streamsera' ),
								},
								{
									value: 'tablet',
									label: __( 'Tablet', 'streamsera' ),
								},
								{
									value: 'phone',
									label: __( 'Phone', 'streamsera' ),
								},
							] }
						/>
					</Field>
				</div>
			</div>
			<Field label={ __( 'Preview link', 'streamsera' ) }>
				<CodeBox code={ url } />
			</Field>
			<Hint>
				{ __(
					'This link is for editors only. To show the player to visitors, add it to a page or embed it on another site.',
					'streamsera'
				) }
			</Hint>
		</>
	);
}

/* ---------------------------------------------------------- Add to page */

type Mode = 'existing' | 'new';

function AddToPage( {
	playerId,
	title,
	onClose,
}: {
	playerId: Id;
	title?: string;
	onClose: () => void;
} ) {
	const [ mode, setMode ] = useState< Mode >( 'existing' );
	const [ search, setSearch ] = useState( '' );
	const [ pages, setPages ] = useState< any[] >( [] );
	const [ loading, setLoading ] = useState( false );
	const [ page, setPage ] = useState< any >( null );
	const [ position, setPosition ] = useState< 'append' | 'prepend' >(
		'append'
	);
	const [ newTitle, setNewTitle ] = useState( title || '' );
	const [ status, setStatus ] = useState< 'publish' | 'draft' >( 'publish' );
	const [ busy, setBusy ] = useState( false );
	const [ error, setError ] = useState( '' );
	const [ done, setDone ] = useState< any >( null );
	const timer = useRef< number | null >( null );

	useEffect( () => {
		if ( mode !== 'existing' ) {
			return;
		}
		setLoading( true );
		if ( timer.current ) {
			window.clearTimeout( timer.current );
		}
		timer.current = window.setTimeout( () => {
			ss.searchPages( search )
				.then( ( list ) => setPages( list || [] ) )
				.catch( () => setPages( [] ) )
				.finally( () => setLoading( false ) );
		}, 200 );
		return () => {
			if ( timer.current ) {
				window.clearTimeout( timer.current );
			}
		};
	}, [ search, mode ] );

	const pageTitle = ( p: any ) =>
		p?.title?.raw || p?.title?.rendered || `#${ p?.id }`;
	const pathOf = ( link: string ) => {
		try {
			// Plain permalinks: the page is in the query (?page_id=5), not the path.
			const u = new URL( link );
			return u.pathname + u.search;
		} catch ( e ) {
			return '';
		}
	};

	const submit = async () => {
		setBusy( true );
		setError( '' );
		try {
			const res = await ss.embedToPage( {
				player: Number( playerId ),
				...( mode === 'existing'
					? { page_id: page?.id, position }
					: { title: newTitle, status } ),
			} );
			setDone( res );
		} catch ( e: any ) {
			setError(
				e?.message || __( 'Could not add the player.', 'streamsera' )
			);
		}
		setBusy( false );
	};

	if ( done ) {
		return (
			<div className="ss-em-done">
				<span className="ss-em-done__icon">
					<I name="check" size={ 22 } />
				</span>
				<strong>
					{ done.already
						? __(
								'This page already has the player.',
								'streamsera'
						  )
						: sprintf(
								// translators: %s: page title
								__( 'Player added to “%s”.', 'streamsera' ),
								done.title
						  ) }
				</strong>
				<span>
					{ done.status === 'publish'
						? __( 'The page is live.', 'streamsera' )
						: __(
								'The page is a draft — publish it when ready.',
								'streamsera'
						  ) }
				</span>
				<div className="ss-em-done__actions">
					<a
						className="ss-em-btn"
						href={ done.edit_link }
						target="_blank"
						rel="noopener noreferrer"
					>
						<I name="edit" size={ 14 } />
						{ __( 'Edit page', 'streamsera' ) }
					</a>
					{ done.view_link ? (
						<a
							className="ss-em-btn"
							href={ done.view_link }
							target="_blank"
							rel="noopener noreferrer"
						>
							<I name="external" size={ 14 } />
							{ __( 'View page', 'streamsera' ) }
						</a>
					) : null }
					<button
						type="button"
						className="ss-em-btn is-primary"
						onClick={ onClose }
					>
						<I name="check" size={ 14 } />
						{ __( 'Done', 'streamsera' ) }
					</button>
				</div>
			</div>
		);
	}

	const tiles: { id: Mode; icon: string; label: string; hint: string }[] = [
		{
			id: 'existing',
			icon: 'pages',
			label: __( 'Existing page', 'streamsera' ),
			hint: __( 'Append or prepend the player block', 'streamsera' ),
		},
		{
			id: 'new',
			icon: 'plus',
			label: __( 'New page', 'streamsera' ),
			hint: __( 'A fresh page with just the player', 'streamsera' ),
		},
	];

	const canSubmit =
		! busy && ( mode === 'existing' ? !! page : !! newTitle.trim() );

	return (
		<>
			<div className="ss-em-tiles" role="radiogroup">
				{ tiles.map( ( t ) => (
					<button
						key={ t.id }
						type="button"
						role="radio"
						aria-checked={ mode === t.id }
						className={ `ss-em-tile${
							mode === t.id ? ' is-active' : ''
						}` }
						onClick={ () => setMode( t.id ) }
					>
						<i>
							<I name={ t.icon } size={ 16 } />
						</i>
						<span>
							<b>{ t.label }</b>
							<small>{ t.hint }</small>
						</span>
						<span className="ss-em-radio" />
					</button>
				) ) }
			</div>

			{ mode === 'existing' ? (
				<>
					<div className="ss-em-pagepick">
						<label className="ss-em-search">
							<I name="search" size={ 14 } />
							<input
								type="text"
								value={ search }
								placeholder={ __(
									'Search pages…',
									'streamsera'
								) }
								onChange={ ( e ) =>
									setSearch( e.target.value )
								}
								aria-label={ __(
									'Search pages',
									'streamsera'
								) }
							/>
							{ loading ? <Spinner /> : null }
						</label>
						<ul
							className="ss-em-pages"
							role="listbox"
							aria-label={ __( 'Pages', 'streamsera' ) }
						>
							{ pages.map( ( p ) => (
								<li key={ p.id }>
									<button
										type="button"
										role="option"
										aria-selected={ page?.id === p.id }
										className={
											page?.id === p.id ? 'is-active' : ''
										}
										onClick={ () => setPage( p ) }
									>
										<span className="ss-em-pages__title">
											{ pageTitle( p ) }
										</span>
										<span
											className={ `ss-em-status is-${
												p.status === 'publish'
													? 'ok'
													: 'warn'
											}` }
										>
											{ p.status === 'publish'
												? __(
														'Published',
														'streamsera'
												  )
												: p.status === 'private'
												? __( 'Private', 'streamsera' )
												: __( 'Draft', 'streamsera' ) }
										</span>
										<span className="ss-em-pages__path">
											{ pathOf( p.link ) }
										</span>
									</button>
								</li>
							) ) }
							{ ! loading && ! pages.length ? (
								<li className="ss-em-pages__empty">
									{ __( 'No pages match.', 'streamsera' ) }
								</li>
							) : null }
						</ul>
					</div>
					<div className="ss-em-row">
						<span className="ss-em-lbl">
							{ __( 'Place it', 'streamsera' ) }
						</span>
						<Seg
							label={ __( 'Where on the page', 'streamsera' ) }
							value={ position }
							onChange={ ( v: string ) =>
								setPosition( v as any )
							}
							options={ [
								{
									value: 'append',
									label: __( 'At the end', 'streamsera' ),
								},
								{
									value: 'prepend',
									label: __( 'At the top', 'streamsera' ),
								},
							] }
						/>
						<span className="ss-em-muted">
							{ __(
								'Added as an “StreamSera Player” block — you can move it in the editor later.',
								'streamsera'
							) }
						</span>
					</div>
				</>
			) : (
				<div className="ss-em-grid2">
					<Field label={ __( 'Page title', 'streamsera' ) }>
						<input
							className="ss-em-input"
							type="text"
							value={ newTitle }
							onChange={ ( e ) => setNewTitle( e.target.value ) }
							aria-label={ __( 'Page title', 'streamsera' ) }
						/>
					</Field>
					<Field label={ __( 'Status', 'streamsera' ) }>
						<Seg
							label={ __( 'Status', 'streamsera' ) }
							value={ status }
							onChange={ ( v: string ) => setStatus( v as any ) }
							options={ [
								{
									value: 'publish',
									label: __( 'Published', 'streamsera' ),
								},
								{
									value: 'draft',
									label: __( 'Draft', 'streamsera' ),
								},
							] }
						/>
					</Field>
				</div>
			) }

			{ error ? <div className="ss-em-error">{ error }</div> : null }

			<div className="ss-em-foot">
				<button type="button" className="ss-em-btn" onClick={ onClose }>
					{ __( 'Cancel', 'streamsera' ) }
				</button>
				<button
					type="button"
					className="ss-em-btn is-primary"
					disabled={ ! canSubmit }
					onClick={ submit }
				>
					{ busy ? <Spinner /> : <I name="plus" size={ 14 } /> }
					{ mode === 'existing'
						? page
							? sprintf(
									// translators: %s: page title
									__( 'Add to “%s”', 'streamsera' ),
									pageTitle( page )
							  )
							: __( 'Add to page', 'streamsera' )
						: __( 'Create page', 'streamsera' ) }
				</button>
			</div>
		</>
	);
}

/* --------------------------------------------------------------- Block */

function BlockPanel() {
	const steps = [
		[
			__( 'Open a page or post', 'streamsera' ),
			__(
				'Any page in the block editor — or create a new one.',
				'streamsera'
			),
		],
		[
			__( 'Press + and search “StreamSera”', 'streamsera' ),
			__(
				'The inserter lists the Player, Now playing, Listen button and more.',
				'streamsera'
			),
		],
		[
			__( 'Pick this player', 'streamsera' ),
			__(
				'Choose it in the block sidebar; layout and theme can be overridden per block.',
				'streamsera'
			),
		],
	];
	const blocks = [
		__( 'Now playing', 'streamsera' ),
		__( 'Listen button', 'streamsera' ),
		__( 'Station', 'streamsera' ),
		__( 'Station list', 'streamsera' ),
		...( ( ( config as any ).blockNames || [] ) as string[] ),
	];
	return (
		<>
			<div className="ss-em-steps">
				{ steps.map( ( [ t, d ], i ) => (
					<div key={ i } className="ss-em-step">
						<span className="ss-em-step__n">{ i + 1 }</span>
						<b>{ t }</b>
						<span>{ d }</span>
					</div>
				) ) }
			</div>
			<div className="ss-em-blockdemo">
				<div className="ss-em-inserter" aria-hidden="true">
					<span className="ss-em-inserter__search">
						<I name="search" size={ 12 } />
						StreamSera
					</span>
					<span className="ss-em-inserter__item is-active">
						<i />
						{ __( 'StreamSera Player', 'streamsera' ) }
					</span>
					<span className="ss-em-inserter__item">
						<i />
						{ __( 'Now playing', 'streamsera' ) }
					</span>
					<span className="ss-em-inserter__item">
						<i />
						{ __( 'Listen button', 'streamsera' ) }
					</span>
				</div>
				<div className="ss-em-blockdemo__text">
					<b>{ __( 'Also available as blocks', 'streamsera' ) }</b>
					<div className="ss-em-chips">
						{ blocks.map( ( b ) => (
							<span key={ b } className="ss-em-chip">
								{ b }
							</span>
						) ) }
					</div>
					<span className="ss-em-muted">
						{ __(
							'Page builders: paste the shortcode into any builder’s shortcode or text widget.',
							'streamsera'
						) }
					</span>
				</div>
			</div>
		</>
	);
}

/* ----------------------------------------------------------- Shortcode */

function ShortcodePanel( { playerId }: { playerId: Id } ) {
	const layouts: Record< string, any > = ( config as any ).layouts || {};
	const skins: Record< string, any > = ( config as any ).skins || {};
	const [ stations, setStations ] = useState< any[] >( [] );
	const [ on, setOn ] = useState< Record< string, boolean > >( {} );
	const [ val, setVal ] = useState< Record< string, string > >( {
		layout: Object.keys( layouts )[ 0 ] || 'card',
		skin: Object.keys( skins )[ 0 ] || 'modern',
		theme: 'light',
		station: '',
	} );
	useEffect( () => {
		stationsApi
			.list()
			.then( ( l: any[] ) => {
				setStations( l || [] );
				if ( l?.[ 0 ] ) {
					setVal( ( v ) => ( {
						...v,
						station: String( l[ 0 ].id ),
					} ) );
				}
			} )
			.catch( () => setStations( [] ) );
	}, [] );

	const rows: {
		key: string;
		label: string;
		help: string;
		options: { value: string; label: string }[];
	}[] = [
		{
			key: 'layout',
			label: __( 'Layout', 'streamsera' ),
			help: __( 'Show this player in another layout', 'streamsera' ),
			options: Object.entries( layouts ).map( ( [ k, l ]: any ) => ( {
				value: k,
				label: l?.label || k,
			} ) ),
		},
		{
			key: 'skin',
			label: __( 'Skin', 'streamsera' ),
			help: __( 'Swap the colours and finish', 'streamsera' ),
			options: Object.entries( skins ).map( ( [ k, l ]: any ) => ( {
				value: k,
				label: l?.label || k,
			} ) ),
		},
		{
			key: 'theme',
			label: __( 'Theme', 'streamsera' ),
			help: __( 'Force light or dark', 'streamsera' ),
			options: [
				{ value: 'light', label: __( 'Light', 'streamsera' ) },
				{ value: 'dark', label: __( 'Dark', 'streamsera' ) },
			],
		},
		{
			key: 'station',
			label: __( 'Station', 'streamsera' ),
			help: __( 'Start on a specific station', 'streamsera' ),
			options: stations.map( ( st ) => ( {
				value: String( st.id ),
				label: st.title?.raw || st.title?.rendered || `#${ st.id }`,
			} ) ),
		},
	];

	const attrs = rows
		.filter( ( r ) => on[ r.key ] && val[ r.key ] )
		.map( ( r ) => ` ${ r.key }="${ val[ r.key ] }"` )
		.join( '' );
	const base = `[streamsera id="${ playerId }"]`;
	const result = `[streamsera id="${ playerId }"${ attrs }]`;

	return (
		<>
			<Field label={ __( 'Shortcode', 'streamsera' ) }>
				<CodeBox code={ base } large />
			</Field>
			<div className="ss-em-box">
				<div className="ss-em-box__head">
					<b>{ __( 'Overrides', 'streamsera' ) }</b>
					<span>
						{ __(
							'Turn one on to add it to the shortcode',
							'streamsera'
						) }
					</span>
				</div>
				<div className="ss-em-overrides">
					{ rows.map( ( r ) => (
						<div
							key={ r.key }
							className={ `ss-em-override${
								on[ r.key ] ? ' is-on' : ''
							}` }
						>
							<Toggle
								checked={ !! on[ r.key ] }
								onChange={ ( v ) =>
									setOn( ( o ) => ( { ...o, [ r.key ]: v } ) )
								}
								label={ r.label }
							/>
							<span className="ss-em-override__text">
								<b>{ r.label }</b>
								<small>{ r.help }</small>
							</span>
							{ on[ r.key ] ? (
								<select
									className="ss-em-select"
									value={ val[ r.key ] }
									onChange={ ( e ) =>
										setVal( ( v ) => ( {
											...v,
											[ r.key ]: e.target.value,
										} ) )
									}
									aria-label={ r.label }
								>
									{ r.options.map( ( o ) => (
										<option
											key={ o.value }
											value={ o.value }
										>
											{ o.label }
										</option>
									) ) }
								</select>
							) : (
								<span className="ss-em-chip is-mono is-off">
									{ `${ r.key }="…"` }
								</span>
							) }
						</div>
					) ) }
				</div>
			</div>
			{ attrs ? (
				<Field label={ __( 'Result', 'streamsera' ) }>
					<CodeBox code={ result } />
				</Field>
			) : null }
		</>
	);
}

/* ----------------------------------------------------------------- modal */

interface TabDef {
	name: string;
	label: string;
	hint: string;
	icon: string;
	heading: string;
	description: string;
	action?: ReactNode;
}

export default function EmbedModal( {
	playerId,
	title,
	onClose,
}: {
	playerId: Id;
	title?: string;
	onClose: () => void;
} ) {
	// Add-ons register extra tabs; re-render when they arrive.
	const [ , bump ] = useState( 0 );
	useEffect( () => onExtensionsChange( () => bump( ( n ) => n + 1 ) ), [] );
	const [ tab, setTab ] = useState(
		config.canEditPages === false ? 'block' : 'page'
	);
	const [ themeLang, setThemeLang ] = useState< 'php' | 'js' >( 'php' );
	const extra = getEmbedTabs();

	const tabs: TabDef[] = useMemo(
		() =>
			[
				{
					name: 'preview',
					label: __( 'Preview', 'streamsera' ),
					hint: __( 'Open on a blank page', 'streamsera' ),
					icon: 'eye',
					heading: __( 'Preview on a blank page', 'streamsera' ),
					description: __(
						'Opens the last saved version exactly as the frontend renders it — outside the builder, in a new tab. Drafts included; only logged-in editors can open it.',
						'streamsera'
					),
				},
				{
					name: 'page',
					label: __( 'Add to page', 'streamsera' ),
					hint: __( 'Insert into a page', 'streamsera' ),
					icon: 'pages',
					heading: __( 'Add to a page', 'streamsera' ),
					description: __(
						'Insert the player into a page you already have, or create a new page with the player on it.',
						'streamsera'
					),
				},
				{
					name: 'block',
					label: __( 'Block', 'streamsera' ),
					hint: __( 'Block editor', 'streamsera' ),
					icon: 'block',
					heading: __( 'Use the block', 'streamsera' ),
					description: __(
						'In the block editor, add the “StreamSera Player” block and pick this player. Layout, skin and theme can be overridden per block.',
						'streamsera'
					),
				},
				{
					name: 'shortcode',
					label: __( 'Shortcode', 'streamsera' ),
					hint: __( 'Classic editor & builders', 'streamsera' ),
					icon: 'code',
					heading: __( 'Shortcode', 'streamsera' ),
					description: __(
						'Paste anywhere shortcodes work — the classic editor, widgets, page builders and theme options.',
						'streamsera'
					),
				},
				{
					name: 'php',
					label: __( 'Theme code', 'streamsera' ),
					hint: __( 'PHP & JavaScript', 'streamsera' ),
					icon: 'php',
					heading: __( 'Theme code', 'streamsera' ),
					description: __(
						'For theme templates, custom PHP and JavaScript-rendered markup — when you need full control.',
						'streamsera'
					),
				},
				...extra.map( ( t ) => ( {
					name: `ext:${ t.id }`,
					label: t.label,
					hint: t.hint || '',
					icon: t.icon || 'external',
					heading: t.heading || t.label,
					description: t.description || '',
				} ) ),
			].filter(
				// "Add to page" edits or creates pages: only for users who can edit pages.
				( t ) => t.name !== 'page' || config.canEditPages !== false
			),
		// eslint-disable-next-line react-hooks/exhaustive-deps
		[ extra.length ]
	);
	const current = tabs.find( ( t ) => t.name === tab ) || tabs[ 1 ];

	const body = () => {
		if ( tab.startsWith( 'ext:' ) ) {
			const ext = extra.find( ( t ) => `ext:${ t.id }` === tab );
			return ext ? (
				<ext.Component
					playerId={ playerId }
					title={ title }
					onClose={ onClose }
				/>
			) : null;
		}
		switch ( tab ) {
			case 'preview':
				return <PreviewPanel playerId={ playerId } />;
			case 'page':
				return (
					<AddToPage
						playerId={ playerId }
						title={ title }
						onClose={ onClose }
					/>
				);
			case 'block':
				return <BlockPanel />;
			case 'shortcode':
				return <ShortcodePanel playerId={ playerId } />;
			default:
				return (
					<ThemeCodeBody playerId={ playerId } lang={ themeLang } />
				);
		}
	};

	const headAction =
		tab === 'block' ? (
			<a
				className="ss-em-btn is-primary"
				href={ `${
					( config as any ).adminUrl || ''
				}post-new.php?post_type=page` }
				target="_blank"
				rel="noopener noreferrer"
			>
				<I name="external" size={ 14 } />
				{ __( 'Open the editor', 'streamsera' ) }
			</a>
		) : tab === 'php' ? (
			<Seg
				label={ __( 'Language', 'streamsera' ) }
				value={ themeLang }
				onChange={ ( v: string ) => setThemeLang( v as any ) }
				options={ [
					{ value: 'php', label: 'PHP' },
					{ value: 'js', label: 'JavaScript' },
				] }
			/>
		) : null;

	return (
		<Modal
			__experimentalHideHeader
			onRequestClose={ onClose }
			className="ss-em-modal"
			overlayClassName="ss-em-overlay"
			aria={ {
				labelledby: 'ss-em-title',
				describedby: 'ss-em-sub',
			} }
		>
			<div className="ss-em">
				<header className="ss-em__head">
					<span className="ss-em__badge">
						<I name="code" size={ 18 } />
					</span>
					<div className="ss-em__title">
						<strong id="ss-em-title">
							{ `${ __( 'Embed', 'streamsera' ) } · ${
								title || `#${ playerId }`
							}` }
						</strong>
						<span id="ss-em-sub">
							{ __(
								'Put this player on a page, in a block or shortcode, on another site or in theme code.',
								'streamsera'
							) }
						</span>
					</div>
					<button
						type="button"
						className="ss-em__close"
						onClick={ onClose }
						aria-label={ __( 'Close', 'streamsera' ) }
					>
						<I name="x" size={ 15 } />
					</button>
				</header>
				<div className="ss-em__body">
					<nav
						className="ss-em__nav"
						role="tablist"
						aria-orientation="vertical"
						aria-label={ __( 'Embed options', 'streamsera' ) }
					>
						{ tabs.map( ( t ) => (
							<button
								key={ t.name }
								type="button"
								role="tab"
								aria-selected={ tab === t.name }
								className={ tab === t.name ? 'is-active' : '' }
								onClick={ () => setTab( t.name ) }
							>
								<i>
									<I name={ t.icon } size={ 15 } />
								</i>
								<span>
									<b>{ t.label }</b>
									{ t.hint ? (
										<small>{ t.hint }</small>
									) : null }
								</span>
							</button>
						) ) }
					</nav>
					<section
						className="ss-em__panel"
						role="tabpanel"
						aria-label={ current.label }
					>
						<div className="ss-em__ph">
							<div>
								<h3>{ current.heading }</h3>
								{ current.description ? (
									<p>{ current.description }</p>
								) : null }
							</div>
							{ headAction }
						</div>
						{ body() }
					</section>
				</div>
			</div>
		</Modal>
	);
}

function ThemeCodeBody( {
	playerId,
	lang,
}: {
	playerId: Id;
	lang: 'php' | 'js';
} ) {
	const docs = ( config as any ).docsUrl as string | undefined;
	return (
		<>
			{ lang === 'php' ? (
				<>
					<Field label={ __( 'Render in a template', 'streamsera' ) }>
						<CodeBox
							code={ `<?php streamsera_player( ${ playerId } ); ?>` }
							large
						/>
					</Field>
					<div className="ss-em-cards2">
						<div className="ss-em-card">
							<span className="ss-em-card__head">
								<i>
									<I name="code" size={ 13 } />
								</i>
								<b>
									{ __( 'Capture the markup', 'streamsera' ) }
								</b>
							</span>
							<span className="ss-em-muted">
								{ __(
									'Returns the player HTML instead of printing it — for caching layers or custom wrappers.',
									'streamsera'
								) }
							</span>
							<CodeBox
								code={ `$html = streamsera_render_player( ${ playerId } );` }
								compact
							/>
						</div>
						<div className="ss-em-card">
							<span className="ss-em-card__head">
								<i>
									<I name="sliders" size={ 13 } />
								</i>
								<b>{ __( 'With overrides', 'streamsera' ) }</b>
							</span>
							<span className="ss-em-muted">
								{ __(
									'Same keys as the shortcode attributes.',
									'streamsera'
								) }
							</span>
							<CodeBox
								code={ `streamsera_player( ${ playerId }, array( 'layout' => 'compact', 'theme' => 'dark' ) );` }
								compact
							/>
						</div>
					</div>
				</>
			) : (
				<>
					<Field
						label={ __(
							'Mount markup loaded later',
							'streamsera'
						) }
						note={ __(
							'· html from streamsera_render_player() or an AJAX response',
							'streamsera'
						) }
					>
						<CodeBox
							code="container.innerHTML = html; window.StreamSera.mount( container );"
							large
						/>
					</Field>
					<div className="ss-em-cards2">
						<div className="ss-em-card">
							<span className="ss-em-card__head">
								<i>
									<I name="refresh" size={ 13 } />
								</i>
								<b>
									{ __(
										'SPA / PJAX navigation',
										'streamsera'
									) }
								</b>
							</span>
							<span className="ss-em-muted">
								{ __(
									'Mount everything new on the page after a route change.',
									'streamsera'
								) }
							</span>
							<CodeBox
								code="window.StreamSera.mount( document );"
								compact
							/>
						</div>
						<div className="ss-em-card">
							<span className="ss-em-card__head">
								<i>
									<I name="signal" size={ 13 } />
								</i>
								<b>
									{ __( 'Listen to events', 'streamsera' ) }
								</b>
							</span>
							<span className="ss-em-muted">
								{ __(
									'React to playback and track changes on the page.',
									'streamsera'
								) }
							</span>
							<CodeBox
								code="window.addEventListener( 'streamsera:play', fn );"
								compact
							/>
						</div>
					</div>
				</>
			) }
			{ docs ? (
				<div className="ss-em-docs">
					<I name="book" size={ 14 } />
					<span>
						{ __(
							'Hooks, filters and JavaScript events are documented in the developer guide.',
							'streamsera'
						) }
					</span>
					<a href={ docs } target="_blank" rel="noopener noreferrer">
						{ __( 'Developer docs →', 'streamsera' ) }
					</a>
				</div>
			) : null }
		</>
	);
}