@page "/chat"
@using Microsoft.AspNetCore.SignalR.Client
@inject IConfiguration Configuration
@inject NavigationManager NavigationManager
@implements IAsyncDisposable

<div class="p-6 max-w-lg mx-auto bg-white rounded-xl shadow-lg space-y-4">
    <h1 class="text-3xl font-extrabold text-indigo-600 text-center">Blazor SignalR Chat</h1>

    @if (_hubConnection == null || _hubConnection.State != HubConnectionState.Connected)
    {
        <div class="text-center text-red-500 font-semibold">
            Connecting to server...
        </div>
    }

    <button @onclick="Send"
            disabled="@(!IsConnected)"
            class="px-4 py-2 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 transition duration-150 disabled:opacity-50">
        Send
    </button>

    <!-- Message Display Area -->
    <div class="h-64 overflow-y-auto p-3 bg-gray-50 rounded-lg border">
        @foreach (var message in _messages)
        {
            <div class="mb-2">
                <span class="font-bold @(message.User == _userInput ? "text-indigo-600" : "text-gray-700")">
                    @message.User:
                </span>
                <span>@message.Text</span>
            </div>
        }
    </div>

    <!-- Input Form -->
    <div class="flex flex-col space-y-2">
        <input @bind="_userInput"
               class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
               placeholder="Your Name" />

        <div class="flex space-x-2">
            <input @bind="_messageInput"
                   @onkeyup="HandleKeyUp"
                   class="flex-grow p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                   placeholder="Type your message..." />

            <button @onclick="Send"
                    disabled="@(!IsConnected)"
                    class="px-4 py-2 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 transition duration-150 disabled:opacity-50">
                Send
            </button>
        </div>
    </div>
</div>

@code {
    private HubConnection? _hubConnection;
    private List<(string User, string Text)> _messages = new();
    private string _userInput = "User"; // Default username
    private string _messageInput = string.Empty;

    // Helper to check connection status
    private bool IsConnected => _hubConnection?.State == HubConnectionState.Connected;

    // The API URL where the SignalR Hub is hosted (must match the API project)
    private const string ApiUrl = "https://localhost:7056/chathub"; // <-- IMPORTANT: Update with your backend API URL and port

    protected override async Task OnInitializedAsync()
    {
        // 1. Initialize the HubConnection
        _hubConnection = new HubConnectionBuilder()
            .WithUrl(NavigationManager.ToAbsoluteUri(ApiUrl))
            .Build();

        // 2. Define the client method the server calls ("ReceiveMessage")
        _hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var isCurrentUser = user.Equals(_userInput, StringComparison.OrdinalIgnoreCase);
            var newMessage = (User: user, Text: message);

            // Add message to the list
            _messages.Add(newMessage);

            // Trigger UI update
            InvokeAsync(StateHasChanged);
        });

        try
        {
            Console.WriteLine("ETT");
            // 3. Start the connection
            await _hubConnection.StartAsync();
            Console.WriteLine(_hubConnection.State);
        }
        catch (Exception ex)
        {
            // Log connection error
            Console.WriteLine($"Error connecting to SignalR Hub: {ex.Message}");
        }
    }

    private async Task Send()
    {
        if (_hubConnection is not null && !string.IsNullOrWhiteSpace(_messageInput))
        {
            try
            {
                Console.WriteLine("EEE");
                Console.WriteLine(_hubConnection.State);
                await _hubConnection.SendAsync("SendMessage", _userInput, _messageInput);
                _messageInput = string.Empty;
            }
            catch (Exception ex)
            {
                Console.WriteLine($"Error sending message: {ex.Message}");
            }
        }
    }

    private async Task HandleKeyUp(KeyboardEventArgs e)
    {
        // Allow sending message with the Enter key
        if (e.Key == "Enter")
        {
            await Send();
        }
    }

    // Clean up connection when the component is disposed
    public async ValueTask DisposeAsync()
    {
        if (_hubConnection is not null)
        {
            await _hubConnection.DisposeAsync();
        }
    }
}