/**
 * MobileServerActionsSheet — bottom sheet opened when the user taps
 * the server name header on mobile. Ported from the new UI's layout:
 * server identity block at the top, then three grouped action lists
 * (Invite / Create / Settings) using the `.serverHeader`, `.actionList`,
 * and `.actionItem` classes from the new UI's module CSS.
 */
import { useQuery } from 'convex/react';
import {
	FolderPlus,
	Gear,
	Hash,
	ShieldCheck,
	UserPlus,
} from '@phosphor-icons/react';
import { BottomSheet } from '@discord-clone/ui';
import { api } from '../../../../../convex/_generated/api';
import { useOnlineUsers } from '../../contexts/PresenceContext';
import styles from './MobileServerActionsSheet.module.css';

interface MobileServerActionsSheetProps {
	isOpen: boolean;
	onClose: () => void;
}

function getInitials(name: string): string {
	return name
		.split(/\s+/)
		.map((w) => w[0])
		.join('')
		.slice(0, 2)
		.toUpperCase();
}

export function MobileServerActionsSheet({
	isOpen,
	onClose,
}: MobileServerActionsSheetProps) {
	const serverSettings = useQuery(api.serverSettings.get);
	const allUsers = useQuery(api.auth.getPublicKeys) ?? [];
	const { resolveStatus } = useOnlineUsers();

	const serverName = serverSettings?.serverName || 'Server';
	const iconUrl = serverSettings?.iconUrl || null;

	// Online count runs through resolveStatus so it matches the live
	// heartbeat set the sidebar uses, not the stale stored status.
	let online = 0;
	for (const u of allUsers) {
		const live = resolveStatus(u.status ?? 'offline', u.id);
		if (live !== 'offline' && live !== 'invisible') online++;
	}
	const total = allUsers.length;

	// Closes the sheet after every action so the user doesn't have
	// to dismiss the drawer manually after making a selection.
	const wrap = (eventName: string) => () => {
		window.dispatchEvent(new CustomEvent(eventName));
		onClose();
	};

	return (
		<BottomSheet
			isOpen={isOpen}
			onClose={onClose}
			disableDefaultHeader
			showHandle
		>
			<div className={styles.body}>
				<div className={styles.serverHeader}>
					{iconUrl ? (
						<img
							src={iconUrl}
							alt={serverName}
							className={styles.serverIcon}
							draggable={false}
						/>
					) : (
						<div className={styles.serverInitials}>
							{getInitials(serverName)}
						</div>
					)}
					<h2 className={styles.serverName}>{serverName}</h2>
					<div className={styles.memberCounts}>
						<span className={styles.memberDot} />
						<span>{online} Online</span>
						<span className={styles.memberSeparator}>·</span>
						<span>
							{total} Member{total === 1 ? '' : 's'}
						</span>
					</div>
				</div>

				<div className={styles.actionList}>
					<button
						type="button"
						className={styles.actionItem}
						onClick={wrap('brycord:open-invite')}
					>
						<UserPlus size={20} weight="fill" />
						<span>Invite Members</span>
					</button>
				</div>

				<div className={styles.actionList}>
					<button
						type="button"
						className={styles.actionItem}
						onClick={wrap('brycord:open-create-channel')}
					>
						<Hash size={20} weight="bold" />
						<span>Create Channel</span>
					</button>
					<button
						type="button"
						className={styles.actionItem}
						onClick={wrap('brycord:open-create-category')}
					>
						<FolderPlus size={20} weight="fill" />
						<span>Create Category</span>
					</button>
				</div>

				<div className={styles.actionList}>
					<button
						type="button"
						className={styles.actionItem}
						onClick={wrap('brycord:open-server-settings')}
					>
						<Gear size={20} weight="fill" />
						<span>Server Settings</span>
					</button>
					<button
						type="button"
						className={styles.actionItem}
						onClick={wrap('brycord:open-server-settings')}
					>
						<ShieldCheck size={20} weight="fill" />
						<span>Privacy Settings</span>
					</button>
				</div>
			</div>
		</BottomSheet>
	);
}
