@page "/admin/system/notifications"
@layout AdminLayout
@inherits AdminBase

@*
    EN: Notification center — notification settings, channel toggles (Email/SMS/Push/In-app), event types with channel preferences, test send.
    VI: Trung tâm thông báo — cài đặt thông báo, bật/tắt kênh (Email/SMS/Push/In-app), loại sự kiện theo kênh, gửi thử.
    Design: pencil-design/src/pages/tPOS/admin/notification-center.pen
*@

<PageTitle>Thông báo — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Trung tâm thông báo</h1>
        <p class="admin-topbar__subtitle">Cấu hình kênh & loại thông báo</p>
    </div>
    <div class="admin-topbar__right">
        <button class="admin-btn-secondary">
            <i data-lucide="send"></i>
            <span>Gửi thử</span>
        </button>
        <button class="admin-btn-primary">
            <i data-lucide="save"></i>
            <span>Lưu cài đặt</span>
        </button>
    </div>
</div>

@* ═══ CONTENT ═══ *@
<div class="admin-content" style="display:flex;gap:24px;">

    @* LEFT: Notification Types *@
    <div class="admin-panel" style="flex:1;">
        <div class="admin-panel__header">
            <h3 class="admin-panel__title">
                <i data-lucide="bell" style="color:var(--admin-orange-primary);"></i>
                Loại thông báo
            </h3>
        </div>
        <div class="admin-panel__body" style="padding:0;">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Sự kiện</th>
                        <th style="text-align:center;">Email</th>
                        <th style="text-align:center;">SMS</th>
                        <th style="text-align:center;">Push</th>
                        <th style="text-align:center;">In-app</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var evt in _eventTypes)
                    {
                        <tr>
                            <td>
                                <div style="display:flex;flex-direction:column;gap:2px;">
                                    <span style="font-weight:500;">@evt.Name</span>
                                    <span style="font-size:11px;color:var(--admin-text-tertiary);">@evt.Desc</span>
                                </div>
                            </td>
                            <td style="text-align:center;"><MudSwitch T="bool" Value="evt.Email" Color="Color.Primary" /></td>
                            <td style="text-align:center;"><MudSwitch T="bool" Value="evt.Sms" Color="Color.Primary" /></td>
                            <td style="text-align:center;"><MudSwitch T="bool" Value="evt.Push" Color="Color.Primary" /></td>
                            <td style="text-align:center;"><MudSwitch T="bool" Value="evt.InApp" Color="Color.Primary" /></td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>

    @* RIGHT: Channel Config *@
    <div style="width:340px;display:flex;flex-direction:column;gap:20px;">
        @* Channel Status *@
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="radio" style="color:#8B5CF6;"></i>
                    Kênh thông báo
                </h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:8px;">
                @foreach (var ch in _channels)
                {
                    <div style="display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:var(--admin-bg-interactive);border-radius:10px;">
                        <div style="display:flex;align-items:center;gap:10px;">
                            <div class="admin-kpi-card__icon" style="width:36px;height:36px;border-radius:10px;background-color:@(ch.Color)20;">
                                <i data-lucide="@ch.Icon" style="color:@ch.Color;width:18px;height:18px;"></i>
                            </div>
                            <div style="display:flex;flex-direction:column;">
                                <span style="font-size:13px;font-weight:600;">@ch.Name</span>
                                <span style="font-size:11px;color:var(--admin-text-tertiary);">@ch.Provider</span>
                            </div>
                        </div>
                        <MudSwitch T="bool" Value="ch.Enabled" Color="Color.Primary" />
                    </div>
                }
            </div>
        </div>

        @* Delivery Schedule *@
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="clock" style="color:#F59E0B;"></i>
                    Lịch gửi
                </h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:12px;">
                <div class="admin-form-group">
                    <label class="admin-form-label">Giờ bắt đầu</label>
                    <input class="admin-form-input" type="text" value="08:00" readonly />
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Giờ kết thúc</label>
                    <input class="admin-form-input" type="text" value="22:00" readonly />
                </div>
                <div style="display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--admin-bg-interactive);border-radius:10px;">
                    <span style="font-size:13px;font-weight:500;">Không làm phiền</span>
                    <MudSwitch T="bool" Value="true" Color="Color.Primary" />
                </div>
            </div>
        </div>
    </div>
</div>

@code {
    private record EventType(string Name, string Desc, bool Email, bool Sms, bool Push, bool InApp);
    private readonly EventType[] _eventTypes = new[]
    {
        new EventType("Đơn hàng mới", "Khi có đơn hàng mới được tạo", false, false, true, true),
        new EventType("Đơn hàng hủy", "Khi đơn hàng bị hủy", true, true, true, true),
        new EventType("Hàng sắp hết", "Tồn kho dưới mức tối thiểu", true, false, true, true),
        new EventType("Nhân viên clock-in", "Nhân viên bắt đầu ca làm việc", false, false, false, true),
        new EventType("Doanh thu bất thường", "Doanh thu thấp/cao bất thường", true, true, true, true),
        new EventType("Thiết bị offline", "Thiết bị mất kết nối", true, true, true, true),
        new EventType("Phản hồi khách hàng", "Khách hàng gửi đánh giá mới", false, false, true, true),
        new EventType("Bảo mật", "Đăng nhập lạ, đổi mật khẩu", true, true, true, true),
    };

    private record ChannelDef(string Name, string Icon, string Color, string Provider, bool Enabled);
    private readonly ChannelDef[] _channels = new[]
    {
        new ChannelDef("Email", "mail", "#3B82F6", "SendGrid", true),
        new ChannelDef("SMS", "smartphone", "#22C55E", "Twilio", true),
        new ChannelDef("Push", "bell-ring", "#FF5C00", "Firebase FCM", true),
        new ChannelDef("In-app", "message-square", "#8B5CF6", "WebSocket", true),
    };
}
