/**
 * Small shared UI primitives for the admin app.
 */
import { __, sprintf } from '@wordpress/i18n';
import { Spinner, Button, Modal, FormToggle } from '@wordpress/components';
import { SVG, Path } from '@wordpress/primitives';
import {
	useState,
	useEffect,
	createContext,
	useContext,
} from '@wordpress/element';
import { Link } from './router';
import type { ReactNode, ComponentType } from 'react';

/* ---------- Header utilities (notices bell, command palette, theme toggle, add-on extras) ---------- */

export interface HeaderUtility {
	id: string;
	order?: number;
	Component: ComponentType< Record< string, unknown > >;
}

const headerUtilities: HeaderUtility[] = [];
const utilityListeners = new Set< () => void >();

/**
 * Register a small control rendered at the right of every page header.
 * @param util
 */
export function registerHeaderUtility( util: HeaderUtility ) {
	const i = headerUtilities.findIndex( ( u ) => u.id === util.id );
	if ( i >= 0 ) {
		headerUtilities[ i ] = util;
	} else {
		headerUtilities.push( util );
	}
	utilityListeners.forEach( ( l ) => l() );
}

export function getHeaderUtilities(): HeaderUtility[] {
	return [ ...headerUtilities ].sort(
		( a, b ) => ( a.order || 50 ) - ( b.order || 50 )
	);
}

function HeaderUtilities( { exclude = [] }: { exclude?: string[] } ) {
	const [ , bump ] = useState( 0 );
	useEffect( () => {
		const cb = () => bump( ( n ) => n + 1 );
		utilityListeners.add( cb );
		return () => {
			utilityListeners.delete( cb );
		};
	}, [] );
	const utils = getHeaderUtilities().filter(
		( u ) => ! exclude.includes( u.id )
	);
	if ( ! utils.length ) {
		return null;
	}
	return (
		<div
			className="ss-ph__utility"
			role="toolbar"
			aria-label={ __( 'Quick tools', 'streamsera' ) }
		>
			{ utils.map( ( u ) => (
				<u.Component key={ u.id } />
			) ) }
		</div>
	);
}

/** Custom white marks for page-header tiles (others use the regular icon in white). */
const W = '#fff';
const GOLD = '#ffd166';
const mark = ( body: ReactNode ) => (
	<svg
		width="24"
		height="24"
		viewBox="0 0 24 24"
		fill="none"
		strokeLinecap="round"
		strokeLinejoin="round"
	>
		{ body }
	</svg>
);
const HEADER_MARKS: Record< string, ReactNode > = {
	broadcast: mark(
		<>
			<circle cx="12" cy="12" r="2.6" fill={ W } />
			<path
				d="M8.2 8.2a5.4 5.4 0 0 0 0 7.6M15.8 8.2a5.4 5.4 0 0 1 0 7.6"
				stroke={ W }
				strokeWidth="2"
				strokeOpacity=".85"
			/>
			<path
				d="M5.1 5.1a9.8 9.8 0 0 0 0 13.8M18.9 5.1a9.8 9.8 0 0 1 0 13.8"
				stroke={ W }
				strokeWidth="2"
				strokeOpacity=".5"
			/>
			<circle cx="19.6" cy="3.6" r="1.6" fill={ GOLD } />
		</>
	),
	layers: mark(
		<>
			<path
				d="M12 14.6 3 10l-.1 4.4L12 19l9-4.6V10z"
				fill={ W }
				fillOpacity=".4"
			/>
			<path d="M12 3.5 21 8l-9 4.6L3 8z" fill={ W } />
			<path
				d="M3 12.6 12 17.2l9-4.6"
				stroke={ W }
				strokeWidth="1.8"
				strokeOpacity=".75"
			/>
			<circle cx="19.6" cy="3.6" r="1.6" fill={ GOLD } />
		</>
	),
	calendar: mark(
		<>
			<rect
				x="3.5"
				y="5"
				width="17"
				height="15.5"
				rx="3"
				fill={ W }
				fillOpacity=".3"
			/>
			<path d="M3.5 8a3 3 0 0 1 3-3h11a3 3 0 0 1 3 3v2h-17z" fill={ W } />
			<path d="M8 3v4M16 3v4" stroke={ W } strokeWidth="2" />
			<rect
				x="7"
				y="13"
				width="3"
				height="3"
				rx=".9"
				fill={ W }
				fillOpacity=".8"
			/>
			<rect x="14" y="13" width="3" height="3" rx=".9" fill={ GOLD } />
		</>
	),
	inbox: mark(
		<>
			<path
				d="M4 13.5h4.2l1.6 2.6h4.4l1.6-2.6H20v4a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3z"
				fill={ W }
			/>
			<path
				d="M4 13.5 6.2 6.6A2.5 2.5 0 0 1 8.6 5h6.8a2.5 2.5 0 0 1 2.4 1.6L20 13.5"
				stroke={ W }
				strokeWidth="1.8"
				strokeOpacity=".6"
			/>
			<path
				d="M12 6.5v5M9.8 9.4 12 11.6l2.2-2.2"
				stroke={ W }
				strokeWidth="1.8"
			/>
			<circle cx="19.6" cy="4" r="2" fill={ GOLD } />
		</>
	),
	player: mark(
		<>
			<rect
				x="3"
				y="4.5"
				width="18"
				height="15"
				rx="3.5"
				fill={ W }
				fillOpacity=".3"
			/>
			<path d="M10 8.2v5.6l4.6-2.8z" fill={ W } />
			<rect
				x="6.5"
				y="16"
				width="11"
				height="1.8"
				rx=".9"
				fill={ W }
				fillOpacity=".55"
			/>
			<rect x="6.5" y="16" width="6" height="1.8" rx=".9" fill={ W } />
			<circle cx="12.5" cy="16.9" r="1.6" fill={ GOLD } />
		</>
	),
	gear: mark(
		<>
			<path
				d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"
				fill={ W }
				fillOpacity=".3"
				stroke={ W }
				strokeWidth="1.6"
			/>
			<circle cx="12" cy="12" r="3" fill={ GOLD } />
		</>
	),
	lock: mark(
		<>
			<path
				d="M8 11V8a4 4 0 0 1 8 0v3"
				stroke={ W }
				strokeWidth="2.2"
				strokeOpacity=".7"
			/>
			<rect x="4.5" y="10.5" width="15" height="10" rx="3" fill={ W } />
			<circle cx="12" cy="14.8" r="1.7" fill="#4f3fe6" />
			<rect
				x="11.2"
				y="15.4"
				width="1.6"
				height="2.8"
				rx=".8"
				fill="#4f3fe6"
			/>
			<circle cx="19.6" cy="3.6" r="1.6" fill={ GOLD } />
		</>
	),
	chart: (
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
			<rect
				x="3.5"
				y="13"
				width="4"
				height="7.5"
				rx="1.6"
				fill="#fff"
				fillOpacity=".55"
			/>
			<rect
				x="10"
				y="9.5"
				width="4"
				height="11"
				rx="1.6"
				fill="#fff"
				fillOpacity=".78"
			/>
			<rect x="16.5" y="6" width="4" height="14.5" rx="1.6" fill="#fff" />
			<path
				d="M3.8 9.2 9.4 5.6l3.6 2.2 6.4-4.6"
				stroke="#fff"
				strokeWidth="1.8"
				strokeLinecap="round"
				strokeLinejoin="round"
			/>
			<circle cx="19.4" cy="3.2" r="1.7" fill="#ffd166" />
		</svg>
	),
};

export function PageHeader( {
	title,
	description,
	icon,
	actions,
	back,
	utility = true,
	utilityExclude,
	tabs,
	children,
}: {
	title: ReactNode;
	description?: ReactNode;
	/** Icon name (see `I`) shown in a tile beside the title — one per screen, e.g. 'radio' for Stations. */
	icon?: string;
	actions?: ReactNode;
	back?: { to: string; label: string };
	/** Segmented view switcher rendered in the header between the title and the actions. */
	tabs?: ReactNode;
	/** Render the registered header utilities (notices, palette, theme). Pass false on full-bleed screens. */
	utility?: boolean | ReactNode;
	/** Header utility ids to leave out on this screen (e.g. 'palette'). */
	utilityExclude?: string[];
	children?: ReactNode;
} ) {
	return (
		<header className="ss-ph">
			<div className="ss-ph__inner">
				<div className="ss-ph__text">
					{ back ? (
						<Link
							to={ back.to }
							className="ss-ph__back"
							aria-label={ back.label }
						>
							<I name="back" size={ 18 } />
						</Link>
					) : null }
					{ icon ? (
						<span className="ss-ph__icon" aria-hidden="true">
							{ HEADER_MARKS[ icon ] || (
								<I name={ icon } size={ 22 } />
							) }
						</span>
					) : null }
					<div className="ss-ph__copy">
						<h1>{ title }</h1>
						{ description ? <p>{ description }</p> : null }
					</div>
				</div>
				{ tabs ? <div className="ss-ph__tabs">{ tabs }</div> : null }
				<div className="ss-ph__end">
					{ actions ? (
						<div className="ss-ph__actions">{ actions }</div>
					) : null }
					{ utility === true ? (
						<HeaderUtilities exclude={ utilityExclude } />
					) : (
						utility || null
					) }
				</div>
				{ children }
			</div>
		</header>
	);
}

/** Default icon for Sections rendered inside a settings card (set by the Settings page). */
export const SectionIconContext = createContext< string | undefined >(
	undefined
);

/** Section supports `toggle` / `off` (feature switch in the card header). Add-ons check this. */
export const SECTION_TOGGLE = true;

export function Section( {
	title,
	description,
	aside,
	icon,
	toggle,
	off,
	tone,
	children,
	className = '',
}: {
	title?: ReactNode;
	description?: ReactNode;
	aside?: ReactNode;
	/** Icon tile before the title (falls back to the surrounding settings card's icon). */
	icon?: string;
	/** Feature switch in the header: the card's body shows only while it is on. */
	toggle?: {
		checked: boolean;
		onChange: ( v: boolean ) => void;
		disabled?: boolean;
		label?: string;
	};
	/** One line shown instead of the body while the switch is off. */
	off?: ReactNode;
	/** 'danger' for destructive cards. */
	tone?: 'danger';
	children?: ReactNode;
	className?: string;
} ) {
	const ctxIcon = useContext( SectionIconContext );
	const tile = icon || ctxIcon;
	const sw = toggle ? (
		<div
			className={ `ss-section__switch ${
				toggle.checked ? 'is-on' : ''
			}` }
		>
			<span>
				{ toggle.checked
					? __( 'On', 'streamsera' )
					: __( 'Off', 'streamsera' ) }
			</span>
			<FormToggle
				checked={ !! toggle.checked }
				disabled={ toggle.disabled }
				onChange={ ( e: any ) => toggle.onChange( e.target.checked ) }
				aria-label={
					toggle.label ||
					( typeof title === 'string' ? title : undefined )
				}
			/>
		</div>
	) : null;
	const isOff = !! toggle && ! toggle.checked;
	return (
		<section
			className={ `ss-section ${ toggle ? 'has-toggle' : '' } ${
				isOff ? 'is-off' : ''
			} ${ tone ? `is-${ tone }` : '' } ${ className }` }
		>
			{ title || aside ? (
				<div
					className={ `ss-section__head ${
						tile ? 'ss-section__head--icon' : ''
					}` }
				>
					<div className="ss-section__text">
						{ title ? (
							<h2>
								{ tile ? (
									<span className="ss-section__icon">
										<I name={ tile } size={ 16 } />
									</span>
								) : null }
								{ title }
							</h2>
						) : null }
						{ description ? <p>{ description }</p> : null }
					</div>
					{ aside || sw ? (
						<div className="ss-section__aside">
							{ aside }
							{ sw }
						</div>
					) : null }
				</div>
			) : null }
			{ isOff ? (
				off ? (
					<div className="ss-section__off">
						<svg
							width="15"
							height="15"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							strokeWidth="2"
							strokeLinecap="round"
							aria-hidden="true"
						>
							<circle cx="12" cy="12" r="9" />
							<path d="M12 11v5M12 8h.01" />
						</svg>
						<span>{ off }</span>
					</div>
				) : null
			) : (
				children
			) }
		</section>
	);
}

export function Panel( {
	children,
	className = '',
	padded = true,
}: {
	children?: ReactNode;
	className?: string;
	padded?: boolean;
} ) {
	return (
		<div
			className={ `ss-panel ${
				padded ? 'ss-panel--padded' : ''
			} ${ className }` }
		>
			{ children }
		</div>
	);
}

/**
 * Choice group: a short list of options as one segmented control, with optional icons.
 * @param root0
 * @param root0.value
 * @param root0.options
 * @param root0.onChange
 * @param root0.label
 */
export function Choice< T extends string | number >( {
	value,
	options,
	onChange,
	label,
}: {
	value: T;
	options: Array< {
		value: T;
		label: ReactNode;
		icon?: ReactNode;
		badge?: ReactNode;
	} >;
	onChange: ( v: T ) => void;
	label?: string;
} ) {
	return (
		<div className="ss-choice" role="radiogroup" aria-label={ label }>
			{ options.map( ( o ) => {
				const on = o.value === value;
				return (
					<button
						key={ String( o.value ) }
						type="button"
						role="radio"
						aria-checked={ on }
						className={ on ? 'is-on' : '' }
						onClick={ () => onChange( o.value ) }
					>
						{ o.icon ? (
							<span className="ss-choice__ic">
								{ typeof o.icon === 'string' ? (
									<I name={ o.icon } size={ 15 } />
								) : (
									o.icon
								) }
							</span>
						) : null }
						<span>{ o.label }</span>
						{ o.badge ? (
							<span className="ss-choice__badge">
								{ o.badge }
							</span>
						) : null }
					</button>
				);
			} ) }
		</div>
	);
}

/**
 * A settings row: label + help on the left, control on the right.
 * @param root0
 * @param root0.label
 * @param root0.help
 * @param root0.children
 * @param root0.inline
 * @param root0.row
 * @param root0.id
 * @param root0.className
 */
export function Field( {
	label,
	help,
	children,
	inline = false,
	row = false,
	id,
	className = '',
}: {
	label?: ReactNode;
	help?: ReactNode;
	children?: ReactNode;
	inline?: boolean;
	/** Builder convention: "Title — Control" on one row, description under the title. */
	row?: boolean;
	id?: string;
	className?: string;
} ) {
	return (
		<div
			className={ `ss-field ${ inline ? 'ss-field--inline' : '' } ${
				row ? 'ss-field--row' : ''
			} ${ className }` }
		>
			<div className="ss-field__text">
				{ label ? <label htmlFor={ id }>{ label }</label> : null }
				{ help ? <p>{ help }</p> : null }
			</div>
			<div className="ss-field__control">{ children }</div>
		</div>
	);
}

/**
 * Summary tile: rounded icon on the left, value + label on the right.
 * tone: 'success' | 'error' | 'warning' | 'brand' | 'info' | 'neutral' (legacy 'live' → error, 'ok' → success, 'muted' → neutral).
 * delta: { value: number (percent or absolute), label?: string, direction?: 'up' | 'down' | 'flat' } renders a small trend chip.
 * @param root0
 * @param root0.icon
 * @param root0.label
 * @param root0.value
 * @param root0.hint
 * @param root0.tone
 * @param root0.delta
 * @param root0.href
 * @param root0.onClick
 * @param root0.className
 */
export function StatCard( {
	icon,
	label,
	value,
	hint,
	tone,
	delta,
	href,
	onClick,
	className = '',
}: {
	icon?: string | ReactNode;
	label: ReactNode;
	value: ReactNode;
	hint?: ReactNode;
	tone?: string;
	delta?: {
		value: number;
		label?: ReactNode;
		direction?: 'up' | 'down' | 'flat';
		suffix?: string;
	} | null;
	href?: string;
	onClick?: () => void;
	className?: string;
} ) {
	const TONES: Record< string, string > = {
		live: 'error',
		ok: 'success',
		muted: 'neutral',
		warn: 'warning',
	};
	const t = tone ? TONES[ tone ] || tone : '';
	const dir = delta
		? delta.direction ||
		  ( delta.value > 0 ? 'up' : delta.value < 0 ? 'down' : 'flat' )
		: null;
	const body = (
		<>
			{ icon ? (
				<span className="ss-stat__icon" aria-hidden="true">
					{ typeof icon === 'string' ? (
						<I name={ icon } size={ 20 } />
					) : (
						icon
					) }
				</span>
			) : null }
			<span className="ss-stat__body">
				<span className="ss-stat__top">
					<span className="ss-stat__value">{ value }</span>
					{ delta ? (
						<span className={ `ss-stat__delta is-${ dir }` }>
							<I
								name={
									dir === 'down'
										? 'trendDown'
										: dir === 'up'
										? 'trendUp'
										: 'minus'
								}
								size={ 14 }
							/>
							{ `${ Math.abs( delta.value ) }${
								delta.suffix ?? '%'
							}` }
							{ delta.label ? (
								<small>{ delta.label }</small>
							) : null }
						</span>
					) : null }
				</span>
				<span className="ss-stat__label">{ label }</span>
				{ hint ? (
					<span className="ss-stat__hint">{ hint }</span>
				) : null }
			</span>
		</>
	);
	const cls = `ss-stat ${ t ? `ss-stat--${ t }` : '' } ${
		icon ? 'has-icon' : ''
	} ${ href || onClick ? 'is-link' : '' } ${ className }`;
	if ( href ) {
		return (
			<a className={ cls } href={ href }>
				{ body }
			</a>
		);
	}
	if ( onClick ) {
		return (
			<button type="button" className={ cls } onClick={ onClick }>
				{ body }
			</button>
		);
	}
	return <div className={ cls }>{ body }</div>;
}

/**
 * A StatCard (shorter name, also exposed to add-ons).
 * @param props
 * @param props.label
 * @param props.value
 * @param props.tone
 * @param props.hint
 * @param props.icon
 */
export function Stat( props: {
	label: ReactNode;
	value: ReactNode;
	tone?: string;
	hint?: ReactNode;
	icon?: string | ReactNode;
} ) {
	return <StatCard { ...props } />;
}

/**
 * Semantic pill tones, with short aliases:
 * live|ok → success (green), error → error (red), warn → warning (amber), muted → neutral.
 */
export type PillTone =
	| 'success'
	| 'error'
	| 'warning'
	| 'info'
	| 'neutral'
	| 'brand';
const PILL_TONES: Record< string, PillTone > = {
	live: 'success',
	ok: 'success',
	success: 'success',
	error: 'error',
	danger: 'error',
	offline: 'error',
	warn: 'warning',
	warning: 'warning',
	info: 'info',
	neutral: 'neutral',
	muted: 'neutral',
	brand: 'brand',
};
export function pillTone( tone?: string ): PillTone {
	return PILL_TONES[ tone || 'neutral' ] || 'neutral';
}

export function Pill( {
	tone = 'neutral',
	children,
	dot = false,
	pulse,
}: {
	tone?: string;
	children?: ReactNode;
	dot?: boolean;
	/** Animate the dot (defaults to true for the legacy `live` tone). */
	pulse?: boolean;
} ) {
	const t = pillTone( tone );
	const animate = pulse ?? tone === 'live';
	return (
		<span
			className={ `ss-pill ss-pill--${ t } ${
				animate ? 'ss-pill--pulse' : ''
			}` }
		>
			{ dot ? <span className="ss-pill__dot" /> : null }
			{ children }
		</span>
	);
}

export function Empty( {
	icon = 'radio',
	title,
	text,
	action,
}: {
	icon?: string;
	title: ReactNode;
	text?: ReactNode;
	action?: ReactNode;
} ) {
	return (
		<div className="ss-empty">
			<div className="ss-empty__icon">
				<I name={ icon } />
			</div>
			<h3>{ title }</h3>
			{ text ? <p>{ text }</p> : null }
			{ action }
		</div>
	);
}

export function Loading() {
	return (
		<div className="ss-loading">
			<Spinner />
		</div>
	);
}

/**
 * Full-page "no permission" state, shown when the REST API answers 401/403 for the data
 * a page needs (e.g. a Contributor opening the Builder).
 * @param root0
 * @param root0.what
 * @param root0.title
 */
export function AccessDenied( {
	what,
	title,
}: {
	/** What the user tried to do, e.g. "edit players". */
	what?: string;
	title?: ReactNode;
} ) {
	return (
		<div className="ss-page">
			{ title ? <PageHeader icon="lock" title={ title } /> : null }
			<Panel>
				<Empty
					icon="lock"
					title={ __(
						"You don't have permission to view this",
						'streamsera'
					) }
					text={
						what
							? sprintf(
									// translators: %s: what the user tried to do, e.g. "edit players"
									__(
										"Your account can't %s. Ask an administrator to grant you access.",
										'streamsera'
									),
									what
							  )
							: __(
									'Ask an administrator to grant your account access to StreamSera.',
									'streamsera'
							  )
					}
					action={
						<Button
							variant="secondary"
							onClick={ () => window.history.back() }
						>
							{ __( 'Go back', 'streamsera' ) }
						</Button>
					}
				/>
			</Panel>
		</div>
	);
}

export function CopyCode( {
	code,
	onCopied,
}: {
	code: string;
	onCopied?: () => void;
} ) {
	const [ copied, setCopied ] = useState( false );
	const copy = async () => {
		try {
			await navigator.clipboard.writeText( code );
			setCopied( true );
			onCopied?.();
			setTimeout( () => setCopied( false ), 1600 );
		} catch ( e ) {
			// ignore
		}
	};
	return (
		<div className="ss-copy">
			<code>{ code }</code>
			<Button size="small" variant="secondary" onClick={ copy }>
				{ copied
					? __( 'Copied', 'streamsera' )
					: __( 'Copy', 'streamsera' ) }
			</Button>
		</div>
	);
}

/**
 * Compact click-to-copy chip (shortcodes, IDs).
 * @param root0
 * @param root0.code
 * @param root0.label
 * @param root0.title
 */
export function CopyChip( {
	code,
	label,
	title,
}: {
	code: string;
	label?: ReactNode;
	title?: string;
} ) {
	const [ copied, setCopied ] = useState( false );
	const copy = async ( e: React.MouseEvent ) => {
		e.preventDefault();
		e.stopPropagation();
		try {
			await navigator.clipboard.writeText( code );
			setCopied( true );
			setTimeout( () => setCopied( false ), 1500 );
		} catch ( err ) {
			// ignore
		}
	};
	return (
		<button
			type="button"
			className={ `ss-chip ${ copied ? 'is-copied' : '' }` }
			onClick={ copy }
			title={ title || __( 'Copy shortcode', 'streamsera' ) }
		>
			<code>{ label || code }</code>
			<I name={ copied ? 'check' : 'copy' } size={ 14 } />
			<span className="ss-chip__done" aria-live="polite">
				{ copied ? __( 'Copied', 'streamsera' ) : '' }
			</span>
		</button>
	);
}

/**
 * Shared modal shell: icon tile + title, optional description right under the header,
 * padded body, right-aligned footer. Every admin dialog goes through this so they match.
 * @param root0
 * @param root0.title
 * @param root0.icon
 * @param root0.description
 * @param root0.size
 * @param root0.onRequestClose
 * @param root0.footer
 * @param root0.className
 * @param root0.children
 */
export function SsModal( {
	title,
	icon,
	description,
	size = 'md',
	onRequestClose,
	footer,
	className = '',
	children,
	...rest
}: {
	title: string;
	icon?: string;
	description?: ReactNode;
	size?: 'sm' | 'md' | 'lg';
	onRequestClose: () => void;
	footer?: ReactNode;
	className?: string;
	children?: ReactNode;
	[ key: string ]: unknown;
} ) {
	return (
		<Modal
			title={ title }
			onRequestClose={ onRequestClose }
			className={ `ss-modal ss-modal--${ size } ${ className }` }
			icon={
				icon ? (
					<span className="ss-modal__icon">
						<I name={ icon } size={ 16 } />
					</span>
				) : undefined
			}
			{ ...( rest as object ) }
		>
			{ description ? (
				<p className="ss-modal__desc">{ description }</p>
			) : null }
			<div className="ss-modal__body">{ children }</div>
			{ footer ? (
				<div className="ss-modal__actions">{ footer }</div>
			) : null }
		</Modal>
	);
}

export function ConfirmModal( {
	title,
	text,
	confirmLabel,
	onConfirm,
	onCancel,
	destructive = true,
}: {
	title: string;
	text: ReactNode;
	confirmLabel: string;
	onConfirm: () => void;
	onCancel: () => void;
	destructive?: boolean;
} ) {
	return (
		<SsModal
			title={ title }
			icon={ destructive ? 'trash' : 'help' }
			size="sm"
			onRequestClose={ onCancel }
			footer={
				<>
					<Button variant="tertiary" onClick={ onCancel }>
						{ __( 'Cancel', 'streamsera' ) }
					</Button>
					<Button
						variant="primary"
						isDestructive={ destructive }
						onClick={ onConfirm }
					>
						{ confirmLabel }
					</Button>
				</>
			}
		>
			<p className="ss-modal__text">{ text }</p>
		</SsModal>
	);
}

/** Icon set — WordPress icons so the admin matches core and stays crisp at every size. */
import {
	Icon,
	chartBar,
	audio,
	cog,
	layout,
	color,
	settings,
	pin,
	code,
	check,
	warning,
	plus,
	external,
	starFilled,
	undo,
	redo,
	desktop,
	tablet,
	mobile,
	trash,
	copy,
	pencil,
	update,
	cloud,
	link,
	chevronRight,
	page,
	download,
	keyboard,
	close,
	formatListBullets,
	grid,
	megaphone,
	help,
	brush,
	typography,
	arrowLeft,
	search,
	lock,
	swatch,
	shuffle,
	listView,
	dragHandle,
	moreVertical,
	seen,
	unseen,
	info,
	home,
	inbox,
	media,
	button as buttonIcon,
	published,
	calendar,
	people,
	bell,
	upload,
	shield,
	key,
	tool,
	currencyDollar,
	store,
	lifesaver,
	tag,
	commentAuthorAvatar,
	image,
	starEmpty,
	moveTo,
	textColor,
	rotateLeft,
	aspectRatio,
	// UI-B
	trendingUp,
	trendingDown,
	lineSolid,
	postDate,
	rss,
	connection,
	thumbsUp,
	receipt,
	backup,
	starHalf,
	postList,
	// UI-A (data tables)
	chevronLeft,
	chevronDown,
	chevronUp,
	// UI3 (embed modal)
	blockDefault,
	html,
	// Setup wizard
	next as skipIcon,
	arrowUp,
	arrowDown,
	globe,
} from '@wordpress/icons';

/** Players: a play triangle inside broadcast waves (outline, matches the Players screens). */
const playerIcon = (
	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<Path d="M10 9.5v5l4-2.5z" />
		<Path
			d="M7.2 7.2a6.8 6.8 0 0 0 0 9.6M16.8 7.2a6.8 6.8 0 0 1 0 9.6M4.4 4.4a10.8 10.8 0 0 0 0 15.2M19.6 4.4a10.8 10.8 0 0 1 0 15.2"
			fill="none"
			stroke="currentColor"
			strokeWidth="1.8"
			strokeLinecap="round"
		/>
	</SVG>
);

const sunIcon = (
	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<Path d="M12 7.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm0 1.5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM11.25 2h1.5v3h-1.5V2zm0 17h1.5v3h-1.5v-3zM2 11.25h3v1.5H2v-1.5zm17 0h3v1.5h-3v-1.5zM4.93 6l1.06-1.06 2.12 2.12-1.06 1.06L4.93 6zm10.9 10.9 1.06-1.06 2.12 2.12-1.06 1.06-2.12-2.12zM4.93 18 7.05 15.88l1.06 1.06-2.12 2.12L4.93 18zM15.83 7.06l2.12-2.12L19.01 6l-2.12 2.12-1.06-1.06z" />
	</SVG>
);
const moonIcon = (
	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<Path d="M12.4 3.5a8.5 8.5 0 1 0 8.1 11.1 1 1 0 0 0-1.3-1.2 6 6 0 0 1-7.7-7.7 1 1 0 0 0-1.1-1.3 8 8 0 0 1 2-.9zm-2.1 2.3a7.5 7.5 0 0 0 8.3 9.5 7 7 0 1 1-8.3-9.5z" />
	</SVG>
);

/** Broadcast mark (dashboard header, brand). Stroked. */
const barsIcon = (
	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<Path
			d="M4 20v-4M10 20v-8M16 20V8M22 20V4"
			fill="none"
			stroke="currentColor"
			strokeWidth={ 2.2 }
			strokeLinecap="round"
		/>
	</SVG>
);

const layersIcon = (
	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<Path
			d="M12 3l9 5-9 5-9-5zM3 13l9 5 9-5"
			fill="none"
			stroke="currentColor"
			strokeWidth={ 2 }
			strokeLinecap="round"
			strokeLinejoin="round"
		/>
	</SVG>
);

const headphonesIcon = (
	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<Path
			d="M4 15v-3a8 8 0 0 1 16 0v3M4 15a2 2 0 0 1 2-2h1v7H6a2 2 0 0 1-2-2zM20 15a2 2 0 0 0-2-2h-1v7h1a2 2 0 0 0 2-2z"
			fill="none"
			stroke="currentColor"
			strokeWidth={ 2 }
			strokeLinecap="round"
			strokeLinejoin="round"
		/>
	</SVG>
);

const shareIcon = (
	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<Path
			d="M18 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM18 22a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM8.6 13.5l6.8 4M15.4 6.5l-6.8 4"
			fill="none"
			stroke="currentColor"
			strokeWidth={ 2 }
			strokeLinecap="round"
			strokeLinejoin="round"
		/>
	</SVG>
);

const gripIcon = (
	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<Path
			d="M9 5h.01M9 12h.01M9 19h.01M15 5h.01M15 12h.01M15 19h.01"
			fill="none"
			stroke="currentColor"
			strokeWidth={ 2 }
			strokeLinecap="round"
			strokeLinejoin="round"
		/>
	</SVG>
);

const stickyIcon = (
	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<Path
			d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zM3 15h18"
			fill="none"
			stroke="currentColor"
			strokeWidth={ 2 }
			strokeLinecap="round"
			strokeLinejoin="round"
		/>
	</SVG>
);

const broadcastIcon = (
	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<Path
			d="M12 13.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM16.2 7.8a6 6 0 0 1 0 8.4M7.8 16.2a6 6 0 0 1 0-8.4M19 5a10 10 0 0 1 0 14M5 19A10 10 0 0 1 5 5"
			fill="none"
			stroke="currentColor"
			strokeWidth={ 2 }
			strokeLinecap="round"
			strokeLinejoin="round"
		/>
	</SVG>
);

/** Pulse line (setup wizard's "Check stream"). Stroked, so it keeps its weight at any size. */
const pulseIcon = (
	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<Path
			d="M3 12h3.5l2.5-6.5 4.5 13 2.5-6.5H21"
			fill="none"
			stroke="currentColor"
			strokeWidth={ 2 }
			strokeLinecap="round"
			strokeLinejoin="round"
		/>
	</SVG>
);

const ICONS = {
	calendar,
	people,
	back: arrowLeft,
	radio: audio,
	player: playerIcon,
	players: playerIcon,
	layout,
	palette: color,
	toggles: settings,
	sliders: settings,
	pin,
	code,
	check,
	warn: warning,
	plus,
	external,
	spark: starFilled,
	undo,
	redo,
	desktop,
	tablet,
	mobile,
	sun: sunIcon,
	moon: moonIcon,
	shield,
	key,
	tool,
	dollar: currencyDollar,
	store,
	lifesaver,
	tag,
	bell,
	upload,
	user: commentAuthorAvatar,
	trash,
	copy,
	edit: pencil,
	refresh: update,
	gear: cog,
	cloud,
	link,
	chevron: chevronRight,
	book: page,
	download,
	keyboard,
	volume: audio,
	x: close,
	list: formatListBullets,
	grid,
	megaphone,
	help,
	brush,
	typography,
	search,
	lock,
	swatch,
	shuffle,
	listView,
	drag: dragHandle,
	more: moreVertical,
	eye: seen,
	eyeOff: unseen,
	info,
	home,
	inbox,
	chart: chartBar,
	button: buttonIcon,
	published,
	image,
	sparkles: starEmpty,
	move: moveTo,
	font: textColor,
	rotate: rotateLeft,
	responsive: aspectRatio,
	templates: layout,
	// UI-B
	trendUp: trendingUp,
	trendDown: trendingDown,
	minus: lineSolid,
	clock: postDate,
	rss,
	signal: connection,
	live: rss,
	listeners: people,
	headphones: audio,
	like: thumbsUp,
	receipt,
	history: backup,
	star: starHalf,
	postList,
	// UI-A (data tables)
	chevronLeft,
	chevronRight,
	chevronDown,
	chevronUp,
	checkAll: check,
	pages: page,
	// media
	media,
	music: audio,
	// UI2-B
	save: cloud,
	radioAlt: audio,
	// UI3 (embed modal)
	block: blockDefault,
	php: html,
	// Setup wizard
	skip: skipIcon,
	pulse: pulseIcon,
	broadcast: broadcastIcon,
	layers: layersIcon,
	headset: headphonesIcon,
	share: shareIcon,
	grip: gripIcon,
	stickyBar: stickyIcon,
	bars: barsIcon,
	arrowUp,
	arrowDown,
	globe,
};

export function I( {
	name,
	size = 20,
	className = '',
}: {
	name: string;
	size?: number;
	className?: string;
} ) {
	return (
		<Icon
			icon={ ICONS[ name ] || ICONS.radio }
			size={ size }
			className={ `ss-i ${ className }` }
		/>
	);
}

export function timeAgo( ts?: number ) {
	if ( ! ts ) {
		return '';
	}
	const diff = Math.max( 0, Date.now() / 1000 - ts );
	if ( diff < 60 ) {
		return __( 'just now', 'streamsera' );
	}
	if ( diff < 3600 ) {
		return `${ Math.floor( diff / 60 ) } min ago`;
	}
	if ( diff < 86400 ) {
		return `${ Math.floor( diff / 3600 ) } h ago`;
	}
	return new Date( ts * 1000 ).toLocaleDateString();
}

/* ---------- Data tables (UI-A) ---------- */
export { default as DataTable, Thumb, Avatar } from './components/DataTable';
export { default as StationPicker } from './components/StationPicker';
export type { StationPickerProps } from './components/StationPicker';
export type {
	DataTableColumn,
	DataTableBulkAction,
	DataTableFilter,
	DataTableProps,
} from './components/DataTable';

/**
 * Dependent settings: rendered only while their main switch is on (e.g. the listen page's address
 * and player appear once "Enable the listen page" is on). Exposed to add-ons as `ui.Reveal`.
 * @param root0
 * @param root0.when
 * @param root0.children
 */
export function Reveal( {
	when,
	children,
}: {
	when: boolean;
	children?: any;
} ) {
	return when ? <>{ children }</> : null;
}