@page "/admin/inventory/transfer"
@layout AdminLayout
@inherits AdminBase

@*
    EN: Stock Transfer — transfer between stores, transfer history, pending transfers.
    VI: Chuyển kho — chuyển hàng giữa cửa hàng, lịch sử, đang chờ.
    Design: pencil-design/src/pages/tPOS/admin/stock-transfer.pen
*@

<PageTitle>Chuyển kho — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Chuyển kho</h1>
        <p class="admin-topbar__subtitle">Chuyển hàng giữa các cửa hàng</p>
    </div>
    <div class="admin-topbar__right">
        <button class="admin-btn-primary">
            <i data-lucide="arrow-right-left"></i>
            <span>Tạo phiếu chuyển</span>
        </button>
    </div>
</div>

@* ═══ CONTENT ═══ *@
<div class="admin-content" style="display:flex;gap:24px;">

    @* ── LEFT: Transfer Form ── *@
    <div class="admin-panel" style="width:380px;">
        <div class="admin-panel__header">
            <h3 class="admin-panel__title">
                <i data-lucide="send" style="color:var(--admin-orange-primary);"></i>
                Tạo phiếu chuyển kho
            </h3>
        </div>
        <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:16px;">
            <div class="admin-form-group">
                <label class="admin-form-label">Kho gửi</label>
                <select class="admin-form-input">
                    <option>Coffee House Q1</option>
                    <option>Nhà hàng Q3</option>
                    <option>Karaoke Star Q7</option>
                </select>
            </div>
            <div class="admin-form-group">
                <label class="admin-form-label">Kho nhận</label>
                <select class="admin-form-input">
                    <option>Nhà hàng Q3</option>
                    <option>Coffee House Q1</option>
                    <option>Karaoke Star Q7</option>
                </select>
            </div>
            <div class="admin-form-group">
                <label class="admin-form-label">Sản phẩm</label>
                <select class="admin-form-input">
                    <option>Chọn sản phẩm...</option>
                    <option>Cà phê Arabica</option>
                    <option>Sữa tươi</option>
                    <option>Ly giấy 12oz</option>
                </select>
            </div>
            <div class="admin-form-group">
                <label class="admin-form-label">Số lượng</label>
                <input type="number" class="admin-form-input" placeholder="Nhập số lượng" />
            </div>
            <div class="admin-form-group">
                <label class="admin-form-label">Ghi chú</label>
                <textarea class="admin-form-input" rows="2" placeholder="Ghi chú (tuỳ chọn)"></textarea>
            </div>
            <button class="admin-btn-primary" style="width:100%;justify-content:center;">
                <i data-lucide="check"></i>
                <span>Xác nhận chuyển kho</span>
            </button>
        </div>
    </div>

    @* ── RIGHT: Transfer History ── *@
    <div style="flex:1;display:flex;flex-direction:column;gap:20px;">

        @* Pending Transfers *@
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="clock" style="color:#F59E0B;"></i>
                    Đang chờ xử lý
                    <span class="admin-badge-count admin-badge-count--danger">2</span>
                </h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:10px;">
                @foreach (var t in _pendingTransfers)
                {
                    <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background-color:var(--admin-bg-interactive);border-radius:var(--admin-radius-md);">
                        <div style="display:flex;align-items:center;gap:10px;">
                            <i data-lucide="arrow-right-left" style="width:16px;height:16px;color:#F59E0B;"></i>
                            <div>
                                <div style="font-size:13px;font-weight:600;">@t.Item — @t.Qty @t.Unit</div>
                                <div style="font-size:11px;color:var(--admin-text-tertiary);">@t.From → @t.To</div>
                            </div>
                        </div>
                        <div class="admin-status-badge admin-status-badge--setup" style="font-size:10px;padding:2px 8px;">
                            <span class="admin-status-badge__dot"></span>
                            Chờ xác nhận
                        </div>
                    </div>
                }
            </div>
        </div>

        @* Transfer History Table *@
        <div class="admin-panel" style="flex:1;">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="history" style="color:#3B82F6;"></i>
                    Lịch sử chuyển kho
                </h3>
            </div>
            <div class="admin-panel__body" style="padding:0;">
                <table class="admin-table">
                    <thead>
                        <tr>
                            <th>Mã phiếu</th>
                            <th>Sản phẩm</th>
                            <th>SL</th>
                            <th>Từ</th>
                            <th>Đến</th>
                            <th>Ngày</th>
                            <th>Trạng thái</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var h in _transferHistory)
                        {
                            <tr>
                                <td style="font-weight:600;">@h.Code</td>
                                <td>@h.Item</td>
                                <td>@h.Qty @h.Unit</td>
                                <td style="color:var(--admin-text-tertiary);">@h.From</td>
                                <td style="color:var(--admin-text-tertiary);">@h.To</td>
                                <td style="color:var(--admin-text-tertiary);">@h.Date</td>
                                <td>
                                    <div class="admin-status-badge admin-status-badge--online" style="font-size:10px;padding:2px 8px;">
                                        <span class="admin-status-badge__dot"></span>
                                        Hoàn thành
                                    </div>
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@code {
    private record PendingTransfer(string Item, string Qty, string Unit, string From, string To);
    private readonly PendingTransfer[] _pendingTransfers = new[]
    {
        new PendingTransfer("Cà phê Arabica", "10", "kg", "Coffee House Q1", "Nhà hàng Q3"),
        new PendingTransfer("Ly giấy 12oz", "2", "thùng", "Nhà hàng Q3", "Coffee House Q1"),
    };

    private record TransferHistory(string Code, string Item, string Qty, string Unit, string From, string To, string Date);
    private readonly TransferHistory[] _transferHistory = new[]
    {
        new TransferHistory("CK-0028", "Sữa tươi", "5", "thùng", "Nhà hàng Q3", "Coffee House Q1", "10/02"),
        new TransferHistory("CK-0027", "Trà Oolong", "3", "kg", "Coffee House Q1", "Nhà hàng Q3", "08/02"),
        new TransferHistory("CK-0026", "Đường", "10", "kg", "Nhà hàng Q3", "Coffee House Q1", "06/02"),
        new TransferHistory("CK-0025", "Ly giấy 12oz", "4", "thùng", "Coffee House Q1", "Karaoke Q7", "04/02"),
        new TransferHistory("CK-0024", "Cà phê Robusta", "8", "kg", "Nhà hàng Q3", "Coffee House Q1", "02/02"),
    };
}
