@*
    EN: Daily Report — End-of-day summary: revenue, orders, popular items, payment breakdown.
    VI: Báo cáo ngày — Tổng kết cuối ngày: doanh thu, đơn hàng, món phổ biến, phân tích thanh toán.
*@
@page "/pos/cafe/daily-report"
@layout PosLayout
@inherits PosBase

<div style="padding:24px;overflow-y:auto;height:100%;">
    @* EN: Header / VI: Tiêu đề *@
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;">
        <div>
            <h2 style="font-size:22px;font-weight:700;margin:0;">Báo cáo ngày</h2>
            <span style="font-size:13px;color:var(--pos-text-tertiary);">@DateTime.Now.ToString("dd/MM/yyyy") — Ca sáng</span>
        </div>
        <button style="padding:10px 20px;border-radius:var(--pos-radius);border:1px solid var(--pos-border-default);background:transparent;color:var(--pos-text-primary);font-size:13px;cursor:pointer;">
            <i data-lucide="download" style="width:14px;height:14px;vertical-align:middle;margin-right:4px;"></i>
            Xuất PDF
        </button>
    </div>

    @* EN: Summary cards / VI: Thẻ tổng quan *@
    <div style="display:grid;grid-template-columns:repeat(4, 1fr);gap:16px;margin-bottom:24px;">
        @foreach (var stat in _stats)
        {
            <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:20px;">
                <div style="font-size:12px;color:var(--pos-text-tertiary);margin-bottom:8px;">@stat.Label</div>
                <div style="font-size:24px;font-weight:700;color:@stat.Color;">@stat.Value</div>
                <div style="font-size:11px;color:var(--pos-text-tertiary);margin-top:4px;">@stat.Sub</div>
            </div>
        }
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
        @* EN: Popular items / VI: Món phổ biến *@
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:20px;">
            <h3 style="font-size:15px;font-weight:600;margin:0 0 16px;">Món bán chạy</h3>
            @foreach (var item in _popularItems)
            {
                <div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--pos-border-subtle);">
                    <div>
                        <div style="font-size:14px;font-weight:500;">@item.Name</div>
                        <div style="font-size:12px;color:var(--pos-text-tertiary);">@item.Qty đã bán</div>
                    </div>
                    <span style="font-size:14px;font-weight:600;color:var(--pos-orange-primary);">@FormatPrice(item.Revenue)</span>
                </div>
            }
        </div>

        @* EN: Payment breakdown / VI: Phân tích thanh toán *@
        <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:20px;">
            <h3 style="font-size:15px;font-weight:600;margin:0 0 16px;">Hình thức thanh toán</h3>
            @foreach (var payment in _payments)
            {
                <div style="margin-bottom:16px;">
                    <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
                        <span style="font-size:13px;">@payment.Method</span>
                        <span style="font-size:13px;font-weight:600;">@FormatPrice(payment.Amount)</span>
                    </div>
                    <div style="height:6px;border-radius:3px;background:var(--pos-bg-interactive);">
                        <div style="height:100%;border-radius:3px;background:@payment.Color;width:@(payment.Percent)%;"></div>
                    </div>
                </div>
            }

            @* EN: Hourly chart placeholder / VI: Biểu đồ theo giờ *@
            <h3 style="font-size:15px;font-weight:600;margin:24px 0 16px;">Doanh thu theo giờ</h3>
            <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%;background:var(--pos-orange-primary);border-radius:4px 4px 0 0;height:@(h.Pct)%;opacity:@(h.Pct > 0 ? 1 : 0.3);"></div>
                        <span style="font-size:9px;color:var(--pos-text-tertiary);">@h.Hour</span>
                    </div>
                }
            </div>
        </div>
    </div>
</div>

@code {
    // EN: Summary statistics / VI: Thống kê tổng quan
    private readonly List<StatCard> _stats = new()
    {
        new("Doanh thu", "8,450,000₫", "var(--pos-orange-primary)", "+12% so với hôm qua"),
        new("Đơn hàng", "156", "var(--pos-success)", "TB 54,167₫/đơn"),
        new("Khách hàng", "132", "var(--pos-info)", "18% khách quay lại"),
        new("Món bán ra", "347", "var(--pos-warning)", "2.2 món/đơn"),
    };

    // EN: Popular items / VI: Món phổ biến
    private readonly List<PopularItem> _popularItems = new()
    {
        new("Cà phê sữa đá", 52, 1_820_000),
        new("Bạc xỉu", 38, 1_482_000),
        new("Trà đào", 29, 1_305_000),
        new("Cappuccino", 24, 1_320_000),
        new("Sinh tố bơ", 18, 990_000),
    };

    // EN: Payment methods / VI: Hình thức thanh toán
    private readonly List<PaymentInfo> _payments = new()
    {
        new("Tiền mặt", 4_650_000, 55, "var(--pos-success)"),
        new("Chuyển khoản", 2_535_000, 30, "var(--pos-info)"),
        new("Thẻ", 845_000, 10, "var(--pos-warning)"),
        new("Ví điện tử", 420_000, 5, "var(--pos-orange-primary)"),
    };

    // EN: Hourly data / VI: Dữ liệu theo giờ
    private readonly List<HourData> _hourlyData = new()
    {
        new("7h", 30), new("8h", 65), new("9h", 85), new("10h", 55),
        new("11h", 90), new("12h", 100), new("13h", 70), new("14h", 45),
        new("15h", 60), new("16h", 75), new("17h", 50), new("18h", 20),
    };

    private record StatCard(string Label, string Value, string Color, string Sub);
    private record PopularItem(string Name, int Qty, decimal Revenue);
    private record PaymentInfo(string Method, decimal Amount, int Percent, string Color);
    private record HourData(string Hour, int Pct);
}
