@*
    EN: Price Check — Barcode/SKU input, large price display, product details, promotions, price history.
    VI: Kiểm tra giá — Nhập mã vạch/SKU, hiển thị giá lớn, chi tiết sản phẩm, khuyến mãi, lịch sử giá.
*@
@page "/pos/{ShopId:guid}/dialog/price-check"
@layout PosLayout
@inherits PosBase
@using WebClientTpos.Client.Services
@inject IJSRuntime JS

<div class="pos-dialog-overlay">
    <div style="width:100%;max-width:520px;background:var(--pos-bg-elevated);border-radius:16px;
                display:flex;flex-direction:column;max-height:90vh;overflow:hidden;">

        @* ═══ HEADER / TIÊU ĐỀ ═══ *@
        <div style="padding:20px 24px;border-bottom:1px solid var(--pos-border-subtle);display:flex;align-items:center;gap:12px;">
            <div style="width:40px;height:40px;border-radius:10px;background:rgba(255,92,0,.15);display:flex;align-items:center;justify-content:center;">
                <i data-lucide="tag" style="width:20px;height:20px;color:var(--pos-orange-primary);"></i>
            </div>
            <div style="flex:1;">
                <div style="font-size:18px;font-weight:700;">Kiểm tra giá</div>
                <div style="font-size:12px;color:var(--pos-text-tertiary);">Tra cứu giá sản phẩm</div>
            </div>
            <button style="background:none;border:none;color:var(--pos-text-tertiary);cursor:pointer;padding:8px;"
                    @onclick="@(async () => await JS.InvokeVoidAsync("history.back"))">
                <i data-lucide="x" style="width:20px;height:20px;"></i>
            </button>
        </div>

        <div style="flex:1;overflow-y:auto;padding:24px;">
            @* ═══ SEARCH INPUT / Ô TÌM KIẾM ═══ *@
            <div style="display:flex;gap:8px;margin-bottom:24px;">
                <input type="text" @bind="_searchInput" placeholder="Nhập mã vạch hoặc SKU..."
                       style="flex:1;padding:14px 16px;border-radius:var(--pos-radius);border:1px solid var(--pos-border-default);
                              background:var(--pos-bg-interactive);color:var(--pos-text-primary);font-size:15px;" />
                <button style="padding:14px;border-radius:var(--pos-radius);background:var(--pos-bg-interactive);
                               border:1px solid var(--pos-border-default);color:var(--pos-text-primary);cursor:pointer;"
                        @onclick="SearchProduct">
                    <i data-lucide="scan-barcode" style="width:20px;height:20px;"></i>
                </button>
                <button style="padding:14px 20px;border-radius:var(--pos-radius);background:var(--pos-orange-primary);
                               border:none;color:#fff;cursor:pointer;font-weight:600;font-size:14px;"
                        @onclick="SearchProduct">
                    <i data-lucide="search" style="width:16px;height:16px;vertical-align:middle;"></i>
                </button>
            </div>

            @if (_productFound)
            {
                @* ═══ HERO PRICE / GIÁ NỔI BẬT ═══ *@
                <div style="text-align:center;margin-bottom:24px;padding:24px;background:var(--pos-bg-interactive);border-radius:var(--pos-radius);">
                    <div style="font-size:16px;font-weight:600;margin-bottom:8px;">@_productName</div>
                    @if (_hasPromotion)
                    {
                        <div style="font-size:16px;color:var(--pos-text-tertiary);text-decoration:line-through;margin-bottom:4px;">
                            @FormatPrice(_originalPrice)
                        </div>
                    }
                    <div style="font-size:48px;font-weight:800;color:var(--pos-orange-primary);line-height:1;">
                        @FormatPrice(_currentPrice)
                    </div>
                    @if (_hasPromotion)
                    {
                        <div style="display:inline-block;margin-top:10px;padding:4px 12px;border-radius:6px;background:rgba(34,197,94,.15);
                                    color:var(--pos-success);font-size:13px;font-weight:600;">
                            <i data-lucide="percent" style="width:14px;height:14px;vertical-align:middle;margin-right:2px;"></i>
                            Giảm 10%
                        </div>
                    }
                </div>

                @* ═══ PRODUCT DETAILS / CHI TIẾT SẢN PHẨM ═══ *@
                <div style="margin-bottom:20px;">
                    <div style="font-size:14px;font-weight:600;margin-bottom:12px;">Thông tin sản phẩm</div>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
                        @foreach (var detail in _productDetails)
                        {
                            <div style="padding:10px 14px;background:var(--pos-bg-interactive);border-radius:8px;">
                                <div style="font-size:11px;color:var(--pos-text-tertiary);margin-bottom:4px;">@detail.Label</div>
                                <div style="font-size:14px;font-weight:600;color:@detail.Color;">@detail.Value</div>
                            </div>
                        }
                    </div>
                </div>

                @* ═══ ACTIVE PROMOTIONS / KHUYẾN MÃI ĐANG ÁP DỤNG ═══ *@
                @if (_hasPromotion)
                {
                    <div style="margin-bottom:20px;">
                        <div style="font-size:14px;font-weight:600;margin-bottom:12px;">Khuyến mãi đang áp dụng</div>
                        @foreach (var promo in _promotions)
                        {
                            <div style="display:flex;align-items:center;gap:10px;padding:12px;
                                        background:rgba(34,197,94,.08);border-radius:var(--pos-radius);border:1px solid rgba(34,197,94,.2);margin-bottom:8px;">
                                <i data-lucide="gift" style="width:18px;height:18px;color:var(--pos-success);flex-shrink:0;"></i>
                                <div style="flex:1;">
                                    <div style="font-size:13px;font-weight:600;">@promo.Name</div>
                                    <div style="font-size:11px;color:var(--pos-text-tertiary);margin-top:2px;">@promo.Period</div>
                                </div>
                                <span style="font-size:14px;font-weight:700;color:var(--pos-success);">-@promo.Discount</span>
                            </div>
                        }
                    </div>
                }

                @* ═══ PRICE HISTORY / LỊCH SỬ GIÁ ═══ *@
                <div>
                    <div style="font-size:14px;font-weight:600;margin-bottom:12px;">Lịch sử giá (3 lần thay đổi gần nhất)</div>
                    @foreach (var history in _priceHistory)
                    {
                        <div style="display:flex;align-items:center;padding:10px 0;border-bottom:1px solid var(--pos-border-subtle);font-size:13px;">
                            <i data-lucide="@history.Icon" style="width:14px;height:14px;color:@history.Color;margin-right:10px;"></i>
                            <div style="flex:1;">
                                <span style="font-weight:500;">@FormatPrice(history.OldPrice)</span>
                                <span style="color:var(--pos-text-tertiary);margin:0 6px;">→</span>
                                <span style="font-weight:600;color:@history.Color;">@FormatPrice(history.NewPrice)</span>
                            </div>
                            <span style="color:var(--pos-text-tertiary);font-size:12px;">@history.Date</span>
                        </div>
                    }
                </div>
            }
        </div>

        @* ═══ FOOTER / CUỐI TRANG ═══ *@
        <div style="padding:16px 24px;border-top:1px solid var(--pos-border-subtle);">
            <button style="width:100%;padding:14px;border-radius:var(--pos-radius);border:1px solid var(--pos-border-default);
                           background:transparent;color:var(--pos-text-primary);cursor:pointer;font-size:14px;font-weight:500;"
                    @onclick="@(async () => await JS.InvokeVoidAsync("history.back"))">
                <i data-lucide="x" style="width:14px;height:14px;vertical-align:middle;margin-right:4px;"></i>
                Đóng
            </button>
        </div>
    </div>
</div>

@code {
    // EN: Dialog data — populated from current context (selected order/product).
    // VI: Dữ liệu dialog — được điền từ context hiện tại (đơn hàng/sản phẩm đã chọn).
    // TODO: Integrate with Order/Catalog/Inventory APIs when DDD Value Object mapping is fixed.

    // EN: Price check state / VI: Trạng thái kiểm tra giá
    private string _searchInput = "APL-001";
    private bool _productFound = true;
    private string _productName = "Áo polo nam";
    private decimal _originalPrice = 450_000;
    private decimal _currentPrice = 405_000;
    private bool _hasPromotion = true;

    // EN: Product details / VI: Chi tiết sản phẩm
    private readonly List<DetailItem> _productDetails = new()
    {
        new("Tên sản phẩm", "Áo polo nam", "var(--pos-text-primary)"),
        new("SKU", "APL-001", "var(--pos-text-primary)"),
        new("Danh mục", "Thời trang nam", "var(--pos-text-primary)"),
        new("Tồn kho", "156 cái", "var(--pos-success)"),
        new("Giá gốc", "450,000₫", "var(--pos-text-primary)"),
        new("Giá hiện tại", "405,000₫", "var(--pos-orange-primary)"),
    };

    // EN: Active promotions / VI: Khuyến mãi đang áp dụng
    private readonly List<PromoInfo> _promotions = new()
    {
        new("Giảm giá mùa hè 2026", "01/02/2026 — 31/03/2026", "10%"),
    };

    // EN: Price history / VI: Lịch sử giá
    private readonly List<PriceHistoryItem> _priceHistory = new()
    {
        new(500_000, 450_000, "01/01/2026", "trending-down", "var(--pos-success)"),
        new(420_000, 500_000, "15/11/2025", "trending-up", "var(--pos-danger)"),
        new(450_000, 420_000, "01/09/2025", "trending-down", "var(--pos-success)"),
    };

    private void SearchProduct()
    {
        _productFound = true;
    }

    private record DetailItem(string Label, string Value, string Color);
    private record PromoInfo(string Name, string Period, string Discount);
    private record PriceHistoryItem(decimal OldPrice, decimal NewPrice, string Date, string Icon, string Color);
}
