{% extends "admin/base_site.html" %}
{% load i18n %}

{% block extrastyle %}{{ block.super }}
<style>
    :root {
        --dr-danger-bg: #fef2f2;
        --dr-danger-border: #fca5a5;
        --dr-danger-fg: #991b1b;
        --dr-success-border: #86efac;
        --dr-btn-danger-bg: #dc2626;
        --dr-btn-danger-hover-bg: #b91c1c;
        --dr-focus-ring: rgba(59, 130, 246, 0.15);
        --dr-status-running-bg: #dbeafe;
        --dr-status-running-fg: #1d4ed8;
        --dr-status-completed-bg: #dcfce7;
        --dr-status-completed-fg: #166534;
        --dr-status-failed-bg: #fee2e2;
        --dr-status-failed-fg: #991b1b;
        --dr-status-canceled-bg: #fef3c7;
        --dr-status-canceled-fg: #92400e;
    }
    /* Dark values, declared twice the same way Django's own dark_mode.css does it: once for the OS
       preference (unless the admin theme toggle has forced light) and once for an explicit dark pick. */
    @media (prefers-color-scheme: dark) {
        html:not([data-theme="light"]) {
            --dr-danger-bg: #3b1414;
            --dr-danger-border: #7f1d1d;
            --dr-danger-fg: #fca5a5;
            --dr-success-border: #166534;
            --dr-focus-ring: rgba(129, 212, 250, 0.25);
            --dr-status-running-bg: #1e3a5f;
            --dr-status-running-fg: #93c5fd;
            --dr-status-completed-bg: #14532d;
            --dr-status-completed-fg: #86efac;
            --dr-status-failed-bg: #4c1d1d;
            --dr-status-failed-fg: #fca5a5;
            --dr-status-canceled-bg: #4a3209;
            --dr-status-canceled-fg: #fcd34d;
        }
    }
    html[data-theme="dark"] {
        --dr-danger-bg: #3b1414;
        --dr-danger-border: #7f1d1d;
        --dr-danger-fg: #fca5a5;
        --dr-success-border: #166534;
        --dr-focus-ring: rgba(129, 212, 250, 0.25);
        --dr-status-running-bg: #1e3a5f;
        --dr-status-running-fg: #93c5fd;
        --dr-status-completed-bg: #14532d;
        --dr-status-completed-fg: #86efac;
        --dr-status-failed-bg: #4c1d1d;
        --dr-status-failed-fg: #fca5a5;
        --dr-status-canceled-bg: #4a3209;
        --dr-status-canceled-fg: #fcd34d;
    }
    .warning-banner {
        background: var(--dr-danger-bg);
        border: 1px solid var(--dr-danger-border);
        border-radius: 6px;
        color: var(--dr-danger-fg);
        padding: 10px 14px;
        font-weight: 600;
        margin-bottom: 24px;
    }
    .danger-note {
        background: var(--dr-danger-bg);
        border: 1px solid var(--dr-danger-border);
        border-radius: 4px;
        color: var(--dr-danger-fg);
        padding: 8px 12px;
        font-size: 13px;
        margin-bottom: 12px;
    }
    .workflow-section {
        border: 1px solid var(--border-color);
        padding: 20px 24px;
        margin: 20px 0;
        border-radius: 8px;
        background: var(--body-bg);
        color: var(--body-fg);
    }
    .workflow-section h3 {
        margin-top: 0;
        margin-bottom: 4px;
        font-size: 16px;
    }
    .workflow-section > p {
        color: var(--body-quiet-color);
        font-size: 13px;
        margin-top: 0;
        margin-bottom: 16px;
    }
    .workflow-table {
        width: 100%;
        border-collapse: collapse;
    }
    .workflow-table th {
        padding: 8px 10px;
        text-align: left;
        border-bottom: 2px solid var(--border-color);
        background: var(--darkened-bg);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--body-quiet-color);
    }
    .workflow-table td {
        padding: 8px 10px;
        border-bottom: 1px solid var(--hairline-color);
    }
    .workflow-table tr:last-child td {
        border-bottom: none;
    }
    .workflow-id {
        font-family: monospace;
        font-size: 11px;
        color: var(--body-medium-color);
    }
    .status-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 600;
    }
    .status-running { background: var(--dr-status-running-bg); color: var(--dr-status-running-fg); }
    .status-completed { background: var(--dr-status-completed-bg); color: var(--dr-status-completed-fg); }
    .status-failed { background: var(--dr-status-failed-bg); color: var(--dr-status-failed-fg); }
    .status-canceled { background: var(--dr-status-canceled-bg); color: var(--dr-status-canceled-fg); }
    .form-row {
        margin: 14px 0;
    }
    .form-row label {
        display: block;
        font-weight: 600;
        margin-bottom: 4px;
        font-size: 13px;
    }
    .form-row input[type="text"],
    .form-row input[type="number"],
    .form-row textarea,
    .form-row select {
        width: 100%;
        max-width: 500px;
        padding: 8px 10px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        font-size: 14px;
        box-sizing: border-box;
        background: var(--body-bg);
        color: var(--body-fg);
    }
    .form-row input[type="file"] {
        font-size: 14px;
    }
    .form-row textarea {
        height: 100px;
        font-family: monospace;
        resize: vertical;
    }
    /* Deliberately keeps the native dropdown caret. A custom `appearance: none` + data-URI caret
       renders no caret at all under the admin CSP, which sets `default-src 'self'` with no `img-src`
       (posthog/middleware.py) and so blocks `data:` background images. The native control also
       follows the `color-scheme` that Django's dark_mode.css sets, so it themes itself. */
    .form-row select {
        max-width: 200px;
        height: 38px;
        line-height: 1.4;
        cursor: pointer;
    }
    .form-row input:focus,
    .form-row textarea:focus,
    .form-row select:focus {
        outline: none;
        border-color: var(--link-fg);
        box-shadow: 0 0 0 2px var(--dr-focus-ring);
    }
    .checkbox-row {
        margin: 14px 0;
    }
    .checkbox-row label {
        font-weight: normal;
        font-size: 14px;
        cursor: pointer;
    }
    .help-text {
        color: var(--body-quiet-color);
        font-size: 12px;
        margin-top: 4px;
    }
    .filter-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        max-width: 500px;
    }
    .filter-grid .form-row {
        margin: 0;
    }
    .submit-row {
        margin-top: 20px;
    }
    /* Selector has to outrank Django's own `.submit-row input` rule in base.css, otherwise these
       destructive buttons render in the default admin blue. */
    .submit-row input.btn-danger,
    .btn-danger {
        padding: 8px 18px;
        background: var(--dr-btn-danger-bg);
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s;
    }
    .submit-row input.btn-danger:hover,
    .btn-danger:hover {
        background: var(--dr-btn-danger-hover-bg);
    }
    .cert-link {
        font-size: 13px;
    }
    .cert-link a {
        margin-right: 6px;
    }
    .section-header {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .section-header h3 {
        margin: 0;
    }
    .refresh-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        font-size: 14px;
        line-height: 1;
        text-decoration: none;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        padding: 0;
        cursor: pointer;
        background: var(--body-bg);
        color: var(--body-fg);
    }
    .refresh-btn:hover {
        background: var(--darkened-bg);
    }
    .refresh-btn.is-playing {
        color: var(--dr-danger-fg);
        border-color: var(--dr-danger-border);
    }
    .refresh-btn.is-playing:hover {
        background: var(--dr-danger-bg);
    }
    .refresh-btn.is-stopped {
        color: var(--dr-status-completed-fg);
        border-color: var(--dr-success-border);
    }
    .refresh-btn.is-stopped:hover {
        background: var(--dr-status-completed-bg);
    }
    .empty-state {
        color: var(--body-quiet-color);
        font-style: italic;
    }
</style>
{% endblock %}

{% block content %}
<span id="delete-recordings-meta" data-team-id="{{ team.pk }}" data-team-name="{{ team.name }}" hidden></span>

<p><a href="{% url 'admin:posthog_team_change' team.pk %}">&larr; Back to team</a></p>

<h2>Delete session recordings</h2>
<p class="warning-banner">This action permanently deletes session recording data and cannot be undone.</p>

<!-- Workflow Status -->
<div class="workflow-section">
    <div class="section-header">
        <h3>Recent deletion workflows</h3>
        <button class="refresh-btn" id="poll-toggle" title="Start auto-refresh">&#9654;</button>
    </div>
    <p>Previously triggered deletion workflows for this team.</p>
    <div id="workflows-container">
        {% include "admin/posthog/team/_delete_recordings_workflows.html" %}
    </div>
</div>

<!-- Delete by Person -->
<div class="workflow-section">
    <h3>Delete by person</h3>
    <p>Delete all recordings associated with one or more person distinct IDs.</p>
    <form method="post">
        {% csrf_token %}
        <input type="hidden" name="workflow_type" value="person">

        <div class="form-row">
            <label for="distinct_ids_person">Distinct IDs (one per line)</label>
            <textarea id="distinct_ids_person" name="distinct_ids" required placeholder="user@example.com&#10;another-user-id"></textarea>
        </div>

        <div class="checkbox-row">
            <label>
                <input type="checkbox" name="dry_run" checked>
                Dry run: preview which recordings would be deleted without actually deleting them
            </label>
        </div>

        <div class="form-row">
            <label for="reason_person">Reason</label>
            <input type="text" id="reason_person" name="reason" required placeholder="e.g. GDPR deletion request #1234">
        </div>

        <div class="submit-row">
            <input type="submit" class="btn-danger" value="Delete recordings for person(s)">
        </div>
    </form>
</div>

<!-- Delete by Team -->
<div class="workflow-section">
    <h3>Delete all recordings for team</h3>
    <p class="danger-note">This will delete <strong>every</strong> recording for this team. Use with extreme caution.</p>
    <form method="post">
        {% csrf_token %}
        <input type="hidden" name="workflow_type" value="team">

        <div class="checkbox-row">
            <label>
                <input type="checkbox" name="dry_run" checked>
                Dry run: preview which recordings would be deleted without actually deleting them
            </label>
        </div>

        <div class="form-row">
            <label for="reason_team">Reason</label>
            <input type="text" id="reason_team" name="reason" required placeholder="e.g. Team data deletion request">
        </div>

        <div class="submit-row">
            <input type="submit" class="btn-danger" value="Delete all team recordings">
        </div>
    </form>
</div>

<!-- Delete by Filters -->
<div class="workflow-section">
    <h3>Delete by filters</h3>
    <p>Delete recordings matching specific criteria. At least one filter is required.</p>
    <form method="post">
        {% csrf_token %}
        <input type="hidden" name="workflow_type" value="filters">

        <div class="filter-grid">
            <div class="form-row">
                <label for="date_from">Date from</label>
                <input type="text" id="date_from" name="date_from" placeholder="e.g. -30d or 2024-01-01" style="max-width: none;">
                <p class="help-text">Relative (-7d, -30d) or absolute (YYYY-MM-DD)</p>
            </div>

            <div class="form-row">
                <label for="date_to">Date to</label>
                <input type="text" id="date_to" name="date_to" placeholder="e.g. -7d or 2024-01-31" style="max-width: none;">
                <p class="help-text">Leave empty for "now"</p>
            </div>

            <div class="form-row">
                <label for="duration_min">Min duration (seconds)</label>
                <input type="number" id="duration_min" name="duration_min" min="0" placeholder="0" style="max-width: none;">
            </div>

            <div class="form-row">
                <label for="duration_max">Max duration (seconds)</label>
                <input type="number" id="duration_max" name="duration_max" min="0" placeholder="5" style="max-width: none;">
                <p class="help-text">Useful for filtering out bot sessions</p>
            </div>
        </div>

        <div class="form-row">
            <label for="person_uuid">Person UUID</label>
            <input type="text" id="person_uuid" name="person_uuid" placeholder="01234567-89ab-cdef-0123-456789abcdef" style="max-width: 400px;">
            <p class="help-text">Restrict deletion to recordings from a specific person</p>
        </div>

        <div class="form-row">
            <label for="platform">Platform</label>
            <select id="platform" name="platform">
                <option value="">Any platform</option>
                <option value="web">Web</option>
                <option value="mobile">Mobile</option>
            </select>
        </div>

        <div class="checkbox-row">
            <label>
                <input type="checkbox" name="dry_run" checked>
                Dry run: preview which recordings would be deleted without actually deleting them
            </label>
        </div>

        <div class="form-row">
            <label for="reason_filters">Reason</label>
            <input type="text" id="reason_filters" name="reason" required placeholder="e.g. Cleanup old bot sessions">
        </div>

        <div class="submit-row">
            <input type="submit" class="btn-danger" value="Delete recordings by filters">
        </div>
    </form>
</div>

<!-- Delete by Session IDs -->
<div class="workflow-section">
    <h3>Delete by session IDs</h3>
    <p>Upload a CSV file with session IDs to delete. The first column is used; a <code>session_id</code> header row is automatically skipped.</p>
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <input type="hidden" name="workflow_type" value="session_ids">

        <div class="form-row">
            <label for="session_ids_file">CSV file</label>
            <input type="file" id="session_ids_file" name="session_ids_file" accept=".csv" required>
        </div>

        <div class="checkbox-row">
            <label>
                <input type="checkbox" name="dry_run" checked>
                Dry run: preview which recordings would be deleted without actually deleting them
            </label>
        </div>

        <div class="form-row">
            <label for="reason_session_ids">Reason</label>
            <input type="text" id="reason_session_ids" name="reason" required placeholder="e.g. Targeted cleanup of bot sessions">
        </div>

        <div class="submit-row">
            <input type="submit" class="btn-danger" value="Delete recordings by session IDs">
        </div>
    </form>
</div>

<script nonce="{{ request.csp_nonce }}">
// Confirmation guards, in their own IIFE and first in the file so that nothing else on this page
// can throw and silently leave the delete forms unguarded.
(function() {
    var ACTIONS = {
        person: "delete recordings for the listed person(s)",
        team: "delete ALL recordings",
        filters: "delete recordings matching these filters",
        session_ids: "delete recordings for the uploaded session IDs"
    };

    // Forms whose blast radius the operator cannot eyeball from the form itself get the stricter
    // type-the-project-ID gate. `filters` belongs here because the server only requires ONE filter to
    // be set, so a single mistyped date range (-3650d instead of -30d) is a delete-everything wearing
    // a narrower-looking form.
    var NEEDS_TYPED_ID = { team: true, filters: true };
    var FILTER_FIELDS = ["date_from", "date_to", "duration_min", "duration_max", "person_uuid", "platform"];

    var meta = document.getElementById("delete-recordings-meta");
    var teamId = meta.dataset.teamId;
    var teamName = meta.dataset.teamName;
    var project = teamName ? "project " + teamName + " (" + teamId + ")" : "project " + teamId;

    // Echo the filters back so a fat-fingered date range is visible in the dialog, not just implied.
    function filterSummary(form) {
        var parts = [];
        FILTER_FIELDS.forEach(function(name) {
            var field = form.querySelector('[name="' + name + '"]');
            var value = field && field.value.trim();
            if (value) parts.push(name + "=" + value);
        });
        return parts.join(", ");
    }

    function shouldSubmit(form) {
        var typeInput = form.querySelector('[name="workflow_type"]');
        var workflowType = typeInput ? typeInput.value : null;
        var action = ACTIONS[workflowType];
        if (!action) {
            // Fail closed: an unrecognised form is a delete path nobody has written a confirmation for.
            window.alert("This form has no confirmation configured, so nothing was submitted.");
            return false;
        }

        var dryRunInput = form.querySelector('[name="dry_run"]');
        var dryRun = dryRunInput ? dryRunInput.checked : false;
        var scope = workflowType === "filters" ? filterSummary(form) : "";
        var scopeLine = scope ? "\n\nFilters: " + scope : "";

        if (dryRun) {
            return window.confirm(
                "Dry run: no recordings will be deleted.\n\n" +
                "Preview which recordings would match if you " + action + " from " + project + "?" + scopeLine
            );
        }

        if (!window.confirm(
            "Are you sure you want to " + action + " from " + project + "?" + scopeLine + "\n\n" +
            "This permanently deletes session recording data and cannot be undone."
        )) {
            return false;
        }

        if (NEEDS_TYPED_ID[workflowType]) {
            var whatItDeletes = workflowType === "team"
                ? "This deletes every recording for " + project + "."
                : "This deletes every recording matching " + (scope || "these filters") + " for " + project + ".";
            var typed = window.prompt(whatItDeletes + "\n\nType the project ID (" + teamId + ") to confirm:");
            if (typed === null || typed.trim() !== teamId) {
                window.alert("Project ID did not match, so nothing was deleted.");
                return false;
            }
        }

        return true;
    }

    // Each POST mints a fresh Temporal workflow id server-side (team_admin.py), so a double submit
    // starts a second, redundant deletion workflow. Lock the form once a submit is accepted.
    // Sibling admin templates do this with an inline `onsubmit=` attribute, which cannot work here:
    // the admin CSP has no 'unsafe-inline' for script-src, so attribute handlers are blocked.
    var inFlight = false;

    function lock(form) {
        // Safe to do synchronously: the submit event has already committed the navigation, and these
        // controls have no `name`, so removing them cannot drop a field from the POST body. Deferring
        // it to a timeout does NOT work, because the pending navigation means the callback never runs.
        var controls = form.querySelectorAll('input[type="submit"], button[type="submit"]');
        Array.prototype.forEach.call(controls, function(c) { c.disabled = true; });
    }

    var typeInputs = document.querySelectorAll('form input[name="workflow_type"]');
    Array.prototype.forEach.call(typeInputs, function(input) {
        var form = input.form;
        if (!form) return;
        form.addEventListener("submit", function(event) {
            if (inFlight || !shouldSubmit(form)) {
                event.preventDefault();
                return;
            }
            inFlight = true;
            lock(form);
        });
    });

    // Back/forward can restore this page from the bfcache with the buttons still disabled, which
    // would strand the operator on a dead page. Restoring from cache means the POST is done with.
    window.addEventListener("pageshow", function(event) {
        if (!event.persisted) return;
        inFlight = false;
        var controls = document.querySelectorAll('form input[type="submit"][disabled]');
        Array.prototype.forEach.call(controls, function(c) { c.disabled = false; });
    });
})();

// Auto-refresh for the workflow status table.
(function() {
    var container = document.getElementById("workflows-container");
    var pollUrl = "{% url 'admin:posthog_team_delete_recordings_workflows' team.pk %}";
    var btn = document.getElementById("poll-toggle");
    var intervalId = null;

    function refresh() {
        fetch(pollUrl, { headers: { "X-Requested-With": "XMLHttpRequest" } })
            .then(function(r) { return r.text(); })
            .then(function(html) { container.innerHTML = html; })
            .catch(function() {});
    }

    function start() {
        if (intervalId) return;
        refresh();
        intervalId = setInterval(refresh, 5000);
        btn.innerHTML = "&#9632;";
        btn.title = "Stop auto-refresh";
        btn.className = "refresh-btn is-playing";
    }

    function stop() {
        clearInterval(intervalId);
        intervalId = null;
        btn.innerHTML = "&#9654;";
        btn.title = "Start auto-refresh";
        btn.className = "refresh-btn is-stopped";
    }

    btn.addEventListener("click", function() {
        intervalId ? stop() : start();
    });
    start();
})();
</script>
{% endblock %}