@page "/staff/tables"
@layout StaffLayout
@using WebClientTpos.Client.Services
@inject PosDataService DataService
@inject IJSRuntime JS

@*
    EN: Waiter table view — shows tables, their status, and allows order management.
    VI: Màn hình phục vụ — hiển thị bàn, trạng thái, và quản lý order.
*@

<PageTitle>Bàn / Order</PageTitle>

<div class="staff-page">
    <div class="staff-page-header">
        <h1 class="staff-page-title">Bàn & Order</h1>
        <p class="staff-page-subtitle">Quản lý bàn và order của bạn</p>
    </div>

    @if (_loading)
    {
        <div style="text-align:center;padding:48px;">
            <MudProgressCircular Indeterminate="true" Size="Size.Medium" Color="Color.Success" />
        </div>
    }
    else
    {
        @* ═══ TABLE GRID ═══ *@
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;">
            @foreach (var table in _tables)
            {
                var bgColor = table.Status switch
                {
                    "Available" => "var(--admin-bg-elevated)",
                    "Occupied" => "rgba(255,92,0,0.08)",
                    "Reserved" => "rgba(59,130,246,0.08)",
                    _ => "var(--admin-bg-elevated)"
                };
                var borderColor = table.Status switch
                {
                    "Available" => "var(--admin-border-default)",
                    "Occupied" => "#FF5C00",
                    "Reserved" => "#3B82F6",
                    _ => "var(--admin-border-default)"
                };
                <div style="background:@bgColor;border:1px solid @borderColor;border-radius:var(--admin-radius-lg);padding:20px;text-align:center;cursor:pointer;transition:all 0.2s;" @onclick="@(() => SelectTable(table))">
                    <div style="font-size:11px;color:var(--admin-text-tertiary);margin-bottom:4px;">BÀN</div>
                    <div style="font-size:28px;font-weight:800;color:var(--admin-text-primary);margin-bottom:8px;">@table.TableNumber</div>
                    <span class="staff-status @GetTableStatusCss(table.Status)">
                        @GetTableStatusLabel(table.Status)
                    </span>
                    @if (table.GuestCount > 0)
                    {
                        <div style="margin-top:8px;font-size:12px;color:var(--admin-text-secondary);">
                            <i data-lucide="users" style="width:12px;height:12px;display:inline;"></i> @table.GuestCount khách
                        </div>
                    }
                </div>
            }
        </div>

        @* ═══ SELECTED TABLE DETAIL ═══ *@
        @if (_selectedTable != null)
        {
            <div class="staff-table-card" style="margin-top:20px;">
                <div class="staff-table-card__header">
                    <span class="staff-table-card__title">Bàn @_selectedTable.TableNumber</span>
                    <span class="staff-status @GetTableStatusCss(_selectedTable.Status)">@GetTableStatusLabel(_selectedTable.Status)</span>
                </div>
                <div style="padding:20px;">
                    <div style="display:flex;gap:12px;">
                        @if (_selectedTable.Status == "Available")
                        {
                            <button class="staff-btn-primary" @onclick="@(() => OpenTable(_selectedTable))">
                                <i data-lucide="plus"></i> Mở bàn
                            </button>
                        }
                        else if (_selectedTable.Status == "Occupied")
                        {
                            <button class="staff-btn-primary">
                                <i data-lucide="plus"></i> Thêm món
                            </button>
                            <button class="staff-btn-secondary" style="color:#F59E0B;">
                                <i data-lucide="receipt"></i> In bill
                            </button>
                        }
                    </div>
                </div>
            </div>
        }
    }
</div>

@code {
    private List<PosDataService.TableInfo> _tables = new();
    private PosDataService.TableInfo? _selectedTable;
    private bool _loading = true;

    [CascadingParameter] private StaffLayout? Layout { get; set; }

    protected override async Task OnInitializedAsync()
    {
        try
        {
            var shopId = Layout?.ShopId;
            if (shopId.HasValue)
                _tables = await DataService.GetTablesAsync(shopId.Value);
            else
                _tables = new(); // Will show empty state
        }
        catch { }
        finally { _loading = false; }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        try { await JS.InvokeVoidAsync("lucide.createIcons"); } catch { }
    }

    private void SelectTable(PosDataService.TableInfo table) => _selectedTable = table;

    private void OpenTable(PosDataService.TableInfo table)
    {
        // TODO: Create session for table
    }

    private static string GetTableStatusCss(string status) => status switch
    {
        "Available" => "staff-status--success",
        "Occupied" => "staff-status--warning",
        "Reserved" => "staff-status--info",
        _ => "staff-status--neutral"
    };

    private static string GetTableStatusLabel(string status) => status switch
    {
        "Available" => "Trống",
        "Occupied" => "Có khách",
        "Reserved" => "Đặt trước",
        _ => status
    };
}
