@model LittleShop.DTOs.BotDto

@{
    ViewData["Title"] = $"Edit Bot - {Model.Name}";
    var settingsJson = ViewData["BotSettings"] as string ?? "{}";
}

<h1>Edit Bot Settings</h1>

<hr />

@if (TempData["Error"] != null)
{
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        @TempData["Error"]
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
}

<form asp-action="Edit" method="post">
    <div class="row">
        <div class="col-md-8">
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="mb-0">Bot Information</h5>
                </div>
                <div class="card-body">
                    <dl class="row">
                        <dt class="col-sm-3">Name</dt>
                        <dd class="col-sm-9">@Model.Name</dd>

                        <dt class="col-sm-3">Type</dt>
                        <dd class="col-sm-9">@Model.Type</dd>

                        <dt class="col-sm-3">Bot ID</dt>
                        <dd class="col-sm-9"><code>@Model.Id</code></dd>
                    </dl>
                    
                    <div class="mb-3">
                        <label for="status" class="form-label">Status</label>
                        <select name="status" id="status" class="form-select">
                            <option value="1" selected="@(Model.Status == LittleShop.Enums.BotStatus.Active)">Active</option>
                            <option value="2" selected="@(Model.Status == LittleShop.Enums.BotStatus.Inactive)">Inactive</option>
                            <option value="3" selected="@(Model.Status == LittleShop.Enums.BotStatus.Suspended)">Suspended</option>
                            <option value="4" selected="@(Model.Status == LittleShop.Enums.BotStatus.Maintenance)">Maintenance</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Bot Configuration (JSON)</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="settingsJson" class="form-label">Settings</label>
                        <textarea name="settingsJson" id="settingsJson" class="form-control font-monospace" rows="20">@settingsJson</textarea>
                        <small class="text-muted">Edit the JSON configuration for this bot. Be careful to maintain valid JSON format.</small>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="mb-0">Configuration Template</h5>
                </div>
                <div class="card-body">
                    <p class="small">Example configuration structure:</p>
                    <pre class="bg-light p-2 small"><code>{
  "Telegram": {
    "BotToken": "YOUR_BOT_TOKEN",
    "WebhookUrl": "",
    "AdminChatId": ""
  },
  "Privacy": {
    "Mode": "strict",
    "RequirePGP": false,
    "EnableTor": false
  },
  "Features": {
    "EnableQRCodes": true,
    "EnableVoiceSearch": false
  },
  "Cryptocurrencies": [
    "BTC", "XMR", "USDT"
  ]
}</code></pre>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Actions</h5>
                </div>
                <div class="card-body">
                    <button type="submit" class="btn btn-primary w-100 mb-2">
                        <i class="bi bi-save"></i> Save Changes
                    </button>
                    <a asp-action="Details" asp-route-id="@Model.Id" class="btn btn-secondary w-100">
                        Cancel
                    </a>
                </div>
            </div>
        </div>
    </div>
</form>

@section Scripts {
    <script>
        // Pretty print JSON on load
        document.addEventListener('DOMContentLoaded', function() {
            var textarea = document.getElementById('settingsJson');
            try {
                var json = JSON.parse(textarea.value);
                textarea.value = JSON.stringify(json, null, 2);
            } catch (e) {
                console.error('Invalid JSON:', e);
            }
        });

        // Validate JSON before submit
        document.querySelector('form').addEventListener('submit', function(e) {
            var textarea = document.getElementById('settingsJson');
            try {
                JSON.parse(textarea.value);
            } catch (error) {
                e.preventDefault();
                alert('Invalid JSON format: ' + error.message);
            }
        });
    </script>
}