{%- import "partials/cow-header.askama.html" as cow -%}

{% extends "layout.askama.html" %}

{% block meta %}
    <meta property="og:description" content="Import missing blobs from your old PDS to your new PDS"/>
    <meta property="og:image" content="/missing.webp">
{% endblock %}

{% block content %}

<script>

        document.addEventListener('alpine:init', () => {
            window.Alpine.data('app', () => ({
                showCurrentLogin: true,
                showOldLogin: false,
                showAdvance: false,
                disableLoginButton: false,
                showBlobMoveProgress: false,
                oldPdsUrl: null,
                showTryAgain: false,
                error: '',
                showStatusMessage: false,
                statusMessage: '',
                currentLogin: {
                    handle: '',
                    password: '',
                    twoFactorCode: '',
                    showTwoFactorCodeInput: false,
                },
                oldLogin: {
                    password: '',
                    twoFactorCode: '',
                    showTwoFactorCodeInput: false,
                },
                resetStatusAndErrors() {
                    this.showStatusMessage = false;
                    this.statusMessage = '';
                    this.error = '';
                    this.disableLoginButton = true;
                },
                async handleCurrentLogin() {
                    this.resetStatusAndErrors();
                    try {
                        const {
                            accountStatus,
                            missingBlobsCount
                        } = await window.MissingBlobs.currentAgentLogin(this.currentLogin.handle, this.currentLogin.password, this.currentLogin.twoFactorCode);
                        // const noMissingBlobs = accountStatus.expectedBlobs <= accountStatus.importedBlobs;
                        console.log(missingBlobsCount);
                        const noMissingBlobs = missingBlobsCount === 0;
                        if (noMissingBlobs) {
                            this.statusMessage = `You are good to go! You are not missing any blobs. Your account has ${accountStatus.importedBlobs} imported blobs and expects to have at least ${accountStatus.expectedBlobs} blobs. No action is required.`
                        } else {
                            this.showCurrentLogin = false;
                            this.statusMessage = `You are currently missing some blobs. Login with your old password to import the missing blobs. We will automatically find your old handle.`;
                            this.showOldLogin = true;
                        }
                        this.showStatusMessage = true;

                    } catch (error) {
                        console.error(error.error, error.message);
                        if (error.error === 'AuthFactorTokenRequired') {
                            this.currentLogin.showTwoFactorCodeInput = true;
                        }
                        this.error = error.message;
                    }
                    this.disableLoginButton = false;
                },
                async handleOldLogin() {
                    this.resetStatusAndErrors();
                    try {
                        await window.MissingBlobs.oldAgentLogin(this.oldLogin.password, this.oldLogin.twoFactorCode, this.oldPdsUrl);
                        this.showOldLogin = false;
                        this.showBlobMoveProgress = true;
                        this.showStatusMessage = true;
                        this.statusMessage = '';
                        await this.migrateMissingBlobs();
                    } catch (error) {
                        console.error(error.error, error.message);
                        if (error.error === 'AuthFactorTokenRequired') {
                            this.oldLogin.showTwoFactorCodeInput = true;
                        }
                        this.error = error.message;
                    }
                    this.disableLoginButton = false;
                },
                updateStatusHandler(status) {
                    console.log("Status update:", status);
                    document.getElementById("missing-status-message").innerText = status;

                },
                async migrateMissingBlobs() {
                    try {
                        this.resetStatusAndErrors();
                        this.showStatusMessage = true;
                        this.showTryAgain = false;
                        const {
                            accountStatus,
                            missingBlobsCount
                        } = await window.MissingBlobs.migrateMissingBlobs(this.updateStatusHandler);
                        const noMissingBlobs = missingBlobsCount === 0;
                        // const noMissingBlobs = accountStatus.expectedBlobs === accountStatus.importedBlobs;
                        if (noMissingBlobs) {
                            this.statusMessage = `You are good to go! You have all ${accountStatus.importedBlobs} of the expected ${accountStatus.expectedBlobs} blobs. You're done!!`
                        } else {
                            this.statusMessage = `Expected blobs: ${accountStatus.expectedBlobs} Imported blobs: ${accountStatus.importedBlobs}`;
                            this.showTryAgain = true;
                        }
                    } catch (error) {
                        console.error(error.error, error.message);
                        this.error = error.message;
                        this.showTryAgain = true;
                    }
                    this.disableLoginButton = false;
                },
                toggleAdvanceMenu() {
                    this.showAdvance = !this.showAdvance;
                }

            }));
        });
    </script>

</head>
<body>
<div class="container" x-data="app">



    {% call cow::cow_header("Missing Blobs Importer", "<img src='/missing.webp' alt='Cartoon milk cow on a missing poster' style='max-width: 100%; max-height: 100%; object-fit: contain;'>") %}

    <a href="https://blacksky.community/profile/did:plc:g7j6qok5us4hjqlwjxwrrkjm/post/3lyylumcpok2c">How to video
        guide</a>


    <!-- First section: Current Login credentials -->

    <form x-show="showCurrentLogin" id="moover-form" @submit.prevent="await handleCurrentLogin()">
        <div class="section">
            <h2>Login for your current PDS</h2>
            <div class="form-group">
                <label for="current_handle">Current Handle:</label>
                <input type="text" id="current_handle" name="handle" placeholder="alice.bsky.social"
                       x-model="currentLogin.handle"
                       required>
            </div>

            <div class="form-group">
                <label for="current_password">Current Password:</label>
                <input type="password" id="current_password" name="password" x-model="currentLogin.password" required>
            </div>

            <div x-show="currentLogin.showTwoFactorCodeInput" class="form-group">
                <label for="current_two-factor-code">2FA from the email sent</label>
                <input type="text" id="current_two-factor-code" name="two-factor-code"
                       x-model="currentLogin.twoFactorCode">
                <div class="error-message">Enter your 2fa code here</div>
            </div>
            <div x-show="error" x-text="error" class="error-message"></div>
            <div x-show="showStatusMessage" x-text="statusMessage" class="status-message"></div>

            <div>
                <button x-bind:disabled="disableLoginButton" type="submit">Login</button>
            </div>
        </div>
    </form>

    <!-- Second section: Old Login credentials -->

    <form x-show="showOldLogin" @submit.prevent="await handleOldLogin()">
        <div class="section">
            <h2>Password for your OLD PDS</h2>
            <p>We only need your password for your old account. We can find your old handle from your current login.</p>
            <div class="form-group">
                <label for="password">OLD Password:</label>
                <input type="password" id="password" name="password" x-model="oldLogin.password" required>
            </div>

            <div x-show="oldLogin.showTwoFactorCodeInput" class="form-group">
                <label for="two-factor-code">2FA from the email sent</label>
                <input type="text" id="two-factor-code" name="two-factor-code" x-model="oldLogin.twoFactorCode">
                <div class="error-message">Enter your 2fa code here</div>
            </div>

            <div x-show="showAdvance" class="form-group show-advance">
                <label for="old_pds">This is optional. If you do not know your old PDS url please leave it blank. We
                    will find it for you. </label>
                <input type="url" id="old_pds" name="two-factor-code"
                       placeholder="(Optional) Your old PDS URL" x-model="oldPdsUrl">
            </div>
            <div class="form-group">
                <button type="button" @click="toggleAdvanceMenu()" id="advance" name="advance">Advance Options
                </button>
            </div>


            <div x-show="error" x-text="error" class="error-message"></div>
            <div x-show="showStatusMessage" x-text="statusMessage" class="status-message"></div>

            <div>
                <button x-bind:disabled="disableLoginButton" type="submit">Login and start the import of missing blobs
                </button>
            </div>
        </div>
    </form>

    <!-- Third section: Progress while uploading blobs-->

    <div x-show="showBlobMoveProgress">
        <div x-show="showStatusMessage" id="warning">*This will take a while. Please do not close this tab. And watch
            the status message below for updates
        </div>
        <div x-show="showStatusMessage" x-text="statusMessage" id="missing-status-message" class="status-message"></div>
        <div x-show="error" x-text="error" class="error-message"></div>
        <div x-show="showTryAgain">
            <p style="color: yellow">We were unable to import all of your previous blobs, please try again. If it is
                still
                not completing give
                it a few hours and come back and try again. It may be rate limited. Re running this tool does not harm
                your account.</p>
            <br>
            <button x-on:click="await migrateMissingBlobs()">Try again</button>
        </div>


    </div>


</div>

{% endblock %}