@page "/admin/stores/create"
@layout AdminLayout
@inherits AdminBase

@*
    EN: Create new store — wizard-like form with business info, location, vertical type.
    VI: Tạo cửa hàng mới — form dạng wizard với thông tin kinh doanh, vị trí, loại hình.
    Design: pencil-design/src/pages/tPOS/admin/store-create.pen
*@

<PageTitle>Tạo 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"))">
            <i data-lucide="arrow-left"></i>
        </button>
        <div>
            <h1 class="admin-topbar__title">Tạo cửa hàng mới</h1>
            <p class="admin-topbar__subtitle">Thiết lập thông tin cơ bản để bắt đầu</p>
        </div>
    </div>
    <div class="admin-topbar__right">
        <span style="font-size:13px;color:var(--admin-text-tertiary);">Bước @_step / 3</span>
    </div>
</div>

@* ═══ CONTENT ═══ *@
<div class="admin-content" style="display:flex;flex-direction:column;gap:24px;max-width:720px;margin:0 auto;width:100%;">

    @* ── Step Indicator ── *@
    <div style="display:flex;gap:8px;align-items:center;">
        @for (int i = 1; i <= 3; i++)
        {
            var step = i;
            <div style="flex:1;height:4px;border-radius:4px;background-color:@(step <= _step ? "var(--admin-orange-primary)" : "var(--admin-bg-interactive)");transition:background 0.3s;"></div>
        }
    </div>

    @* ── Step 1: Business Info ── *@
    @if (_step == 1)
    {
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="building-2" style="color:var(--admin-orange-primary);"></i>
                    Thông tin kinh doanh
                </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">Tên cửa hàng <span style="color:var(--admin-danger);">*</span></label>
                    <input class="admin-form-input" type="text" placeholder="VD: Coffee House Q1" @bind="_storeName" />
                </div>

                <div class="admin-form-group">
                    <label class="admin-form-label">Loại hình kinh doanh <span style="color:var(--admin-danger);">*</span></label>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                        @foreach (var type in _storeTypes)
                        {
                            var t = type;
                            <button class="admin-type-card @(_selectedType == t.Key ? "admin-type-card--active" : "")" @onclick="@(() => _selectedType = t.Key)">
                                <i data-lucide="@t.Icon" style="width:24px;height:24px;color:@(t.Color);"></i>
                                <span style="font-weight:600;font-size:14px;">@t.Label</span>
                                <span style="font-size:12px;color:var(--admin-text-tertiary);">@t.Desc</span>
                            </button>
                        }
                    </div>
                </div>

                <div class="admin-form-group">
                    <label class="admin-form-label">Mô tả</label>
                    <textarea class="admin-form-input" rows="3" placeholder="Mô tả ngắn về cửa hàng..." @bind="_description"></textarea>
                </div>
            </div>
        </div>
    }

    @* ── Step 2: Location ── *@
    @if (_step == 2)
    {
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="map-pin" style="color:var(--admin-orange-primary);"></i>
                    Thông tin địa chỉ
                </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">Địa chỉ <span style="color:var(--admin-danger);">*</span></label>
                    <input class="admin-form-input" type="text" placeholder="Số nhà, đường" @bind="_address" />
                </div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                    <div class="admin-form-group">
                        <label class="admin-form-label">Quận/Huyện</label>
                        <input class="admin-form-input" type="text" placeholder="VD: Quận 1" @bind="_district" />
                    </div>
                    <div class="admin-form-group">
                        <label class="admin-form-label">Tỉnh/Thành phố</label>
                        <input class="admin-form-input" type="text" placeholder="VD: TP.HCM" @bind="_city" />
                    </div>
                </div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
                    <div class="admin-form-group">
                        <label class="admin-form-label">Số điện thoại</label>
                        <input class="admin-form-input" type="tel" placeholder="0901 234 567" @bind="_phone" />
                    </div>
                    <div class="admin-form-group">
                        <label class="admin-form-label">Email</label>
                        <input class="admin-form-input" type="email" placeholder="store@example.com" @bind="_email" />
                    </div>
                </div>
            </div>
        </div>
    }

    @* ── Step 3: Hours & Confirmation ── *@
    @if (_step == 3)
    {
        <div class="admin-panel">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="clock" style="color:var(--admin-orange-primary);"></i>
                    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" @bind="_openTime" />
                    </div>
                    <div class="admin-form-group">
                        <label class="admin-form-label">Giờ đóng cửa</label>
                        <input class="admin-form-input" type="time" @bind="_closeTime" />
                    </div>
                </div>
                <div class="admin-form-group">
                    <label class="admin-form-label">Ngày hoạt động</label>
                    <div style="display:flex;gap:8px;">
                        @foreach (var day in new[] { "T2", "T3", "T4", "T5", "T6", "T7", "CN" })
                        {
                            var d = day;
                            <button class="admin-day-chip @(_activeDays.Contains(d) ? "admin-day-chip--active" : "")"
                                    @onclick="@(() => ToggleDay(d))">@d</button>
                        }
                    </div>
                </div>
            </div>
        </div>

        @* Summary Card *@
        <div class="admin-panel" style="border:1px solid var(--admin-orange-primary);border-radius:16px;">
            <div class="admin-panel__header">
                <h3 class="admin-panel__title">
                    <i data-lucide="check-circle" style="color:#22C55E;"></i>
                    Tóm tắt
                </h3>
            </div>
            <div class="admin-panel__body" style="display:flex;flex-direction:column;gap:10px;">
                <div style="display:flex;justify-content:space-between;">
                    <span style="color:var(--admin-text-tertiary);">Tên cửa hàng</span>
                    <span style="font-weight:600;">@(string.IsNullOrEmpty(_storeName) ? "—" : _storeName)</span>
                </div>
                <div style="display:flex;justify-content:space-between;">
                    <span style="color:var(--admin-text-tertiary);">Loại hình</span>
                    <span style="font-weight:600;">@(_selectedType ?? "—")</span>
                </div>
                <div style="display:flex;justify-content:space-between;">
                    <span style="color:var(--admin-text-tertiary);">Địa chỉ</span>
                    <span style="font-weight:600;">@(string.IsNullOrEmpty(_address) ? "—" : $"{_address}, {_district}")</span>
                </div>
            </div>
        </div>
    }

    @* ── Navigation Buttons ── *@
    <div style="display:flex;justify-content:space-between;padding-top:8px;">
        @if (_step > 1)
        {
            <button class="admin-btn-secondary" @onclick="PrevStep">
                <i data-lucide="arrow-left"></i>
                <span>Quay lại</span>
            </button>
        }
        else
        {
            <div></div>
        }

        @if (_step < 3)
        {
            <button class="admin-btn-primary" @onclick="NextStep">
                <span>Tiếp theo</span>
                <i data-lucide="arrow-right"></i>
            </button>
        }
        else
        {
            <button class="admin-btn-primary" @onclick="CreateStore">
                <i data-lucide="check"></i>
                <span>Tạo cửa hàng</span>
            </button>
        }
    </div>
</div>

@code {
    private int _step = 1;
    private string _storeName = "";
    private string _description = "";
    private string? _selectedType;
    private string _address = "";
    private string _district = "";
    private string _city = "";
    private string _phone = "";
    private string _email = "";
    private TimeOnly _openTime = new TimeOnly(7, 0);
    private TimeOnly _closeTime = new TimeOnly(22, 0);
    private HashSet<string> _activeDays = new() { "T2", "T3", "T4", "T5", "T6", "T7" };

    private record StoreType(string Key, string Label, string Icon, string Color, string Desc);
    private readonly StoreType[] _storeTypes = new[]
    {
        new StoreType("cafe", "Café", "coffee", "#FF5C00", "Quán cà phê, trà sữa"),
        new StoreType("restaurant", "Nhà hàng", "utensils", "#3B82F6", "Nhà hàng, quán ăn"),
        new StoreType("karaoke", "Karaoke", "mic", "#8B5CF6", "Karaoke, entertainment"),
        new StoreType("spa", "Spa", "sparkles", "#EC4899", "Spa, beauty services"),
    };

    private void NextStep() { if (_step < 3) _step++; }
    private void PrevStep() { if (_step > 1) _step--; }
    private void ToggleDay(string day)
    {
        if (!_activeDays.Remove(day)) _activeDays.Add(day);
    }
    private void CreateStore() => NavigateTo("stores");
}
