@*
    EN: Loyalty Stamp — Customer stamp card: points, stamps grid, reward progress.
    VI: Thẻ tích điểm — Thẻ khách hàng: điểm, lưới tem, tiến trình thưởng.
*@
@page "/pos/cafe/loyalty-stamp"
@layout PosLayout
@inherits PosBase

<div style="display:flex;align-items:center;justify-content:center;height:100%;padding:24px;">
    <div style="width:100%;max-width:480px;">
        @* EN: Customer lookup / VI: Tìm khách hàng *@
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:20px;margin-bottom:16px;">
            <div style="display:flex;gap:8px;">
                <input type="text" placeholder="SĐT khách hàng..." value="@_phone"
                       style="flex:1;padding:12px 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;outline:none;"
                       @onchange="@((ChangeEventArgs e) => _phone = e.Value?.ToString() ?? "")" />
                <button style="padding:12px 20px;border-radius:var(--pos-radius);border:none;background:var(--pos-orange-primary);color:#fff;font-size:14px;font-weight:600;cursor:pointer;">
                    Tìm
                </button>
            </div>
        </div>

        @* EN: Customer info / VI: Thông tin khách hàng *@
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:24px;margin-bottom:16px;text-align:center;">
            <div style="width:64px;height:64px;border-radius:50%;background:var(--pos-orange-primary);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:24px;font-weight:700;">
                @_customer.Name[..1]
            </div>
            <div style="font-size:18px;font-weight:600;margin-bottom:4px;">@_customer.Name</div>
            <div style="font-size:13px;color:var(--pos-text-tertiary);">@_customer.Phone</div>
            <div style="display:flex;justify-content:center;gap:24px;margin-top:16px;">
                <div style="text-align:center;">
                    <div style="font-size:22px;font-weight:700;color:var(--pos-orange-primary);">@_customer.Points</div>
                    <div style="font-size:11px;color:var(--pos-text-tertiary);">Điểm</div>
                </div>
                <div style="text-align:center;">
                    <div style="font-size:22px;font-weight:700;color:var(--pos-success);">@_customer.Visits</div>
                    <div style="font-size:11px;color:var(--pos-text-tertiary);">Lần ghé</div>
                </div>
                <div style="text-align:center;">
                    <div style="font-size:22px;font-weight:700;">@_customer.Rank</div>
                    <div style="font-size:11px;color:var(--pos-text-tertiary);">Hạng</div>
                </div>
            </div>
        </div>

        @* EN: Stamp grid / VI: Lưới tem *@
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:24px;margin-bottom:16px;">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
                <span style="font-size:15px;font-weight:600;">Thẻ tích tem</span>
                <span style="font-size:12px;color:var(--pos-text-tertiary);">@_customer.Stamps / @_totalStamps</span>
            </div>
            <div style="display:grid;grid-template-columns:repeat(5, 1fr);gap:10px;">
                @for (int i = 1; i <= _totalStamps; i++)
                {
                    var idx = i;
                    var isStamped = idx <= _customer.Stamps;
                    var isReward = idx == _totalStamps;
                    <div style="aspect-ratio:1;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;
                                background:@(isStamped ? "var(--pos-orange-primary)" : "var(--pos-bg-interactive)");
                                border:@(isReward && !isStamped ? "2px dashed var(--pos-orange-primary)" : "none");
                                color:@(isStamped ? "#fff" : "var(--pos-text-tertiary)");">
                        @if (isReward)
                        {
                            <span>🎁</span>
                        }
                        else if (isStamped)
                        {
                            <span>☕</span>
                        }
                        else
                        {
                            <span style="font-size:14px;">@idx</span>
                        }
                    </div>
                }
            </div>

            @* EN: Progress bar / VI: Thanh tiến trình *@
            <div style="margin-top:16px;">
                <div style="height:6px;border-radius:3px;background:var(--pos-bg-interactive);">
                    <div style="height:100%;border-radius:3px;background:var(--pos-orange-primary);width:@(_customer.Stamps * 100 / _totalStamps)%;transition:width 0.3s;"></div>
                </div>
                <div style="font-size:12px;color:var(--pos-text-tertiary);margin-top:8px;text-align:center;">
                    Còn @(_totalStamps - _customer.Stamps) tem nữa để nhận 1 ly miễn phí!
                </div>
            </div>
        </div>

        @* EN: Add stamp button / VI: Nút thêm tem *@
        <button class="pos-btn-checkout" @onclick="AddStamp">
            <i data-lucide="stamp" style="width:18px;height:18px;"></i>
            Tích tem (+1)
        </button>
    </div>
</div>

@code {
    private string _phone = "0901234567";
    private int _totalStamps = 10;

    // EN: Demo customer / VI: Khách hàng mẫu
    private CustomerInfo _customer = new("Nguyễn Minh Anh", "0901234567", 245, 28, "Vàng", 7);

    private void AddStamp()
    {
        if (_customer.Stamps < _totalStamps)
        {
            _customer.Stamps++;
            _customer.Points += 10;
        }
        else
        {
            _customer.Stamps = 0; // EN: Reset after reward / VI: Reset sau khi nhận thưởng
        }
    }

    private class CustomerInfo(string name, string phone, int points, int visits, string rank, int stamps)
    {
        public string Name { get; set; } = name;
        public string Phone { get; set; } = phone;
        public int Points { get; set; } = points;
        public int Visits { get; set; } = visits;
        public string Rank { get; set; } = rank;
        public int Stamps { get; set; } = stamps;
    }
}
