/**
 * The account menu, top right: what the admin's sidebar shows (workspace,
 * plan, key, booking site link) and "Disconnect this site" (not "Log out",
 * which WordPress's own admin bar already has).
 *
 * The confirmation says that booking data is untouched, that blocks stay on
 * pages but stop showing, and what happens to the key: revoked if this site
 * created it, only forgotten if it was pasted.
 */

import { useState } from 'react';
import { ChevronDown, ExternalLink, Globe, LogOut } from '../design-system/icons';
import { Avatar, Badge, ConfirmDialog, Dropdown } from '../ds';
import { api, messageOf } from '../lib/api';
import { boot } from '../lib/boot';
import { openHandoff } from '../lib/handoff';
import { hasFullAccessKey, initialsOf } from '../lib/people';
import { useToast } from '../components/Toasts';
import type { Connection } from '../lib/types';

interface AccountMenuProps {
	connection: Connection;
}

export function AccountMenu( { connection }: AccountMenuProps ) {
	const [ confirming, setConfirming ] = useState( false );
	const [ working, setWorking ] = useState( false );
	const toast = useToast();

	// Reload: WordPress renders the menu for the connection state.
	const disconnect = async () => {
		setWorking( true );

		try {
			await api.post( 'disconnect' );
			window.location.reload();
		} catch ( caught ) {
			toast( messageOf( caught, 'Couldn’t disconnect. Try again.' ), 'danger' );
			setWorking( false );
		}
	};

	const fullAccess = hasFullAccessKey( connection );
	const workspace = connection.workspace ?? boot().siteName;
	// Only shown once connected; `degraded` means RazorBooking can't be reached.
	const status = connection.status === 'connected' ? connection.plan ?? 'Connected' : 'Showing saved info';

	return (
		<>
			<Dropdown>
				<Dropdown.Trigger asChild>
					<button
						type="button"
						className="flex min-w-0 items-center gap-2.5 rounded-control border-0 bg-transparent px-1.5 py-1 text-left outline-none transition-colors duration-fast ease-standard hover:bg-muted focus-visible:shadow-focus"
					>
						<Avatar initials={ initialsOf( workspace ) } size="sm" />
						<span className="hidden min-w-0 flex-col sm:flex">
							<span className="max-w-[180px] truncate text-label font-semibold text-foreground">
								{ workspace }
							</span>
							<span className="truncate text-caption text-muted-foreground-2">{ status }</span>
						</span>
						<ChevronDown size={ 15 } className="flex-none text-faint" aria-hidden="true" />
					</button>
				</Dropdown.Trigger>

				<Dropdown.Menu className="w-[280px]">
					<div className="flex flex-col gap-1.5 px-2.5 pb-2 pt-1.5">
						<span className="truncate text-label font-semibold text-foreground">{ workspace }</span>
						<span className="flex flex-wrap items-center gap-1.5">
							{ connection.plan ? (
								<Badge tone="neutral" size="sm">
									{ connection.plan }
								</Badge>
							) : null }
							<Badge tone={ fullAccess ? 'warn' : 'neutral' } size="sm">
								{ fullAccess ? 'Full-access key' : 'Site key' }
							</Badge>
							{ connection.key_last4 ? (
								<span className="text-caption text-muted-foreground-2">••••{ connection.key_last4 }</span>
							) : null }
						</span>
						<span className="text-caption leading-snug text-muted-foreground-2">
							{ fullAccess
								? 'This site has a full-access key, but it only needs booking access. Switch to a site key in Settings.'
								: 'This site has a site key. It can only handle booking, never billing, settings, or roles.' }
						</span>
					</div>

					<Dropdown.Separator />

					{ connection.booking_page_url ? (
						<Dropdown.Item asChild>
							<a href={ connection.booking_page_url } target="_blank" rel="noreferrer noopener">
								<Globe size={ 16 } className="flex-none text-muted-foreground" />
								<span className="min-w-0 truncate">
									{ connection.booking_page_url.replace( /^https?:\/\//, '' ) }
								</span>
							</a>
						</Dropdown.Item>
					) : null }

					<Dropdown.Item onSelect={ () => openHandoff( 'home' ) }>
						<ExternalLink size={ 16 } className="flex-none text-muted-foreground" />
						Open RazorBooking
					</Dropdown.Item>

					<Dropdown.Separator />

					<Dropdown.Item
						disabled={ working }
						onSelect={ () => setConfirming( true ) }
						className="text-destructive-fg data-[highlighted]:bg-destructive-bg"
					>
						<LogOut size={ 16 } className="flex-none" />
						Disconnect this site
					</Dropdown.Item>
				</Dropdown.Menu>
			</Dropdown>

			<ConfirmDialog
				open={ confirming }
				tone="danger"
				title="Disconnect this site?"
				description={ [
					'Your booking data isn’t affected. Services, bookings, customers, and payments all stay in RazorBooking.',
					'Blocks stay on your pages, but visitors won’t see them until you connect this site again.',
					connection.key_source === 'connect'
						? 'This site removes its key. Because the key was created for this site, it’s also revoked in RazorBooking.'
						: 'This site removes its key. It was pasted in by hand, so it’s only removed here. Revoke it in RazorBooking if nothing else uses it.',
				].join( ' ' ) }
				confirmLabel="Disconnect"
				cancelLabel="Cancel"
				onCancel={ () => setConfirming( false ) }
				onConfirm={ () => {
					setConfirming( false );
					void disconnect();
				} }
			/>
		</>
	);
}