@page "/admin/stores/{Id}/settings"
@layout AdminLayout
@inherits AdminBase

@*
    EN: Store settings — tabs for general, payment, receipts, integrations.
    VI: Cài đặt cửa hàng — tabs cho chung, thanh toán, hóa đơn, tích hợp.
    Design: pencil-design/src/pages/tPOS/admin/store-settings.pen
*@

<PageTitle>Cài đặt cửa hàng — GoodGo Admin</PageTitle>

@* ═══ TOP BAR ═══ *@
<div class="admin-topbar">
    <div class="admin-topbar__left">
        <button class="admin-icon-btn" style="margin-right:8px;" @onclick="@(() => NavigateTo($"stores/{Id}"))">
            <i data-lucide="arrow-left"></i>
        </button>
        <div>
            <h1 class="admin-topbar__title">Cài đặt cửa hàng</h1>
            <p class="admin-topbar__subtitle">Coffee House Q1 — Quản lý cài đặt</p>
        </div>
    </div>
    <div class="admin-topbar__right">
        <button class="admin-btn-primary" @onclick="SaveSettings">
            <i data-lucide="check"></i>
            <span>Lưu thay đổi</span>
        </button>
    </div>
</div>

@* ═══ TABS ═══ *@
<div class="admin-tabs">
    <button class="admin-tab @(_tab == "general" ? "admin-tab--active" : "")" @onclick="@(() => _tab = "general")">
        <i data-lucide="settings" style="width:16px;height:16px;"></i>
        Chung
    </button>
    <button class="admin-tab @(_tab == "payment" ? "admin-tab--active" : "")" @onclick="@(() => _tab = "payment")">
        <i data-lucide="credit-card" style="width:16px;height:16px;"></i>
        Thanh toán
    </button>
    <button class="admin-tab @(_tab == "receipt" ? "admin-tab--active" : "")" @onclick="@(() => _tab = "receipt")">
        <i data-lucide="receipt" style="width:16px;height:16px;"></i>
        Hóa đơn
    </button>
    <button class="admin-tab @(_tab == "integrations" ? "admin-tab--active" : "")" @onclick="@(() => _tab = "integrations")">
        <i data-lucide="plug" style="width:16px;height:16px;"></i>
        Tích hợp
    </button>
</div>

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

    @if (_tab == "general")
    {
        @* General Settings *@
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">Thông tin cửa hàng</h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:20px;">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                    <div class="admin-form-group">
                        <label class="admin-form-label">Tên cửa hàng</label>
                        <input class="admin-form-input" type="text" value="Coffee House Q1" />
                    </div>
                    <div class="admin-form-group">
                        <label class="admin-form-label">Loại hình</label>
                        <select class="admin-form-input">
                            <option selected>Café</option>
                            <option>Nhà hàng</option>
                            <option>Karaoke</option>
                            <option>Spa</option>
                        </select>
                    </div>
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Địa chỉ</label>
                    <input class="admin-form-input" type="text" value="123 Nguyễn Huệ, Q1, TP.HCM" />
                </div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                    <div class="admin-form-group">
                        <label class="admin-form-label">Điện thoại</label>
                        <input class="admin-form-input" type="tel" value="0901 234 567" />
                    </div>
                    <div class="admin-form-group">
                        <label class="admin-form-label">Email</label>
                        <input class="admin-form-input" type="email" value="coffeehouse.q1@goodgo.vn" />
                    </div>
                </div>
            </div>
        </div>

        @* Operating Hours *@
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">Giờ hoạt động</h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:16px;">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                    <div class="admin-form-group">
                        <label class="admin-form-label">Giờ mở cửa</label>
                        <input class="admin-form-input" type="time" value="07:00" />
                    </div>
                    <div class="admin-form-group">
                        <label class="admin-form-label">Giờ đóng cửa</label>
                        <input class="admin-form-input" type="time" value="22:00" />
                    </div>
                </div>
            </div>
        </div>

        @* Danger Zone *@
        <div class="admin-panel" style="border:1px solid rgba(239,68,68,0.3);">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title" style="color:#EF4444;">
                    <i data-lucide="alert-triangle" style="color:#EF4444;"></i>
                    Vùng nguy hiểm
                </h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:16px;">
                <div style="display:flex;justify-content:space-between;align-items:center;">
                    <div>
                        <div style="font-weight:600;">Tạm dừng cửa hàng</div>
                        <div style="font-size:12px;color:var(--admin-text-tertiary);">Cửa hàng sẽ ngừng hoạt động tạm thời</div>
                    </div>
                    <button class="admin-btn-secondary" style="color:#F59E0B;border-color:rgba(245,158,11,0.3);">
                        <i data-lucide="pause"></i>
                        Tạm dừng
                    </button>
                </div>
                <div style="height:1px;background:var(--admin-border-subtle);"></div>
                <div style="display:flex;justify-content:space-between;align-items:center;">
                    <div>
                        <div style="font-weight:600;color:#EF4444;">Xóa cửa hàng</div>
                        <div style="font-size:12px;color:var(--admin-text-tertiary);">Không thể hoàn tác, tất cả dữ liệu sẽ bị xóa</div>
                    </div>
                    <button class="admin-btn-secondary" style="color:#EF4444;border-color:rgba(239,68,68,0.3);">
                        <i data-lucide="trash-2"></i>
                        Xóa
                    </button>
                </div>
            </div>
        </div>
    }

    @if (_tab == "payment")
    {
        @* Payment Methods *@
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">Phương thức thanh toán</h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:12px;">
                @foreach (var pm in _paymentMethods)
                {
                    <div style="display:flex;justify-content:space-between;align-items:center;padding:12px;background:var(--admin-bg-interactive);border-radius:12px;">
                        <div style="display:flex;align-items:center;gap:12px;">
                            <i data-lucide="@pm.Icon" style="color:@pm.Color;"></i>
                            <div>
                                <div style="font-weight:600;font-size:14px;">@pm.Name</div>
                                <div style="font-size:12px;color:var(--admin-text-tertiary);">@pm.Desc</div>
                            </div>
                        </div>
                        <MudSwitch T="bool" Value="pm.Enabled" Color="Color.Primary" />
                    </div>
                }
            </div>
        </div>
    }

    @if (_tab == "receipt")
    {
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">Mẫu hóa đơn</h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:20px;">
                <div class="admin-form-group">
                    <label class="admin-form-label">Header hóa đơn</label>
                    <input class="admin-form-input" type="text" value="Coffee House Q1" />
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Footer</label>
                    <textarea class="admin-form-input" rows="2">Cảm ơn quý khách! Hẹn gặp lại!</textarea>
                </div>
                <div style="display:flex;gap:16px;">
                    <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                        <MudCheckBox T="bool" Value="true" Color="Color.Primary" />
                        <span style="font-size:13px;">Hiện logo</span>
                    </label>
                    <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                        <MudCheckBox T="bool" Value="true" Color="Color.Primary" />
                        <span style="font-size:13px;">Hiện QR code</span>
                    </label>
                </div>
            </div>
        </div>
    }

    @if (_tab == "integrations")
    {
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">Tích hợp bên thứ ba</h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:12px;">
                <div style="display:flex;justify-content:space-between;align-items:center;padding:14px;background:var(--admin-bg-interactive);border-radius:12px;">
                    <div style="display:flex;align-items:center;gap:12px;">
                        <i data-lucide="truck" style="color:#22C55E;"></i>
                        <div>
                            <div style="font-weight:600;">GrabFood</div>
                            <div style="font-size:12px;color:var(--admin-text-tertiary);">Đồng bộ đơn hàng delivery</div>
                        </div>
                    </div>
                    <span style="font-size:12px;color:#22C55E;font-weight:600;">Đã kết nối</span>
                </div>
                <div style="display:flex;justify-content:space-between;align-items:center;padding:14px;background:var(--admin-bg-interactive);border-radius:12px;">
                    <div style="display:flex;align-items:center;gap:12px;">
                        <i data-lucide="truck" style="color:var(--admin-text-tertiary);"></i>
                        <div>
                            <div style="font-weight:600;">ShopeeFood</div>
                            <div style="font-size:12px;color:var(--admin-text-tertiary);">Đồng bộ đơn hàng delivery</div>
                        </div>
                    </div>
                    <button class="admin-btn-secondary" style="font-size:12px;padding:4px 12px;">Kết nối</button>
                </div>
                <div style="display:flex;justify-content:space-between;align-items:center;padding:14px;background:var(--admin-bg-interactive);border-radius:12px;">
                    <div style="display:flex;align-items:center;gap:12px;">
                        <i data-lucide="file-text" style="color:var(--admin-text-tertiary);"></i>
                        <div>
                            <div style="font-weight:600;">Kế toán (Misa)</div>
                            <div style="font-size:12px;color:var(--admin-text-tertiary);">Xuất hóa đơn điện tử</div>
                        </div>
                    </div>
                    <button class="admin-btn-secondary" style="font-size:12px;padding:4px 12px;">Kết nối</button>
                </div>
            </div>
        </div>
    }
</div>

@code {
    [Parameter] public string Id { get; set; } = "1";
    private string _tab = "general";

    private record PaymentMethod(string Name, string Icon, string Color, string Desc, bool Enabled);
    private readonly PaymentMethod[] _paymentMethods = new[]
    {
        new PaymentMethod("Tiền mặt", "banknote", "#22C55E", "Thanh toán trực tiếp", true),
        new PaymentMethod("Thẻ ngân hàng", "credit-card", "#3B82F6", "Visa, Mastercard, JCB", true),
        new PaymentMethod("QR Code", "qr-code", "#8B5CF6", "VNPay, MoMo, ZaloPay", true),
        new PaymentMethod("Chuyển khoản", "send", "#F59E0B", "Chuyển khoản ngân hàng", false),
        new PaymentMethod("Thẻ quà tặng", "gift", "#EC4899", "Gift card & voucher", false),
    };

    private void SaveSettings() { /* Save logic */ }
}
