hrynco-notification-service/HrynCo.NotificationService.Web/Views/AdminPushChannels/Edit.cshtml

@using HrynCo.NotificationService.Web.Controllers.Admin.ViewModels
@model PushChannelEditViewModel
@{
    Layout = "~/Views/Shared/_EditorLayout.cshtml";
    ViewData["Title"] = Model.PageTitle;
    ViewData["EditorTitle"] = Model.PageTitle;
}

<style>
    @@media (min-width: 768px) {
        #pushChannelForm .push-service-field { flex: 0 0 auto; width: calc(280px + var(--bs-gutter-x)); }
        #pushChannelForm .push-project-field { flex: 0 0 auto; width: calc(280px + var(--bs-gutter-x)); }
        #pushChannelForm .push-credentials-field { flex: 0 0 auto; width: calc(440px + var(--bs-gutter-x)); }
    }
</style>

<form id="pushChannelForm" asp-action="Save" asp-controller="AdminPushChannels" method="post">
    @Html.AntiForgeryToken()
    <input asp-for="Id" type="hidden" />
    @if (!ViewData.ModelState.IsValid)
    {
        <div asp-validation-summary="All" class="alert alert-danger"></div>
    }
    <div class="row g-3 mb-4">
        <div class="col-12 push-service-field">
            <label asp-for="ServiceId" class="form-label fw-semibold">Service</label>
            <select asp-for="ServiceId" asp-items="Model.Services" class="form-select">
                <option value="">Select a service</option>
            </select>
            <span asp-validation-for="ServiceId" class="text-danger small"></span>
        </div>
        <div class="col-12 push-project-field">
            <label asp-for="FirebaseProjectId" class="form-label fw-semibold">Firebase Project ID</label>
            <input asp-for="FirebaseProjectId" class="form-control" maxlength="30" />
            <span asp-validation-for="FirebaseProjectId" class="text-danger small"></span>
        </div>
        <div class="col-12 col-md-auto d-flex align-items-end">
            <div class="form-check mb-2">
                <input asp-for="IsActive" class="form-check-input" />
                <label asp-for="IsActive" class="form-check-label fw-semibold">Active</label>
            </div>
        </div>
    </div>
    <div class="row g-3 mb-4">
        <div class="col-12 push-credentials-field">
            <label asp-for="CredentialsJson" class="form-label fw-semibold">Firebase service account JSON</label>
            <textarea asp-for="CredentialsJson" class="form-control font-monospace" rows="7" maxlength="32768" autocomplete="off" spellcheck="false" aria-describedby="credentialsHelp"></textarea>
            <div id="credentialsHelp" class="form-text">
                @if (Model.IsNew)
                {
                    <span>Required. Use the service account JSON for this Firebase project.</span>
                }
                else
                {
                    <span>Credentials are saved. Leave blank to keep them, or paste a replacement. Changing the project requires new credentials.</span>
                }
            </div>
            <span asp-validation-for="CredentialsJson" class="text-danger small"></span>
            <div class="mt-3">
                <button type="button" class="btn btn-outline-success" id="pushAuthorizationBtn">Check Firebase authorization</button>
            </div>
            <div id="pushAuthorizationResult" class="alert d-none mt-3" role="status" aria-live="polite"></div>
        </div>
    </div>
</form>

<div class="modal fade" id="pushTestModal" tabindex="-1" aria-labelledby="pushTestTitle">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="pushTestTitle">Send Test Push</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted small">Tests the current form settings without saving. Blank credentials use the saved credentials only when the Firebase project is unchanged.</p>
                <label for="pushTestVersion" class="form-label fw-semibold">Test format</label>
                <select id="pushTestVersion" class="form-select mb-2" aria-describedby="pushTestFormatHelp">
                    <option value="1">Legacy — simple notification</option>
                    <option value="2">Version 2 — notification with a button</option>
                </select>
                <p id="pushTestFormatHelp" class="text-muted small">Legacy sends the existing neutral notification. Version 2 tests the action payload and requires a client that supports buttons. Firebase acceptance alone does not confirm display or navigation. Use your own test device only.</p>
                <label for="pushRecipientToken" class="form-label fw-semibold">Recipient token</label>
                <textarea id="pushRecipientToken" class="form-control font-monospace" rows="3" maxlength="4096" autocomplete="off" spellcheck="false"></textarea>
                <div class="form-text">Not saved as channel configuration. Cleared after the test or when this dialog closes.</div>
                <fieldset id="pushButtonTestFields" class="mt-3" hidden>
                    <legend class="fs-6">Button test</legend>
                    <label for="pushTestBindingId" class="form-label">Current device binding ID</label>
                    <input id="pushTestBindingId" class="form-control mb-2" autocomplete="off" spellcheck="false" />
                    <div class="form-text mb-2">Use the actual binding of the recipient installation. An invented or outdated binding will be rejected by the app.</div>
                    <label for="pushTestActionKey" class="form-label">Section action key</label>
                    <input id="pushTestActionKey" class="form-control mb-2" maxlength="100" placeholder="Action supported by your app" spellcheck="false" />
                    <label for="pushTestButtonLabel" class="form-label">Button label</label>
                    <input id="pushTestButtonLabel" class="form-control" maxlength="100" value="Перейти в розділ" />
                    <div class="form-text">The button and notification tap use the same action. No object ID is needed for a section.</div>
                </fieldset>
                <div id="pushSendResult" class="alert d-none mt-3" role="status" aria-live="polite"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" id="pushSendBtn">Send test push</button>
            </div>
        </div>
    </div>
</div>

@section FormActions {
    <button type="submit" form="pushChannelForm" class="btn btn-primary"><i class="bi bi-floppy me-1"></i> Save</button>
    <button type="button" class="btn btn-success" id="pushTestModalBtn"><i class="bi bi-send me-1"></i> Send test push…</button>
    <a href="/admin/push-channels" class="btn btn-secondary">Cancel</a>
}

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const form = document.getElementById('pushChannelForm');
        const modal = document.getElementById('pushTestModal');
        const token = document.getElementById('pushRecipientToken');
        const authorizationButton = document.getElementById('pushAuthorizationBtn');
        const sendButton = document.getElementById('pushSendBtn');
        const modalButton = document.getElementById('pushTestModalBtn');
        const version = document.getElementById('pushTestVersion');
        const binding = document.getElementById('pushTestBindingId');
        let busy = false;

        function showResult(target, success, message) {
            target.className = 'alert mt-3 ' + (success ? 'alert-success' : 'alert-danger');
            target.textContent = message;
        }

        function currentSettings(send) {
            const id = form.querySelector('[name="Id"]').value;
            return {
                channelId: id === '00000000-0000-0000-0000-000000000000' ? null : id,
                firebaseProjectId: form.querySelector('[name="FirebaseProjectId"]').value,
                credentialsJson: form.querySelector('[name="CredentialsJson"]').value,
                recipientToken: send ? token.value.trim() : null,
                version: Number(version.value),
                bindingId: send && version.value === '2' ? binding.value.trim() || null : null,
                actionKey: document.getElementById('pushTestActionKey').value,
                buttonLabel: document.getElementById('pushTestButtonLabel').value
            };
        }

        async function runTest(send) {
            if (busy) return;
            const result = document.getElementById(send ? 'pushSendResult' : 'pushAuthorizationResult');
            const payload = currentSettings(send);
            if (send && !payload.recipientToken) {
                showResult(result, false, 'Enter a recipient FCM token.');
                return;
            }
            busy = true;
            authorizationButton.disabled = sendButton.disabled = modalButton.disabled = true;
            showResult(result, true, send ? 'Sending test message…' : 'Checking OAuth authorization…');
            try {
                const response = await fetch('/admin/push-channels/' + (send ? 'test-send' : 'test-authorization'), {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'RequestVerificationToken': form.querySelector('[name="__RequestVerificationToken"]').value
                    },
                    body: JSON.stringify(payload)
                });
                if (!response.ok) throw new Error('Request failed.');
                const data = await response.json();
                showResult(result, data.success, data.message);
            } catch {
                showResult(result, false, 'The test request failed. Check connectivity and try again. Acceptance was not confirmed.');
            } finally {
                busy = false;
                authorizationButton.disabled = sendButton.disabled = modalButton.disabled = false;
                if (send) token.value = '';
            }
        }

        authorizationButton.addEventListener('click', () => runTest(false));
        sendButton.addEventListener('click', () => runTest(true));
        version.addEventListener('change', () => {
            document.getElementById('pushButtonTestFields').hidden = version.value !== '2';
            document.getElementById('pushSendResult').className = 'alert d-none';
        });
        modalButton.addEventListener('click', () => {
            document.getElementById('pushSendResult').className = 'alert d-none';
            bootstrap.Modal.getOrCreateInstance(modal).show();
        });
        modal.addEventListener('hidden.bs.modal', () => { token.value = ''; binding.value = ''; });
    });
</script>