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

@*
    EN: Integration hub — integration tiles (Payment, Delivery, Accounting, Social), connection status, configure button.
    VI: Trung tâm tích hợp — thẻ tích hợp (Thanh toán, Giao hàng, Kế toán, Mạng xã hội), trạng thái kết nối, nút cấu hình.
    Design: pencil-design/src/pages/tPOS/admin/integration-hub.pen
*@

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

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <h1 class="admin-topbar__title">Tích hợp</h1>
        <p class="admin-topbar__subtitle">Quản lý kết nối với dịch vụ bên ngoài</p>
    </div>
    <div class="admin-topbar__right">
        <div class="admin-search" style="width:200px;">
            <i data-lucide="search"></i>
            <input type="text" placeholder="Tìm tích hợp..." @bind="SearchQuery" />
        </div>
    </div>
</div>

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

    @foreach (var group in _integrationGroups)
    {
        <div style="display:flex;flex-direction:column;gap:12px;">
            <div style="font-size:12px;font-weight:700;color:var(--admin-text-tertiary);text-transform:uppercase;letter-spacing:0.05em;">
                @group.GroupName
            </div>
            <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;">
                @foreach (var item in group.Items)
                {
                    <div class="admin-staff-card">
                        <div class="admin-staff-card__header">
                            <div class="admin-kpi-card__icon" style="width:48px;height:48px;border-radius:12px;background-color:@(item.Color)20;">
                                <i data-lucide="@item.Icon" style="color:@item.Color;width:22px;height:22px;"></i>
                            </div>
                            <div class="admin-status-badge @(item.Connected ? "admin-status-badge--online" : "admin-status-badge--offline")">
                                <span class="admin-status-badge__dot"></span>
                                @(item.Connected ? "Đã kết nối" : "Chưa kết nối")
                            </div>
                        </div>
                        <div style="display:flex;flex-direction:column;gap:2px;">
                            <span style="font-size:16px;font-weight:600;">@item.Name</span>
                            <span style="font-size:12px;color:var(--admin-text-tertiary);">@item.Description</span>
                        </div>
                        <div style="display:flex;gap:8px;margin-top:4px;">
                            @if (item.Connected)
                            {
                                <button class="admin-btn-secondary" style="flex:1;justify-content:center;font-size:12px;padding:8px 12px;">
                                    <i data-lucide="settings" style="width:14px;height:14px;"></i>
                                    Cấu hình
                                </button>
                                <button class="admin-btn-secondary" style="font-size:12px;padding:8px 12px;color:var(--admin-danger);border-color:rgba(239,68,68,0.3);">
                                    <i data-lucide="unplug" style="width:14px;height:14px;"></i>
                                    Ngắt
                                </button>
                            }
                            else
                            {
                                <button class="admin-btn-primary" style="flex:1;justify-content:center;font-size:12px;padding:8px 12px;">
                                    <i data-lucide="plug" style="width:14px;height:14px;"></i>
                                    Kết nối
                                </button>
                            }
                        </div>
                    </div>
                }
            </div>
        </div>
    }
</div>

@code {
    private record IntegrationItem(string Name, string Description, string Icon, string Color, bool Connected);
    private record IntegrationGroup(string GroupName, IntegrationItem[] Items);

    private readonly IntegrationGroup[] _integrationGroups = new[]
    {
        new IntegrationGroup("THANH TOÁN", new[]
        {
            new IntegrationItem("VNPay", "Thanh toán QR & thẻ ngân hàng", "qr-code", "#3B82F6", true),
            new IntegrationItem("MoMo", "Ví điện tử MoMo", "wallet", "#EC4899", true),
            new IntegrationItem("ZaloPay", "Thanh toán qua ZaloPay", "smartphone", "#3B82F6", false),
            new IntegrationItem("Visa/Mastercard", "Thanh toán thẻ quốc tế", "credit-card", "#8B5CF6", true),
        }),
        new IntegrationGroup("GIAO HÀNG", new[]
        {
            new IntegrationItem("GrabFood", "Đối tác giao đồ ăn", "bike", "#22C55E", true),
            new IntegrationItem("ShopeeFood", "Nền tảng đặt đồ ăn", "shopping-bag", "#FF5C00", true),
            new IntegrationItem("Baemin", "Dịch vụ giao hàng", "truck", "#06B6D4", false),
        }),
        new IntegrationGroup("KẾ TOÁN & QUẢN LÝ", new[]
        {
            new IntegrationItem("MISA", "Phần mềm kế toán", "calculator", "#F59E0B", true),
            new IntegrationItem("Google Sheets", "Xuất báo cáo tự động", "file-spreadsheet", "#22C55E", false),
            new IntegrationItem("Hóa đơn điện tử", "Phát hành hóa đơn GTGT", "file-text", "#3B82F6", true),
        }),
        new IntegrationGroup("MẠNG XÃ HỘI", new[]
        {
            new IntegrationItem("Facebook", "Fanpage & quảng cáo", "facebook", "#3B82F6", true),
            new IntegrationItem("Zalo OA", "Chăm sóc khách hàng", "message-circle", "#3B82F6", false),
            new IntegrationItem("Google Business", "Hiển thị trên Google Maps", "map-pin", "#EF4444", true),
        }),
    };
}