@model PowderCoating.Application.DTOs.Common.PagedResult<PowderCoating.Application.DTOs.Notification.NotificationLogDto>
@{
    ViewData["Title"] = "Email & SMS Log";
    ViewData["PageIcon"] = "bi-bell-history";
    var sortCol = ViewBag.SortColumn as string ?? "SentAt";
    var sortDir = ViewBag.SortDirection as string ?? "desc";
    string NextDir(string col) => sortCol == col && sortDir == "asc" ? "desc" : "asc";
    string SortIcon(string col) => sortCol == col ? (sortDir == "asc" ? "bi-sort-up" : "bi-sort-down") : "bi-arrow-down-up";

    var sentCount = Model.Items.Count(x => x.Status == PowderCoating.Core.Enums.NotificationStatus.Sent);
    var failedCount = Model.Items.Count(x => x.Status == PowderCoating.Core.Enums.NotificationStatus.Failed);
    var skippedCount = Model.Items.Count(x => x.Status == PowderCoating.Core.Enums.NotificationStatus.Skipped);

    var filteredJobId = ViewBag.JobId as int?;
    var filteredJobNumber = filteredJobId.HasValue ? Model.Items.FirstOrDefault(i => i.JobId == filteredJobId)?.JobNumber : null;
}

<div class="container-fluid px-4 py-4">
    <div class="d-flex justify-content-end align-items-center mb-4">
        @if (filteredJobId.HasValue)
        {
            <a asp-controller="Jobs" asp-action="Details" asp-route-id="@filteredJobId"
               class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i>Back to Job
            </a>
        }
    </div>

    @if (filteredJobId.HasValue)
    {
        <div class="alert alert-info alert-permanent mb-4 py-2">
            <i class="bi bi-funnel-fill me-2"></i>
            Showing notifications for job <strong>@(filteredJobNumber ?? $"#{filteredJobId}")</strong>.
            <a asp-controller="NotificationLogs" asp-action="Index" class="ms-2 alert-link">View all notifications</a>
        </div>
    }

    <!-- Stats Cards -->
    <div class="row g-3 mb-4">
        <div class="col-sm-4">
            <div class="card border-0 shadow-sm text-center py-3">
                <div class="card-body">
                    <div class="fs-2 fw-bold text-success">@sentCount</div>
                    <div class="text-muted small">Sent (this page)</div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="card border-0 shadow-sm text-center py-3">
                <div class="card-body">
                    <div class="fs-2 fw-bold text-danger">@failedCount</div>
                    <div class="text-muted small">Failed (this page)</div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="card border-0 shadow-sm text-center py-3">
                <div class="card-body">
                    <div class="fs-2 fw-bold text-secondary">@skippedCount</div>
                    <div class="text-muted small">Skipped (this page)</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <form method="get" class="row g-2 align-items-end">
                <div class="col-md-4">
                    <label class="form-label small fw-semibold">Search</label>
                    <input type="text" name="searchTerm" value="@ViewBag.SearchTerm" class="form-control"
                           placeholder="Recipient, job number, quote number…" />
                </div>
                <div class="col-md-2">
                    <label class="form-label small fw-semibold">Channel</label>
                    <select name="channelFilter" class="form-select">
                        <option value="">All Channels</option>
                        <option value="Email" selected="@(ViewBag.ChannelFilter == "Email")">Email</option>
                        @if (ViewBag.SmsEnabled == true)
                        {
                        <option value="Sms" selected="@(ViewBag.ChannelFilter == "Sms")">SMS</option>
                        }
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small fw-semibold">Status</label>
                    <select name="statusFilter" class="form-select">
                        <option value="">All Statuses</option>
                        <option value="Sent" selected="@(ViewBag.StatusFilter == "Sent")">Sent</option>
                        <option value="Failed" selected="@(ViewBag.StatusFilter == "Failed")">Failed</option>
                        <option value="Skipped" selected="@(ViewBag.StatusFilter == "Skipped")">Skipped</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small fw-semibold">Type</label>
                    <select name="typeFilter" class="form-select">
                        <option value="">All Types</option>
                        <option value="QuoteSent" selected="@(ViewBag.TypeFilter == "QuoteSent")">Quote Sent</option>
                        <option value="QuoteApproved" selected="@(ViewBag.TypeFilter == "QuoteApproved")">Quote Approved</option>
                        <option value="JobStatusChanged" selected="@(ViewBag.TypeFilter == "JobStatusChanged")">Job Status Changed</option>
                        <option value="JobReadyForPickup" selected="@(ViewBag.TypeFilter == "JobReadyForPickup")">Ready for Pickup</option>
                        <option value="JobCompleted" selected="@(ViewBag.TypeFilter == "JobCompleted")">Job Completed</option>
                    </select>
                </div>
                <div class="col-md-2 d-flex gap-2">
                    <button type="submit" class="btn btn-primary flex-grow-1">
                        <i class="bi bi-funnel me-1"></i>Filter
                    </button>
                    <a href="@Url.Action("Index")" class="btn btn-outline-secondary">
                        <i class="bi bi-x-circle"></i>
                    </a>
                </div>
                <input type="hidden" name="pageSize" value="@Model.PageSize" />
                <input type="hidden" name="sortColumn" value="@sortCol" />
                <input type="hidden" name="sortDirection" value="@sortDir" />
                @if (filteredJobId.HasValue)
                {
                    <input type="hidden" name="jobId" value="@filteredJobId" />
                }
            </form>
        </div>
    </div>

    <!-- Table -->
    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            @if (!Model.Items.Any())
            {
                <div class="text-center py-5 text-muted">
                    <i class="bi bi-bell-slash fs-1 mb-3 d-block"></i>
                    <p>No notification records found.</p>
                </div>
            }
            else
            {
                <div class="mobile-card-view">
                    <div class="mobile-card-list">
                        @foreach (var item in Model.Items)
                        {
                            <div class="mobile-data-card">
                                <div class="mobile-card-header">
                                    <div class="mobile-card-icon" style="background: @(item.Channel == PowderCoating.Core.Enums.NotificationChannel.Email ? "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)" : "linear-gradient(135deg, #06b6d4 0%, #0e7490 100%)");">
                                        <i class="bi @(item.Channel == PowderCoating.Core.Enums.NotificationChannel.Email ? "bi-envelope" : "bi-phone")"></i>
                                    </div>
                                    <div class="mobile-card-title">
                                        <h6>@item.RecipientName</h6>
                                        <small>@item.Recipient</small>
                                    </div>
                                </div>
                                <div class="mobile-card-body">
                                    <div class="mobile-card-row">
                                        <span class="mobile-card-label">Type</span>
                                        <span class="mobile-card-value">@item.NotificationTypeDisplay</span>
                                    </div>
                                    <div class="mobile-card-row">
                                        <span class="mobile-card-label">Sent</span>
                                        <span class="mobile-card-value">@item.SentAt.Tz(ViewBag.CompanyTimeZone as string).ToString("MM/dd HH:mm")</span>
                                    </div>
                                    @if (item.JobId.HasValue)
                                    {
                                        <div class="mobile-card-row">
                                            <span class="mobile-card-label">Job</span>
                                            <span class="mobile-card-value">@item.JobNumber</span>
                                        </div>
                                    }
                                    else if (item.QuoteId.HasValue)
                                    {
                                        <div class="mobile-card-row">
                                            <span class="mobile-card-label">Quote</span>
                                            <span class="mobile-card-value">@item.QuoteNumber</span>
                                        </div>
                                    }
                                    <div class="mobile-card-row">
                                        <span class="mobile-card-label">Status</span>
                                        <span class="mobile-card-value">
                                            @{
                                                var (mStatusBadge, mStatusIcon) = item.Status switch
                                                {
                                                    PowderCoating.Core.Enums.NotificationStatus.Sent    => ("bg-success", "bi-check-circle"),
                                                    PowderCoating.Core.Enums.NotificationStatus.Failed  => ("bg-danger", "bi-x-circle"),
                                                    _                                                   => ("bg-secondary", "bi-dash-circle")
                                                };
                                            }
                                            <span class="badge @mStatusBadge"><i class="bi @mStatusIcon me-1"></i>@item.StatusDisplay</span>
                                        </span>
                                    </div>
                                </div>
                                <div class="mobile-card-footer">
                                    <a asp-action="Details" asp-route-id="@item.Id" class="btn btn-sm btn-outline-secondary">
                                        <i class="bi bi-eye me-1"></i>View
                                    </a>
                                </div>
                            </div>
                        }
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>
                                    <a href="@Url.Action("Index", new { searchTerm = ViewBag.SearchTerm, channelFilter = ViewBag.ChannelFilter, statusFilter = ViewBag.StatusFilter, typeFilter = ViewBag.TypeFilter, jobId = filteredJobId, sortColumn ="SentAt", sortDirection = NextDir("SentAt"), pageSize = Model.PageSize })" class="text-decoration-none text-dark">
                                        Sent At <i class="bi @SortIcon("SentAt")"></i>
                                    </a>
                                </th>
                                <th>
                                    <a href="@Url.Action("Index", new { searchTerm = ViewBag.SearchTerm, channelFilter = ViewBag.ChannelFilter, statusFilter = ViewBag.StatusFilter, typeFilter = ViewBag.TypeFilter, jobId = filteredJobId, sortColumn ="Channel", sortDirection = NextDir("Channel"), pageSize = Model.PageSize })" class="text-decoration-none text-dark">
                                        Channel <i class="bi @SortIcon("Channel")"></i>
                                    </a>
                                </th>
                                <th>
                                    <a href="@Url.Action("Index", new { searchTerm = ViewBag.SearchTerm, channelFilter = ViewBag.ChannelFilter, statusFilter = ViewBag.StatusFilter, typeFilter = ViewBag.TypeFilter, jobId = filteredJobId, sortColumn ="Type", sortDirection = NextDir("Type"), pageSize = Model.PageSize })" class="text-decoration-none text-dark">
                                        Type <i class="bi @SortIcon("Type")"></i>
                                    </a>
                                </th>
                                <th>Recipient</th>
                                <th>Related</th>
                                <th>
                                    <a href="@Url.Action("Index", new { searchTerm = ViewBag.SearchTerm, channelFilter = ViewBag.ChannelFilter, statusFilter = ViewBag.StatusFilter, typeFilter = ViewBag.TypeFilter, jobId = filteredJobId, sortColumn ="Status", sortDirection = NextDir("Status"), pageSize = Model.PageSize })" class="text-decoration-none text-dark">
                                        Status <i class="bi @SortIcon("Status")"></i>
                                    </a>
                                </th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model.Items)
                            {
                                <tr>
                                    <td class="text-nowrap">@item.SentAt.Tz(ViewBag.CompanyTimeZone as string).ToString("MM/dd/yyyy HH:mm")</td>
                                    <td>
                                        @if (item.Channel == PowderCoating.Core.Enums.NotificationChannel.Email)
                                        {
                                            <span class="badge bg-primary"><i class="bi bi-envelope me-1"></i>Email</span>
                                        }
                                        else
                                        {
                                            <span class="badge bg-info text-dark"><i class="bi bi-phone me-1"></i>SMS</span>
                                        }
                                    </td>
                                    <td>
                                        <span class="text-nowrap">@item.NotificationTypeDisplay</span>
                                    </td>
                                    <td>
                                        <div class="fw-semibold">@item.RecipientName</div>
                                        <div class="text-muted small">@item.Recipient</div>
                                    </td>
                                    <td>
                                        @if (item.JobId.HasValue)
                                        {
                                            <a asp-controller="Jobs" asp-action="Details" asp-route-id="@item.JobId" class="text-decoration-none">
                                                <i class="bi bi-briefcase me-1"></i>@item.JobNumber
                                            </a>
                                        }
                                        else if (item.QuoteId.HasValue)
                                        {
                                            <a asp-controller="Quotes" asp-action="Details" asp-route-id="@item.QuoteId" class="text-decoration-none">
                                                <i class="bi bi-file-text me-1"></i>@item.QuoteNumber
                                            </a>
                                        }
                                        else if (item.CustomerName != null)
                                        {
                                            @item.CustomerName
                                        }
                                    </td>
                                    <td>
                                        @{
                                            var (badgeClass, icon) = item.Status switch
                                            {
                                                PowderCoating.Core.Enums.NotificationStatus.Sent => ("bg-success", "bi-check-circle"),
                                                PowderCoating.Core.Enums.NotificationStatus.Failed => ("bg-danger", "bi-x-circle"),
                                                _ => ("bg-secondary", "bi-dash-circle")
                                            };
                                        }
                                        <span class="badge @badgeClass" title="@item.ErrorMessage">
                                            <i class="bi @icon me-1"></i>@item.StatusDisplay
                                        </span>
                                        @if (!string.IsNullOrEmpty(item.ErrorMessage))
                                        {
                                            <i class="bi bi-info-circle text-danger ms-1" title="@item.ErrorMessage" style="cursor:pointer;"></i>
                                        }
                                    </td>
                                    <td>
                                        <a asp-action="Details" asp-route-id="@item.Id" class="btn btn-sm btn-outline-secondary">
                                            <i class="bi bi-eye"></i>
                                        </a>
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            }
        </div>
    </div>

    <!-- Pagination -->
    @await Html.PartialAsync("_Pagination", Model, new ViewDataDictionary(ViewData)
    {
        { "routeValues", new {
            searchTerm = ViewBag.SearchTerm,
            channelFilter = ViewBag.ChannelFilter,
            statusFilter = ViewBag.StatusFilter,
            typeFilter = ViewBag.TypeFilter,
            jobId = filteredJobId,
            sortColumn = sortCol,
            sortDirection = sortDir
        }}
    })
</div>