import { useState } from 'react';
import { useAuth } from '../lib/auth/useAuth';
import { displayNameFor, authorPath } from '../lib/auth/profile';
import { appBarNav, type AppBarContext } from '../lib/auth/nav';
import { skypressMark } from '../lib/brand/skypress-mark';

/** SkyPress mark — shares the inline-SVG source with Logo.astro (Astro components
 * can't render in a React island). `currentColor` lets it follow the --sun token. */
function LogoMark() {
	return (
		<span
			className="app-bar__mark"
			// eslint-disable-next-line react/no-danger -- static, app-authored SVG markup; no user input
			dangerouslySetInnerHTML={ { __html: skypressMark( 24 ) } }
		/>
	);
}

function NavIcon( { name }: { name: 'feather' | 'publications' } ) {
	if ( name === 'feather' ) {
		return (
			<svg className="app-bar__navicon" viewBox="0 0 24 24" width={ 18 } height={ 18 } fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
				<path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z" />
				<line x1="16" y1="8" x2="2" y2="22" />
				<line x1="17.5" y1="15" x2="9" y2="15" />
			</svg>
		);
	}
	return (
		<svg className="app-bar__navicon" viewBox="0 0 24 24" width={ 18 } height={ 18 } fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
			<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
			<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
		</svg>
	);
}

/**
 * The shared top bar for the editor + dashboard islands. Logo on the left;
 * contextual nav + account + sign-out on the right. Rendered inside AuthProvider
 * in every auth state: logo-only while loading or signed out, + contextual nav,
 * account, and sign-out once signed in. The cross-link to Publications / Write is
 * gated on auth so signed-out visitors aren't pointed at editor-only routes.
 */
export default function AppBar( { current }: { current: AppBarContext } ) {
	const { status, handle, displayName, avatar, did, signOut } = useAuth();
	const [ avatarOk, setAvatarOk ] = useState( true );
	const nav = appBarNav( current );
	const signedIn = status === 'signed-in' && Boolean( did );

	const viewerName = did
		? displayNameFor( { did, handle, displayName, avatar } )
		: '';
	const profileHref = authorPath( handle );

	return (
		<header className="app-bar">
			<a className="app-bar__home" href="/" aria-label="SkyPress home">
				<LogoMark />
				<span className="app-bar__word">SkyPress</span>
			</a>

			<span className="app-bar__spacer" />

			{ signedIn && (
				<a className="app-bar__nav" href={ nav.href }>
					<NavIcon name={ nav.icon } />
					{ nav.label }
				</a>
			) }

			{ signedIn && (
				<>
					<IdentityBlock
						href={ profileHref }
						name={ viewerName }
						handle={ handle }
						avatar={ avatar }
						avatarOk={ avatarOk }
						onAvatarError={ () => setAvatarOk( false ) }
					/>
					<button type="button" className="app-bar__signout" onClick={ () => void signOut() }>
						Sign out
					</button>
				</>
			) }
		</header>
	);
}

/** Avatar + name + @handle. The whole block links to the public author page when a handle is known. */
function IdentityBlock( {
	href,
	name,
	handle,
	avatar,
	avatarOk,
	onAvatarError,
}: {
	href: string | null;
	name: string;
	handle: string | null;
	avatar: string | null;
	avatarOk: boolean;
	onAvatarError: () => void;
} ) {
	const inner = (
		<>
			{ avatar && avatarOk ? (
				<img
					className="app-bar__avatar"
					src={ avatar }
					alt=""
					width={ 30 }
					height={ 30 }
					onError={ onAvatarError }
				/>
			) : (
				<span className="app-bar__avatar app-bar__avatar--fallback" aria-hidden="true">
					{ name.charAt( 0 ).toUpperCase() }
				</span>
			) }
			<span className="app-bar__who">
				<strong className="app-bar__name">{ name }</strong>
				{ handle && <span className="app-bar__handle">@{ handle }</span> }
			</span>
		</>
	);

	return href ? (
		<a className="app-bar__identity" href={ href }>
			{ inner }
		</a>
	) : (
		<span className="app-bar__identity">{ inner }</span>
	);
}
