/*
 * Runtime Web – Unified Serverless Framework for Full-Stack TypeScript Applications
 * Documentation: https://runtimeweb.com/docs/getting-started
 *
 * @template: ai-chat
 */

/**
 * SessionIndicator Component
 *
 * Shows conversation persistence status and provides option to start new conversation.
 * Displays message count and dropdown menu for session management.
 *
 * @requirements 9.1, 9.3, 9.5
 */

import * as React from 'react';
import { useState, useCallback } from 'react';

/**
 * Props for the SessionIndicator component.
 */
export interface SessionIndicatorProps {
    /** The current session ID */
    sessionId: string;
    /** Number of messages in the conversation */
    messageCount: number;
    /** Callback invoked when user wants to start a new session */
    onNewSession?: () => void;
}

/**
 * SessionIndicator shows conversation persistence status.
 *
 * Features:
 * - Displays message count
 * - Dropdown menu for new session option
 * - Subtle but discoverable styling
 * - Accessible with proper ARIA attributes
 *
 * Validates:
 * - Requirement 9.1: Display subtle Session_Indicator showing conversation is persisted
 * - Requirement 9.3: Unobtrusive but discoverable
 * - Requirement 9.5: Provide way to start new conversation
 */
export const SessionIndicator: React.FC<SessionIndicatorProps> = ({
    sessionId,
    messageCount,
    onNewSession,
}) => {
    const [showMenu, setShowMenu] = useState(false);

    const handleToggleMenu = useCallback(() => {
        setShowMenu((prev) => !prev);
    }, []);

    const handleNewSession = useCallback(() => {
        if (onNewSession) {
            onNewSession();
        }
        setShowMenu(false);
    }, [onNewSession]);

    const handleCloseMenu = useCallback(() => {
        setShowMenu(false);
    }, []);

    if (!sessionId) return null;

    return (
        <div className="session-indicator" data-testid="session-indicator">
            <button
                className="session-indicator__button"
                onClick={handleToggleMenu}
                aria-expanded={showMenu}
                aria-haspopup="true"
                type="button"
                data-testid="session-indicator-button"
            >
                <span className="session-indicator__dot" aria-hidden="true" />
                <span className="session-indicator__text" data-testid="session-indicator-text">
                    {messageCount > 0 ? `${messageCount} messages` : 'New chat'}
                </span>
            </button>

            {showMenu && onNewSession && (
                <>
                    {/* Backdrop to close menu when clicking outside */}
                    <div
                        className="session-indicator__backdrop"
                        onClick={handleCloseMenu}
                        aria-hidden="true"
                    />
                    <div
                        className="session-indicator__menu"
                        role="menu"
                        data-testid="session-indicator-menu"
                    >
                        <button
                            className="session-indicator__menu-item"
                            onClick={handleNewSession}
                            role="menuitem"
                            type="button"
                            data-testid="session-indicator-new-session"
                        >
                            Start new conversation
                        </button>
                    </div>
                </>
            )}
        </div>
    );
};
