littleshop/LittleShop/Areas/Admin/Views/Bots/Wizard.cshtml

@model LittleShop.DTOs.BotWizardDto

@{
    ViewData["Title"] = "Telegram Bot Creation Wizard";
    var showCommands = ViewData["ShowCommands"] as bool? ?? false;
    var commands = ViewData["BotFatherCommands"] as string ?? "";
}

<h1>Telegram Bot Creation Wizard</h1>

<div class="row">
    <div class="col-md-8">
        @if (!showCommands)
        {
            <!-- Step 1: Basic Info -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Step 1: Bot Information</h5>
                </div>
                <div class="card-body">
                    <form asp-area="Admin" asp-controller="Bots" asp-action="Wizard" method="post">
                        @Html.AntiForgeryToken()
                        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                        
                        <div class="mb-3">
                            <label for="BotName" class="form-label">Bot Display Name</label>
                            <input name="BotName" id="BotName" value="@Model?.BotName" class="form-control @(ViewData.ModelState["BotName"]?.Errors.Count > 0 ? "is-invalid" : "")"
                                   placeholder="e.g., LittleShop Electronics Bot" required />
                            @if(ViewData.ModelState["BotName"]?.Errors.Count > 0)
                            {
                                <div class="invalid-feedback">
                                    @ViewData.ModelState["BotName"]?.Errors.FirstOrDefault()?.ErrorMessage
                                </div>
                            }
                            <small class="text-muted">This is the name users will see</small>
                        </div>
                        
                        <div class="mb-3">
                            <label for="BotUsername" class="form-label">Bot Username</label>
                            <div class="input-group">
                                <span class="input-group-text">@@</span>
                                <input name="BotUsername" id="BotUsername" value="@Model?.BotUsername" class="form-control @(ViewData.ModelState["BotUsername"]?.Errors.Count > 0 ? "is-invalid" : "")"
                                       placeholder="littleshop_bot" required />
                            </div>
                            @if(ViewData.ModelState["BotUsername"]?.Errors.Count > 0)
                            {
                                <div class="invalid-feedback">
                                    @ViewData.ModelState["BotUsername"]?.Errors.FirstOrDefault()?.ErrorMessage
                                </div>
                            }
                            <small class="text-muted">Must end with 'bot' and be unique on Telegram</small>
                        </div>
                        
                        <div class="mb-3">
                            <label for="PersonalityName" class="form-label">Personality</label>
                            <select name="PersonalityName" id="PersonalityName" class="form-select @(ViewData.ModelState["PersonalityName"]?.Errors.Count > 0 ? "is-invalid" : "")">
                                <option value="">Auto-assign (recommended)</option>
                                <option value="Alan" @(Model?.PersonalityName == "Alan" ? "selected" : "")>Alan (Professional)</option>
                                <option value="Dave" @(Model?.PersonalityName == "Dave" ? "selected" : "")>Dave (Casual)</option>
                                <option value="Sarah" @(Model?.PersonalityName == "Sarah" ? "selected" : "")>Sarah (Helpful)</option>
                                <option value="Mike" @(Model.PersonalityName == "Mike" ? "selected" : "")>Mike (Direct)</option>
                                <option value="Emma" @(Model.PersonalityName == "Emma" ? "selected" : "")>Emma (Friendly)</option>
                                <option value="Tom" @(Model.PersonalityName == "Tom" ? "selected" : "")>Tom (Efficient)</option>
                            </select>
                            <small class="text-muted">Bot conversation style (can be changed later)</small>
                        </div>
                        
                        <div class="mb-3">
                            <label for="Description" class="form-label">Description (Optional)</label>
                            <textarea asp-for="Description" class="form-control" rows="2" 
                                      placeholder="Brief description of what this bot does"></textarea>
                        </div>
                        
                        <input type="submit" value="Generate BotFather Commands" class="btn btn-primary" />
                        <a href="/Admin/Bots" class="btn btn-secondary">Cancel</a>
                    </form>
                </div>
            </div>
        }
        else
        {
            <!-- Step 2: BotFather Commands & Token -->
            <div class="card mb-3">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">Step 2: Create Bot with BotFather</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <strong>Follow these steps in Telegram:</strong>
                    </div>
                    
                    <div class="bg-light p-3 rounded">
                        <pre class="mb-0">@commands</pre>
                    </div>
                    
                    <div class="mt-3">
                        <button class="btn btn-sm btn-outline-secondary" onclick="copyCommands()">
                            <i class="fas fa-copy"></i> Copy Instructions
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Step 3: Complete Bot Setup</h5>
                </div>
                <div class="card-body">
                    <form action="/Admin/Bots/CompleteWizard" method="post">
                        @Html.AntiForgeryToken()
                        
                        <!-- Hidden fields to preserve data -->
                        <input type="hidden" name="BotName" value="@Model.BotName" />
                        <input type="hidden" name="BotUsername" value="@Model.BotUsername" />
                        <input type="hidden" name="Description" value="@Model.Description" />
                        <input type="hidden" name="PersonalityName" value="@Model.PersonalityName" />
                        
                        <div class="mb-3">
                            <label for="BotToken" class="form-label">Bot Token from BotFather</label>
                            <input name="BotToken" id="BotToken" class="form-control font-monospace" 
                                   value="@Model.BotToken" placeholder="123456789:ABCdefGHIjklMNOpqrsTUVwxyz" required />
                            <span asp-validation-for="BotToken" class="text-danger"></span>
                            <small class="text-muted">Paste the token you received from @@BotFather</small>
                        </div>
                        
                        <div class="d-grid gap-2 d-md-flex">
                            <button type="submit" class="btn btn-success me-md-2">
                                <i class="fas fa-check"></i> Create Bot & Validate Token
                            </button>
                            <button type="button" class="btn btn-secondary" onclick="history.back()">
                                <i class="fas fa-arrow-left"></i> Back to Edit Info
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        }
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Wizard Progress</h5>
            </div>
            <div class="card-body">
                <ul class="list-unstyled">
                    <li class="@(!showCommands ? "text-primary fw-bold" : "text-success")">
                        <i class="fas fa-@(!showCommands ? "edit" : "check")"></i> 
                        1. Bot Information
                    </li>
                    <li class="@(showCommands && string.IsNullOrEmpty(Model.BotToken) ? "text-primary fw-bold" : showCommands ? "text-success" : "text-muted")">
                        <i class="fas fa-@(showCommands && string.IsNullOrEmpty(Model.BotToken) ? "robot" : showCommands ? "check" : "circle")"></i> 
                        2. Create with BotFather
                    </li>
                    <li class="@(!string.IsNullOrEmpty(Model.BotToken) ? "text-primary fw-bold" : "text-muted")">
                        <i class="fas fa-@(!string.IsNullOrEmpty(Model.BotToken) ? "key" : "circle")"></i> 
                        3. Complete Setup
                    </li>
                </ul>
            </div>
        </div>
        
        @if (showCommands)
        {
            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="mb-0">Quick Tips</h5>
                </div>
                <div class="card-body">
                    <ul class="small">
                        <li>BotFather responds instantly</li>
                        <li>Username must end with 'bot'</li>
                        <li>Keep your token secure</li>
                        <li>Token starts with numbers followed by colon</li>
                    </ul>
                </div>
            </div>
        }
        else
        {
            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="mb-0">Personality Preview</h5>
                </div>
                <div class="card-body">
                    <p class="small">
                        @if (!string.IsNullOrEmpty(Model.PersonalityName))
                        {
                            <strong>@Model.PersonalityName</strong><text> personality selected</text>
                        }
                        else
                        {
                            <text>Auto-assigned personality based on bot name</text>
                        }
                    </p>
                    
                    <p class="small text-muted">
                        Personalities affect how your bot communicates with customers.
                        This can be customized later in bot settings.
                    </p>
                </div>
            </div>
        }
    </div>
</div>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
    <script>
        // Test if JavaScript is working
        console.log('Wizard page scripts loaded');
        
        function copyCommands() {
            const commands = `@Html.Raw(commands)`;
            navigator.clipboard.writeText(commands).then(() => {
                alert('Commands copied to clipboard!');
            });
        }
        
        // Auto-generate username from bot name
        $(document).ready(function() {
            console.log('Document ready, setting up auto-generation');
            
            $('#BotName').on('input', function() {
                try {
                    const name = $(this).val().toLowerCase()
                        .replace(/[^a-z0-9]/g, '_')
                        .replace(/_+/g, '_')
                        .replace(/^_|_$/g, '');
                    
                    if (name && !name.endsWith('_bot')) {
                        $('#BotUsername').val(name + '_bot');
                    }
                } catch (err) {
                    console.error('Error in auto-generation:', err);
                }
            });
        });
    </script>
}