/*
 * Copyright 2026 Element Creations Ltd.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

import React, { type JSX, type KeyboardEventHandler, type MouseEventHandler } from "react";
import classNames from "classnames";
import { Text, Tooltip } from "@vector-im/compound-web";

import { type ViewModel, useViewModel } from "../../../../../core/viewmodel";
import styles from "./DisambiguatedProfile.module.css";

/**
 * The snapshot representing the current state of the DisambiguatedProfile.
 */
export interface DisambiguatedProfileViewSnapshot {
    /**
     * The display name to show.
     */
    displayName: string;
    /**
     * The CSS class for coloring the display name (e.g., "mx_Username_color1").
     * Undefined if coloring is not enabled.
     */
    colorClass?: string;
    /**
     * The formatted user identifier to display when disambiguation is needed.
     * Undefined if disambiguation is not required.
     */
    displayIdentifier?: string;
    /**
     * The tooltip title text (pre-translated).
     * Undefined if tooltip is not enabled.
     */
    title?: string;
    /**
     * Whether to emphasize the display name with additional styling.
     */
    emphasizeDisplayName?: boolean;

    /**
     * User status message
     */
    userStatus?: {
        emoji: string;
        text: string;
    };
}

/**
 * Actions that can be performed on the DisambiguatedProfile.
 */
export interface DisambiguatedProfileViewActions {
    /**
     * Optional click handler for the profile.
     */
    onClick?: MouseEventHandler<HTMLDivElement>;
}

/**
 * The view model for DisambiguatedProfileView.
 */
export type DisambiguatedProfileViewModel = ViewModel<
    DisambiguatedProfileViewSnapshot,
    DisambiguatedProfileViewActions
>;

interface DisambiguatedProfileViewProps {
    /**
     * The view model for the disambiguated profile.
     */
    vm: DisambiguatedProfileViewModel;
    /**
     * Optional CSS class name applied to the profile container.
     */
    className?: string;
}

/**
 * A component to display a user's profile with optional disambiguation.
 * Shows the display name and optionally the MXID when disambiguation is needed
 * (e.g., when multiple users have the same display name).
 *
 * @example
 * ```tsx
 * <DisambiguatedProfileView vm={disambiguatedProfileViewModel} />
 * ```
 */
export function DisambiguatedProfileView({ vm, className }: Readonly<DisambiguatedProfileViewProps>): JSX.Element {
    const { displayName, colorClass, displayIdentifier, title, emphasizeDisplayName, userStatus } = useViewModel(vm);

    const userStatusEmoji = userStatus && [...new Intl.Segmenter().segment(userStatus.emoji)][0]?.segment;

    const displayNameClasses = classNames(colorClass, {
        [styles.disambiguatedProfile_displayName]: emphasizeDisplayName,
        mx_DisambiguatedProfile_displayName: emphasizeDisplayName,
    });

    // Handle keyboard interaction for accessibility if onClick is provided
    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> | undefined = vm.onClick
        ? (event) => {
              if (event.key === "Enter" || event.key === " ") {
                  event.preventDefault();
                  vm.onClick?.(event as unknown as React.MouseEvent<HTMLDivElement>);
              }
          }
        : undefined;

    return (
        <div
            className={classNames(className, styles.disambiguatedProfile)}
            title={title}
            onClick={vm.onClick}
            onKeyDown={handleKeyDown}
            role={vm.onClick ? "button" : undefined}
            tabIndex={vm.onClick ? 0 : undefined}
        >
            <span className={displayNameClasses} dir="auto">
                {displayName}
            </span>
            {/* mx_DisambiguatedProfile_mxid is required for PCSS selectors like .mx_MemberTileView .mx_DisambiguatedProfile_mxid */}
            {displayIdentifier && (
                <span className={classNames("mx_DisambiguatedProfile_mxid", styles.disambiguatedProfile_mxid)}>
                    {displayIdentifier}
                </span>
            )}
            {userStatus && (
                <Tooltip description={userStatus.text}>
                    <Text as="span" size="md" className={styles.userStatus}>
                        {userStatusEmoji}
                    </Text>
                </Tooltip>
            )}
        </div>
    );
}
