import express, { Application } from "express";
import fs from "node:fs";
import path from "node:path";
import fetch, { Response as FetchResponse, Headers } from "node-fetch";
import { Config } from "@spacebar/util";

const ASSET_FOLDER_PATH = path.join(__dirname, "..", "..", "..", "assets");

export default function TestClient(app: Application) {
    console.log("call");
    app.use("/assets", express.static(path.join(ASSET_FOLDER_PATH, "public")));
    app.use("/assets", express.static(path.join(ASSET_FOLDER_PATH, "cache")));
    console.log("call 2");

    let html = fs.readFileSync(path.join(ASSET_FOLDER_PATH, "client_test", "index.html"), { encoding: "utf-8" });
    console.log("call 3");

    html = applyEnv(html); // update window.GLOBAL_ENV according to config

    html = applyPlugins(html); // inject our plugins
    app.use("/assets/plugins", express.static(path.join(ASSET_FOLDER_PATH, "plugins")));
    app.use("/assets/inline-plugins", express.static(path.join(ASSET_FOLDER_PATH, "inline-plugins")));

    console.log("call 4");

    // Asset memory cache
    const assetCache = new Map<string, { response: FetchResponse; buffer: Buffer }>();

    // Fetches uncached ( on disk ) assets from discord.com and stores them in memory cache.
    app.get("/assets/:file", async (req, res) => {
        delete req.headers.host;

        if (req.params.file.endsWith(".map")) return res.status(404);

        let response: FetchResponse;
        let buffer: Buffer;
        const cache = assetCache.get(req.params.file);
        if (!cache) {
            response = await fetch(`https://discord.com/assets/${req.params.file}`, {
                headers: { ...(req.headers as { [key: string]: string }) },
            });
            buffer = await response.buffer();
        } else {
            response = cache.response;
            buffer = cache.buffer;
        }

        [
            "content-length",
            "content-security-policy",
            "strict-transport-security",
            "set-cookie",
            "transfer-encoding",
            "expect-ct",
            "access-control-allow-origin",
            "content-encoding",
        ].forEach((headerName) => {
            response.headers.delete(headerName);
        });
        response.headers.forEach((value, name) => res.set(name, value));

        assetCache.set(req.params.file, { buffer, response });

        // TODO: I don't like this. Figure out a way to get client cacher to download *all* assets.
        if (response.status == 200) {
            console.warn(`[TestClient] Cache miss for file ${req.params.file}! Use 'npm run generate:client' to cache and patch.`);
            await fs.promises.appendFile(path.join(ASSET_FOLDER_PATH, "cacheMisses"), req.params.file + "\n");
        }

        return res.send(buffer);
    });

    console.log("call 5");

    // Instead of our generated html, send developers.html for developers endpoint
    app.get("/developers*", (req, res) => {
        res.set("Cache-Control", "public, max-age=" + 60 * 60 * 24); // 24 hours
        res.set("content-type", "text/html");
        res.send(fs.readFileSync(path.join(ASSET_FOLDER_PATH, "client_test", "developers.html"), { encoding: "utf-8" }));
    });

    console.log("call 6");

    // Send our generated index.html for all routes.
    app.get("*", (req, res, next) => {
        console.log(`[TestClient Wildcard] Intercepted path: ${req.url}`);

        if (req.url.startsWith("/api") || req.url.startsWith("/__development")) {
            console.log(`[TestClient Wildcard] Bypassing route (matched API guard): ${req.url}`);
            return next ? next() : res.sendStatus(404);
        }

        console.log(`[TestClient Wildcard] Serving index.html for: ${req.url}`);
        res.set("Cache-Control", "public, max-age=" + 60 * 60 * 24);
        res.set("content-type", "text/html");

        return res.send(html);
    });
    console.log("call 7");
}

// Apply gateway/cdn endpoint values from config to index.html.
export const applyEnv = (html: string): string => {
    const config = Config.get();

    const cdn = (config.cdn.endpointClient || config.cdn.endpointPublic || process.env.CDN || "").replace(/(https?)?(:\/\/?)/g, "");

    const gateway = config.gateway.endpointClient || config.gateway.endpointPublic || process.env.GATEWAY || "";

    if (cdn) html = html.replace(/CDN_HOST: .+/, `CDN_HOST: \`${cdn}\`,`);

    if (gateway) html = html.replace(/GATEWAY_ENDPOINT: .+/, `GATEWAY_ENDPOINT: \`${gateway}\`,`);

    return html;
};

// Injects inline, preload, and standard plugins into index.html.
export const applyPlugins = (html: string): string => {
    // Inline plugins. Injected as <script src="/assets/inline-plugins/name.js"> into head.
    const inlineFiles = fs.readdirSync(path.join(ASSET_FOLDER_PATH, "inline-plugins"));
    const inline = inlineFiles
        .filter((x) => x.endsWith(".js"))
        .map((x) => `<script src="/assets/inline-plugins/${x}"></script>`)
        .join("\n");
    html = html.replace("<!-- inline plugin marker -->", inline);

    // Preload plugins. Text content of each plugin is injected into head.
    const preloadFiles = fs.readdirSync(path.join(ASSET_FOLDER_PATH, "preload-plugins"));
    const preload = preloadFiles
        .filter((x) => x.endsWith(".js"))
        .map((x) => `<script>${fs.readFileSync(path.join(ASSET_FOLDER_PATH, "preload-plugins", x))}</script>`)
        .join("\n");
    html = html.replace("<!-- preload plugin marker -->", preload);

    // Normal plugins. Injected as <script src="/assets/plugins/name.js"> into body.
    const pluginFiles = fs.readdirSync(path.join(ASSET_FOLDER_PATH, "plugins"));
    const plugins = pluginFiles
        .filter((x) => x.endsWith(".js"))
        .map((x) => `<script src="/assets/plugins/${x}"></script>`)
        .join("\n");
    html = html.replace("<!-- plugin marker -->", plugins);

    return html;
};