@*
    EN: Customer Display — Customer-facing screen: current order, total, branding.
    VI: Màn hình khách hàng — Hiển thị đơn hàng, tổng tiền, thương hiệu.
*@
@page "/pos/cafe/customer-display"
@layout PosLayout
@inherits PosBase

<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:40px;gap:32px;">
    @* EN: Branding / VI: Thương hiệu *@
    <div style="text-align:center;">
        <div style="font-size:32px;font-weight:700;color:var(--pos-orange-primary);margin-bottom:8px;">
            ☕ GoodGo Coffee
        </div>
        <div style="font-size:16px;color:var(--pos-text-secondary);">
            Chào mừng quý khách — Welcome
        </div>
    </div>

    @if (_orderItems.Any())
    {
        @* EN: Order details / VI: Chi tiết đơn hàng *@
        <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;">Đơn hàng của bạn</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.Name</div>
                            <div style="font-size:13px;color:var(--pos-text-tertiary);">x@item.Qty</div>
                        </div>
                        <span style="font-size:16px;font-weight:600;color:var(--pos-orange-primary);">
                            @FormatPrice(item.Price * item.Qty)
                        </span>
                    </div>
                }
            </div>

            @* EN: Total / VI: Tổng cộng *@
            <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;">Tổng cộng / Total</span>
                    <span style="font-size:28px;font-weight:700;color:var(--pos-orange-primary);">
                        @FormatPrice(_orderItems.Sum(i => i.Price * i.Qty))
                    </span>
                </div>
            </div>
        </div>

        @* EN: Payment status / VI: Trạng thái thanh toán *@
        <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>
            Đang chờ thanh toán — Awaiting payment
        </div>
    }
    else
    {
        @* EN: Idle state / VI: Trạng thái rỗi *@
        <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>
            Hãy bắt đầu gọi món nhé!
            <div style="font-size:14px;margin-top:4px;">Start ordering now!</div>
        </div>
    }
</div>

@code {
    // EN: Demo order items / VI: Mục đơn hàng mẫu
    private readonly List<DisplayItem> _orderItems = new()
    {
        new("Cà phê sữa đá", 35_000, 2),
        new("Cappuccino", 55_000, 1),
        new("Croissant", 35_000, 1),
        new("Trà đào", 45_000, 1),
    };

    private record DisplayItem(string Name, decimal Price, int Qty);
}
