import { LitElement, html, css, isServer, type PropertyValues } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { type Challenge } from '@impost/lib';
import { get_wasm_module } from '@impost/lib/solver';
import * as Comlink from 'comlink';

import SolverWorker from './solver-worker?worker&inline';

type SolverWorkerAPI = Comlink.Remote<typeof import("./solver-worker")>;

@customElement('impost-captcha')
export class ImpostCaptcha extends LitElement {
    static override styles = css`
    :host {
        display: block;
        width: var(--impost-widget-width, 250px);
    }
    .impost-widget {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--impost-widget-border-color, #505050);
        font-family: sans-serif;
        background-color: var(--impost-widget-background-color, #070408);
        border-radius: var(--impost-widget-border-radius, 8px);
    }
    .impost-main {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.75rem;
    }
    .impost-main span {
        height: min-content;
    }
    .impost-checkbox {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        color: var(--impost-widget-checkbox-color, #6e6e6eff);
    }
    .impost-checkbox input {
        height: 80%;
        width: 80%;
        margin: 0;
    }
    .impost-footer {
        display: flex;
        padding: 0.25rem 0.75rem;
        font-size: 0.75rem;
        color: var(--impost-widget-footer-color, #a2a2a2);
        justify-content: space-around;
        align-items: end;
    }
    .impost-footer div {
        height: min-content;
    }
    .impost-footer #provider-link {
        margin-left: auto;
    }
    .impost-footer div a {
        color: var(--impost-widget-footer-color, #a2a2a2);
    }
    .impost-footer div a:hover {
        text-decoration: none;
    }
  `;

    /// ================================================
    ///                   Configuration
    /// ================================================


    @property({ type: String })
    auto: "onload" | "onfocus" | "onsubmit" | "off" = "off";

    @property({ type: String })
    challengeUrl: string = 'http://localhost:3000/api/pow';

    @property({ type: String })
    challengejson: string = '';

    @property({ type: Boolean })
    showHashrate: boolean = false;

    /// ================================================
    ///                     Internals
    /// ================================================

    // needed to allow for multiple widgets on the same page if you wanted to
    // do that for some reason
    private uid: string = Math.floor(Math.random() * 100000).toString();

    private _internals: ElementInternals | null = null;
    static formAssociated = true;

    @state()
    private solution: string | null = null;

    @state()
    private challengeData: Challenge | null = null;

    @state()
    private status: 'unsolved' | 'solving' | 'solved' | 'error' = 'unsolved';

    @state()
    private disabled: boolean = true;

    @state()
    private hashRate: number = 0;


    // stores the nonce and solution atomics
    private sab: SharedArrayBuffer = new SharedArrayBuffer(8);

    private solverWorkers: SolverWorkerAPI[] | null = null;
    private nativeWorkers: Worker[] | null = null;

    private solveStartTime: number | null = null;
    private hashRateInterval: number | null = null;

    override connectedCallback() {
        super.connectedCallback();
        this._internals = this.attachInternals();
        this.fetchChallenge();

        console.log(this._internals.form);

        this.initWorkers();

        switch (this.auto) {
            case 'onload':
                this.solveChallenge();
                break;
            case 'onfocus':
                this.addEventListener('focus', () => this.solveChallenge());
                break;
            case 'onsubmit':
                if (this.parentElement?.nodeName === 'FORM') {
                    this.parentElement.addEventListener('submit', async (ev) => {
                        if (this.status === 'solved') {
                            return;
                        }

                        ev.preventDefault();

                        await this.solveChallenge();

                        const form = this.parentElement as HTMLFormElement;

                        if (form.requestSubmit) {
                            form.requestSubmit();
                        } else {
                            form.submit();
                        }
                    });
                }
                break;
        }
    }

    protected override firstUpdated(_changedProperties: PropertyValues): void {
        super.firstUpdated(_changedProperties);

        this.disabled = false;
    }

    override disconnectedCallback() {
        super.disconnectedCallback();
        if (this.hashRateInterval !== null) {
            clearInterval(this.hashRateInterval);
            this.hashRateInterval = null;
        }

        for (const worker of this.nativeWorkers || []) {
            worker.terminate();
            this.solverWorkers = null;
            this.nativeWorkers = null;
        }
    }

    getCurrentWorkingNonce() {
        return Atomics.load(new Uint32Array(this.sab), 0);
    }

    async fetchChallenge() {
        if (this.challengeData !== null) {
            return;
        }

        if (this.challengejson !== '' && this.challengeData === null) {
            this.challengeData = JSON.parse(this.challengejson);
            this.challengejson = '';
            return;
        }

        // challenge data must be provided by the user when using SSR
        if (isServer) {
            return;
        }

        await fetch(`${this.challengeUrl}/challenge`)
            .then(response => response.json())
            .then(data => {
                this.challengeData = data;
            })
            .catch(error => {
                console.error('Error fetching challenge:', error);
                this.status = 'error';
            });
    }

    async initWorkers() {
        this.solverWorkers = [];
        this.nativeWorkers = [];

        const num_workers = navigator.hardwareConcurrency;
        for (let i = 0; i < num_workers; i++) {
            const nativeWorker = new SolverWorker();
            const comlinkWorker = Comlink.wrap<SolverWorkerAPI>(nativeWorker);

            this.nativeWorkers.push(nativeWorker);
            this.solverWorkers.push(comlinkWorker);
        }

        const atomics_view = new Int32Array(this.sab);
        Atomics.store(atomics_view, 0, 0);
        Atomics.store(atomics_view, 1, 0);

        let wasm_module = await get_wasm_module();
        let worker_promises: Promise<void>[] = [];
        for (let i = 0; i < this.solverWorkers.length; i++) {
            const solver = this.solverWorkers[i]!;
            worker_promises.push(solver.init(wasm_module, this.sab)); // Direct call to exposed `init` method
        }

        const timeoutMs = 10 * 1000;
        let timeout: number;
        const timeoutPromise = new Promise((_, reject) => {
            timeout = setTimeout(() => {
                reject(new Error(`Function timeout after ${timeoutMs}ms`));
            }, timeoutMs);
        });

        await Promise.race([
            Promise.allSettled(worker_promises).then(results => {
                const failedInits = results.filter(r => r.status === 'rejected');
                if (failedInits.length > 0) {
                    console.error('Some workers failed to initialize:', failedInits);
                    // we might want to collect all errors, and if every 
                    // worker fails, we can throw, but carry on if only some
                    // fail. For now, we'll just throw if any fail.

                    throw new Error("One or more workers failed to initialize.");
                }

                console.log('All workers initialized');
                return;
            }),
            timeoutPromise,
        ]).then(() => {
            clearTimeout(timeout);
        }).catch(error => {
            clearTimeout(timeout);
            console.error("Worker initialization failed:", error);
            this.status = 'error';
            throw error;
        });
    }

    async solveChallenge() {
        if (!this.challengeData || this.solverWorkers === null) {
            // in all normal cases, this should be impossible
            this.status = 'error';
            return;
        }

        if (this.solution !== null || this.status !== 'unsolved') {
            // do not solve twice
            return;
        }

        this.solveStartTime = performance.now();
        this.hashRateInterval = setInterval(async () => {
            const nonce = this.getCurrentWorkingNonce();

            this.hashRate = (nonce / ((performance.now() - this.solveStartTime!) / 1000));
            console.log(this.hashRate);
        }, 250);

        this.dispatchEvent(new CustomEvent('impost:solve', {
            detail: { challenge: this.challengeData, }, // empty solution
            bubbles: true,
            composed: true,
        }));

        this.status = 'solving';
        this.solution = null;

        const atomics_view = new Int32Array(this.sab);
        // reset atomics
        Atomics.store(atomics_view, 0, 0);
        Atomics.store(atomics_view, 1, -1);

        console.log('Sending challenge to workers...');
        // TODO: the first response is not always the solution, due to cmpxchg 
        // blocking, some workers may block on the read, and as soon as they 
        // unblock, they return 0 since the challenge is already solved.
        //
        // We need to do a better job of tracking solvers, so if one worker
        // errors out, we only error out if all workers have errored out.
        let worker_promises: Promise<string>[] = [];
        for (let solver of this.solverWorkers) {
            worker_promises.push(solver.solve_challenge(this.challengeData as Challenge));
        }

        try {
            await Promise.race(worker_promises);

            // The true solution is stored in the SharedArrayBuffer.
            this.solution = String(Atomics.load(atomics_view, 1));
            this.status = 'solved';
        } catch (error: any) {
            console.error("Captcha solving failed:", error);
            this.status = 'error';
        } finally {
            if (this.hashRateInterval !== null) {
                clearInterval(this.hashRateInterval);
                this.hashRateInterval = null;
            }
        }

        if (this.status === 'solved') {
            this._internals!.setFormValue(JSON.stringify({
                challenge: this.challengeData.salt,
                solution: this.solution,
            }));

            this.dispatchEvent(new CustomEvent('impost:solved', {
                detail: {
                    challenge: this.challengeData,
                    solution: this.solution,
                },
                bubbles: true,
                composed: true,
            }));
        }
    }

    solvePreventDefault(event: Event) {
        event.preventDefault();

        this.solveChallenge();
    }

    override render() {
        if (this.challengejson !== '' && this.challengeData === null) {
            this.challengeData = JSON.parse(this.challengejson);
            this.challengejson = '';
        }

        if (this.challengeData === null) {
            return html`
        <div class="loading-message">Loading captcha challenge...</div>
      `;
        }

        return html`
        <div class="impost-widget">
            <div class="impost-main">
                <div class="impost-checkbox">
                    ${this.status !== 'solving' ? html`${this.status === 'error' ? html`<svg class="impost-error-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M12 14q-.425 0-.712-.288T11 13V6q0-.425.288-.712T12 5t.713.288T13 6v7q0 .425-.288.713T12 14m0 5q-.425 0-.712-.288T11 18t.288-.712T12 17t.713.288T13 18t-.288.713T12 19"/></svg>` : html`
                        <input type="checkbox" id="impost-checkbox-${this.uid}" @click=${this.solvePreventDefault} @change=${this.solvePreventDefault} ?disabled=${this.disabled} ?checked=${this.status === 'solved'}>
                    `}` : html`
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                            <!-- Icon from SVG Spinners by Utkarsh Verma - https://github.com/n3r4zzurr0/svg-spinners/blob/main/LICENSE -->
                            <g stroke="currentColor">
                                <circle cx="12" cy="12" r="9.5" fill="none" stroke-linecap="round" stroke-width="3">
                                    <animate attributeName="stroke-dasharray" calcMode="spline" dur="1.5s" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" keyTimes="0;0.475;0.95;1" repeatCount="indefinite" values="0 150;42 150;42 150;42 150"/>
                                    <animate attributeName="stroke-dashoffset" calcMode="spline" dur="1.5s" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" keyTimes="0;0.475;0.95;1" repeatCount="indefinite" values="0;-16;-59;-59"/>
                                </circle>
                                <animateTransform attributeName="transform" dur="2s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/>
                            </g>
                        </svg>
                    `}
                </div>
                <label for="impost-checkbox-${this.uid}">${this.status === 'error' ? 'Something went wrong' : this.status === 'solved' ? 'Verified' : html`${this.status === 'solving' ? 'Verifying...' : 'I am not a robot'}`}</label>
            </div>

            <div class="impost-footer">
                ${this.showHashrate && this.status === 'solving' && this.hashRate > 0 ? html`
                    <div>
                        <span>H/s:</span>
                        <span>${this.hashRate.toFixed(2)}</span>
                    </div>
                ` : ``}
                <div id="provider-link">
                    Protected by <a href="https://github.com/impost/pow-captcha" target="_blank">Impost</a>
                </div>
            </div>
        </div>

        <input
            type = "text"
            name = "impost-solution"
            id = "impost-solution-${this.uid}"
            style="display: none;"
            .value = ${this.solution}
        />
    `;
    }
}