import gradio as gr
from services.mcp.mcp_letter_counting import letter_occurrence_mcp_client


def letter_counter_component():
    """
    Count the occurrences of a specific letter in a given word using the MCP server.

    Args:
        word (str): The word in which to count the letter.
        letter (str): The letter to count in the word.

    Returns:
        str: The response from the MCP server containing the count of the letter.
    """
    with gr.Column(elem_classes="gr-form") as mcp_letter_counter_ui:
        gr.HTML("<h2>MCP Character Counter</h2>")
        gr.HTML("<p>Enter text below and the MCP server will count the characters.</p>")

        # Text input for character counting
        input_text = gr.Textbox(
            label="Enter text to count characters",
            placeholder="Type or paste text here...",
            lines=5,
        )
        letter_to_count = gr.Textbox(
            label="Letter to Count",
            placeholder="Enter the letter to count in the text",
            lines=1,
        )

        # Count button
        count_button = gr.Button("Count Characters", variant="primary")

        # Result display
        result_text = gr.Textbox(label="Result", interactive=False)

        # Connect the button to different counting functions based on method
        count_button.click(
            fn=letter_occurrence_mcp_client,  # Use the async function directly - Gradio handles the async
            inputs=[input_text, letter_to_count],
            outputs=[result_text],
        )

        # MCP Tools Explorer Section
        gr.HTML("<h3>MCP Tools Explorer</h3>")
        gr.HTML("<p>Explore the available tools in the MCP server.</p>")
    return mcp_letter_counter_ui