@page
@model ListmonkIntegration.Pages.Campaigns.SendModel
@{
    ViewData["Title"] = "Отправка письма";
}

<h1>Отправка письма</h1>
<hr />

@if (!string.IsNullOrEmpty(Model.ErrorMessage))
{
    <div class="alert alert-danger">@Model.ErrorMessage</div>
}

@if (!string.IsNullOrEmpty(Model.SuccessMessage))
{
    <div class="alert alert-success">@Model.SuccessMessage</div>
}

<div class="row">
    <div class="col-md-8">
        <form method="post">
            <div class="mb-3">
                <label class="form-label">Название кампании</label>
                <input type="text" asp-for="CampaignName" class="form-control" required placeholder="Например: Рассылка 08.07.2026" />
            </div>

            <div class="mb-3">
                <label class="form-label">Выберите шаблон письма</label>
                <select asp-for="SelectedTemplateId" class="form-select" asp-items="Model.Templates" id="templateSelect" required>
                    <option value="">-- Выберите шаблон --</option>
                </select>
            </div>

            <div class="mb-3">
                <label class="form-label">Список получателей</label>
                <select asp-for="SelectedListId" class="form-select" asp-items="Model.Lists" required>
                    <option value="">-- Выберите список --</option>
                </select>
                <div class="form-text">
                    <span id="selectedListInfo"></span>
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label">Предпросмотр шаблона</label>
                <div id="templatePreview" class="border p-3 bg-light" style="min-height: 200px;">
                    <p class="text-muted">Выберите шаблон для предпросмотра</p>
                </div>
            </div>

            <div class="mb-3">
                <button type="submit" class="btn btn-primary btn-lg">Отправить</button>
                <a asp-page="/Campaigns/Index" class="btn btn-secondary">Отмена</a>
            </div>
        </form>
    </div>
</div>

@section Scripts {
    <script>
        document.getElementById('templateSelect').addEventListener('change', async function() {
            const templateId = this.value;
            const previewDiv = document.getElementById('templatePreview');

            if (templateId) {
                previewDiv.innerHTML = '<p class="text-muted">Загрузка...</p>';
                try {
                    const response = await fetch(`/api/templates/${templateId}/preview`);
                    if (response.ok) {
                        const data = await response.json();
                        previewDiv.innerHTML = data.body || '<p class="text-muted">Шаблон пуст</p>';
                    } else {
                        previewDiv.innerHTML = '<p class="text-danger">Ошибка загрузки шаблона</p>';
                    }
                } catch (error) {
                    console.error('Error:', error);
                    previewDiv.innerHTML = '<p class="text-danger">Ошибка загрузки шаблона</p>';
                }
            } else {
                previewDiv.innerHTML = '<p class="text-muted">Выберите шаблон для предпросмотра</p>';
            }
        });

        document.querySelector('select[asp-for="SelectedListId"]').addEventListener('change', function() {
            const select = this;
            const infoSpan = document.getElementById('selectedListInfo');
            const selectedOption = select.options[select.selectedIndex];
            if (selectedOption.value) {
                infoSpan.textContent = `Выбран список: ${selectedOption.text}`;
            } else {
                infoSpan.textContent = '';
            }
        });
    </script>
}