@*
    EN: End-of-Day Report — Covers, revenue, avg check, tip total, by-section breakdown.
    VI: Báo cáo cuối ngày — Lượt khách, doanh thu, hóa đơn TB, tổng tip, phân tích theo khu vực.
*@
@page "/pos/restaurant/eod-report"
@layout PosLayout
@inherits PosBase

<div style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
    @* ═══ HEADER / TIÊU ĐỀ ═══ *@
    <div style="padding:12px 16px;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> Quay lại
        </button>
        <span style="font-size:16px;font-weight:700;">Báo cáo cuối ngày</span>
        <span style="flex:1;"></span>
        <span style="font-size:13px;color:var(--pos-text-tertiary);">@DateTime.Today.ToString("dd/MM/yyyy")</span>
        <button class="pos-category-tab"><i data-lucide="printer" style="width:14px;"></i> In báo cáo</button>
    </div>

    <div style="flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:16px;">
        @* ═══ SUMMARY CARDS / THẺ TỔNG QUAN ═══ *@
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;">
            @foreach (var card in _summaryCards)
            {
                <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:16px;
                            display:flex;flex-direction:column;gap:6px;">
                    <div style="display:flex;align-items:center;gap:8px;">
                        <i data-lucide="@card.Icon" style="width:16px;color:@card.Color;"></i>
                        <span style="font-size:12px;color:var(--pos-text-tertiary);">@card.Label</span>
                    </div>
                    <span style="font-size:22px;font-weight:700;color:@card.Color;">@card.Value</span>
                    <span style="font-size:11px;color:var(--pos-text-tertiary);">@card.Comparison</span>
                </div>
            }
        </div>

        @* ═══ SECTION BREAKDOWN / PHÂN TÍCH THEO KHU VỰC ═══ *@
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:16px;">
            <div style="font-size:14px;font-weight:700;margin-bottom:12px;">Doanh thu theo khu vực</div>
            <div style="display:flex;flex-direction:column;gap:10px;">
                @foreach (var s in _sectionData)
                {
                    <div>
                        <div style="display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px;">
                            <span style="font-weight:500;">@s.Name</span>
                            <span style="font-weight:600;">@FormatPrice(s.Revenue) (@s.Covers lượt khách)</span>
                        </div>
                        @* EN: Progress bar / VI: Thanh tiến trình *@
                        <div style="height:8px;border-radius:4px;background:var(--pos-bg-interactive);overflow:hidden;">
                            <div style="height:100%;width:@(s.Percent)%;border-radius:4px;background:@s.Color;transition:width .3s ease;"></div>
                        </div>
                    </div>
                }
            </div>
        </div>

        @* ═══ HOURLY BREAKDOWN / PHÂN TÍCH THEO GIỜ ═══ *@
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:16px;">
            <div style="font-size:14px;font-weight:700;margin-bottom:12px;">Doanh thu theo giờ</div>
            <div style="display:flex;align-items:flex-end;gap:6px;height:120px;">
                @foreach (var h in _hourlyData)
                {
                    <div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;">
                        <div style="width:100%;border-radius:4px 4px 0 0;background:var(--pos-orange-primary);
                                    height:@(h.Percent)%;min-height:4px;transition:height .3s ease;"></div>
                        <span style="font-size:10px;color:var(--pos-text-tertiary);">@h.Hour</span>
                    </div>
                }
            </div>
        </div>

        @* ═══ PAYMENT METHODS / PHƯƠNG THỨC THANH TOÁN ═══ *@
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:16px;">
            <div style="font-size:14px;font-weight:700;margin-bottom:12px;">Phương thức thanh toán</div>
            <div style="display:flex;flex-direction:column;gap:8px;">
                @foreach (var p in _paymentData)
                {
                    <div style="display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--pos-border-subtle);">
                        <i data-lucide="@p.Icon" style="width:16px;color:var(--pos-text-tertiary);"></i>
                        <span style="flex:1;font-size:13px;">@p.Method</span>
                        <span style="font-size:13px;font-weight:600;">@p.Count đơn</span>
                        <span style="font-size:14px;font-weight:700;color:var(--pos-orange-primary);min-width:100px;text-align:right;">
                            @FormatPrice(p.Amount)
                        </span>
                    </div>
                }
            </div>
        </div>
    </div>
</div>

@code {
    // EN: Summary cards / VI: Thẻ tổng quan
    private readonly List<SummaryCard> _summaryCards = new()
    {
        new("Doanh thu", "12,450,000₫", "trending-up", "var(--pos-orange-primary)", "+18% so với hôm qua"),
        new("Lượt khách", "142", "users", "var(--pos-info)", "+12 so với hôm qua"),
        new("Hóa đơn TB", "350,000₫", "receipt", "var(--pos-success)", "+5% so với hôm qua"),
        new("Tổng Tip", "1,240,000₫", "heart", "var(--pos-warning)", "TB 35,000₫/đơn"),
        new("Bàn phục vụ", "38", "layout-grid", "var(--pos-text-primary)", "12 bàn/ca"),
        new("Thời gian TB", "52 phút", "clock", "var(--pos-text-secondary)", "Nhanh hơn 5 phút"),
    };

    // EN: Section breakdown / VI: Phân tích khu vực
    private readonly List<SectionReport> _sectionData = new()
    {
        new("Trong nhà", 6_200_000, 68, 100, "var(--pos-orange-primary)"),
        new("VIP", 3_800_000, 32, 61, "var(--pos-warning)"),
        new("Ngoài trời", 2_450_000, 42, 39, "var(--pos-success)"),
    };

    // EN: Hourly data / VI: Dữ liệu theo giờ
    private readonly List<HourData> _hourlyData = new()
    {
        new("10h", 15), new("11h", 45), new("12h", 95), new("13h", 80),
        new("14h", 30), new("15h", 20), new("16h", 25), new("17h", 55),
        new("18h", 100), new("19h", 90), new("20h", 70), new("21h", 40),
    };

    // EN: Payment methods / VI: Phương thức thanh toán
    private readonly List<PaymentReport> _paymentData = new()
    {
        new("Tiền mặt", "banknote", 18, 5_600_000),
        new("Thẻ ngân hàng", "credit-card", 12, 4_200_000),
        new("Chuyển khoản", "smartphone", 6, 1_850_000),
        new("Ví điện tử", "wallet", 2, 800_000),
    };

    private record SummaryCard(string Label, string Value, string Icon, string Color, string Comparison);
    private record SectionReport(string Name, decimal Revenue, int Covers, int Percent, string Color);
    private record HourData(string Hour, int Percent);
    private record PaymentReport(string Method, string Icon, int Count, decimal Amount);
}
