// file: kb-app-demo-desktop/frontend/ts/demo_sql_tables.ts
// version: 4

import DataTable, { type Api } from "datatables.net-bs5";
import "datatables.net-bs5/css/dataTables.bootstrap5.css";
import { jsonText, renderJsonViewer } from "./json_viewer.ts";
import type { DemoSqlTableSnapshot } from "./bindings/kb_app_demo_desktop/demo_sql/DemoSqlTableSnapshot";

const tableInstances = new Map<string, Api>();

export function setText(selector: string, value: string): void {
    const element = document.querySelector<HTMLElement>(selector);
    if (element) {
        element.textContent = value;
    }
}

export function renderTables(tableSelector: string, bodySelector: string, tables: DemoSqlTableSnapshot[]): void {
    const existing = tableInstances.get(tableSelector);
    if (existing) {
        existing.destroy();
        tableInstances.delete(tableSelector);
    }
    const tbody = document.querySelector<HTMLTableSectionElement>(bodySelector);
    if (!tbody) {
        return;
    }
    tbody.textContent = "";
    for (const table of tables) {
        const row = document.createElement("tr");
        row.appendChild(cell(table.tableName, true));
        row.appendChild(cell(table.domain, false));
        row.appendChild(cell(table.role, false));
        row.appendChild(cell(table.exists ? "oui" : "non", false));
        row.appendChild(cell(table.rowCount === null ? "—" : String(table.rowCount), false));
        row.appendChild(cell(table.minSlot === null ? "—" : String(table.minSlot), false));
        row.appendChild(cell(table.maxSlot === null ? "—" : String(table.maxSlot), false));
        row.appendChild(cell(table.latestCreatedAt ?? "—", false));
        tbody.appendChild(row);
    }
    const tableElement = document.querySelector<HTMLTableElement>(tableSelector);
    if (!tableElement) {
        return;
    }
    tableInstances.set(tableSelector, new DataTable(tableElement, {
        scrollX: true,
        pageLength: 25,
        lengthMenu: [10, 25, 50, 100],
        order: [[0, "asc"]],
        language: {
            emptyTable: "Aucune table disponible",
            info: "Tables _START_ à _END_ sur _TOTAL_",
            infoEmpty: "Aucune table",
            lengthMenu: "Afficher _MENU_ tables",
            search: "Rechercher :",
            zeroRecords: "Aucune table correspondante",
        },
    }));
}

export { jsonText, renderJsonViewer };

function cell(value: string, code: boolean): HTMLTableCellElement {
    const td = document.createElement("td");
    if (code) {
        const codeElement = document.createElement("code");
        codeElement.textContent = value;
        td.appendChild(codeElement);
    } else {
        td.textContent = value;
    }
    return td;
}