@*
    EN: Customer Display — Customer-facing screen: current order, total, branding.
        Connected to active orders API with auto-refresh.
    VI: Man hinh khach hang — Hien thi don hang, tong tien, thuong hieu.
        Ket noi API don hang voi tu dong lam moi.
*@
@page "/pos/{ShopId:guid}/cafe/customer-display"
@layout PosLayout
@inherits PosBase
@inject WebClientTpos.Client.Services.PosDataService DataService
@implements IDisposable

<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:40px;gap:32px;">
    @* EN: Branding / VI: Thuong hieu *@
    <div style="text-align:center;">
        <div style="font-size:32px;font-weight:700;color:var(--pos-orange-primary);margin-bottom:8px;">
            <i data-lucide="coffee" style="width:36px;height:36px;display:inline;"></i> aPOS Coffee
        </div>
        <div style="font-size:16px;color:var(--pos-text-secondary);">
            Chao mung quy khach — Welcome
        </div>
    </div>

    @if (_orderItems.Any())
    {
        @* EN: Order details / VI: Chi tiet don hang *@
        <div style="width:100%;max-width:500px;background:var(--pos-bg-elevated);border-radius:16px;overflow:hidden;">
            <div style="padding:20px;border-bottom:1px solid var(--pos-border-subtle);text-align:center;">
                <span style="font-size:18px;font-weight:600;">Don hang cua ban</span>
                <span style="display:block;font-size:13px;color:var(--pos-text-tertiary);margin-top:4px;">Your Order</span>
            </div>

            <div style="padding:16px;">
                @foreach (var item in _orderItems)
                {
                    <div style="display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--pos-border-subtle);">
                        <div>
                            <div style="font-size:16px;font-weight:500;">@item.ProductName</div>
                            <div style="font-size:13px;color:var(--pos-text-tertiary);">x@item.Quantity</div>
                        </div>
                        <span style="font-size:16px;font-weight:600;color:var(--pos-orange-primary);">
                            @FormatPrice(item.UnitPrice * item.Quantity)
                        </span>
                    </div>
                }
            </div>

            @* EN: Total / VI: Tong cong *@
            <div style="padding:20px;background:var(--pos-bg-interactive);">
                <div style="display:flex;justify-content:space-between;align-items:center;">
                    <span style="font-size:18px;font-weight:600;">Tong cong / Total</span>
                    <span style="font-size:28px;font-weight:700;color:var(--pos-orange-primary);">
                        @FormatPrice(_orderItems.Sum(i => i.UnitPrice * i.Quantity))
                    </span>
                </div>
            </div>
        </div>

        @* EN: Payment status / VI: Trang thai thanh toan *@
        <div style="display:flex;align-items:center;gap:8px;color:var(--pos-warning);font-size:15px;">
            <i data-lucide="loader" style="width:18px;height:18px;"></i>
            Dang cho thanh toan — Awaiting payment
        </div>
    }
    else
    {
        @* EN: Idle state / VI: Trang thai roi *@
        <div style="text-align:center;color:var(--pos-text-tertiary);font-size:18px;">
            <i data-lucide="monitor" style="width:48px;height:48px;margin-bottom:16px;display:block;margin-left:auto;margin-right:auto;"></i>
            Hay bat dau goi mon nhe!
            <div style="font-size:14px;margin-top:4px;">Start ordering now!</div>
        </div>
    }
</div>

@code {
    private List<WebClientTpos.Client.Services.PosDataService.ActiveTableOrderItemDto> _orderItems = new();
    private System.Threading.Timer? _refreshTimer;

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

        // EN: Auto-refresh every 3 seconds / VI: Tu dong lam moi moi 3 giay
        _refreshTimer = new System.Threading.Timer(async _ =>
        {
            await LoadLatestOrder();
            await InvokeAsync(StateHasChanged);
        }, null, TimeSpan.FromSeconds(3), TimeSpan.FromSeconds(3));
    }

    private async Task LoadLatestOrder()
    {
        try
        {
            var orders = await DataService.GetActiveTableOrdersAsync(ShopId);
            var latestOrder = orders.OrderByDescending(o => o.CreatedAt).FirstOrDefault();
            _orderItems = latestOrder?.Items?.ToList() ?? new();
        }
        catch { /* silent for display screen */ }
    }

    public void Dispose() => _refreshTimer?.Dispose();
}
