{% extends "layout/default.html" %}

{% block main_content %}
<link rel="stylesheet" href="/static/css/bootstrap-datepicker3.min.css" />
<script src="/static/js/FileSaver.js" type="text/javascript"></script>
<script src="/static/js/bootstrap-datepicker.min.js"></script>
<script src="/static/js/bootstrap-datepicker.zh-CN.min.js"></script>

<style>
    .instock-page {
        height: 100%;
        display: flex;
        flex-direction: column;
        min-width: 0;
        background: #fff;
    }

    .table-header {
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 10px;
        background: #f6f8fb;
        border-bottom: 1px solid #d8dde8;
    }

    .table-title {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 260px;
        font-weight: 600;
        color: #263238;
        white-space: nowrap;
    }

    .table-title .date-picker {
        width: 130px;
        height: 30px;
    }

    .table-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .table-actions input[type="search"] {
        width: 220px;
        max-width: 34vw;
        height: 30px;
    }

    .instock-grid-wrap {
        flex: 1;
        min-height: 0;
        overflow: auto;
        position: relative;
    }

    .instock-grid {
        width: max-content;
        min-width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 12px;
        color: #1f2933;
    }

    .instock-grid th,
    .instock-grid td {
        border-right: 1px solid #e4e8f0;
        border-bottom: 1px solid #e4e8f0;
        padding: 5px 7px;
        vertical-align: top;
        background: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 360px;
    }

    .instock-grid th {
        position: sticky;
        top: 0;
        z-index: 5;
        background: #edf3fb;
        color: #1c3f66;
        font-weight: 700;
        cursor: pointer;
        user-select: none;
    }

    .instock-grid .filter-row th {
        top: 30px;
        background: #f9fbfe;
        cursor: default;
        padding: 3px 5px;
    }

    .instock-grid .filter-row input {
        width: 100%;
        height: 24px;
        border: 1px solid #cdd6e3;
        border-radius: 2px;
        padding: 2px 5px;
        font-weight: 400;
        color: #334155;
        background: #fff;
    }

    .instock-grid tr:nth-child(even) td {
        background: #fbfcfe;
    }

    .instock-grid tr:hover td {
        background: #fff8e6;
    }

    .instock-grid .sticky-col {
        position: sticky;
        z-index: 3;
        box-shadow: 1px 0 0 #d8dde8;
    }

    .instock-grid th.sticky-col {
        z-index: 7;
    }

    .instock-grid .filter-row th.sticky-col {
        z-index: 6;
    }

    .instock-grid .numeric {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    .instock-grid .positive {
        color: #d93025;
    }

    .instock-grid .negative {
        color: #188038;
    }

    .instock-link {
        color: #1f66b1;
        cursor: pointer;
        text-decoration: none;
    }

    .instock-link:hover {
        text-decoration: underline;
    }

    #statusBar {
        min-height: 28px;
        padding: 0 10px;
        border-top: 1px solid #d8dde8;
        background: #f6f8fb;
        color: #52616f;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .pager {
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
    }

    .pager button {
        min-width: 28px;
        height: 22px;
        padding: 0 8px;
        border: 1px solid #c6d2e1;
        border-radius: 3px;
        background: #fff;
        color: #2d4054;
        font-size: 12px;
    }

    .pager button:disabled {
        color: #9aa7b5;
        background: #eef2f6;
    }

    .status-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    @media (max-width: 760px) {
        .table-header {
            align-items: stretch;
            flex-direction: column;
        }

        .table-title,
        .table-actions {
            width: 100%;
        }

        .table-actions input[type="search"] {
            width: 100%;
            max-width: none;
        }
    }
</style>

<div class="instock-page">
    <div class="table-header">
        <div class="table-title">
            <span>{{ web_module_data.name }}</span>
            <span>日期：</span>
            <input type="text" value="{{ date_now }}" id="dateid" class="input-group-sm form-control date-picker">
        </div>
        <div class="table-actions">
            <input type="search" id="globalFilter" class="input-sm form-control" placeholder="搜索当前表格">
            <button type="button" id="resetFilter" class="btn btn-primary btn-sm">重置筛选</button>
            <button type="button" id="saveExcel" class="btn btn-primary btn-sm">导出CSV</button>
        </div>
    </div>
    <div id="instock-data" class="instock-grid-wrap">
        <table class="instock-grid" id="stockTable"></table>
    </div>
    <div id="statusBar">
        <span id="statusText" class="status-text"></span>
        <span class="pager">
            <button type="button" id="prevPage">上一页</button>
            <span id="pageInfo"></span>
            <button type="button" id="nextPage">下一页</button>
        </span>
    </div>
</div>

<script type="text/javascript">
    const nameParam = $.getUrlVar('table_name');
    const colInfos = {% raw web_module_data.column_names %};
    let dateParam = "{{ date_now }}";
    let allRows = [];
    let visibleRows = [];
    let filters = {};
    let sortState = { field: null, direction: 1 };
    let currentPage = 1;
    const pageSize = 200;
    let renderTimer = null;

    $(document).ready(function () {
        $(".date-picker").datepicker({
            language: 'zh-CN',
            format: "yyyy-mm-dd",
            showOtherMonths: true,
            selectOtherMonths: false,
            autoclose: true,
            todayHighlight: true
        }).on('changeDate', function() {
            loadTable();
        });

        document.getElementById("globalFilter").addEventListener("input", function() {
            filters.__global = this.value.trim().toLowerCase();
            currentPage = 1;
            scheduleRender();
        });

        document.getElementById("resetFilter").onclick = function() {
            filters = {};
            sortState = { field: null, direction: 1 };
            document.getElementById("globalFilter").value = "";
            document.querySelectorAll(".column-filter").forEach(function(input) {
                input.value = "";
            });
            currentPage = 1;
            renderBody();
        };

        document.getElementById("saveExcel").onclick = exportCsv;
        document.getElementById("prevPage").onclick = function() {
            if (currentPage > 1) {
                currentPage -= 1;
                renderBody();
            }
        };
        document.getElementById("nextPage").onclick = function() {
            const totalPages = Math.max(1, Math.ceil(visibleRows.length / pageSize));
            if (currentPage < totalPages) {
                currentPage += 1;
                renderBody();
            }
        };

        renderHeader();
        loadTable();
    });

    function loadTable() {
        dateParam = document.getElementById("dateid").value;
        setStatus("正在加载数据...");

        fetch("/instock/api_data?name=" + encodeURIComponent(nameParam) + "&date=" + encodeURIComponent(dateParam))
            .then(function(response) {
                if (!response.ok) {
                    throw new Error("HTTP " + response.status);
                }
                return response.json();
            })
            .then(function(data) {
                allRows = Array.isArray(data) ? data : [];
                currentPage = 1;
                renderBody();
            })
            .catch(function(error) {
                allRows = [];
                visibleRows = [];
                document.getElementById("stockTable").querySelector("tbody").innerHTML = "";
                setStatus("数据加载失败：" + error.message);
            });
    }

    function renderHeader() {
        const table = document.getElementById("stockTable");
        const colgroup = document.createElement("colgroup");
        const thead = document.createElement("thead");
        const titleRow = document.createElement("tr");
        const filterRow = document.createElement("tr");
        filterRow.className = "filter-row";

        colInfos.forEach(function(col, index) {
            const colElement = document.createElement("col");
            colElement.style.width = Math.max(Number(col.width) || 90, 70) + "px";
            colgroup.appendChild(colElement);

            const th = document.createElement("th");
            th.textContent = col.caption || col.value;
            th.title = col.caption || col.value;
            th.dataset.field = col.value;
            th.addEventListener("click", function() {
                if (sortState.field === col.value) {
                    sortState.direction = -sortState.direction;
                } else {
                    sortState.field = col.value;
                    sortState.direction = 1;
                }
                renderBody();
            });
            titleRow.appendChild(th);

            const filterTh = document.createElement("th");
            const input = document.createElement("input");
            input.type = "search";
            input.className = "column-filter";
            input.placeholder = "筛选";
            input.dataset.field = col.value;
            input.addEventListener("input", function() {
                filters[col.value] = this.value.trim().toLowerCase();
                currentPage = 1;
                scheduleRender();
            });
            filterTh.appendChild(input);
            filterRow.appendChild(filterTh);
        });

        thead.appendChild(titleRow);
        thead.appendChild(filterRow);
        table.innerHTML = "";
        table.appendChild(colgroup);
        table.appendChild(thead);
        table.appendChild(document.createElement("tbody"));
        applyStickyColumns();
    }

    function renderBody() {
        visibleRows = getVisibleRows();
        const tbody = document.getElementById("stockTable").querySelector("tbody");
        const fragment = document.createDocumentFragment();
        const totalPages = Math.max(1, Math.ceil(visibleRows.length / pageSize));
        currentPage = Math.min(Math.max(currentPage, 1), totalPages);
        const startIndex = (currentPage - 1) * pageSize;
        const pageRows = visibleRows.slice(startIndex, startIndex + pageSize);

        pageRows.forEach(function(row) {
            const tr = document.createElement("tr");
            colInfos.forEach(function(col, index) {
                const td = document.createElement("td");
                const value = row[col.value];
                const text = formatValue(value);
                td.textContent = text;
                td.title = text;

                if (isNumeric(value)) {
                    td.classList.add("numeric");
                }
                if (col.value === "change_rate" || col.value === "p_change") {
                    const number = Number(value);
                    if (number > 0) td.classList.add("positive");
                    if (number < 0) td.classList.add("negative");
                }
                if (index < 3) {
                    td.classList.add("sticky-col");
                }
                if (col.value === "code" && text) {
                    td.innerHTML = "";
                    const link = document.createElement("a");
                    link.className = "instock-link";
                    link.textContent = text;
                    link.href = "/instock/data/indicators?code=" + encodeURIComponent(text)
                        + "&date=" + encodeURIComponent(formatValue(row.date))
                        + "&name=" + encodeURIComponent(formatValue(row.name));
                    link.target = "_blank";
                    td.appendChild(link);
                }
                tr.appendChild(td);
            });
            fragment.appendChild(tr);
        });

        tbody.innerHTML = "";
        tbody.appendChild(fragment);
        applyStickyColumns();
        updatePager(totalPages);
        setStatus("总记录/筛选记录：" + allRows.length + " / " + visibleRows.length
            + " 条，当前显示 " + (visibleRows.length ? (startIndex + 1) : 0)
            + "-" + Math.min(startIndex + pageRows.length, visibleRows.length) + " 条");
    }

    function getVisibleRows() {
        let rows = allRows.filter(function(row) {
            const globalFilter = filters.__global;
            if (globalFilter) {
                const matched = colInfos.some(function(col) {
                    return formatValue(row[col.value]).toLowerCase().indexOf(globalFilter) !== -1;
                });
                if (!matched) return false;
            }

            return colInfos.every(function(col) {
                const value = filters[col.value];
                if (!value) return true;
                return formatValue(row[col.value]).toLowerCase().indexOf(value) !== -1;
            });
        });

        if (sortState.field) {
            rows = rows.slice().sort(function(a, b) {
                return compareValues(a[sortState.field], b[sortState.field]) * sortState.direction;
            });
        }
        return rows;
    }

    function compareValues(a, b) {
        const emptyA = a === null || a === undefined || a === "";
        const emptyB = b === null || b === undefined || b === "";
        if (emptyA && emptyB) return 0;
        if (emptyA) return 1;
        if (emptyB) return -1;
        if (isNumeric(a) && isNumeric(b)) {
            return Number(a) - Number(b);
        }
        return formatValue(a).localeCompare(formatValue(b), "zh-Hans-CN", { numeric: true });
    }

    function applyStickyColumns() {
        const table = document.getElementById("stockTable");
        const widths = [];
        table.querySelectorAll("col").forEach(function(col, index) {
            widths[index] = parseInt(col.style.width, 10) || 90;
        });

        [0, 1, 2].forEach(function(index) {
            const left = widths.slice(0, index).reduce(function(total, width) { return total + width; }, 0);
            table.querySelectorAll("tr").forEach(function(row) {
                const cell = row.children[index];
                if (cell) {
                    cell.classList.add("sticky-col");
                    cell.style.left = left + "px";
                }
            });
        });
    }

    function scheduleRender() {
        clearTimeout(renderTimer);
        renderTimer = setTimeout(renderBody, 180);
    }

    function updatePager(totalPages) {
        document.getElementById("pageInfo").textContent = currentPage + " / " + totalPages;
        document.getElementById("prevPage").disabled = currentPage <= 1;
        document.getElementById("nextPage").disabled = currentPage >= totalPages;
    }

    async function exportCsv() {
        clearTimeout(renderTimer);
        visibleRows = getVisibleRows();
        const rows = [colInfos.map(function(col) { return col.caption || col.value; })];
        visibleRows.forEach(function(row) {
            rows.push(colInfos.map(function(col) { return formatValue(row[col.value]); }));
        });
        const csv = "\ufeff" + rows.map(function(row) {
            return row.map(csvEscape).join(",");
        }).join("\r\n");
        const fileName = ensureCsvFileName(nameParam + dateParam);
        const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });

        if (window.showSaveFilePicker) {
            try {
                const handle = await window.showSaveFilePicker({
                    suggestedName: fileName,
                    types: [{
                        description: "CSV",
                        accept: { "text/csv": [".csv"] }
                    }]
                });
                const writable = await handle.createWritable();
                await writable.write(blob);
                await writable.close();
                setStatus("CSV 已导出");
                return;
            } catch (error) {
                if (error && error.name === "AbortError") {
                    return;
                }
                console.warn("showSaveFilePicker failed, falling back to browser download.", error);
            }
        }

        saveAs(blob, fileName);
    }

    function ensureCsvFileName(name) {
        const value = String(name || "instock").trim().replace(/[\\/:*?"<>|]+/g, "_");
        return /\.csv$/i.test(value) ? value : value + ".csv";
    }

    function csvEscape(value) {
        const text = String(value === null || value === undefined ? "" : value);
        if (/[",\r\n]/.test(text)) {
            return '"' + text.replace(/"/g, '""') + '"';
        }
        return text;
    }

    function isNumeric(value) {
        return value !== null && value !== "" && !Array.isArray(value) && !isNaN(Number(value));
    }

    function formatValue(value) {
        if (value === null || value === undefined) return "";
        if (value instanceof Date) return formatDate(value);
        if (typeof value === "string") {
            const match = value.match(/^\/OADate\(([-\d.]+)\)\/$/);
            if (match) {
                const date = new Date((Number(match[1]) - 25569) * 86400 * 1000);
                return formatDate(date);
            }
        }
        return String(value);
    }

    function formatDate(date) {
        if (isNaN(date.getTime())) return "";
        const year = date.getUTCFullYear();
        const month = String(date.getUTCMonth() + 1).padStart(2, "0");
        const day = String(date.getUTCDate()).padStart(2, "0");
        return year + "-" + month + "-" + day;
    }

    function setStatus(text) {
        document.getElementById("statusText").textContent = text;
    }
</script>
{% end %}