@*
    EN: Karaoke Room Reset — Cleanup checklist after session ends, loads room info from DB.
    VI: Reset phòng Karaoke — Danh sách dọn dẹp sau phiên, tải thông tin phòng từ DB.
*@
@page "/pos/{ShopId:guid}/karaoke/room-reset/{RoomId:guid}"
@layout PosLayout
@inherits PosBase
@inject WebClientTpos.Client.Services.PosDataService DataService

<div style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
    @* ═══ HEADER / TIÊU ĐỀ ═══ *@
    <div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--pos-border-subtle);flex-shrink:0;">
        <button style="background:var(--pos-bg-interactive);border:none;color:var(--pos-text-primary);
                       padding:8px 12px;border-radius:8px;cursor:pointer;font-size:13px;"
                @onclick="@(() => NavigateTo("karaoke"))">
            <i data-lucide="arrow-left" style="width:16px;height:16px;display:inline;"></i>
        </button>
        <span style="font-size:16px;font-weight:700;">Reset phòng</span>
        <span style="font-size:12px;padding:3px 10px;border-radius:6px;font-weight:600;
                     background:@(AllChecked ? "rgba(34,197,94,.15)" : "rgba(245,158,11,.15)");
                     color:@(AllChecked ? "#22C55E" : "var(--pos-warning)");">
            @(AllChecked ? "Sẵn sàng" : "Đang dọn")
        </span>
    </div>

    <div style="flex:1;overflow-y:auto;padding:16px;">
        @* ═══ ROOM INFO / THÔNG TIN PHÒNG ═══ *@
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:20px;margin-bottom:16px;">
            <div style="display:flex;justify-content:space-between;align-items:start;">
                <div>
                    <div style="font-size:18px;font-weight:700;">@_roomName</div>
                    <div style="font-size:12px;color:var(--pos-text-tertiary);margin-top:2px;">@_roomType • @_roomCapacity người</div>
                </div>
            </div>
        </div>

        @* ═══ PROGRESS BAR / THANH TIẾN ĐỘ ═══ *@
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:16px;margin-bottom:16px;">
            <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px;">
                <span style="font-weight:600;">Tiến độ</span>
                <span style="color:var(--pos-text-tertiary);">@CompletedCount/@_checkItems.Count hoàn thành</span>
            </div>
            <div style="height:8px;background:var(--pos-bg-interactive);border-radius:4px;overflow:hidden;">
                <div style="height:100%;width:@(ProgressPercent)%;border-radius:4px;transition:width .3s ease;
                            background:@(AllChecked ? "var(--pos-success)" : "var(--pos-orange-primary)");"></div>
            </div>
        </div>

        @* ═══ CHECKLIST / DANH SÁCH KIỂM TRA ═══ *@
        <div style="display:flex;flex-direction:column;gap:8px;">
            @foreach (var item in _checkItems)
            {
                <div @onclick="() => item.Checked = !item.Checked"
                     style="display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;
                            background:var(--pos-bg-elevated);border-radius:var(--pos-radius);
                            border:1px solid @(item.Checked ? "rgba(34,197,94,.3)" : "var(--pos-border-subtle)");
                            opacity:@(item.Checked ? "0.7" : "1");transition:all .2s ease;">
                    <div style="width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;
                                flex-shrink:0;border:2px solid @(item.Checked ? "#22C55E" : "var(--pos-border-default)");
                                background:@(item.Checked ? "rgba(34,197,94,.15)" : "transparent");">
                        @if (item.Checked)
                        {
                            <i data-lucide="check" style="width:16px;height:16px;color:#22C55E;"></i>
                        }
                    </div>
                    <div style="flex:1;">
                        <div style="font-size:14px;font-weight:600;text-decoration:@(item.Checked ? "line-through" : "none");
                                    color:@(item.Checked ? "var(--pos-text-tertiary)" : "var(--pos-text-primary)");">
                            @item.Label
                        </div>
                    </div>
                    <i data-lucide="@item.Icon" style="width:18px;height:18px;color:var(--pos-text-tertiary);flex-shrink:0;"></i>
                </div>
            }
        </div>
    </div>

    @* ═══ COMPLETE BUTTON / NÚT HOÀN TẤT ═══ *@
    <div style="padding:12px 16px;border-top:1px solid var(--pos-border-subtle);flex-shrink:0;">
        @if (!string.IsNullOrEmpty(_errorMsg))
        {
            <div style="margin-bottom:8px;font-size:13px;color:#EF4444;">@_errorMsg</div>
        }
        <button style="width:100%;padding:16px;border-radius:var(--pos-radius);
                       background:@(AllChecked ? "var(--pos-success)" : "var(--pos-bg-interactive)");
                       border:none;color:@(AllChecked ? "#FFF" : "var(--pos-text-tertiary)");
                       cursor:@(AllChecked ? "pointer" : "not-allowed");font-size:15px;font-weight:700;"
                disabled="@(!AllChecked || _completing)"
                @onclick="CompleteReset">
            <i data-lucide="@(AllChecked ? "check-circle" : "loader")" style="width:18px;height:18px;display:inline;"></i>
            @(_completing ? "Đang hoàn tất..." : "Hoàn tất reset")
        </button>
    </div>
</div>

@code {
    [Parameter] public Guid RoomId { get; set; }

    private string _roomName = "";
    private string _roomType = "";
    private int _roomCapacity;
    private bool _completing;
    private string? _errorMsg;

    private readonly List<CheckItem> _checkItems = new()
    {
        new("Dọn bàn ghế", "armchair", false),
        new("Vệ sinh micro", "mic", false),
        new("Kiểm tra remote", "tv", false),
        new("Bổ sung nước uống", "cup-soda", false),
        new("Kiểm tra ánh sáng", "lightbulb", false),
        new("Hệ thống âm thanh", "volume-2", false),
        new("Kiểm tra thiết bị", "monitor", false),
        new("Vệ sinh phòng", "sparkles", false),
    };

    private int CompletedCount => _checkItems.Count(i => i.Checked);
    private bool AllChecked => _checkItems.All(i => i.Checked);
    private int ProgressPercent => _checkItems.Count > 0 ? CompletedCount * 100 / _checkItems.Count : 0;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        try
        {
            var tables = await DataService.GetTablesAsync(ShopId);
            var table = tables.FirstOrDefault(t => t.Id == RoomId);
            if (table != null)
            {
                _roomName = table.TableNumber;
                _roomType = table.Zone ?? "Standard";
                _roomCapacity = table.Capacity;
            }
        }
        catch { }
    }

    private async Task CompleteReset()
    {
        _completing = true;
        _errorMsg = null;

        try
        {
            var success = await DataService.UpdateTableStatusAsync(RoomId, "available");
            if (success)
            {
                NavigateTo("karaoke");
            }
            else
            {
                _errorMsg = "Không thể cập nhật trạng thái phòng.";
            }
        }
        catch
        {
            _errorMsg = "Lỗi khi hoàn tất reset.";
        }
        finally
        {
            _completing = false;
        }
    }

    private class CheckItem(string label, string icon, bool isChecked)
    {
        public string Label { get; set; } = label;
        public string Icon { get; set; } = icon;
        public bool Checked { get; set; } = isChecked;
    }
}
