/**
 * Admin dark mode. Site default comes from the `admin_dark` setting (auto|light|dark);
 * each user can override it from the header toggle (stored in localStorage).
 * The theme is applied as data-theme on <body>; tokens are overridden in admin.scss.
 */
import { __ } from '@wordpress/i18n';
import { useEffect, useState } from '@wordpress/element';
import { Button } from '@wordpress/components';
import { registerHeaderUtility } from '../ui';

type Mode = 'auto' | 'light' | 'dark';
const KEY = 'streamsera:theme';

function stored(): Mode | null {
	try {
		const v = window.localStorage.getItem( KEY );
		return v === 'light' || v === 'dark' || v === 'auto' ? v : null;
	} catch {
		return null;
	}
}

function siteDefault(): Mode {
	const v = ( window as any ).StreamSeraAdmin?.adminDark;
	return v === 'light' || v === 'dark' ? v : 'auto';
}

export function currentMode(): Mode {
	return stored() || siteDefault();
}

function resolve( mode: Mode ): 'light' | 'dark' {
	if ( mode !== 'auto' ) {
		return mode;
	}
	return window.matchMedia &&
		window.matchMedia( '(prefers-color-scheme: dark)' ).matches
		? 'dark'
		: 'light';
}

export function applyTheme( mode: Mode = currentMode() ) {
	document.body.setAttribute( 'data-theme', resolve( mode ) );
	document.body.setAttribute( 'data-theme-mode', mode );
	window.dispatchEvent(
		new CustomEvent( 'streamsera:theme', {
			detail: { mode, resolved: resolve( mode ) },
		} )
	);
}

export function setMode( mode: Mode ) {
	try {
		if ( mode === siteDefault() ) {
			window.localStorage.removeItem( KEY );
		} else {
			window.localStorage.setItem( KEY, mode );
		}
	} catch {
		// Private mode: in-memory only.
	}
	applyTheme( mode );
}

// Apply immediately so the first paint is already themed.
applyTheme();
if ( window.matchMedia ) {
	window
		.matchMedia( '(prefers-color-scheme: dark)' )
		.addEventListener?.( 'change', () => {
			if ( currentMode() === 'auto' ) {
				applyTheme( 'auto' );
			}
		} );
}
// Settings page can change the site default without a reload.
window.addEventListener( 'streamsera:settings-saved', ( e: any ) => {
	const v = e?.detail?.admin_dark;
	const data = ( window as any ).StreamSeraAdmin;
	if ( ! v || ! data ) {
		return;
	}
	const changed = ( data.adminDark || 'auto' ) !== v;
	data.adminDark = v;
	if ( changed ) {
		// Picking a scheme in Settings is an explicit choice: it replaces this browser's header override.
		try {
			window.localStorage.removeItem( KEY );
		} catch {
			// Private mode.
		}
		applyTheme( v );
	} else if ( ! stored() ) {
		applyTheme( v );
	}
} );

const SunIcon = () => (
	<svg
		width="18"
		height="18"
		viewBox="0 0 24 24"
		fill="none"
		stroke="currentColor"
		strokeWidth="1.8"
		strokeLinecap="round"
		aria-hidden="true"
	>
		<circle cx="12" cy="12" r="4" />
		<path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
	</svg>
);
const MoonIcon = () => (
	<svg
		width="18"
		height="18"
		viewBox="0 0 24 24"
		fill="none"
		stroke="currentColor"
		strokeWidth="1.8"
		strokeLinecap="round"
		strokeLinejoin="round"
		aria-hidden="true"
	>
		<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" />
	</svg>
);

function ThemeToggle() {
	const [ mode, set ] = useState< Mode >( currentMode() );
	const [ resolved, setResolved ] = useState( resolve( mode ) );
	useEffect( () => {
		const on = ( e: any ) => {
			set( e.detail.mode );
			setResolved( e.detail.resolved );
		};
		window.addEventListener( 'streamsera:theme', on );
		return () => window.removeEventListener( 'streamsera:theme', on );
	}, [] );
	const next: Mode = resolved === 'dark' ? 'light' : 'dark';
	return (
		<Button
			className="ss-util__btn ss-theme__btn"
			onClick={ () => setMode( next ) }
			label={
				resolved === 'dark'
					? __( 'Switch to light mode', 'streamsera' )
					: __( 'Switch to dark mode', 'streamsera' )
			}
			showTooltip
			aria-pressed={ resolved === 'dark' }
		>
			{ resolved === 'dark' ? <SunIcon /> : <MoonIcon /> }
			{ mode === 'auto' ? (
				<span className="ss-theme__auto" aria-hidden="true">
					A
				</span>
			) : null }
		</Button>
	);
}

registerHeaderUtility( { id: 'theme', order: 90, Component: ThemeToggle } );