{% extends "base.html" %}
{% set active_page = "text" %}

{% block content %}
<h2>{{ get_trans('menu_text', session.get('ui_lang', 'en')) }}</h2>
<p class="text-muted">{{ get_trans('text_intro', session.get('ui_lang', 'en')) }}</p>

<!-- ======================= 输入与参数 ======================= -->
<div class="card p-4">
    <h5>{{ get_trans('text_source_title', session.get('ui_lang', 'en')) }}</h5>

    <ul class="nav nav-tabs mb-3" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#src-file">{{ get_trans('text_src_file', session.get('ui_lang', 'en')) }}</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#src-paste">{{ get_trans('text_src_paste', session.get('ui_lang', 'en')) }}</a></li>
        {% if has_dataset %}
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#src-data">{{ get_trans('text_src_dataset', session.get('ui_lang', 'en')) }}</a></li>
        {% endif %}
    </ul>

    <div class="tab-content mb-3">
        <div class="tab-pane fade show active" id="src-file">
            <input type="file" class="form-control" id="textFile" accept=".txt,.md,.csv,.json">
            <div class="form-text">{{ get_trans('text_file_hint', session.get('ui_lang', 'en')) }}</div>
        </div>
        <div class="tab-pane fade" id="src-paste">
            <textarea class="form-control" id="textPaste" rows="8" placeholder="{{ get_trans('text_paste_ph', session.get('ui_lang', 'en')) }}"></textarea>
        </div>
        {% if has_dataset %}
        <div class="tab-pane fade" id="src-data">
            <select class="form-select" id="datasetCol">
                {% for col in dataset_cols %}
                <option value="{{ col }}">{{ col }}</option>
                {% endfor %}
            </select>
        </div>
        {% endif %}
    </div>

    <hr>
    <h5>{{ get_trans('text_options_title', session.get('ui_lang', 'en')) }}</h5>
    <div class="row g-3">
        <div class="col-md-4">
            <label class="form-label">{{ get_trans('text_lang', session.get('ui_lang', 'en')) }}</label>
            <select class="form-select" id="textLang">
                {% for code, name in langs.items() %}
                <option value="{{ code }}" {% if code == current_lang %}selected{% endif %}>{{ name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-4">
            <label class="form-label">{{ get_trans('text_engine', session.get('ui_lang', 'en')) }}</label>
            <select class="form-select" id="textEngine">
                <option value="auto">{{ get_trans('text_engine_auto', session.get('ui_lang', 'en')) }}</option>
            </select>
            <div class="form-text" id="engineHint"></div>
        </div>
        <div class="col-md-4">
            <label class="form-label">{{ get_trans('text_ngram_range', session.get('ui_lang', 'en')) }}</label>
            <div class="input-group">
                <input type="number" class="form-control" id="ngramMin" value="1" min="1" max="6">
                <span class="input-group-text">–</span>
                <input type="number" class="form-control" id="ngramMax" value="2" min="1" max="6">
            </div>
            <div class="form-text">{{ get_trans('text_ngram_hint', session.get('ui_lang', 'en')) }}</div>
        </div>

        <div class="col-12">
            <label class="form-label">{{ get_trans('text_pos', session.get('ui_lang', 'en')) }}</label>
            <div id="posBox" class="border rounded p-2 d-flex flex-wrap gap-3"></div>
            <div class="form-text">{{ get_trans('text_pos_hint', session.get('ui_lang', 'en')) }}</div>
        </div>

        <div class="col-md-3">
            <div class="form-check mt-4">
                <input class="form-check-input" type="checkbox" id="keepPunct">
                <label class="form-check-label" for="keepPunct">{{ get_trans('text_keep_punct', session.get('ui_lang', 'en')) }}</label>
            </div>
        </div>
        <div class="col-md-3">
            <label class="form-label">{{ get_trans('text_method', session.get('ui_lang', 'en')) }}</label>
            <select class="form-select" id="vecMethod">
                <option value="tfidf">TF-IDF</option>
                <option value="bow">BoW</option>
            </select>
        </div>
        <div class="col-md-3">
            <label class="form-label">{{ get_trans('text_max_features', session.get('ui_lang', 'en')) }}</label>
            <input type="number" class="form-control" id="maxFeatures" value="1000" min="10">
        </div>
        <div class="col-md-3">
            <label class="form-label">{{ get_trans('text_top_k', session.get('ui_lang', 'en')) }}</label>
            <input type="number" class="form-control" id="topK" value="30" min="5">
        </div>
    </div>

    <div class="mt-3">
        <button class="btn btn-success" data-action="analyze">{{ get_trans('text_run_all', session.get('ui_lang', 'en')) }}</button>
        <button class="btn btn-outline-primary" data-action="segment">{{ get_trans('text_run_segment', session.get('ui_lang', 'en')) }}</button>
        <button class="btn btn-outline-primary" data-action="stats">{{ get_trans('text_run_stats', session.get('ui_lang', 'en')) }}</button>
        <button class="btn btn-outline-primary" data-action="ngram">{{ get_trans('text_run_ngram', session.get('ui_lang', 'en')) }}</button>
        <button class="btn btn-outline-primary" data-action="vectorize">{{ get_trans('text_run_vector', session.get('ui_lang', 'en')) }}</button>
    </div>
</div>

<!-- ======================= 模型精修 ======================= -->
<div class="card p-4 mt-3">
    <h5>{{ get_trans('refine_title', session.get('ui_lang', 'en')) }}</h5>
    <p class="text-muted small">{{ get_trans('refine_intro', session.get('ui_lang', 'en')) }}</p>

    <div class="row g-3">
        <div class="col-md-3">
            <label class="form-label">{{ get_trans('refine_provider', session.get('ui_lang', 'en')) }}</label>
            <select class="form-select" id="llmProvider"></select>
        </div>
        <div class="col-md-3">
            <label class="form-label">{{ get_trans('refine_model', session.get('ui_lang', 'en')) }}</label>
            <input class="form-control" id="llmModel" list="llmModelList" placeholder="qwen2.5:7b">
            <datalist id="llmModelList"></datalist>
        </div>
        <div class="col-md-3">
            <label class="form-label">{{ get_trans('refine_base_url', session.get('ui_lang', 'en')) }}</label>
            <input class="form-control" id="llmBaseUrl" placeholder="https://api.deepseek.com/v1">
        </div>
        <div class="col-md-3">
            <label class="form-label">{{ get_trans('refine_api_key', session.get('ui_lang', 'en')) }}</label>
            <input class="form-control" id="llmApiKey" type="password" placeholder="sk-...">
        </div>

        <div class="col-md-2">
            <label class="form-label">{{ get_trans('refine_rounds', session.get('ui_lang', 'en')) }}</label>
            <input type="number" class="form-control" id="refineRounds" value="1" min="1" max="6">
        </div>
        <div class="col-md-2">
            <label class="form-label">{{ get_trans('refine_strategy', session.get('ui_lang', 'en')) }}</label>
            <select class="form-select" id="refineStrategy">
                <option value="hybrid">hybrid</option>
                <option value="auto">auto</option>
                <option value="rewrite">rewrite</option>
                <option value="judge">judge</option>
                <option value="lexicon">lexicon (no model)</option>
            </select>
        </div>
        <div class="col-md-2">
            <label class="form-label">{{ get_trans('refine_chunk', session.get('ui_lang', 'en')) }}</label>
            <input type="number" class="form-control" id="refineChunk" value="12" min="4">
        </div>
        <div class="col-md-2">
            <label class="form-label">{{ get_trans('refine_max_len', session.get('ui_lang', 'en')) }}</label>
            <input type="number" class="form-control" id="refineMaxLen" value="8" min="2">
        </div>
        <div class="col-md-2">
            <label class="form-label">{{ get_trans('refine_min_ratio', session.get('ui_lang', 'en')) }}</label>
            <input type="number" class="form-control" id="refineMinRatio" value="0.5" step="0.05" min="0.1" max="1">
        </div>
        <div class="col-md-2 d-flex align-items-end">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="useRefined">
                <label class="form-check-label" for="useRefined">{{ get_trans('refine_use', session.get('ui_lang', 'en')) }}</label>
            </div>
        </div>
    </div>

    <div class="mt-3">
        <button class="btn btn-warning" data-action="refine">{{ get_trans('refine_run', session.get('ui_lang', 'en')) }}</button>
        <button class="btn btn-outline-warning" data-action="review">{{ get_trans('refine_review', session.get('ui_lang', 'en')) }}</button>
        <button class="btn btn-outline-secondary" id="clearRefined">{{ get_trans('refine_clear', session.get('ui_lang', 'en')) }}</button>
    </div>

    <div id="refineMsg" class="mt-3"></div>
    <div id="refineSummary"></div>
    <div class="row mt-3">
        <div class="col-md-7"><h6>{{ get_trans('refine_edits', session.get('ui_lang', 'en')) }}</h6><div id="refineEdits"></div></div>
        <div class="col-md-5"><h6>{{ get_trans('refine_rounds_title', session.get('ui_lang', 'en')) }}</h6><div id="refineRoundsTable"></div></div>
    </div>
</div>

<!-- ======================= 结果 ======================= -->
<div id="msg" class="mt-3"></div>

<ul class="nav nav-tabs mt-3" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tab-seg">{{ get_trans('text_tab_seg', session.get('ui_lang', 'en')) }}</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-stats">{{ get_trans('text_tab_stats', session.get('ui_lang', 'en')) }}</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-ngram">{{ get_trans('text_tab_ngram', session.get('ui_lang', 'en')) }}</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-vector">{{ get_trans('text_tab_vector', session.get('ui_lang', 'en')) }}</a></li>
</ul>

<div class="tab-content card p-3">
    <div class="tab-pane fade show active" id="tab-seg">
        <div id="segSummary" class="mb-2"></div>
        <pre id="segOutput" class="border rounded p-2" style="max-height:420px; overflow:auto; white-space:pre-wrap;"></pre>
    </div>
    <div class="tab-pane fade" id="tab-stats">
        <div id="statsOutput" class="table-responsive"></div>
        <div class="row mt-3">
            <div class="col-md-6"><h6>{{ get_trans('text_len_dist', session.get('ui_lang', 'en')) }}</h6><div id="lenDist"></div></div>
            <div class="col-md-6"><h6>{{ get_trans('text_pos_dist', session.get('ui_lang', 'en')) }}</h6><div id="posDist"></div></div>
        </div>
    </div>
    <div class="tab-pane fade" id="tab-ngram">
        <div id="ngramOutput" class="table-responsive"></div>
    </div>
    <div class="tab-pane fade" id="tab-vector">
        <div id="vecShape" class="mb-2"></div>
        <h6>{{ get_trans('text_vec_report', session.get('ui_lang', 'en')) }}</h6>
        <div id="vecReport" class="table-responsive"></div>
        <h6 class="mt-3">{{ get_trans('text_vec_matrix', session.get('ui_lang', 'en')) }}</h6>
        <div id="vecMatrix" class="table-responsive"></div>
    </div>
</div>

<!-- ======================= 导出 ======================= -->
<div class="card p-3 mt-3">
    <h6>{{ get_trans('text_export_title', session.get('ui_lang', 'en')) }}</h6>
    <div class="btn-group">
        <a href="/text/export/tagged" class="btn btn-outline-dark">{{ get_trans('text_export_tagged', session.get('ui_lang', 'en')) }}</a>
        <a href="/text/export/metrics" class="btn btn-outline-dark">{{ get_trans('text_export_metrics', session.get('ui_lang', 'en')) }}</a>
        <a href="/text/export/ngram" class="btn btn-outline-dark">{{ get_trans('text_export_ngram', session.get('ui_lang', 'en')) }}</a>
        <a href="/text/export/vectors" class="btn btn-outline-dark">{{ get_trans('text_export_vectors', session.get('ui_lang', 'en')) }}</a>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
var I18N = {
    processing: "{{ get_trans('processing_msg', session.get('ui_lang', 'en')) }}",
    autoEngine: "{{ get_trans('text_engine_auto', session.get('ui_lang', 'en')) }}",
    backend: "{{ get_trans('text_backend_used', session.get('ui_lang', 'en')) }}",
    tokens: "{{ get_trans('text_tokens', session.get('ui_lang', 'en')) }}",
    types: "{{ get_trans('text_types', session.get('ui_lang', 'en')) }}",
    truncated: "{{ get_trans('text_truncated', session.get('ui_lang', 'en')) }}",
    source: "{{ get_trans('text_source_label', session.get('ui_lang', 'en')) }}",
    encoding: "{{ get_trans('text_encoding_label', session.get('ui_lang', 'en')) }}",
    shape: "{{ get_trans('text_shape_label', session.get('ui_lang', 'en')) }}",
    edits: "{{ get_trans('refine_edits', session.get('ui_lang', 'en')) }}"
};

function renderEngines(data) {
    var sel = $('#textEngine');
    sel.empty();
    sel.append($('<option>', {value: 'auto', text: I18N.autoEngine + ' (' + data.auto + ')'}));
    data.engines.forEach(function (b) {
        var label = b.label + (b.available ? '' : ' — ' + (b.reason || 'N/A'));
        var opt = $('<option>', {value: b.key, text: label});
        if (!b.available) opt.attr('disabled', 'disabled');
        sel.append(opt);
    });
    $('#engineHint').text('{{ get_trans("text_engine_hint", session.get("ui_lang", "en")) }}');
}

function renderPos(data) {
    var box = $('#posBox');
    box.empty();
    data.pos_groups.forEach(function (g, i) {
        var id = 'pos_' + g.key;
        var wrap = $('<div class="form-check form-check-inline">');
        wrap.append($('<input class="form-check-input" type="checkbox">')
            .attr('id', id).attr('value', g.key));
        wrap.append($('<label class="form-check-label">').attr('for', id).text(g.label));
        box.append(wrap);
    });
}

function loadLang(lang) {
    $.getJSON('/text/backends/' + lang, function (data) {
        renderEngines(data);
        renderPos(data);
    });
}

function buildForm(action) {
    var fd = new FormData();
    fd.append('action', action);
    fd.append('lang', $('#textLang').val());
    fd.append('engine', $('#textEngine').val());
    fd.append('keep_punct', $('#keepPunct').is(':checked') ? 'true' : 'false');
    fd.append('ngram_min', $('#ngramMin').val());
    fd.append('ngram_max', $('#ngramMax').val());
    fd.append('top_k', $('#topK').val());
    fd.append('method', $('#vecMethod').val());
    fd.append('max_features', $('#maxFeatures').val());
    fd.append('use_refined', $('#useRefined').is(':checked') ? 'true' : 'false');
    fd.append('llm_provider', $('#llmProvider').val() || 'ollama');
    fd.append('llm_model', $('#llmModel').val());
    fd.append('llm_base_url', $('#llmBaseUrl').val());
    fd.append('llm_api_key', $('#llmApiKey').val());
    fd.append('refine_rounds', $('#refineRounds').val());
    fd.append('refine_strategy', $('#refineStrategy').val());
    fd.append('refine_chunk', $('#refineChunk').val());
    fd.append('refine_max_token_len', $('#refineMaxLen').val());
    fd.append('refine_min_ratio', $('#refineMinRatio').val());
    $('#posBox input:checked').each(function () { fd.append('pos', $(this).val()); });

    var f = $('#textFile')[0];
    var pasted = $('#textPaste').val();
    if (f && f.files.length) {
        fd.append('file', f.files[0]);
    } else if (pasted && pasted.trim()) {
        fd.append('text', pasted);
    } else if ($('#datasetCol').length) {
        fd.append('use_dataset', 'true');
        fd.append('text_col', $('#datasetCol').val());
    }
    return fd;
}

function fillRefine(res) {
    if (res.error) {
        $('#refineMsg').html('<div class="alert alert-danger">' + res.error + '</div>');
    } else {
        var s = res.summary;
        $('#refineMsg').html('<div class="alert alert-success">'
            + s.provider + ':' + s.model + ' ｜ strategy=' + s.strategy
            + ' ｜ token ' + s.tokens_before + ' → ' + s.tokens_after
            + ' ｜ ' + I18N.edits + ': <b>' + s.n_edits + '</b>'
            + ' ｜ calls: ' + s.calls + '</div>');
    }
    $('#refineEdits').html(res.edits_html || '');
    $('#refineRoundsTable').html(res.rounds_html || '');
    if (res.tagged_preview) {
        $('#segOutput').text(res.tagged_preview);
        $('.nav-tabs a[href="#tab-seg"]').tab('show');
    }
}

function loadProviders() {
    $.getJSON('/text/llm', function (data) {
        var sel = $('#llmProvider');
        sel.empty();
        data.providers.forEach(function (p) {
            var label = p.label + (p.available ? '' : ' — ' + (p.reason || 'N/A'));
            var opt = $('<option>', {value: p.key, text: label});
            if (!p.available) opt.attr('disabled', 'disabled');
            sel.append(opt);
        });
        sel.trigger('change');
    });
}

function loadModels() {
    var key = $('#llmProvider').val();
    $.getJSON('/text/llm', function (data) {
        var p = (data.providers || []).filter(function (x) { return x.key === key; })[0];
        var list = $('#llmModelList');
        list.empty();
        (p && p.models ? p.models : []).forEach(function (m) {
            list.append($('<option>').attr('value', m));
        });
        if (p && p.models && p.models.length && !$('#llmModel').val()) {
            $('#llmModel').attr('placeholder', p.models[0]);
        }
    });
}

function fillAll(res) {
    if (res.error) { $('#msg').html('<div class="alert alert-warning">' + res.error + '</div>'); return; }
    $('#msg').html('<div class="alert alert-success">' + I18N.backend + ': <b>' + (res.backend || '-') + '</b>'
        + ' ｜ ' + I18N.source + ': ' + (res.source || '-') + ' (' + (res.encoding || '-') + ')'
        + ' ｜ ' + I18N.tokens + ': <b>' + res.token_count + '</b>'
        + ' ｜ ' + I18N.types + ': <b>' + res.type_count + '</b></div>');

    if (res.tagged_preview !== undefined) {
        $('#segOutput').text(res.tagged_preview + (res.tagged_truncated ? '\n… (' + I18N.truncated + ')' : ''));
    }
    if (res.metrics_html) $('#statsOutput').html(res.metrics_html);
    if (res.len_dist) {
        $('#lenDist').html('<pre>' + JSON.stringify(res.len_dist, null, 1) + '</pre>');
    }
    if (res.pos_dist) {
        var rows = Object.keys(res.pos_dist).map(function (k) {
            return '<tr><td>' + k + '</td><td>' + res.pos_dist[k] + '</td></tr>';
        }).join('');
        $('#posDist').html('<table class="table table-sm"><thead><tr><th>POS</th><th>freq</th></tr></thead><tbody>' + rows + '</tbody></table>');
    }
    if (res.ngram_html) $('#ngramOutput').html(res.ngram_html);
    if (res.shape) $('#vecShape').html('<span class="badge bg-secondary">' + I18N.shape + ': ' + res.shape[0] + ' × ' + res.shape[1] + ' (' + (res.method || '') + ')</span>');
    if (res.report_html) $('#vecReport').html(res.report_html);
    if (res.matrix_html) $('#vecMatrix').html(res.matrix_html);
}

$(function () {
    loadLang($('#textLang').val());
    loadProviders();

    $('#textLang').on('change', function () { loadLang($(this).val()); });
    $('#llmProvider').on('change', loadModels);

    $('#clearRefined').on('click', function () {
        $.get('/text/refined?clear=1', function () {
            $('#useRefined').prop('checked', false);
            $('#refineMsg').html('<div class="alert alert-secondary">cleared</div>');
            $('#refineEdits, #refineRoundsTable').empty();
        });
    });

    $('button[data-action]').on('click', function () {
        var action = $(this).data('action');
        var isRefine = (action === 'refine' || action === 'review');
        var box = isRefine ? '#refineMsg' : '#msg';
        $(box).html('<div class="spinner-border spinner-border-sm"></div> ' + I18N.processing);
        $.ajax({
            url: '/text', type: 'POST', data: buildForm(action),
            processData: false, contentType: false,
            success: function (res) {
                if (isRefine) { fillRefine(res); } else { fillAll(res); }
            },
            error: function (xhr) {
                $(box).html('<div class="alert alert-danger">' + xhr.responseText + '</div>');
            }
        });
    });
});
</script>
{% endblock %}