@model LittleShop.DTOs.MessageThreadDto

@{
    ViewData["Title"] = $"Conversation with {Model.CustomerName}";
}

@{
    // Get customer info if name is not loaded
    if (Model.CustomerName == "Loading...")
    {
        // This would need to be loaded via a service call
        Model.CustomerName = "Customer"; // Fallback
    }
}

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="fas fa-comments"></i> Conversation with @Model.CustomerName</h2>
                <a href="@Url.Action("Index")" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Back to Messages
                </a>
            </div>

            @if (TempData["Success"] != null)
            {
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    @TempData["Success"]
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            }

            @if (TempData["Error"] != null)
            {
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    @TempData["Error"]
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            }

            <div class="row">
                <div class="col-md-8">
                    <!-- Conversation Thread -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5>Conversation with @Model.CustomerName</h5>
                            <small class="text-muted">
                                @Model.MessageCount messages since @Model.StartedAt.ToString("MMM dd, yyyy")
                            </small>
                        </div>
                        <div class="card-body" style="max-height: 500px; overflow-y: auto;">
                            @if (!Model.Messages.Any())
                            {
                                <div class="text-center text-muted py-4">
                                    <i class="fas fa-comments fa-3x mb-3"></i>
                                    <h5>No messages yet</h5>
                                    <p>This is the start of your conversation with @Model.CustomerName.</p>
                                    <p class="small">Send a message below to begin the conversation.</p>
                                </div>
                            }
                            else
                            {
                                @foreach (var message in Model.Messages.OrderBy(m => m.CreatedAt))
                                {
                                <div class="mb-3 @(message.Direction == 0 ? "ms-4" : "me-4")">
                                    <div class="d-flex @(message.Direction == 0 ? "justify-content-end" : "justify-content-start")">
                                        <div class="card @(message.Direction == 0 ? "bg-primary text-white" : "bg-light") @(message.Direction == 0 ? "ms-auto" : "me-auto")" style="max-width: 70%;">
                                            <div class="card-body p-3">
                                                <div class="d-flex justify-content-between align-items-start mb-2">
                                                    <strong class="@(message.Direction == 0 ? "text-white" : "text-primary")">
                                                        @if (message.Direction == 0)
                                                        {
                                                            <i class="fas fa-user-tie"></i>
                                                            @:Admin
                                                        }
                                                        else
                                                        {
                                                            <i class="fas fa-user"></i>
                                                            @Model.CustomerName
                                                        }
                                                    </strong>
                                                    <small class="@(message.Direction == 0 ? "text-white-50" : "text-muted")">
                                                        @message.CreatedAt.ToString("MMM dd, HH:mm")
                                                    </small>
                                                </div>
                                                <div class="@(message.Direction == 0 ? "text-white" : "text-dark")">
                                                    @Html.Raw(message.Content.Replace("\n", "<br>"))
                                                </div>
                                                @if (!string.IsNullOrEmpty(message.OrderReference))
                                                {
                                                    <div class="mt-2">
                                                        <a href="@Url.Action("Details", "Orders", new { id = message.OrderId })" 
                                                           class="badge @(message.Direction == 0 ? "bg-light text-primary" : "bg-primary text-white") text-decoration-none">
                                                            <i class="fas fa-box"></i> Order @message.OrderReference
                                                        </a>
                                                    </div>
                                                }
                                                @if (message.IsUrgent)
                                                {
                                                    <span class="badge bg-danger mt-2">Urgent</span>
                                                }
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                }
                            }
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <!-- Customer Info -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h6><i class="fas fa-user"></i> Customer Information</h6>
                        </div>
                        <div class="card-body">
                            <p><strong>Name:</strong> @Model.CustomerName</p>
                            <p><strong>Messages:</strong> @Model.MessageCount</p>
                            <p><strong>First Contact:</strong> @Model.StartedAt.ToString("MMM dd, yyyy HH:mm")</p>
                            <p><strong>Last Message:</strong> @Model.LastMessageAt.ToString("MMM dd, yyyy HH:mm")</p>
                            @if (Model.HasUnreadMessages)
                            {
                                <div class="alert alert-warning p-2">
                                    <i class="fas fa-exclamation-triangle"></i> Has unread messages
                                </div>
                            }
                            @if (Model.RequiresResponse)
                            {
                                <div class="alert alert-danger p-2">
                                    <i class="fas fa-reply"></i> Requires response
                                </div>
                            }
                        </div>
                    </div>

                    <!-- Reply Form -->
                    <div class="card">
                        <div class="card-header">
                            <h6><i class="fas fa-@(Model.MessageCount == 0 ? "comment" : "reply")"></i> @(Model.MessageCount == 0 ? "Start Conversation" : "Send Reply")</h6>
                        </div>
                        <div class="card-body">
                            <form method="post" action="@Url.Action("Reply")">
                                <input type="hidden" name="customerId" value="@Model.CustomerId" />
                                
                                <div class="mb-3">
                                    <label for="content" class="form-label">Message</label>
                                    <textarea class="form-control" id="content" name="content" rows="4" required placeholder="@(Model.MessageCount == 0 ? "Start the conversation with this customer..." : "Type your reply here...")"></textarea>
                                </div>
                                
                                <div class="mb-3 form-check">
                                    <input type="checkbox" class="form-check-input" id="isUrgent" name="isUrgent" value="true">
                                    <label class="form-check-label" for="isUrgent">
                                        Mark as urgent
                                    </label>
                                </div>
                                
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-paper-plane"></i> @(Model.MessageCount == 0 ? "Send Message" : "Send Reply")
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>