@*
    EN: Reservation Management — Date picker, time slots, guest info, table assignment, status.
    VI: Quản lý đặt bàn — Chọn ngày, khung giờ, thông tin khách, gán bàn, trạng thái.
*@
@page "/pos/restaurant/reservation"
@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;">Đặt bàn trước</span>
        <span style="flex:1;"></span>
        <button class="pos-category-tab pos-category-tab--active" @onclick="() => _showForm = true">
            <i data-lucide="plus" style="width:14px;"></i> Đặt bàn mới
        </button>
    </div>

    @* ═══ DATE & FILTERS / NGÀY & BỘ LỌC ═══ *@
    <div style="padding:10px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--pos-border-subtle);">
        <div style="display:flex;align-items:center;gap:8px;">
            <i data-lucide="calendar" style="width:16px;color:var(--pos-text-tertiary);"></i>
            <input type="date" @bind="_selectedDate"
                   style="background:var(--pos-bg-interactive);border:1px solid var(--pos-border-default);border-radius:8px;
                          padding:6px 10px;color:var(--pos-text-primary);font-family:var(--pos-font);font-size:13px;" />
        </div>
        <div class="pos-category-tabs" style="padding:0;flex:1;">
            @foreach (var s in _statusFilters)
            {
                <button class="pos-category-tab @(s == _activeFilter ? "pos-category-tab--active" : "")"
                        style="font-size:12px;padding:6px 12px;" @onclick="() => _activeFilter = s">@s</button>
            }
        </div>
    </div>

    @* ═══ RESERVATION LIST / DANH SÁCH ĐẶT BÀN ═══ *@
    <div style="flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:8px;">
        @foreach (var r in FilteredReservations)
        {
            <div style="background:var(--pos-bg-elevated);border-radius:var(--pos-radius);padding:14px 16px;
                        display:flex;align-items:center;gap:14px;border-left:4px solid @StatusColor(r.Status);">
                @* EN: Time / VI: Giờ *@
                <div style="text-align:center;min-width:50px;">
                    <div style="font-size:16px;font-weight:700;">@r.Time</div>
                </div>
                @* EN: Guest info / VI: Thông tin khách *@
                <div style="flex:1;">
                    <div style="font-size:14px;font-weight:600;">@r.GuestName</div>
                    <div style="font-size:12px;color:var(--pos-text-tertiary);margin-top:2px;">
                        @r.PartySize người · @r.Phone
                    </div>
                    @if (!string.IsNullOrEmpty(r.Note))
                    {
                        <div style="font-size:11px;color:var(--pos-warning);margin-top:2px;font-style:italic;">@r.Note</div>
                    }
                </div>
                @* EN: Table assignment / VI: Bàn đã gán *@
                <div style="text-align:center;padding:6px 12px;border-radius:8px;background:var(--pos-bg-interactive);font-size:13px;font-weight:600;">
                    @r.Table
                </div>
                @* EN: Status badge / VI: Badge trạng thái *@
                <span style="font-size:11px;padding:4px 10px;border-radius:6px;font-weight:600;
                            background:@StatusBg(r.Status);color:@StatusColor(r.Status);">
                    @StatusLabel(r.Status)
                </span>
            </div>
        }
    </div>

    @* ═══ SUMMARY / TÓM TẮT ═══ *@
    <div style="padding:10px 16px;border-top:1px solid var(--pos-border-subtle);display:flex;gap:20px;font-size:12px;color:var(--pos-text-secondary);">
        <span>Tổng: <b>@_reservations.Count</b> đặt bàn</span>
        <span style="color:var(--pos-info);">Chờ xác nhận: @_reservations.Count(r => r.Status == "pending")</span>
        <span style="color:var(--pos-success);">Đã xác nhận: @_reservations.Count(r => r.Status == "confirmed")</span>
        <span style="color:var(--pos-orange-primary);">Đã đến: @_reservations.Count(r => r.Status == "seated")</span>
    </div>
</div>

@code {
    private DateTime _selectedDate = DateTime.Today;
    private string _activeFilter = "Tất cả";
    private bool _showForm = false;
    private readonly string[] _statusFilters = { "Tất cả", "Chờ xác nhận", "Đã xác nhận", "Đã đến", "Hủy" };

    // EN: Demo reservations / VI: Dữ liệu đặt bàn mẫu
    private readonly List<ReservationInfo> _reservations = new()
    {
        new("11:30", "Trần Văn B", 4, "0912345678", "Bàn 4", "confirmed", "Kỵ hải sản"),
        new("12:00", "Lê Thị C", 2, "0923456789", "Bàn 2", "pending", ""),
        new("17:30", "Nguyễn Hữu D", 8, "0934567890", "Bàn 9", "confirmed", "Sinh nhật, cần bánh kem"),
        new("18:00", "Phạm Minh E", 6, "0945678901", "Bàn 6", "seated", ""),
        new("18:30", "Hoàng Thị F", 4, "0956789012", "Bàn 3", "pending", "Cần ghế trẻ em"),
        new("19:00", "Vũ Đức G", 10, "0967890123", "Bàn 5", "confirmed", "Tiệc công ty"),
        new("19:30", "Đỗ Thị H", 2, "0978901234", "Bàn 1", "cancelled", ""),
        new("20:00", "Bùi Văn I", 4, "0989012345", "Bàn 11", "pending", "Ngồi VIP"),
    };

    private IEnumerable<ReservationInfo> FilteredReservations => _activeFilter switch
    {
        "Chờ xác nhận" => _reservations.Where(r => r.Status == "pending"),
        "Đã xác nhận" => _reservations.Where(r => r.Status == "confirmed"),
        "Đã đến" => _reservations.Where(r => r.Status == "seated"),
        "Hủy" => _reservations.Where(r => r.Status == "cancelled"),
        _ => _reservations
    };

    private static string StatusColor(string s) => s switch
    {
        "pending" => "var(--pos-info)", "confirmed" => "var(--pos-success)",
        "seated" => "var(--pos-orange-primary)", "cancelled" => "var(--pos-danger)", _ => "var(--pos-text-tertiary)"
    };

    private static string StatusBg(string s) => s switch
    {
        "pending" => "rgba(59,130,246,.15)", "confirmed" => "rgba(34,197,94,.15)",
        "seated" => "rgba(255,92,0,.15)", "cancelled" => "rgba(239,68,68,.15)", _ => "var(--pos-bg-interactive)"
    };

    private static string StatusLabel(string s) => s switch
    {
        "pending" => "Chờ XN", "confirmed" => "Đã XN", "seated" => "Đã đến", "cancelled" => "Đã hủy", _ => s
    };

    private record ReservationInfo(string Time, string GuestName, int PartySize, string Phone, string Table, string Status, string Note);
}
