@*
    EN: Queue Display — Public-facing queue board: preparing list, ready list, large order numbers.
    VI: Bảng hiển thị hàng đợi — Bảng công khai: danh sách đang pha, sẵn sàng, số đơn lớn.
*@
@page "/pos/cafe/queue-display"
@layout PosLayout
@inherits PosBase

<div style="display:flex;height:100%;gap:2px;padding:16px;">
    @* EN: Preparing column / VI: Cột đang pha *@
    <div style="flex:1;display:flex;flex-direction:column;gap:16px;">
        <div style="text-align:center;padding:16px;background:var(--pos-bg-elevated);border-radius:var(--pos-radius);">
            <div style="font-size:14px;color:var(--pos-warning);font-weight:600;text-transform:uppercase;letter-spacing:1px;">
                ☕ Đang pha chế
            </div>
            <div style="font-size:11px;color:var(--pos-text-tertiary);margin-top:4px;">Preparing</div>
        </div>

        <div style="flex:1;display:grid;grid-template-columns:repeat(2, 1fr);gap:12px;align-content:start;">
            @foreach (var order in _preparingOrders)
            {
                <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:20px;text-align:center;border:1px solid rgba(245,158,11,0.3);">
                    <div style="font-size:42px;font-weight:800;color:var(--pos-warning);line-height:1;">@order.Number</div>
                    <div style="font-size:12px;color:var(--pos-text-tertiary);margin-top:8px;">@order.Items</div>
                    <div style="display:flex;align-items:center;justify-content:center;gap:4px;margin-top:8px;">
                        <span style="width:6px;height:6px;border-radius:50%;background:var(--pos-warning);animation:pulse 1.5s infinite;"></span>
                        <span style="font-size:11px;color:var(--pos-warning);">@order.Time</span>
                    </div>
                </div>
            }
        </div>
    </div>

    @* EN: Divider / VI: Đường phân cách *@
    <div style="width:2px;background:var(--pos-border-subtle);margin:0 8px;"></div>

    @* EN: Ready column / VI: Cột sẵn sàng *@
    <div style="flex:1;display:flex;flex-direction:column;gap:16px;">
        <div style="text-align:center;padding:16px;background:var(--pos-bg-elevated);border-radius:var(--pos-radius);">
            <div style="font-size:14px;color:var(--pos-success);font-weight:600;text-transform:uppercase;letter-spacing:1px;">
                ✅ Sẵn sàng
            </div>
            <div style="font-size:11px;color:var(--pos-text-tertiary);margin-top:4px;">Ready for pickup</div>
        </div>

        <div style="flex:1;display:grid;grid-template-columns:repeat(2, 1fr);gap:12px;align-content:start;">
            @foreach (var order in _readyOrders)
            {
                <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:20px;text-align:center;border:1px solid rgba(34,197,94,0.3);animation:readyGlow 2s ease-in-out infinite alternate;">
                    <div style="font-size:42px;font-weight:800;color:var(--pos-success);line-height:1;">@order.Number</div>
                    <div style="font-size:12px;color:var(--pos-text-tertiary);margin-top:8px;">@order.Customer</div>
                    <div style="font-size:11px;color:var(--pos-success);margin-top:6px;">Mời nhận đồ</div>
                </div>
            }
        </div>
    </div>
</div>

@* EN: Pulse animation / VI: Hiệu ứng nhấp nháy *@
<style>
    @@keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.3; }
    }
    @@keyframes readyGlow {
        from { box-shadow: 0 0 8px rgba(34, 197, 94, 0.1); }
        to { box-shadow: 0 0 16px rgba(34, 197, 94, 0.25); }
    }
</style>

@code {
    // EN: Preparing orders / VI: Đơn đang pha
    private readonly List<QueueOrder> _preparingOrders = new()
    {
        new("101", "Cà phê sữa đá x2", "3 phút"),
        new("103", "Trà đào x1, Sinh tố bơ x1", "5 phút"),
        new("105", "Cappuccino x3", "2 phút"),
        new("107", "Latte x1, Bạc xỉu x1", "1 phút"),
    };

    // EN: Ready orders / VI: Đơn sẵn sàng
    private readonly List<ReadyOrder> _readyOrders = new()
    {
        new("098", "Anh Minh"),
        new("099", "Chị Lan"),
        new("100", "Anh Khoa"),
        new("102", "Chị Hương"),
        new("104", "Anh Tùng"),
    };

    private record QueueOrder(string Number, string Items, string Time);
    private record ReadyOrder(string Number, string Customer);
}
