@using HrynCo.NotificationService.Services.EmailChannels.GetUsageSummary
@model IReadOnlyList<ChannelUsageEntry>
@{
    ViewData["Title"] = "Email Channels";
}

<div class="page-header">
    <h2><i class="bi bi-broadcast"></i> Email Channels</h2>
    <a href="/admin/channels/create" class="btn btn-primary btn-sm">
        <i class="bi bi-plus-lg me-1"></i> Create New Channel
    </a>
</div>

@if (!ViewData.ModelState.IsValid)
{
    <div class="alert alert-danger">
        @foreach (var error in ViewData.ModelState.Values.SelectMany(v => v.Errors))
        {
            <div>@error.ErrorMessage</div>
        }
    </div>
}

@if (Model is null || Model.Count == 0)
{
    <div class="card shadow-sm table-card">
        <div class="empty-state">
            <i class="bi bi-broadcast"></i>
            <p class="mt-2 mb-0">No email channels found.</p>
            <a href="/admin/channels/create" class="btn btn-primary btn-sm mt-3">
                <i class="bi bi-plus-lg me-1"></i> Create First Channel
            </a>
        </div>
    </div>
}
else
{
    <div class="card shadow-sm table-card">
        <div class="table-responsive">
            <table class="table table-hover table-sm mb-0">
                <thead class="table-dark">
                    <tr>
                        <th>Service</th>
                        <th>Type</th>
                        <th>Priority</th>
                        <th>Status</th>
                        <th>Today</th>
                        <th>This Month</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var c in Model)
                    {
                        <tr>
                            <td>@c.ServiceName</td>
                            <td>@c.ChannelType</td>
                            <td>@c.Priority</td>
                            <td>
                                @if (c.IsActive)
                                {
                                    <span class="badge bg-success">Active</span>
                                }
                                else
                                {
                                    <span class="badge bg-secondary text-muted">Inactive</span>
                                }
                            </td>
                            <td style="min-width:130px">
                                @{
                                    var dailyLabel = c.DailyLimit.HasValue ? $"{c.DailySent} / {c.DailyLimit}" : c.DailySent.ToString();
                                }
                                @if (c.DailyLimit.HasValue && c.DailyLimit > 0)
                                {
                                    var pct = Math.Min((double)c.DailySent / c.DailyLimit.Value * 100, 100);
                                    var color = pct >= 100 ? "danger" : pct >= 90 ? "warning" : "success";
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="progress flex-grow-1" style="height:6px; min-width:60px">
                                            <div class="progress-bar bg-@color" style="width:@pct.ToString("F0")%"></div>
                                        </div>
                                        <small class="text-nowrap text-muted">@dailyLabel</small>
                                    </div>
                                }
                                else
                                {
                                    <small class="text-muted">@dailyLabel</small>
                                }
                            </td>
                            <td style="min-width:130px">
                                @{
                                    var monthlyLabel = c.MonthlyLimit.HasValue ? $"{c.MonthlySent} / {c.MonthlyLimit}" : c.MonthlySent.ToString();
                                }
                                @if (c.MonthlyLimit.HasValue && c.MonthlyLimit > 0)
                                {
                                    var pct = Math.Min((double)c.MonthlySent / c.MonthlyLimit.Value * 100, 100);
                                    var color = pct >= 100 ? "danger" : pct >= 90 ? "warning" : "success";
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="progress flex-grow-1" style="height:6px; min-width:60px">
                                            <div class="progress-bar bg-@color" style="width:@pct.ToString("F0")%"></div>
                                        </div>
                                        <small class="text-nowrap text-muted">@monthlyLabel</small>
                                    </div>
                                }
                                else
                                {
                                    <small class="text-muted">@monthlyLabel</small>
                                }
                            </td>
                            <td class="text-end">
                                <a href="/admin/channels/@c.ChannelId"
                                   class="btn btn-sm btn-outline-primary me-1">
                                    <i class="bi bi-pencil"></i> Edit
                                </a>
                                <form method="post"
                                      action="/admin/channels/@c.ChannelId/delete"
                                      class="d-inline">
                                    @Html.AntiForgeryToken()
                                    <button type="submit"
                                            class="btn btn-sm btn-outline-danger"
                                            onclick="return confirm('Delete this channel?')">
                                        <i class="bi bi-trash"></i> Delete
                                    </button>
                                </form>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
}