@page "/superadmin/settings"
@layout SuperAdminLayout
@inherits SuperAdminBase
@using WebClientTpos.Client.Services

<PageTitle>Cài đặt nền tảng — aPOS Super Admin</PageTitle>

<div class="sa-topbar">
    <div class="sa-topbar__left">
        <h1 class="sa-topbar__title">Cài đặt nền tảng</h1>
        <p class="sa-topbar__subtitle">Cấu hình chung cho toàn bộ hệ thống aPOS</p>
    </div>
</div>

<div class="sa-content">
    @* General Settings *@
    <div class="sa-panel">
        <div class="sa-panel__header">
            <h3 class="sa-panel__title">Cài đặt chung</h3>
        </div>
        <div class="sa-panel__body" style="display:flex;flex-direction:column;gap:16px;">
            <div style="display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--sa-border-subtle);">
                <div>
                    <div style="font-size:14px;font-weight:600;color:var(--sa-text-primary);">Tên nền tảng</div>
                    <div style="font-size:12px;color:var(--sa-text-tertiary);">Tên hiển thị trên giao diện</div>
                </div>
                <div style="font-size:14px;font-weight:600;color:var(--sa-blue-light);">aPOS</div>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--sa-border-subtle);">
                <div>
                    <div style="font-size:14px;font-weight:600;color:var(--sa-text-primary);">Domain chính</div>
                    <div style="font-size:12px;color:var(--sa-text-tertiary);">Domain production của nền tảng</div>
                </div>
                <div style="font-size:14px;color:var(--sa-text-secondary);">goodgo.vn</div>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--sa-border-subtle);">
                <div>
                    <div style="font-size:14px;font-weight:600;color:var(--sa-text-primary);">Ngôn ngữ mặc định</div>
                    <div style="font-size:12px;color:var(--sa-text-tertiary);">Ngôn ngữ hiển thị mặc định cho merchant mới</div>
                </div>
                <div style="font-size:14px;color:var(--sa-text-secondary);">Tiếng Việt (vi-VN)</div>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:center;padding:12px 0;">
                <div>
                    <div style="font-size:14px;font-weight:600;color:var(--sa-text-primary);">Múi giờ</div>
                    <div style="font-size:12px;color:var(--sa-text-tertiary);">Múi giờ mặc định cho nền tảng</div>
                </div>
                <div style="font-size:14px;color:var(--sa-text-secondary);">UTC+7 (Asia/Ho_Chi_Minh)</div>
            </div>
        </div>
    </div>

    @* Infrastructure *@
    <div class="sa-panel">
        <div class="sa-panel__header">
            <h3 class="sa-panel__title">Hạ tầng</h3>
        </div>
        <div class="sa-panel__body" style="display:flex;flex-direction:column;gap:16px;">
            <div style="display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--sa-border-subtle);">
                <div>
                    <div style="font-size:14px;font-weight:600;color:var(--sa-text-primary);">Microservices</div>
                    <div style="font-size:12px;color:var(--sa-text-tertiary);">Tổng số dịch vụ đang chạy</div>
                </div>
                <div style="font-size:14px;font-weight:600;color:var(--sa-text-primary);">26+ services</div>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--sa-border-subtle);">
                <div>
                    <div style="font-size:14px;font-weight:600;color:var(--sa-text-primary);">Database</div>
                    <div style="font-size:12px;color:var(--sa-text-tertiary);">PostgreSQL instances</div>
                </div>
                <div style="font-size:14px;color:var(--sa-text-secondary);">PostgreSQL 16 (21 databases)</div>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--sa-border-subtle);">
                <div>
                    <div style="font-size:14px;font-weight:600;color:var(--sa-text-primary);">Cache</div>
                    <div style="font-size:12px;color:var(--sa-text-tertiary);">In-memory cache service</div>
                </div>
                <div style="font-size:14px;color:var(--sa-text-secondary);">Redis 7</div>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:center;padding:12px 0;">
                <div>
                    <div style="font-size:14px;font-weight:600;color:var(--sa-text-primary);">API Gateway</div>
                    <div style="font-size:12px;color:var(--sa-text-tertiary);">Reverse proxy & load balancer</div>
                </div>
                <div style="font-size:14px;color:var(--sa-text-secondary);">Traefik v3</div>
            </div>
        </div>
    </div>
</div>
