/**
 * Setup wizard — admin.php?page=streamsera#/setup.
 *
 * Three steps and a finish screen: Station (stream link, details) → Look (layout, style,
 * colour) → Publish (add to a page, listen page, or by hand). A live preview of the real
 * player sits beside every step. Finishing creates a station and a player, places the
 * player where the user chose and marks `setup_completed`.
 */
import { __, sprintf } from '@wordpress/i18n';
import { useEffect, useMemo, useRef, useState } from '@wordpress/element';
import apiFetch from '@wordpress/api-fetch';
import type { PlayerConfig } from '@shared/types';
import Player from '../../player/Player';
import { registerPage } from '../registry';
import { navigate } from '../router';
import {
	config,
	ss,
	stations as stationsApi,
	players as playersApi,
	stationToPublic,
	openPreview,
} from '../api';
import { I, CopyCode } from '../ui';
import { LayoutThumb } from './appearance';
import './setup.scss';

const cfgAny = config as any;

const STEPS = [
	{ id: 'station', label: __( 'Station', 'streamsera' ) },
	{ id: 'look', label: __( 'Look', 'streamsera' ) },
	{ id: 'publish', label: __( 'Publish', 'streamsera' ) },
];

/** One-click colours for the play button and highlights. */
const COLORS: Array< [ string, string ] > = [
	[ '#5b4cf5', __( 'Violet', 'streamsera' ) ],
	[ '#2563eb', __( 'Blue', 'streamsera' ) ],
	[ '#0e9f6e', __( 'Green', 'streamsera' ) ],
	[ '#e8590c', __( 'Orange', 'streamsera' ) ],
	[ '#d6336c', __( 'Pink', 'streamsera' ) ],
	[ '#17171c', __( 'Black', 'streamsera' ) ],
];

/** How many styles show before "More styles". */
const SKINS_FIRST = 6;

type LogoMeta = { id: number; url: string; name?: string };
type Placement = 'page' | 'listen' | 'manual';
type Placed = {
	kind: Placement;
	view?: string;
	edit?: string;
	title?: string;
	draft?: boolean;
	error?: string;
};

const CONFETTI_COLORS = [
	'#5b4cf5',
	'#b6a6ff',
	'#ffb020',
	'#1faf5f',
	'#e5484d',
	'#2563eb',
];

/** One-shot confetti burst; unmounts itself after the animation. Hidden with reduced motion (CSS). */
function Confetti( { color }: { color: string } ) {
	const [ gone, setGone ] = useState( false );
	const pieces = useMemo( () => {
		const colors = [ ...CONFETTI_COLORS, color ];
		return Array.from( { length: 80 }, ( _, i ) => {
			const strip = i % 3 === 0;
			const size = 7 + Math.random() * 5;
			return {
				id: i,
				left: Math.random() * 100,
				w: strip ? 6 : size,
				h: strip ? 12 + Math.random() * 6 : size,
				round: i % 4 === 1,
				color: colors[ i % colors.length ],
				delay: Math.random() * 0.9,
				dur: 2.6 + Math.random() * 1.8,
				rot: ( Math.random() - 0.5 ) * 1440,
				drift: ( Math.random() - 0.5 ) * 160,
			};
		} );
	}, [ color ] );
	useEffect( () => {
		const t = window.setTimeout( () => setGone( true ), 5400 );
		return () => window.clearTimeout( t );
	}, [] );
	if ( gone ) {
		return null;
	}
	return (
		<div className="ss-wiz__confetti" aria-hidden="true">
			{ pieces.map( ( c ) => (
				<i
					key={ c.id }
					style={
						{
							left: `${ c.left }%`,
							width: c.w,
							height: c.h,
							background: c.color,
							borderRadius: c.round ? '50%' : 2,
							animationDelay: `${ c.delay }s`,
							animationDuration: `${ c.dur }s`,
							'--ss-rot': `${ c.rot }deg`,
							'--ss-drift': `${ c.drift }px`,
						} as any
					}
				/>
			) ) }
		</div>
	);
}

function useMediaPicker( onSelect: ( logo: LogoMeta ) => void ) {
	return () => {
		const wp = window.wp;
		if ( ! wp?.media ) {
			return;
		}
		const frame = wp.media( {
			title: __( 'Station logo', 'streamsera' ),
			multiple: false,
			library: { type: 'image' },
		} );
		frame.on( 'select', () => {
			const a = frame.state().get( 'selection' ).first().toJSON();
			onSelect( {
				id: a.id,
				url: a.sizes?.medium?.url || a.url,
				name: a.filename || a.title || '',
			} );
		} );
		frame.open();
	};
}

/** Upload a dropped image through the REST media endpoint. */
async function uploadImage( file: File ): Promise< LogoMeta > {
	const body = new FormData();
	body.append( 'file', file, file.name );
	const a: any = await apiFetch( {
		path: '/wp/v2/media',
		method: 'POST',
		body,
	} );
	const sizes = a.media_details?.sizes || {};
	return {
		id: a.id,
		url: sizes.medium?.source_url || a.source_url,
		name: file.name,
	};
}

function detectFormat( detect: any, url: string ): string {
	const ct = detect?.content_type || '';
	if ( /aac/i.test( ct ) || /\.aac\b/i.test( url ) ) {
		return 'aac';
	}
	if ( /ogg|opus/i.test( ct ) ) {
		return 'ogg';
	}
	if ( /mpegurl|m3u8/i.test( ct ) || /\.m3u8/i.test( url ) ) {
		return 'hls';
	}
	if ( /dash\+xml/i.test( ct ) || /\.mpd/i.test( url ) ) {
		return 'dash';
	}
	return 'mp3';
}

/** The facts a detect result proves, as chip labels. Empty when the probe learned nothing. */
function detectFacts( detect: any, url: string ): string[] {
	if ( ! detect || detect.failed ) {
		return [];
	}
	const facts: string[] = [];
	if ( detect.content_type || detect.server ) {
		facts.push( detectFormat( detect, url ).toUpperCase() );
	}
	if ( detect.bitrate ) {
		// translators: %d: stream bitrate in kilobits per second
		facts.push( sprintf( __( '%d kbps', 'streamsera' ), detect.bitrate ) );
	}
	return facts;
}

/** "Artist — Title" from a detect result's metadata, if it carried one. */
function detectNowPlaying( detect: any ): string {
	const m = detect?.metadata || {};
	const title = typeof m.title === 'string' ? m.title : '';
	const artist = typeof m.artist === 'string' ? m.artist : '';
	return [ artist, title ].filter( Boolean ).join( ' — ' );
}

/**
 * A friendlier default station name from the stream's own name: Icecast names often carry a
 * tagline ("Groove Salad: a nicely chilled …") or a host suffix ("… [SomaFM]").
 */
export function cleanStreamName( raw: string ): string {
	let n = String( raw || '' )
		.replace( /\s*[\[(][^\])]*[\])]\s*$/, '' )
		.trim();
	const cut = n.search( /\s*(?::|\s[-–—|]\s)/ );
	if ( cut > 2 ) {
		n = n.slice( 0, cut );
	}
	return n.slice( 0, 80 ).trim();
}

/** A section header inside a step card: small icon tile + label. */
function FieldLabel( {
	icon,
	htmlFor,
	children,
	optional,
}: {
	icon: string;
	htmlFor?: string;
	children: any;
	optional?: boolean;
} ) {
	const Tag: any = htmlFor ? 'label' : 'span';
	return (
		<Tag className="ss-wiz__label" htmlFor={ htmlFor }>
			<span className="ss-wiz__label-icon" aria-hidden="true">
				<I name={ icon } size={ 15 } />
			</span>
			{ children }
			{ optional ? (
				<span className="ss-wiz__optional">
					{ __( '(optional)', 'streamsera' ) }
				</span>
			) : null }
		</Tag>
	);
}

function StepHead( {
	n,
	title,
	text,
}: {
	n: number;
	title: string;
	text: string;
} ) {
	return (
		<div className="ss-wiz__head">
			<p className="ss-wiz__eyebrow">
				{ sprintf(
					// translators: 1: current step number, 2: number of steps
					__( 'Step %1$d of %2$d', 'streamsera' ),
					n,
					STEPS.length
				) }
			</p>
			<h1 className="ss-wiz__title">{ title }</h1>
			<p className="ss-wiz__lede">{ text }</p>
		</div>
	);
}

export default function SetupWizard() {
	const [ step, setStep ] = useState( 0 );

	// Station
	const [ url, setUrl ] = useState( '' );
	const [ autoUrl, setAutoUrl ] = useState( '' );
	const [ name, setName ] = useState( '' );
	const [ genre, setGenre ] = useState( '' );
	const [ logo, setLogo ] = useState< LogoMeta >( { id: 0, url: '' } );
	const [ uploading, setUploading ] = useState( false );
	const [ dragOver, setDragOver ] = useState( false );
	const [ detect, setDetect ] = useState< any >( null );
	const [ detecting, setDetecting ] = useState( false );
	const [ existing, setExisting ] = useState< any[] | null >( null );

	// Look
	const [ layout, setLayout ] = useState< string >( config.defaults.layout );
	const [ skin, setSkin ] = useState< string >( config.defaults.skin );
	const [ color, setColor ] = useState( '' );
	const [ allSkins, setAllSkins ] = useState( false );

	// Publish
	const canPages = !! cfgAny.canEditPages;
	const canListen = !! config.canManage;
	const [ placement, setPlacement ] = useState< Placement >(
		canPages ? 'page' : 'manual'
	);
	const [ pages, setPages ] = useState< any[] | null >( null );
	const [ pageId, setPageId ] = useState< string >( 'new' );
	const [ newTitle, setNewTitle ] = useState< string >(
		__( 'Listen live', 'streamsera' )
	);
	const [ position, setPosition ] = useState< 'prepend' | 'append' >(
		'prepend'
	);
	const [ slug, setSlug ] = useState( 'listen' );

	// Preview + finish
	const [ device, setDevice ] = useState< 'desktop' | 'phone' >( 'desktop' );
	const [ busy, setBusy ] = useState( false );
	const [ error, setError ] = useState( '' );
	const [ result, setResult ] = useState< {
		station: number;
		player: number;
	} | null >( null );
	const [ placed, setPlaced ] = useState< Placed | null >( null );

	const done = !! result;
	const scrollRef = useRef< HTMLDivElement | null >( null );

	// Every step (and the finish screen) opens at its top.
	useEffect( () => {
		scrollRef.current?.scrollTo( { top: 0 } );
		window.scrollTo( 0, 0 );
	}, [ step, done ] );
	const pickLogo = useMediaPicker( setLogo );

	useEffect( () => {
		stationsApi
			.list()
			.then( setExisting )
			.catch( () => setExisting( [] ) );
	}, [] );

	// Pages for "Add it to a page", loaded the first time the Publish step opens.
	useEffect( () => {
		if ( step !== 2 || pages !== null || ! canPages ) {
			return;
		}
		ss.searchPages( '' )
			.then( ( list ) => {
				const items = list || [];
				setPages( items );
				// Never pre-select an arbitrary page: only an obvious home page, otherwise a new page.
				const home = items.find(
					( p ) =>
						p?.status === 'publish' &&
						/^(home|front page|homepage)$/i.test(
							( p?.title?.raw || '' ).trim()
						)
				);
				setPageId( home ? String( home.id ) : 'new' );
			} )
			.catch( () => setPages( [] ) );
	}, [ step, pages, canPages ] );

	// Each check gets a number; a reply for an older link (typing, a second click) is dropped.
	const detectRun = useRef( 0 );
	const runDetect = async ( target?: string ) => {
		const u = ( typeof target === 'string' ? target : url ).trim();
		if ( ! u ) {
			return;
		}
		const run = ++detectRun.current;
		setDetecting( true );
		setDetect( null );
		setError( '' );
		let r: any;
		try {
			r = ( await ss.detect( u ) ) || { failed: true };
		} catch ( e: any ) {
			r = { failed: true, message: e?.message || '' };
		}
		if ( run !== detectRun.current ) {
			return;
		}
		setDetect( r );
		if ( r?.name ) {
			setName( ( n ) => n || cleanStreamName( r.name ) );
		}
		setDetecting( false );
	};

	// Check automatically once a complete-looking link has been pasted or typed.
	useEffect( () => {
		if ( ! autoUrl || ! /^https?:\/\/\S+\.\S+/i.test( autoUrl ) ) {
			return;
		}
		const t = window.setTimeout( () => runDetect( autoUrl ), 500 );
		return () => window.clearTimeout( t );
	}, [ autoUrl ] ); // eslint-disable-line react-hooks/exhaustive-deps

	const dropLogo = async ( e: any ) => {
		e.preventDefault();
		setDragOver( false );
		const file: File | undefined = e.dataTransfer?.files?.[ 0 ];
		if ( ! file || ! /^image\//.test( file.type ) ) {
			return;
		}
		setUploading( true );
		try {
			setLogo( await uploadImage( file ) );
		} catch ( err: any ) {
			setError(
				err?.message ||
					__( 'Could not upload that image.', 'streamsera' )
			);
		}
		setUploading( false );
	};

	const stationName = name.trim() || __( 'My Station', 'streamsera' );
	const facts = detectFacts( detect, url );
	const nowPlaying = detectNowPlaying( detect );
	const checked = !! detect && ! detecting;
	const found =
		checked &&
		( facts.length > 0 || !! detect.name || detect.reachable === true );

	const previewStation = useMemo(
		() =>
			stationToPublic(
				{
					id: 0,
					title: { raw: stationName },
					meta: {
						_streamsera_streams: [
							{
								url,
								label: '',
								format: detectFormat( detect, url ),
								bitrate: detect?.bitrate || 0,
							},
						],
						_streamsera_genre: genre,
						_streamsera_slogan: '',
						_streamsera_social: {},
					},
				},
				logo.url
			),
		[ stationName, url, detect, genre, logo.url ]
	);

	// The player config the wizard saves: defaults + layout + style, with the chosen colour on top.
	const cfg: PlayerConfig = useMemo( () => {
		const sk: any = config.skins?.[ skin ] || {};
		return {
			...config.defaults,
			layout,
			skin,
			tokens: {
				...config.defaults.tokens,
				...( sk.tokens || {} ),
				...( color ? { primary: color } : {} ),
			},
		};
	}, [ layout, skin, color ] );
	const effectiveColor =
		color ||
		( cfg.tokens as any )?.primary ||
		( config.defaults.tokens as any )?.primary ||
		'#5b4cf5';

	const skinEntries = Object.entries( config.skins || {} ) as Array<
		[ string, any ]
	>;
	const shownSkins = useMemo( () => {
		if ( allSkins ) {
			return skinEntries;
		}
		const first = skinEntries.slice( 0, SKINS_FIRST );
		// Keep the chosen style visible when the list is collapsed.
		if ( ! first.some( ( [ k ] ) => k === skin ) ) {
			const cur = skinEntries.find( ( [ k ] ) => k === skin );
			if ( cur ) {
				first.splice( SKINS_FIRST - 1, 1, cur );
			}
		}
		return first;
	}, [ allSkins, skin ] ); // eslint-disable-line react-hooks/exhaustive-deps

	const home = String( cfgAny.siteUrl || '' ).replace( /\/$/, '' );
	const host = home.replace( /^https?:\/\//, '' );
	const pretty = cfgAny.permalinks !== false;
	const cleanSlug =
		slug
			.toLowerCase()
			.replace( /[^a-z0-9-]+/g, '-' )
			.replace( /^-+|-+$/g, '' ) || 'listen';
	const listenUrl = pretty
		? `${ home }/${ cleanSlug }/`
		: `${ home }/?streamsera_listen=1`;
	const chosenPage = pages?.find( ( p ) => String( p.id ) === pageId );
	const pagePath = ( p: any ) => {
		try {
			const u = new URL( p.link );
			return u.host + u.pathname.replace( /\/$/, '' ) + u.search;
		} catch ( e ) {
			return host;
		}
	};
	const previewAddress =
		step < 2 && ! done
			? host
			: placement === 'listen'
			? listenUrl.replace( /^https?:\/\//, '' ).replace( /\/$/, '' )
			: placement === 'page'
			? chosenPage
				? pagePath( chosenPage )
				: `${ host }/${ newTitle
						.toLowerCase()
						.replace( /[^a-z0-9]+/g, '-' )
						.replace( /^-|-$/g, '' ) }`
			: host;

	const finish = async () => {
		setBusy( true );
		setError( '' );
		const status = config.canPublish === false ? 'draft' : 'publish';
		let created: { station: number; player: number };
		try {
			const station = await stationsApi.create( {
				title: stationName,
				status,
				meta: {
					_streamsera_streams: [
						{
							url: url.trim(),
							label: detect?.bitrate
								? `${ detect.bitrate } kbps`
								: '',
							format: detectFormat( detect, url ),
							bitrate: detect?.bitrate || 0,
						},
					],
					_streamsera_genre: genre.trim(),
					_streamsera_logo_id: logo.id || 0,
					_streamsera_metadata: {
						provider: 'auto',
						url: '',
						mount: '',
						fields: {},
					},
				},
			} );
			const player = await playersApi.create( {
				title: stationName,
				status,
				meta: {
					_streamsera_config: {
						...cfg,
						station: station.id,
						stations: [],
					},
				},
			} );
			created = { station: station.id, player: player.id };
		} catch ( e: any ) {
			setError(
				e?.message ||
					__( 'Something went wrong while saving.', 'streamsera' )
			);
			setBusy( false );
			return;
		}

		// Place the player. A failure here keeps the station and player; the finish screen says what happened.
		let where: Placed = { kind: placement };
		try {
			if ( placement === 'page' ) {
				const res = await ss.embedToPage( {
					player: created.player,
					...( chosenPage
						? { page_id: chosenPage.id, position }
						: {
								title:
									newTitle.trim() ||
									__( 'Listen live', 'streamsera' ),
								status: 'publish' as const,
						  } ),
				} );
				where = {
					kind: 'page',
					view: res?.view_link,
					edit: res?.edit_link,
					title: res?.title,
					draft: res?.status && res.status !== 'publish',
				};
			} else if ( placement === 'listen' ) {
				await ss.saveSettings( {
					...( await ss.getSettings() ),
					listen_enabled: true,
					listen_slug: cleanSlug,
					listen_player: created.player,
				} );
				where = { kind: 'listen', view: listenUrl };
			}
		} catch ( e: any ) {
			where = {
				kind: placement,
				error:
					e?.message ||
					__( 'The player could not be placed.', 'streamsera' ),
			};
		}

		try {
			await ss.saveSettings( {
				...( await ss.getSettings() ),
				setup_completed: true,
			} );
		} catch ( e ) {
			// Only managers can save settings; the checklist simply stays open for everyone else.
		}

		setPlaced( where );
		setResult( created );
		setBusy( false );
	};

	const next = () => {
		if ( step < 2 ) {
			setStep( step + 1 );
		} else {
			finish();
		}
	};
	const canNext = step === 0 ? !! url.trim() && ! detecting : ! busy;
	const nextHint =
		step === 0 && ! url.trim()
			? __( 'Paste a stream link to continue', 'streamsera' )
			: step === 2
			? __( 'Finishing creates one station and one player', 'streamsera' )
			: '';

	const previewNote = done
		? __(
				'Listeners can keep playing while they browse your site.',
				'streamsera'
		  )
		: step === 0
		? __(
				"This is how visitors will see your player. You'll pick the look in the next step.",
				'streamsera'
		  )
		: step === 1
		? __(
				'Want more control? Colours, components and behaviour are all in the builder after setup.',
				'streamsera'
		  )
		: __(
				'Listeners can keep playing while they browse your site.',
				'streamsera'
		  );

	const renderPlayer = ( key: string ) => (
		<Player
			key={ `${ key }-${ layout }-${ skin }` }
			config={ {
				...cfg,
				theme: cfg.theme === 'auto' ? 'light' : cfg.theme,
			} }
			station={ previewStation }
			preview
		/>
	);

	const doneLine = (): string => {
		if ( ! placed || placed.error || placed.kind === 'manual' ) {
			return __(
				'Your station and player are saved. Copy the shortcode below to place it anywhere.',
				'streamsera'
			);
		}
		if ( placed.kind === 'listen' ) {
			return sprintf(
				// translators: %s: listen page address
				__( 'Your listen page is live at %s.', 'streamsera' ),
				listenUrl.replace( /^https?:\/\//, '' )
			);
		}
		return placed.draft
			? sprintf(
					// translators: %s: page title
					__(
						'Your player is on the “%s” page, saved as a draft — publish it when you’re ready.',
						'streamsera'
					),
					placed.title || ''
			  )
			: sprintf(
					// translators: %s: page title
					__( 'Your player is now on the “%s” page.', 'streamsera' ),
					placed.title || ''
			  );
	};

	return (
		<div className="ss-wiz">
			<header className="ss-wiz__bar">
				<div className="ss-wiz__brand">
					<span className="ss-wiz__mark" aria-hidden="true">
						<I name="radio" size={ 18 } />
					</span>
					<strong>StreamSera</strong>
					<span className="ss-wiz__divider" aria-hidden="true" />
					<span className="ss-wiz__brand-sub">
						{ __( 'Setup', 'streamsera' ) }
					</span>
				</div>

				<nav
					className="ss-wiz__stepper"
					aria-label={ __( 'Setup steps', 'streamsera' ) }
				>
					<ol>
						{ STEPS.map( ( s, i ) => {
							const isDone = done || i < step;
							const isCurrent = ! done && i === step;
							return (
								<li
									key={ s.id }
									className={
										isDone
											? 'is-done'
											: isCurrent
											? 'is-current'
											: ''
									}
								>
									<button
										type="button"
										disabled={ done || i > step }
										aria-current={
											isCurrent ? 'step' : undefined
										}
										onClick={ () =>
											i < step && setStep( i )
										}
									>
										<span className="ss-wiz__dot">
											{ isDone ? (
												<I name="check" size={ 14 } />
											) : (
												i + 1
											) }
										</span>
										<span className="ss-wiz__step-label">
											{ s.label }
										</span>
									</button>
									{ i < STEPS.length - 1 ? (
										<span
											className="ss-wiz__line"
											aria-hidden="true"
										/>
									) : null }
								</li>
							);
						} ) }
					</ol>
				</nav>

				<div className="ss-wiz__bar-end">
					{ ! done ? (
						<button
							type="button"
							className="ss-wiz__skip"
							title={ __(
								'You can finish setup any time from the Dashboard.',
								'streamsera'
							) }
							onClick={ () => navigate( 'dashboard' ) }
						>
							{ __( 'Skip setup', 'streamsera' ) }
							<I name="skip" size={ 16 } />
						</button>
					) : null }
				</div>
			</header>

			<div className="ss-wiz__scroll" ref={ scrollRef }>
				{ ! done ? (
					<div className="ss-wiz__layout">
						<section className="ss-wiz__main">
							{ step === 0 && (
								<>
									<StepHead
										n={ 1 }
										title={ __(
											'Add your station',
											'streamsera'
										) }
										text={ __(
											"Paste the stream link from your radio host. We'll check it and fill in the details for you.",
											'streamsera'
										) }
									/>
									<div className="ss-wiz__card">
										<div className="ss-wiz__field">
											<FieldLabel
												icon="link"
												htmlFor="ss-wiz-url"
											>
												{ __(
													'Stream link',
													'streamsera'
												) }
											</FieldLabel>
											<div className="ss-wiz__row">
												<div className="ss-wiz__input-wrap">
													<I
														name="link"
														size={ 18 }
														className="ss-wiz__input-icon"
													/>
													<input
														id="ss-wiz-url"
														className="ss-wiz__input ss-wiz__input--icon"
														type="url"
														inputMode="url"
														autoComplete="off"
														spellCheck={ false }
														value={ url }
														placeholder={ __(
															'Paste your stream link',
															'streamsera'
														) }
														onChange={ ( e ) => {
															detectRun.current++;
															setDetecting(
																false
															);
															setUrl(
																e.target.value
															);
															setDetect( null );
															setAutoUrl(
																e.target.value
															);
														} }
														onKeyDown={ ( e ) =>
															e.key === 'Enter' &&
															runDetect()
														}
													/>
												</div>
												<button
													type="button"
													className="ss-wiz__btn ss-wiz__btn--dark"
													onClick={ () =>
														runDetect()
													}
													disabled={
														! url.trim() ||
														detecting
													}
												>
													{ detecting ? (
														<span
															className="ss-wiz__spinner"
															aria-hidden="true"
														/>
													) : (
														<I
															name="pulse"
															size={ 16 }
														/>
													) }
													{ detecting
														? __(
																'Checking…',
																'streamsera'
														  )
														: checked
														? __(
																'Check again',
																'streamsera'
														  )
														: __(
																'Check stream',
																'streamsera'
														  ) }
												</button>
											</div>
											<p className="ss-wiz__hint">
												{ __(
													'Works with Icecast, Shoutcast, HLS and most hosted streams. You’ll find it in your radio host’s dashboard, usually called “stream URL”.',
													'streamsera'
												) }
											</p>
										</div>

										{ checked && (
											<div
												className={ `ss-wiz__status ${
													found
														? 'is-ok'
														: 'is-unknown'
												}` }
												role="status"
											>
												<div className="ss-wiz__status-row">
													<span
														className="ss-wiz__status-icon"
														aria-hidden="true"
													>
														<I
															name={
																found
																	? 'check'
																	: 'info'
															}
															size={ 14 }
														/>
													</span>
													<strong>
														{ found
															? __(
																	'Stream found',
																	'streamsera'
															  )
															: __(
																	"We couldn't read the stream details",
																	'streamsera'
															  ) }
													</strong>
													{ facts.map( ( f ) => (
														<span
															key={ f }
															className="ss-wiz__chip"
														>
															{ f }
														</span>
													) ) }
												</div>
												<p className="ss-wiz__status-text">
													{ found && nowPlaying ? (
														<>
															<strong>
																{ __(
																	'Now playing:',
																	'streamsera'
																) }
															</strong>{ ' ' }
															{ nowPlaying }
														</>
													) : found ? (
														__(
															'Your stream is reachable.',
															'streamsera'
														)
													) : (
														__(
															'You can still continue — check that the link plays in your browser.',
															'streamsera'
														)
													) }
												</p>
											</div>
										) }

										{ ( checked || !! name ) && (
											<>
												<div className="ss-wiz__sep" />
												<div className="ss-wiz__grid2">
													<div className="ss-wiz__field">
														<FieldLabel
															icon="tag"
															htmlFor="ss-wiz-name"
														>
															{ __(
																'Station name',
																'streamsera'
															) }
														</FieldLabel>
														<input
															id="ss-wiz-name"
															className="ss-wiz__input"
															type="text"
															value={ name }
															placeholder={ __(
																'e.g. Sunrise FM',
																'streamsera'
															) }
															onChange={ ( e ) =>
																setName(
																	e.target
																		.value
																)
															}
														/>
													</div>
													<div className="ss-wiz__field">
														<FieldLabel
															icon="music"
															htmlFor="ss-wiz-genre"
															optional
														>
															{ __(
																'Genre',
																'streamsera'
															) }
														</FieldLabel>
														<input
															id="ss-wiz-genre"
															className="ss-wiz__input"
															type="text"
															value={ genre }
															placeholder={ __(
																'e.g. Chill, News, Talk',
																'streamsera'
															) }
															onChange={ ( e ) =>
																setGenre(
																	e.target
																		.value
																)
															}
														/>
													</div>
												</div>
												<div
													className={ `ss-wiz__logo ${
														dragOver
															? 'is-over'
															: ''
													}` }
													onDragOver={ ( e ) => {
														e.preventDefault();
														setDragOver( true );
													} }
													onDragLeave={ () =>
														setDragOver( false )
													}
													onDrop={ dropLogo }
												>
													<span className="ss-wiz__logo-thumb">
														{ logo.url ? (
															<img
																src={ logo.url }
																alt=""
															/>
														) : (
															<I
																name={
																	uploading
																		? 'refresh'
																		: 'image'
																}
																size={ 22 }
															/>
														) }
													</span>
													<span className="ss-wiz__logo-meta">
														<strong>
															{ __(
																'Station logo',
																'streamsera'
															) }
														</strong>
														<span>
															{ uploading
																? __(
																		'Uploading…',
																		'streamsera'
																  )
																: logo.url
																? logo.name ||
																  __(
																		'Shown when a song has no artwork.',
																		'streamsera'
																  )
																: __(
																		'Square image, 300 px or larger. Shown when a song has no artwork.',
																		'streamsera'
																  ) }
														</span>
													</span>
													<span className="ss-wiz__logo-actions">
														<button
															type="button"
															className="ss-wiz__btn"
															onClick={ pickLogo }
															disabled={
																uploading
															}
														>
															<I
																name="upload"
																size={ 16 }
															/>
															{ logo.url
																? __(
																		'Change',
																		'streamsera'
																  )
																: __(
																		'Choose image',
																		'streamsera'
																  ) }
														</button>
														{ logo.url ? (
															<button
																type="button"
																className="ss-wiz__icon-btn is-danger"
																aria-label={ __(
																	'Remove logo',
																	'streamsera'
																) }
																title={ __(
																	'Remove logo',
																	'streamsera'
																) }
																onClick={ () =>
																	setLogo( {
																		id: 0,
																		url: '',
																	} )
																}
															>
																<I
																	name="trash"
																	size={ 16 }
																/>
															</button>
														) : null }
													</span>
												</div>
											</>
										) }
									</div>
									{ existing && existing.length > 0 && (
										<p className="ss-wiz__note">
											<I name="info" size={ 15 } />
											{ __(
												'You already have stations. This adds a new one — to build a player for an existing station, use the Players page.',
												'streamsera'
											) }
										</p>
									) }
								</>
							) }

							{ step === 1 && (
								<>
									<StepHead
										n={ 2 }
										title={ __(
											'Choose how it looks',
											'streamsera'
										) }
										text={ __(
											'Pick a starting point. The preview updates as you go, and everything can be fine-tuned later in the builder.',
											'streamsera'
										) }
									/>
									<div className="ss-wiz__card ss-wiz__card--roomy">
										<div className="ss-wiz__field">
											<FieldLabel icon="layout">
												{ __( 'Layout', 'streamsera' ) }
											</FieldLabel>
											<div
												className="ss-wiz__tiles"
												role="group"
												aria-label={ __(
													'Layout',
													'streamsera'
												) }
											>
												{ Object.entries(
													config.layouts || {}
												).map( ( [ id, def ] ) => (
													<button
														key={ id }
														type="button"
														className={ `ss-wiz__tile ${
															layout === id
																? 'is-active'
																: ''
														}` }
														aria-pressed={
															layout === id
														}
														onClick={ () =>
															setLayout( id )
														}
													>
														<span
															className="ss-wiz__tile-art"
															aria-hidden="true"
														>
															<LayoutThumb
																id={ id }
															/>
														</span>
														<span className="ss-wiz__tile-label">
															{ def.label }
														</span>
														{ def.description ? (
															<span className="ss-wiz__tile-desc">
																{
																	def.description
																}
															</span>
														) : null }
													</button>
												) ) }
											</div>
										</div>

										<div className="ss-wiz__field">
											<FieldLabel icon="palette">
												{ __( 'Style', 'streamsera' ) }
											</FieldLabel>
											<div
												className="ss-wiz__pills"
												role="group"
												aria-label={ __(
													'Style',
													'streamsera'
												) }
											>
												{ shownSkins.map(
													( [ key, sk ] ) => {
														const t =
															sk.tokens || {};
														return (
															<button
																key={ key }
																type="button"
																className={ `ss-wiz__pill ${
																	skin === key
																		? 'is-active'
																		: ''
																}` }
																aria-pressed={
																	skin === key
																}
																title={
																	sk.description ||
																	sk.label
																}
																onClick={ () =>
																	setSkin(
																		key
																	)
																}
															>
																<span
																	className="ss-wiz__swatch"
																	aria-hidden="true"
																	style={ {
																		background: `linear-gradient(135deg, ${
																			t.background ||
																			'#ffffff'
																		} 50%, ${
																			t.primary ||
																			'#5b4cf5'
																		} 50%)`,
																	} }
																/>
																{ sk.label }
															</button>
														);
													}
												) }
												{ skinEntries.length >
													SKINS_FIRST && (
													<button
														type="button"
														className="ss-wiz__pill ss-wiz__pill--more"
														onClick={ () =>
															setAllSkins(
																! allSkins
															)
														}
													>
														<I
															name={
																allSkins
																	? 'chevronUp'
																	: 'plus'
															}
															size={ 16 }
														/>
														{ allSkins
															? __(
																	'Fewer styles',
																	'streamsera'
															  )
															: sprintf(
																	// translators: %d: number of hidden styles
																	__(
																		'%d more',
																		'streamsera'
																	),
																	skinEntries.length -
																		SKINS_FIRST
															  ) }
													</button>
												) }
											</div>
										</div>

										<div className="ss-wiz__field">
											<FieldLabel icon="swatch">
												{ __(
													'Accent colour',
													'streamsera'
												) }
											</FieldLabel>
											<div
												className="ss-wiz__colors"
												role="group"
												aria-label={ __(
													'Accent colour',
													'streamsera'
												) }
											>
												{ COLORS.map(
													( [ hex, label ] ) => (
														<button
															key={ hex }
															type="button"
															className={ `ss-wiz__color ${
																color === hex
																	? 'is-active'
																	: ''
															}` }
															style={ {
																background: hex,
																color: hex,
															} }
															aria-label={ label }
															title={ label }
															aria-pressed={
																color === hex
															}
															onClick={ () =>
																setColor( hex )
															}
														/>
													)
												) }
												<label
													className={ `ss-wiz__color ss-wiz__color--custom ${
														color &&
														! COLORS.some(
															( [ h ] ) =>
																h === color
														)
															? 'is-active'
															: ''
													}` }
													title={ __(
														'Custom colour',
														'streamsera'
													) }
												>
													<input
														type="color"
														aria-label={ __(
															'Custom colour',
															'streamsera'
														) }
														value={ effectiveColor }
														onChange={ ( e ) =>
															setColor(
																e.target.value
															)
														}
													/>
													<I
														name="brush"
														size={ 15 }
													/>
												</label>
												{ color ? (
													<button
														type="button"
														className="ss-wiz__link-btn"
														onClick={ () =>
															setColor( '' )
														}
													>
														<I
															name="undo"
															size={ 14 }
														/>
														{ __(
															'Use the style’s colour',
															'streamsera'
														) }
													</button>
												) : (
													<span className="ss-wiz__hint">
														{ __(
															'Used for the play button and highlights.',
															'streamsera'
														) }
													</span>
												) }
											</div>
										</div>
									</div>
								</>
							) }

							{ step === 2 && (
								<>
									<StepHead
										n={ 3 }
										title={ __(
											'Put it on your site',
											'streamsera'
										) }
										text={ __(
											'Choose where listeners will find your player. You can add it to more places later.',
											'streamsera'
										) }
									/>
									<div
										className="ss-wiz__options"
										role="radiogroup"
										aria-label={ __(
											'Where to add the player',
											'streamsera'
										) }
									>
										{ (
											[
												canPages && {
													id: 'page',
													icon: 'pages',
													label: __(
														'Add it to a page',
														'streamsera'
													),
													desc: __(
														'Place the player on a page you already have, or a new one.',
														'streamsera'
													),
												},
												canListen && {
													id: 'listen',
													icon: 'headphones',
													label: __(
														'Create a listen page',
														'streamsera'
													),
													desc: __(
														'A ready-made, full-screen page just for your station.',
														'streamsera'
													),
												},
												{
													id: 'manual',
													icon: 'code',
													label: __(
														'I’ll add it myself',
														'streamsera'
													),
													desc: __(
														'Use the block, a shortcode or your page builder.',
														'streamsera'
													),
												},
											].filter( Boolean ) as Array< {
												id: Placement;
												icon: string;
												label: string;
												desc: string;
											} >
										 ).map( ( o ) => (
											<button
												key={ o.id }
												type="button"
												role="radio"
												aria-checked={
													placement === o.id
												}
												className={ `ss-wiz__option ${
													placement === o.id
														? 'is-active'
														: ''
												}` }
												onClick={ () =>
													setPlacement( o.id )
												}
											>
												<span
													className="ss-wiz__option-icon"
													aria-hidden="true"
												>
													<I
														name={ o.icon }
														size={ 20 }
													/>
												</span>
												<span className="ss-wiz__option-text">
													<strong>{ o.label }</strong>
													<span>{ o.desc }</span>
												</span>
												<span
													className="ss-wiz__radio"
													aria-hidden="true"
												/>
											</button>
										) ) }
									</div>

									<div className="ss-wiz__card">
										{ placement === 'page' && (
											<>
												<div className="ss-wiz__grid2 ss-wiz__grid2--end">
													<div className="ss-wiz__field">
														<FieldLabel
															icon="pages"
															htmlFor="ss-wiz-page"
														>
															{ __(
																'Page',
																'streamsera'
															) }
														</FieldLabel>
														<select
															id="ss-wiz-page"
															className="ss-wiz__input ss-wiz__select"
															value={ pageId }
															disabled={
																pages === null
															}
															onChange={ ( e ) =>
																setPageId(
																	e.target
																		.value
																)
															}
														>
															{ pages === null ? (
																<option
																	value={
																		pageId
																	}
																>
																	{ __(
																		'Loading pages…',
																		'streamsera'
																	) }
																</option>
															) : null }
															{ (
																pages || []
															).map( ( p ) => (
																<option
																	key={ p.id }
																	value={ String(
																		p.id
																	) }
																>
																	{ ( p.title
																		?.raw ||
																		`#${ p.id }` ) +
																		( p.status &&
																		p.status !==
																			'publish'
																			? ` (${ p.status })`
																			: '' ) }
																</option>
															) ) }
															<option value="new">
																{ __(
																	'+ Create a new page',
																	'streamsera'
																) }
															</option>
														</select>
													</div>
													{ pageId === 'new' ? (
														<div className="ss-wiz__field">
															<FieldLabel
																icon="edit"
																htmlFor="ss-wiz-newpage"
															>
																{ __(
																	'New page title',
																	'streamsera'
																) }
															</FieldLabel>
															<input
																id="ss-wiz-newpage"
																className="ss-wiz__input"
																type="text"
																value={
																	newTitle
																}
																onChange={ (
																	e
																) =>
																	setNewTitle(
																		e.target
																			.value
																	)
																}
															/>
														</div>
													) : (
														<div className="ss-wiz__field">
															<FieldLabel icon="list">
																{ __(
																	'Where on the page',
																	'streamsera'
																) }
															</FieldLabel>
															<div
																className="ss-wiz__seg"
																role="group"
																aria-label={ __(
																	'Where on the page',
																	'streamsera'
																) }
															>
																<button
																	type="button"
																	className={
																		position ===
																		'prepend'
																			? 'is-active'
																			: ''
																	}
																	aria-pressed={
																		position ===
																		'prepend'
																	}
																	onClick={ () =>
																		setPosition(
																			'prepend'
																		)
																	}
																>
																	<I
																		name="arrowUp"
																		size={
																			16
																		}
																	/>
																	{ __(
																		'Top',
																		'streamsera'
																	) }
																</button>
																<button
																	type="button"
																	className={
																		position ===
																		'append'
																			? 'is-active'
																			: ''
																	}
																	aria-pressed={
																		position ===
																		'append'
																	}
																	onClick={ () =>
																		setPosition(
																			'append'
																		)
																	}
																>
																	<I
																		name="arrowDown"
																		size={
																			16
																		}
																	/>
																	{ __(
																		'Bottom',
																		'streamsera'
																	) }
																</button>
															</div>
														</div>
													) }
												</div>
												<p className="ss-wiz__hint">
													{ pageId === 'new'
														? __(
																'We’ll create and publish the page with your player on it.',
																'streamsera'
														  )
														: __(
																'We’ll add the StreamSera Player block. Nothing else on the page changes.',
																'streamsera'
														  ) }
												</p>
											</>
										) }

										{ placement === 'listen' && (
											<>
												<div className="ss-wiz__field">
													<FieldLabel
														icon="globe"
														htmlFor="ss-wiz-slug"
													>
														{ __(
															'Page address',
															'streamsera'
														) }
													</FieldLabel>
													{ pretty ? (
														<div className="ss-wiz__affix">
															<span className="ss-wiz__affix-pre">{ `${ host }/` }</span>
															<input
																id="ss-wiz-slug"
																type="text"
																value={ slug }
																spellCheck={
																	false
																}
																onChange={ (
																	e
																) =>
																	setSlug(
																		e.target
																			.value
																	)
																}
															/>
														</div>
													) : (
														<code className="ss-wiz__code">
															{ listenUrl }
														</code>
													) }
												</div>
												<p className="ss-wiz__hint">
													{ __(
														'A full-screen page with your player, what’s playing and share buttons — handy to link from social media.',
														'streamsera'
													) }
												</p>
											</>
										) }

										{ placement === 'manual' && (
											<div className="ss-wiz__manual">
												<div className="ss-wiz__manual-item">
													<span
														className="ss-wiz__label-icon"
														aria-hidden="true"
													>
														<I
															name="block"
															size={ 15 }
														/>
													</span>
													<span>
														<strong>
															{ __(
																'Block editor',
																'streamsera'
															) }
														</strong>
														{ __(
															'Search for “StreamSera Player” in the block inserter.',
															'streamsera'
														) }
													</span>
												</div>
												<div className="ss-wiz__manual-item">
													<span
														className="ss-wiz__label-icon"
														aria-hidden="true"
													>
														<I
															name="layout"
															size={ 15 }
														/>
													</span>
													<span>
														<strong>
															{ __(
																'Page builders',
																'streamsera'
															) }
														</strong>
														{ __(
															'Elementor, Divi, Bricks, Beaver Builder, Breakdance and Oxygen have a StreamSera element.',
															'streamsera'
														) }
													</span>
												</div>
												<div className="ss-wiz__manual-item">
													<span
														className="ss-wiz__label-icon"
														aria-hidden="true"
													>
														<I
															name="code"
															size={ 15 }
														/>
													</span>
													<span>
														<strong>
															{ __(
																'Shortcode',
																'streamsera'
															) }
														</strong>
														{ __(
															'You’ll get it to copy on the next screen.',
															'streamsera'
														) }
													</span>
												</div>
											</div>
										) }
									</div>
								</>
							) }

							{ error && (
								<div className="ss-wiz__alert" role="alert">
									<I name="warn" size={ 18 } />
									<span>{ error }</span>
									<button
										type="button"
										className="ss-wiz__icon-btn"
										aria-label={ __(
											'Dismiss',
											'streamsera'
										) }
										onClick={ () => setError( '' ) }
									>
										<I name="x" size={ 16 } />
									</button>
								</div>
							) }

							<footer className="ss-wiz__foot">
								{ step > 0 ? (
									<button
										type="button"
										className="ss-wiz__btn ss-wiz__btn--ghost"
										onClick={ () => setStep( step - 1 ) }
										disabled={ busy }
									>
										<I name="chevronLeft" size={ 18 } />
										{ __( 'Back', 'streamsera' ) }
									</button>
								) : null }
								<span className="ss-wiz__foot-hint">
									{ nextHint }
								</span>
								{ step === 1 ? (
									<button
										type="button"
										className="ss-wiz__btn ss-wiz__btn--ghost ss-wiz__btn--muted"
										onClick={ () => {
											setLayout( config.defaults.layout );
											setSkin( config.defaults.skin );
											setColor( '' );
											setStep( 2 );
										} }
									>
										<I name="skip" size={ 16 } />
										{ __(
											'Use the defaults',
											'streamsera'
										) }
									</button>
								) : null }
								<button
									type="button"
									className="ss-wiz__btn ss-wiz__btn--primary"
									onClick={ next }
									disabled={ ! canNext || busy }
								>
									{ busy ? (
										<span
											className="ss-wiz__spinner"
											aria-hidden="true"
										/>
									) : null }
									{ step < 2
										? __( 'Continue', 'streamsera' )
										: busy
										? __( 'Finishing…', 'streamsera' )
										: __( 'Finish setup', 'streamsera' ) }
									{ ! busy ? (
										<I
											name={
												step < 2
													? 'chevronRight'
													: 'check'
											}
											size={ 18 }
										/>
									) : null }
								</button>
							</footer>
						</section>

						<aside
							className="ss-wiz__aside"
							aria-label={ __( 'Live preview', 'streamsera' ) }
						>
							<div className="ss-wiz__browser">
								<div className="ss-wiz__chrome">
									<span
										className="ss-wiz__lights"
										aria-hidden="true"
									>
										<i />
										<i />
										<i />
									</span>
									<span className="ss-wiz__address">
										<I name="lock" size={ 13 } />
										<span className="ss-wiz__address-text">
											{ previewAddress }
										</span>
										<span className="ss-wiz__live">
											<i
												className={
													found ? 'is-on' : ''
												}
												aria-hidden="true"
											/>
											{ __(
												'Live preview',
												'streamsera'
											) }
										</span>
									</span>
									<span
										className="ss-wiz__seg ss-wiz__seg--icons"
										role="group"
										aria-label={ __(
											'Preview size',
											'streamsera'
										) }
									>
										<button
											type="button"
											className={
												device === 'desktop'
													? 'is-active'
													: ''
											}
											aria-pressed={
												device === 'desktop'
											}
											aria-label={ __(
												'Desktop',
												'streamsera'
											) }
											title={ __(
												'Desktop',
												'streamsera'
											) }
											onClick={ () =>
												setDevice( 'desktop' )
											}
										>
											<I name="desktop" size={ 16 } />
										</button>
										<button
											type="button"
											className={
												device === 'phone'
													? 'is-active'
													: ''
											}
											aria-pressed={ device === 'phone' }
											aria-label={ __(
												'Phone',
												'streamsera'
											) }
											title={ __(
												'Phone',
												'streamsera'
											) }
											onClick={ () =>
												setDevice( 'phone' )
											}
										>
											<I name="mobile" size={ 16 } />
										</button>
									</span>
								</div>
								<div className="ss-wiz__stage">
									<div
										className={ `ss-wiz__frame is-${ device }` }
									>
										{ renderPlayer( 'wiz' ) }
									</div>
								</div>
								<p className="ss-wiz__stage-note">
									<I name="info" size={ 15 } />
									<span>{ previewNote }</span>
								</p>
							</div>
						</aside>
					</div>
				) : (
					<div className="ss-wiz__done">
						<Confetti color={ effectiveColor } />
						<span className="ss-wiz__done-badge" aria-hidden="true">
							<I name="check" size={ 30 } />
						</span>
						<div>
							<h1 className="ss-wiz__title ss-wiz__title--done">
								{ __( 'You’re on air', 'streamsera' ) }
							</h1>
							<p className="ss-wiz__lede">{ doneLine() }</p>
						</div>

						{ placed?.error ? (
							<div
								className="ss-wiz__alert ss-wiz__alert--warn"
								role="status"
							>
								<I name="warn" size={ 18 } />
								<span>
									{ sprintf(
										// translators: %s: error message
										__(
											'We couldn’t place the player automatically (%s). Use the shortcode below instead.',
											'streamsera'
										),
										placed.error
									) }
								</span>
							</div>
						) : null }

						<div className="ss-wiz__done-stage">
							<div className="ss-wiz__frame">
								{ renderPlayer( 'done' ) }
							</div>
						</div>

						{ ( ! placed ||
							placed.error ||
							placed.kind === 'manual' ) &&
						result ? (
							<div className="ss-wiz__shortcode">
								<FieldLabel icon="code">
									{ __( 'Shortcode', 'streamsera' ) }
								</FieldLabel>
								<CopyCode
									code={ `[streamsera id="${ result.player }"]` }
								/>
							</div>
						) : null }

						<div className="ss-wiz__done-actions">
							{ placed?.view && ! placed.error ? (
								<a
									className="ss-wiz__btn ss-wiz__btn--primary"
									href={ placed.view }
									target="_blank"
									rel="noopener noreferrer"
								>
									<I name="external" size={ 16 } />
									{ __(
										'View it on your site',
										'streamsera'
									) }
								</a>
							) : (
								<button
									type="button"
									className="ss-wiz__btn ss-wiz__btn--primary"
									onClick={ () =>
										result && openPreview( result.player )
									}
								>
									<I name="external" size={ 16 } />
									{ __(
										'Preview in a new tab',
										'streamsera'
									) }
								</button>
							) }
							{ placed?.draft && placed.edit ? (
								<a
									className="ss-wiz__btn"
									href={ placed.edit }
									target="_blank"
									rel="noopener noreferrer"
								>
									<I name="edit" size={ 16 } />
									{ __( 'Edit the page', 'streamsera' ) }
								</a>
							) : null }
							<button
								type="button"
								className="ss-wiz__btn"
								onClick={ () =>
									result &&
									navigate( `players/${ result.player }` )
								}
							>
								<I name="sliders" size={ 16 } />
								{ __(
									'Fine-tune in the builder',
									'streamsera'
								) }
							</button>
						</div>

						<div className="ss-wiz__next">
							<span className="ss-wiz__next-title">
								{ __(
									'Next, when you’re ready',
									'streamsera'
								) }
							</span>
							<div className="ss-wiz__next-grid">
								<button
									type="button"
									className="ss-wiz__next-card"
									onClick={ () => navigate( 'stations/new' ) }
								>
									<span
										className="ss-wiz__label-icon"
										aria-hidden="true"
									>
										<I name="radio" size={ 16 } />
									</span>
									<strong>
										{ __(
											'Add more stations',
											'streamsera'
										) }
									</strong>
									<span>
										{ __(
											'Run several stations from one player with a station switcher.',
											'streamsera'
										) }
									</span>
								</button>
								{ config.canManage ? (
									<button
										type="button"
										className="ss-wiz__next-card"
										onClick={ () =>
											navigate( 'settings/station-pages' )
										}
									>
										<span
											className="ss-wiz__label-icon"
											aria-hidden="true"
										>
											<I name="globe" size={ 16 } />
										</span>
										<strong>
											{ __(
												'Turn on station pages',
												'streamsera'
											) }
										</strong>
										<span>
											{ __(
												'Give each station its own page with now playing and share links.',
												'streamsera'
											) }
										</span>
									</button>
								) : null }
								<button
									type="button"
									className="ss-wiz__next-card"
									onClick={ () => navigate( 'players' ) }
								>
									<span
										className="ss-wiz__label-icon"
										aria-hidden="true"
									>
										<I name="pages" size={ 16 } />
									</span>
									<strong>
										{ __(
											'Add it to more pages',
											'streamsera'
										) }
									</strong>
									<span>
										{ __(
											'Use the block, a shortcode or your page builder anywhere.',
											'streamsera'
										) }
									</span>
								</button>
							</div>
						</div>

						<button
							type="button"
							className="ss-wiz__btn ss-wiz__btn--ghost"
							onClick={ () => navigate( 'dashboard' ) }
						>
							<I name="home" size={ 16 } />
							{ __( 'Go to the dashboard', 'streamsera' ) }
						</button>
					</div>
				) }
			</div>
		</div>
	);
}

registerPage( {
	id: 'setup',
	label: __( 'Setup', 'streamsera' ),
	Component: SetupWizard,
	fullBleed: () => true,
} );