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

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

{% block meta %}
    <meta property="og:description" content="ATProto account migration tool"/>
    <meta property="og:image" content="/halloween_moover.webp">
{% endblock %}

{% block content %}

<script>
    document.addEventListener('alpine:init', () => {
        window.Alpine.data('moover', () => ({
            handle: '',
            password: '',
            newPds: '',
            newEmail: '',
            newHandle: '',
            inviteCode: null,
            twoFactorCode: null,
            confirmation: false,
            showTwoFactorCodeInput: false,
            error: null,
            showStatusMessage: false,
            askForPlcToken: false,

            done: false,
            //advance
            showAdvance: false,
            showAdvancedPlcOptions: false,
            createNewAccount: true,
            migrateRepo: true,
            migrateBlobs: true,
            migrateMissingBlobs: true,
            migratePrefs: true,
            migratePlcRecord: true,
            //Plc signing
            backupOptions: {
                createANewRotationKey: false,
                signupForBackups: false,
            },
            backupSignupMessage: null,
            backupSignupError: null,
            rotationKeys: ['', '', '', ''],
            plcToken: null,
            plcStatus: null,
            newlyCreatedRotationKey: null, // { publicKey, privateKey } when generated
            toggleAdvanceMenu() {
                this.showAdvance = !this.showAdvance;
            },
            updateStatusHandler(status) {
                console.log("Status update:", status);
                document.getElementById("status-message").innerText = status;

            },
            async handleSubmit() {
                this.error = null;
                this.showStatusMessage = false;
                console.log("Form data:", {
                    handle: this.handle,
                    password: this.password,
                    newPds: this.newPds,
                    newEmail: this.newEmail,
                    newHandle: this.newHandle,
                    inviteCode: this.inviteCode
                })
                try {

                    if (this.showTwoFactorCodeInput) {
                        if (this.twoFactorCode === null) {
                            this.error = 'Please enter the 2FA that was sent to your email.'
                        }
                    }
                    if (!this.confirmation) {
                        this.error = 'Please confirm that you understand the risks.'
                    }

                    window.Migrator.createNewAccount = this.createNewAccount;
                    window.Migrator.migrateRepo = this.migrateRepo;
                    window.Migrator.migrateBlobs = this.migrateBlobs;
                    window.Migrator.migrateMissingBlobs = this.migrateMissingBlobs;
                    window.Migrator.migratePrefs = this.migratePrefs;
                    window.Migrator.migratePlcRecord = this.migratePlcRecord;
                    this.updateStatusHandler('Starting migration...');
                    this.showStatusMessage = true;
                    await window.Migrator.migrate(
                        this.handle,
                        this.password,
                        this.newPds,
                        this.newEmail,
                        this.newHandle,
                        this.inviteCode,
                        this.updateStatusHandler,
                        this.twoFactorCode
                    );
                    if (this.migratePlcRecord) {
                        this.askForPlcToken = true;
                    } else {
                        this.updateStatusHandler('Migration of your repo is complete! But the PLC operation was not done so your old account is still the valid one.');
                    }
                } catch (error) {
                    console.error(error.error, error.message);
                    if (error.error === 'AuthFactorTokenRequired') {
                        this.showTwoFactorCodeInput = true;
                    }
                    this.error = error.message;
                }
            },
            async signPlcOperation() {
                try {
                    this.plcStatus = 'Signing PLC operation...';
                    this.backupSignupMessage = null;
                    this.backupSignupError = null;
                    // Build additional rotation keys list (user-provided and/or newly created)
                    const additionalRotationKeysToAdd = [];
                    // Generate a new rotation key if requested
                    if (this.backupOptions.createANewRotationKey) {
                        window.handle = this.newHandle;
                        const created = await window.PlcOps.createANewSecp256k1();
                        this.newlyCreatedRotationKey = created; // { publicKey, privateKey }
                        // Reserve first slot for the newly created key (will appear above the PDS rotation key)
                        additionalRotationKeysToAdd.push(created.publicKey);
                    }
                    // Append any manually entered rotation keys (non-empty)
                    for (let i = 0; i < this.rotationKeys.length; i++) {
                        const k = (this.rotationKeys[i] || '').trim();
                        if (k) {
                            additionalRotationKeysToAdd.push(k);
                        }
                    }

                    await window.Migrator.signPlcOperation(this.plcToken, additionalRotationKeysToAdd);
                    this.plcStatus = 'PLC operation signed successfully! Your account has been MOOved to the new PDS.';
                    this.done = true;

                    if (this.backupOptions.signupForBackups) {
                        try {
                            this.backupSignupMessage = 'Signing you up for automated backups...';
                            let _ = await window.Migrator.signUpForBackupsFromMigration();
                            this.backupSignupMessage = 'Signed up for automated backups successfully.';
                        } catch (e) {
                            console.error(e);
                            this.backupSignupError = e?.message || 'Failed to sign you up for automated backups.';
                        }
                    }
                } catch (error) {
                    this.error = error.message;
                    console.error(error);
                }
            }
        }))
    })
</script>

<div class="container" x-data="moover">
    {% call cow::cow_header("PDS MOOver") %}

    <a href="/info">Idk if I trust a cow to move my atproto account to a new PDS</a>
    <br/>
    <a href="https://blacksky.community/profile/did:plc:g7j6qok5us4hjqlwjxwrrkjm/post/3lw3hcuojck2u">Video guide for
        joining blacksky.app</a>
    <form x-show="!askForPlcToken" id="moover-form" @submit.prevent="await handleSubmit()">
        <!-- First section: Login credentials -->
        <div class="section">
            <h2>Login for your current PDS</h2>
            <div class="form-group">
                <label for="handle">Old Handle:</label>
                <input type="text" id="handle" name="handle" placeholder="alice.bsky.social" x-model="handle" required>
            </div>

            <div class="form-group">
                <label for="password">Old Password (Will also be your new password):</label>
                <input type="password" id="password" name="password" x-model="password" required>
            </div>

            <div x-show="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="twoFactorCode">
                <div class="error-message">Enter your 2fa code here</div>

            </div>
        </div>

        <!-- Second section: New account details -->
        <div class="section">
            <h2>Setup for the new PDS</h2>
            <div class="form-group">
                <label for="new-pds">New PDS (URL):</label>
                <input type="url" id="new-pds" name="new-pds" placeholder="https://coolnewpds.com" x-model="newPds"
                       required>
            </div>

            <div class="form-group">
                <label for="new-email">New Email:</label>
                <input type="email" id="new-email" name="new-email" placeholder="CanBeSameEmailAsTheOldPds@email.com"
                       x-model="newEmail" required>
            </div>

            <div class="form-group">
                <label for="new-handle">New Handle:</label>
                <input type="text" id="new-handle" name="new-handle"
                       placeholder="username.newpds.com or mycooldomain.com" x-model="newHandle" required>
            </div>

            <div class="form-group">
                <label for="invite-code">Invite Code:</label>
                <input type="text" id="invite-code" name="invite-code" placeholder="Invite code from your new PDS (Leave blank if you don't have one)"
                       x-model="inviteCode">
            </div>
        </div>
        <div class="form-group">
            <button type="button" @click="toggleAdvanceMenu()" id="advance" name="advance">Advance Options
            </button>
        </div>
        <div x-show="showAdvance" class="section" style="padding-bottom: 10px; text-align: left">
            <h3>Pick and choose which actions to run</h3>
            <p>Useful if a migration failed and you want to have a bit more manual control</p>
            <div class="form-control">
                <label class="moove-checkbox-label">
                    <input type="checkbox" id="createNewAccount" name="createNewAccount" x-model="createNewAccount">
                    Create a New Account on the New PDS
                </label>
            </div>
            <div class="form-control">
                <label class="moove-checkbox-label">
                    <input type="checkbox" id="migrateRepo" name="migrateRepo" x-model="migrateRepo">
                    Migrate Repo
                </label>
            </div>
            <div class="form-control">
                <label class="moove-checkbox-label">
                    <input type="checkbox" id="migrateBlobs" name="migrateBlobs" x-model="migrateBlobs">
                    Migrate Blobs
                </label>
            </div>
            <div class="form-control">
                <label class="moove-checkbox-label">
                    <input type="checkbox" id="migrateMissingBlobs" name="migrateMissingBlobs"
                           x-model="migrateMissingBlobs">
                    Migrate Missing Blobs
                </label>
            </div>
            <div class="form-control">
                <label class="moove-checkbox-label">
                    <input type="checkbox" id="migratePrefs" name="migratePrefs" x-model="migratePrefs">
                    Migrate Prefs
                </label>
            </div>
            <div class="form-control">
                <label class="moove-checkbox-label">
                    <input type="checkbox" id="migratePlcRecord" name="migratePlcRecord" x-model="migratePlcRecord">
                    Migrate PLC Record
                </label>
            </div>

        </div>

            <p style="text-align: left">There are some risks that come with doing an account migration.
                (Can view them
                <a href="https://github.com/bluesky-social/pds/blob/main/ACCOUNT_MIGRATION.md#%EF%B8%8F-warning-%EF%B8%8F-%EF%B8%8F">here</a>)
                and that the creator or host of this migration tool is not liable and will not be able to help you in the
                event something goes wrong. I also have read over the <a href="/info">extended information from PDS MOOver about account
                    migrations.</a>
            </p>
             <div class="form-group">
                 <label for="confirmation" class="moove-checkbox-label">
                    <input x-model="confirmation" type="checkbox" id="confirmation" name="confirmation" required>
                    <span>I understand</span>
                 </label>
            </div>
        <div x-show="error" x-text="error" class="error-message"></div>
        <div x-show="showStatusMessage" id="warning">*Please make sure to stay on this page during the MOOve for the
            best result
        </div>
        <div x-show="showStatusMessage" id="status-message" class="status-message"></div>
        <div>
            <button type="submit">MOOve</button>
        </div>
    </form>

    <div x-show="askForPlcToken" class="section">
        <form @submit.prevent="await signPlcOperation()">
            <div x-show="!done">
                <h2>Please enter your PLC Token you received in an email</h2>
                <div class="form-group">
                    <label for="plc-token">PLC Token:</label>
                    <input type="text" id="plc-token" name="plc-token" x-model="plcToken" required>
                </div>
                <p style="text-align: left">You can now select to add a new Rotation Key during migration and sign up for PDS MOOver's free backup service. With a Rotation Key and backups if your new PDS ever goes down you can recover your account and it's data.</p>
                <div class="form-group">
                     <label for="rotation-key" class="moove-checkbox-label">
                        <input x-model="backupOptions.createANewRotationKey" type="checkbox" id="rotation-key" name="rotation-key">
                        <span>Create and add a new Rotation Key</span>
                     </label>
                </div>
                <div class="form-group">
                     <label for="backups-signup" class="moove-checkbox-label">
                        <input x-model="backupOptions.signupForBackups" type="checkbox" id="backups-signup" name="backups-signup" >
                        <span>Signup for automated account backups</span>
                     </label>
                </div>
                <div class="form-group">
                    <button type="button" id="plc-advance" @click="showAdvancedPlcOptions = !showAdvancedPlcOptions">Add Additional Rotation Keys</button>
                </div>
                <div x-show="showAdvancedPlcOptions" class="section" style="padding-bottom: 10px;">
                    <div style="text-align: left;">
                        You can pick up to 4 rotation keys to your PLC document. These will appear above your new PDS rotation key so you can recover your account in the event of an adversarial take over from a rogue PDS
                    </div>
                    <div class="form-group" style="margin-top: 10px;">
                        <label for="rotation-key-1">Rotation key 1</label>
                        <input type="text" id="rotation-key-1" name="rotation-key-1"
                               x-model="rotationKeys[0]"
                               :disabled="backupOptions.createANewRotationKey"
                               :placeholder="backupOptions.createANewRotationKey ? 'reserved for the newly created rotation key' : ''">
                    </div>
                    <div class="form-group">
                        <label for="rotation-key-2">Rotation key 2</label>
                        <input type="text" id="rotation-key-2" name="rotation-key-2" x-model="rotationKeys[1]">
                    </div>
                    <div class="form-group">
                        <label for="rotation-key-3">Rotation key 3</label>
                        <input type="text" id="rotation-key-3" name="rotation-key-3" x-model="rotationKeys[2]">
                    </div>
                    <div class="form-group">
                        <label for="rotation-key-4">Rotation key 4</label>
                        <input type="text" id="rotation-key-4" name="rotation-key-4" x-model="rotationKeys[3]">
                    </div>
                </div>
            </div>
            <div x-show="error" x-text="error" class="error-message"></div>
            <template x-if="done && backupOptions.createANewRotationKey && newlyCreatedRotationKey">
                <div x-data="{newlyCreatedRotationKey: newlyCreatedRotationKey}">
                    {% include "partials/rotation_key_display.askama.html" %}
                </div>
            </template>
            <div x-show="!done && plcStatus" x-text="plcStatus" class="status-message"></div>
            <template x-if="backupOptions.signupForBackups">
                <div>
                    <div x-show="backupSignupMessage" x-text="backupSignupMessage" class="status-message"></div>
                    <div x-show="backupSignupError" x-text="backupSignupError" class="error-message"></div>
                </div>
            </template>
            <div x-show="done" class="status-message">Congratulations! You have MOOved to a new PDS! Remember to use
                your new PDS URL under "Hosting provider" when logging in on Bluesky. Can find more detail information
                <a href="/info#cant-login">here.</a></div>

            <div>
                <button x-show="!done" type="submit">Sign the papers</button>
            </div>
        </form>
    </div>
</div>

{% endblock %}