{% extends "base.html" %}

{% block title %}Export Your Data - Makenot.work{% endblock %}
{% block body_attrs %} class="padded-page export-page"{% endblock %}

{% block head %}
{% endblock %}

{% block content %}
    {% include "partials/site_header.html" %}

    <div class="container">
        <a href="/dashboard" class="back-link">&larr; Back to Dashboard</a>

        <header class="dashboard-export-header">
            <div>
                <h1 class="page-title">Export Your Data</h1>
                <p class="subtitle">Download your content, projects, and transaction history.</p>
            </div>
            <button class="btn-primary export-all-btn" id="export-all-btn" onclick="exportAll()">
                Export All
            </button>
        </header>

        <div class="export-cards">
            <div class="export-card">
                <div class="export-card-info">
                    <div class="export-card-title">Projects &amp; Items</div>
                    <div class="export-card-desc">All your project and item metadata including titles, descriptions, prices, and tags.</div>
                    <div class="export-card-meta">JSON format</div>
                    <div class="export-status" id="projects-status"></div>
                </div>
                <button class="btn-secondary"
                        hx-post="/api/export/projects"
                        hx-target="#projects-status"
                        hx-swap="innerHTML"
                        hx-indicator="#projects-spinner">
                    Download
                    <span id="projects-spinner" class="htmx-indicator"> ...</span>
                </button>
            </div>

            <div class="export-card">
                <div class="export-card-info">
                    <div class="export-card-title">Sales History</div>
                    <div class="export-card-desc">Record of all sales you've made, including dates, amounts, and item titles.</div>
                    <div class="export-card-meta">CSV format</div>
                    <div class="export-status" id="sales-status"></div>
                </div>
                <button class="btn-secondary"
                        hx-post="/api/export/sales"
                        hx-target="#sales-status"
                        hx-swap="innerHTML"
                        hx-indicator="#sales-spinner">
                    Download
                    <span id="sales-spinner" class="htmx-indicator"> ...</span>
                </button>
            </div>

            <div class="export-card">
                <div class="export-card-info">
                    <div class="export-card-title">Collaborator Payouts</div>
                    <div class="export-card-desc">Record of all revenue shared with collaborators on your projects, both incoming and outgoing.</div>
                    <div class="export-card-meta">CSV format</div>
                    <div class="export-status" id="splits-status"></div>
                </div>
                <button class="btn-secondary"
                        hx-post="/api/export/splits"
                        hx-target="#splits-status"
                        hx-swap="innerHTML"
                        hx-indicator="#splits-spinner">
                    Download
                    <span id="splits-spinner" class="htmx-indicator"> ...</span>
                </button>
            </div>

            <div class="export-card">
                <div class="export-card-info">
                    <div class="export-card-title">Purchase History</div>
                    <div class="export-card-desc">Record of all items you've purchased, for your personal records.</div>
                    <div class="export-card-meta">CSV format</div>
                    <div class="export-status" id="purchases-status"></div>
                </div>
                <button class="btn-secondary"
                        hx-post="/api/export/purchases"
                        hx-target="#purchases-status"
                        hx-swap="innerHTML"
                        hx-indicator="#purchases-spinner">
                    Download
                    <span id="purchases-spinner" class="htmx-indicator"> ...</span>
                </button>
            </div>

            <div class="export-card">
                <div class="export-card-info">
                    <div class="export-card-title">Followers &amp; Members</div>
                    <div class="export-card-desc">List of users who follow you or have memberships to your projects.</div>
                    <div class="export-card-meta">CSV format</div>
                    <div class="export-status" id="followers-status"></div>
                </div>
                <button class="btn-secondary"
                        hx-post="/api/export/followers"
                        hx-target="#followers-status"
                        hx-swap="innerHTML"
                        hx-indicator="#followers-spinner">
                    Download
                    <span id="followers-spinner" class="htmx-indicator"> ...</span>
                </button>
            </div>

            {% if has_content %}
            <div class="export-card">
                <div class="export-card-info">
                    <div class="export-card-title">Content Files</div>
                    <div class="export-card-desc">All your uploaded audio files, cover images, version downloads, and dynamic clips.</div>
                    <div class="export-card-meta">ZIP archive ({{ content_size }})</div>
                    <div class="export-status" id="content-status"></div>
                </div>
                <button class="btn-secondary"
                        hx-post="/api/export/content"
                        hx-target="#content-status"
                        hx-swap="innerHTML"
                        hx-indicator="#content-spinner">
                    Download
                    <span id="content-spinner" class="htmx-indicator"> ...</span>
                </button>
            </div>
            {% endif %}
        </div>

        <div class="export-note">
            <h3>About Your Data</h3>
            <p>Your data belongs to you. These exports contain everything we store about your account and content. If you're planning to delete your account, we recommend downloading your data first.</p>
        </div>
    </div>

    <script>
    function exportAll() {
        var btn = document.getElementById('export-all-btn');
        var buttons = document.querySelectorAll('.export-card button.secondary');
        if (buttons.length === 0) return;

        btn.disabled = true;
        btn.textContent = 'Exporting...';
        var i = 0;

        function next() {
            if (i >= buttons.length) {
                btn.textContent = 'Done';
                setTimeout(function() { btn.textContent = 'Export All'; btn.disabled = false; }, 3000);
                return;
            }
            buttons[i].click();
            i++;
            setTimeout(next, 1500);
        }
        next();
    }
    </script>
{% endblock %}