@page "/admin/system/integrations"
@layout AdminLayout
@inherits AdminBase

<PageTitle>Tích hợp — aPOS Admin</PageTitle>

<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Tích hợp bên thứ 3</h1>
        <p class="admin-topbar__subtitle">Kết nối với các dịch vụ bên ngoài</p>
    </div>
</div>

<div class="admin-content" style="display:flex;flex-direction:column;gap:20px;">
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;">
        @foreach (var intg in _integrations)
        {
            <div class="admin-panel" style="cursor:pointer;">
                <div class="admin-panel__body" style="display:flex;align-items:center;gap:16px;">
                    <div style="width:48px;height:48px;border-radius:12px;background:@intg.bg;display:flex;align-items:center;justify-content:center;">
                        <i data-lucide="@intg.icon" style="color:@intg.color;width:24px;height:24px;"></i>
                    </div>
                    <div style="flex:1;">
                        <div style="font-weight:600;font-size:14px;">@intg.name</div>
                        <div style="font-size:12px;color:var(--admin-text-tertiary);margin-top:2px;">@intg.desc</div>
                    </div>
                    <span class="admin-status-badge @(intg.connected ? "admin-status-badge--online" : "admin-status-badge--offline")" style="font-size:11px;padding:2px 10px;"><span class="admin-status-badge__dot" style="width:5px;height:5px;"></span>@(intg.connected ? "Đã kết nối" : "Chưa kết nối")</span>
                </div>
            </div>
        }
    </div>
</div>

@code {
    private readonly (string name, string desc, string icon, string color, string bg, bool connected)[] _integrations = new[]
    {
        ("Thanh toán VNPay", "Cổng thanh toán trực tuyến", "credit-card", "#3B82F6", "rgba(59,130,246,0.1)", false),
        ("Thanh toán Momo", "Ví điện tử Momo", "wallet", "#A855F7", "rgba(168,85,247,0.1)", false),
        ("GrabFood", "Đối tác giao đồ ăn", "bike", "#22C55E", "rgba(34,197,94,0.1)", false),
        ("ShopeeFood", "Đối tác giao đồ ăn", "shopping-cart", "#EF4444", "rgba(239,68,68,0.1)", false),
        ("Máy in hóa đơn", "Kết nối máy in POS", "printer", "#F59E0B", "rgba(245,158,11,0.1)", false),
        ("Kế toán MISA", "Đồng bộ dữ liệu kế toán", "file-spreadsheet", "#FF5C00", "rgba(255,92,0,0.1)", false),
    };
}
