@*
    EN: Table Detail — Bill preview with items, subtotal, service charge, VAT, total, split bill.
    VI: Chi tiết bàn — Xem hóa đơn với danh sách món, tạm tính, phí dịch vụ, VAT, tổng, tách hóa đơn.
*@
@page "/pos/{ShopId:guid}/restaurant/table-detail"
@page "/pos/{ShopId:guid}/restaurant/table-detail/{TableId:guid}"
@layout PosLayout
@inherits PosBase
@inject WebClientTpos.Client.Services.PosDataService DataService
@inject NavigationManager Navigation

<div style="flex:1;display:flex;align-items:center;justify-content:center;padding:24px;">
    <div style="width:100%;max-width:480px;background:var(--pos-bg-elevated);border-radius:16px;
                display:flex;flex-direction:column;overflow:hidden;">
        @* ═══ HEADER / TIÊU ĐỀ ═══ *@
        <div style="padding:16px 20px;border-bottom:1px solid var(--pos-border-subtle);display:flex;align-items:center;gap:12px;">
            <button class="pos-category-tab" @onclick="@(() => NavigateTo("restaurant"))">
                <i data-lucide="arrow-left" style="width:14px;"></i>
            </button>
            <div style="flex:1;">
                <div style="font-size:16px;font-weight:700;">@_tableName — Hóa đơn</div>
                <div style="font-size:12px;color:var(--pos-text-tertiary);">POS · @DateTime.Now.ToString("HH:mm")</div>
            </div>
            <span style="font-size:12px;padding:4px 10px;border-radius:6px;background:rgba(255,92,0,.15);color:var(--pos-orange-primary);font-weight:600;">
                @_items.Count món
            </span>
        </div>

        @if (_isLoading)
        {
            <div style="flex:1;display:flex;align-items:center;justify-content:center;padding:40px;color:var(--pos-text-tertiary);">
                Đang tải hóa đơn...
            </div>
        }
        else if (_loadError)
        {
            <div style="flex:1;display:flex;align-items:center;justify-content:center;padding:40px;color:var(--pos-text-tertiary);">
                Không thể tải dữ liệu
            </div>
        }
        else if (!_items.Any())
        {
            <div style="flex:1;display:flex;align-items:center;justify-content:center;padding:40px;color:var(--pos-text-tertiary);">
                Chưa có món nào cho bàn này
            </div>
        }
        else
        {
        @* ═══ ORDERED ITEMS / CÁC MÓN ĐÃ GỌI ═══ *@
        <div style="flex:1;overflow-y:auto;padding:12px 20px;">
            @foreach (var item in _items)
            {
                <div style="display:flex;align-items:center;padding:10px 0;border-bottom:1px solid var(--pos-border-subtle);">
                    <span style="width:28px;font-size:13px;color:var(--pos-text-tertiary);">x@(item.Qty)</span>
                    <span style="flex:1;font-size:14px;font-weight:500;">@item.Name</span>
                    <span style="font-size:14px;font-weight:600;">@FormatPrice(item.Price * item.Qty)</span>
                </div>
            }
        </div>

        @* ═══ BILL SUMMARY / TỔNG KẾT HÓA ĐƠN ═══ *@
        <div style="padding:16px 20px;border-top:1px solid var(--pos-border-subtle);display:flex;flex-direction:column;gap:8px;">
            <div style="display:flex;justify-content:space-between;font-size:13px;color:var(--pos-text-secondary);">
                <span>Tạm tính</span><span>@FormatPrice(Subtotal)</span>
            </div>
            <div style="display:flex;justify-content:space-between;font-size:13px;color:var(--pos-text-secondary);">
                <span>Phí dịch vụ (5%)</span><span>@FormatPrice(ServiceCharge)</span>
            </div>
            <div style="display:flex;justify-content:space-between;font-size:13px;color:var(--pos-text-secondary);">
                <span>VAT (8%)</span><span>@FormatPrice(Vat)</span>
            </div>
            <div style="height:1px;background:var(--pos-border-default);margin:4px 0;"></div>
            <div style="display:flex;justify-content:space-between;font-size:18px;font-weight:700;">
                <span>Tổng cộng</span>
                <span style="color:var(--pos-orange-primary);">@FormatPrice(Total)</span>
            </div>
        </div>

        @* ═══ ACTIONS / HÀNH ĐỘNG ═══ *@
        <div style="padding:12px 20px 20px;display:flex;flex-direction:column;gap:10px;">
            @* EN: Split bill toggle / VI: Tùy chọn tách hóa đơn *@
            <div style="display:flex;gap:10px;">
                <button class="pos-category-tab @(_splitMode == "full" ? "pos-category-tab--active" : "")"
                        style="flex:1;text-align:center;" @onclick="@(() => _splitMode = "full")">Thanh toán đầy đủ</button>
                <button class="pos-category-tab @(_splitMode == "split" ? "pos-category-tab--active" : "")"
                        style="flex:1;text-align:center;" @onclick="@(() => _splitMode = "split")">Tách hóa đơn</button>
            </div>

            @if (_splitMode == "split")
            {
                <div style="display:flex;gap:8px;justify-content:center;padding:8px 0;">
                    @for (var i = 2; i <= 4; i++)
                    {
                        var count = i;
                        <button class="pos-category-tab @(_splitCount == count ? "pos-category-tab--active" : "")"
                                @onclick="() => _splitCount = count">@count người</button>
                    }
                </div>
                <div style="text-align:center;font-size:14px;color:var(--pos-text-secondary);">
                    Mỗi người: <b style="color:var(--pos-orange-primary);">@FormatPrice(Total / _splitCount)</b>
                </div>
            }

            <button class="pos-btn-checkout" @onclick="GoToPayment">
                <i data-lucide="credit-card"></i> Thanh toán
            </button>
        </div>
        }
    </div>
</div>

@code {
    // EN: Optional table ID from route / VI: ID bàn tùy chọn từ route
    [Parameter] public Guid? TableId { get; set; }

    // EN: Loading state / VI: Trạng thái tải
    private bool _isLoading = true;
    private bool _loadError;

    private string _splitMode = "full";
    private int _splitCount = 2;
    private string _tableName = "Bàn";

    // EN: Bill items loaded from API / VI: Các món hóa đơn tải từ API
    private List<BillItem> _items = new();

    // EN: Order IDs for payment / VI: ID đơn hàng cho thanh toán
    private List<Guid> _orderIds = new();

    private decimal Subtotal => _items.Sum(i => i.Price * i.Qty);
    private decimal ServiceCharge => Math.Round(Subtotal * 0.05m);
    private decimal Vat => Math.Round(Subtotal * 0.08m);
    private decimal Total => Subtotal + ServiceCharge + Vat;

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

        try
        {
            // EN: Load tables to find table name / VI: Tải bàn để tìm tên bàn
            var tablesTask = DataService.GetTablesAsync(ShopId);
            var ordersTask = DataService.GetActiveTableOrdersAsync(ShopId);
            await Task.WhenAll(tablesTask, ordersTask);

            var tables = await tablesTask;
            var activeOrders = await ordersTask;

            // EN: If TableId provided, use it; otherwise try first table with orders
            // VI: Nếu có TableId, dùng nó; ngược lại thử bàn đầu tiên có đơn
            var targetTableId = TableId;
            if (!targetTableId.HasValue)
            {
                // EN: Try to get table from query string / VI: Thử lấy bàn từ query string
                var uri = new Uri(Navigation.Uri);
                var query = System.Web.HttpUtility.ParseQueryString(uri.Query);
                if (Guid.TryParse(query["tableId"], out var qsTableId))
                    targetTableId = qsTableId;
            }

            if (!targetTableId.HasValue)
            {
                // EN: Use first occupied table / VI: Dùng bàn đầu tiên đang phục vụ
                targetTableId = activeOrders.FirstOrDefault(o => o.TableId.HasValue)?.TableId;
            }

            // EN: Find table name / VI: Tìm tên bàn
            var table = tables.FirstOrDefault(t => t.Id == targetTableId);
            if (table != null)
                _tableName = $"Bàn {table.TableNumber}";

            // EN: Filter active orders for the target table / VI: Lọc đơn active cho bàn mục tiêu
            var tableOrders = activeOrders.Where(o => o.TableId == targetTableId).ToList();
            _orderIds = tableOrders.Select(o => o.OrderId).ToList();

            // EN: Aggregate items from all orders for this table / VI: Gộp món từ tất cả đơn cho bàn này
            var itemMap = new Dictionary<Guid, BillItem>();
            foreach (var order in tableOrders)
            {
                foreach (var item in order.Items)
                {
                    if (itemMap.TryGetValue(item.ProductId, out var existing))
                        existing.Qty += item.Quantity;
                    else
                        itemMap[item.ProductId] = new BillItem(item.ProductName, item.UnitPrice, item.Quantity);
                }
            }
            _items = itemMap.Values.ToList();
        }
        catch
        {
            _loadError = true;
        }
        finally
        {
            _isLoading = false;
        }
    }

    // EN: Navigate to payment flow / VI: Chuyển đến luồng thanh toán
    private void GoToPayment()
    {
        NavigateTo("restaurant");
    }

    private class BillItem(string name, decimal price, int qty)
    {
        public string Name { get; } = name;
        public decimal Price { get; } = price;
        public int Qty { get; set; } = qty;
    }
}
