{% extends "base.html" %}
{% block title %}{{ opp.title }} — Language Settings — ICDEV™{% endblock %}

{% block content %}
<div class="breadcrumbs">
    <a href="/">Home</a><span class="separator">/</span>
    <a href="/proposals">Proposals</a><span class="separator">/</span>
    <a href="/proposals/{{ opp_id }}">{{ opp.title[:50] }}{% if opp.title|length > 50 %}…{% endif %}</a><span class="separator">/</span>
    <span>Language Settings</span>
</div>

<div class="page-header">
    <h1>Language Settings</h1>
    <p class="subtitle">{{ opp.title }} — glossary, wall of truth, taxonomy, and style templates</p>
</div>

<!-- Tabs -->
<div class="tabs" style="margin-top:16px;">
    <button class="tab-btn active" data-tab="lang-glossary">Glossary ({{ glossary | length }})</button>
    <button class="tab-btn" data-tab="lang-wall">Wall of Truth</button>
    <button class="tab-btn" data-tab="lang-taxonomy">Taxonomy ({{ taxonomy | length }})</button>
    <button class="tab-btn" data-tab="lang-style">Style Templates ({{ style_guides | length }})</button>
</div>

<!-- Glossary Tab -->
<div id="lang-glossary" class="tab-content active">
    <div class="card" style="padding:16px; margin-top:12px;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
            <span style="font-size:0.85rem; font-weight:600;">Customer-Specific Glossary</span>
            <button class="btn btn-primary btn-sm" onclick="openGlossaryModal()">+ Add Term</button>
        </div>
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>Term</th>
                        <th>Type</th>
                        <th>Expansion / Replacement</th>
                        <th>Definition</th>
                        <th>Enforcement</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="glossary-table-body">
                    {% for e in glossary %}
                    <tr data-id="{{ e.id }}">
                        <td><strong>{{ e.term }}</strong></td>
                        <td><span class="badge badge-info">{{ e.term_type | title }}</span></td>
                        <td>
                            {% if e.term_type == 'acronym' %}
                                {{ e.expansion or '—' }}
                            {% elif e.term_type in ('deprecated', 'banned') %}
                                <span style="color:#e53e3e;">Use instead:</span> {{ e.replacement or '—' }}
                            {% elif e.term_type == 'required' %}
                                <span style="color:#00c864;">Must use</span>
                            {% else %}
                                {{ e.expansion or e.replacement or '—' }}
                            {% endif %}
                        </td>
                        <td>{{ e.definition[:80] }}{% if e.definition|length > 80 %}…{% endif %}</td>
                        <td><span class="badge badge-{{ 'warning' if e.enforcement == 'warn' else 'error' if e.enforcement == 'block' else 'info' }}">{{ e.enforcement | title }}</span></td>
                        <td>
                            <button class="btn btn-sm btn-error" onclick="deleteGlossaryEntry('{{ e.id }}')">Delete</button>
                        </td>
                    </tr>
                    {% else %}
                    <tr><td colspan="6" class="text-muted" style="text-align:center;">No glossary entries for this opportunity</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Wall of Truth Tab -->
<div id="lang-wall" class="tab-content" style="display:none;">
    <div class="card" style="padding:16px; margin-top:12px;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
            <span style="font-size:0.85rem; font-weight:600;">Wall of Truth — Words &amp; Phrases to Use or Avoid</span>
            <button class="btn btn-primary btn-sm" onclick="openWallModal()">+ Add Rule</button>
        </div>
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>Word / Phrase</th>
                        <th>Rule</th>
                        <th>Replacement</th>
                        <th>Enforcement</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="wall-table-body">
                    {% set wall = glossary | selectattr('term_type', 'in', ['banned', 'deprecated', 'required']) | list %}
                    {% for e in wall %}
                    <tr data-id="{{ e.id }}">
                        <td><strong>{{ e.term }}</strong></td>
                        <td>
                            {% if e.term_type == 'banned' %}
                            <span class="badge badge-error">🚫 Banned</span>
                            {% elif e.term_type == 'deprecated' %}
                            <span class="badge badge-warning">⚠️ Deprecated</span>
                            {% else %}
                            <span class="badge badge-success">✅ Required</span>
                            {% endif %}
                        </td>
                        <td>{{ e.replacement or '—' }}</td>
                        <td><span class="badge badge-{{ 'warning' if e.enforcement == 'warn' else 'error' if e.enforcement == 'block' else 'info' }}">{{ e.enforcement | title }}</span></td>
                        <td>
                            <button class="btn btn-sm btn-error" onclick="deleteGlossaryEntry('{{ e.id }}')">Delete</button>
                        </td>
                    </tr>
                    {% else %}
                    <tr><td colspan="5" class="text-muted" style="text-align:center;">No wall-of-truth rules yet</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Taxonomy Tab -->
<div id="lang-taxonomy" class="tab-content" style="display:none;">
    <div class="card" style="padding:16px; margin-top:12px;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
            <span style="font-size:0.85rem; font-weight:600;">Customer-Specific Taxonomy</span>
            <button class="btn btn-primary btn-sm" onclick="openTaxonomyModal()">+ Add Node</button>
        </div>
        <div class="table-container">
            <table>
                <thead>
                    <tr><th>Label</th><th>Description</th><th>Weight</th><th></th></tr>
                </thead>
                <tbody id="taxonomy-table-body">
                    {% for e in taxonomy %}
                    <tr data-id="{{ e.id }}">
                        <td><strong>{{ e.label }}</strong></td>
                        <td>{{ e.description[:100] }}{% if e.description|length > 100 %}…{% endif %}</td>
                        <td>{{ e.weight | default(1.0) }}</td>
                        <td>
                            <button class="btn btn-sm btn-error" onclick="deleteTaxonomyEntry('{{ e.id }}')">Delete</button>
                        </td>
                    </tr>
                    {% else %}
                    <tr><td colspan="4" class="text-muted" style="text-align:center;">No taxonomy nodes for this opportunity</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Style Templates Tab -->
<div id="lang-style" class="tab-content" style="display:none;">
    <div class="card" style="padding:16px; margin-top:12px;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
            <span style="font-size:0.85rem; font-weight:600;">Project-Specific Style Templates</span>
            <a href="/writeguard" class="btn btn-secondary btn-sm" target="_blank">Open WriteGuard →</a>
        </div>
        <div class="table-container">
            <table>
                <thead>
                    <tr><th>Name</th><th>Version</th><th>Created</th></tr>
                </thead>
                <tbody>
                    {% for g in style_guides %}
                    <tr>
                        <td>{{ g.guide_name }}</td>
                        <td>{{ g.version }}</td>
                        <td>{{ g.created_at }}</td>
                    </tr>
                    {% else %}
                    <tr><td colspan="3" class="text-muted" style="text-align:center;">No project-specific style templates</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div style="margin-top:12px; font-size:0.78rem; color:var(--text-muted); line-height:1.5;">
            Style templates are extracted from sample documents in WriteGuard. Upload a 1,500+ word sample
            that represents your customer's preferred tone, voice, and structure, then scope it to this opportunity.
        </div>
    </div>
</div>

<!-- Glossary Modal -->
<div id="glossary-modal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:1000;align-items:center;justify-content:center;">
    <div style="background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;padding:1.25rem;max-width:480px;width:90%;">
        <h3 style="margin:0 0 0.75rem;font-size:1rem;">Add Glossary Term</h3>
        <div style="display:flex;flex-direction:column;gap:0.5rem;">
            <input type="text" id="g-term" placeholder="Term (e.g., C4ISR)" style="padding:0.45rem 0.6rem;border-radius:4px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);">
            <select id="g-type" style="padding:0.45rem 0.6rem;border-radius:4px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);">
                <option value="acronym">Acronym</option>
                <option value="preferred">Preferred Term</option>
                <option value="deprecated">Deprecated</option>
                <option value="banned">Banned</option>
                <option value="required">Required</option>
                <option value="custom_spell">Custom Spelling</option>
            </select>
            <input type="text" id="g-replacement" placeholder="Replacement / Expansion (optional)" style="padding:0.45rem 0.6rem;border-radius:4px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);">
            <input type="text" id="g-definition" placeholder="Definition / Tooltip (optional)" style="padding:0.45rem 0.6rem;border-radius:4px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);">
            <select id="g-enforcement" style="padding:0.45rem 0.6rem;border-radius:4px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);">
                <option value="suggest">Suggest</option>
                <option value="warn">Warn</option>
                <option value="block">Block</option>
            </select>
        </div>
        <div style="display:flex;gap:0.5rem;margin-top:1rem;">
            <button class="btn btn-primary" onclick="saveGlossary()">Save</button>
            <button class="btn btn-secondary" onclick="closeModal('glossary-modal')">Cancel</button>
        </div>
    </div>
</div>

<!-- Taxonomy Modal -->
<div id="taxonomy-modal" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:1000;align-items:center;justify-content:center;">
    <div style="background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;padding:1.25rem;max-width:480px;width:90%;">
        <h3 style="margin:0 0 0.75rem;font-size:1rem;">Add Taxonomy Node</h3>
        <div style="display:flex;flex-direction:column;gap:0.5rem;">
            <input type="text" id="t-label" placeholder="Label (e.g., Cloud Migration)" style="padding:0.45rem 0.6rem;border-radius:4px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);">
            <input type="text" id="t-description" placeholder="Description (optional)" style="padding:0.45rem 0.6rem;border-radius:4px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);">
            <input type="number" id="t-weight" placeholder="Weight (default 1.0)" step="0.1" value="1.0" style="padding:0.45rem 0.6rem;border-radius:4px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);">
        </div>
        <div style="display:flex;gap:0.5rem;margin-top:1rem;">
            <button class="btn btn-primary" onclick="saveTaxonomy()">Save</button>
            <button class="btn btn-secondary" onclick="closeModal('taxonomy-modal')">Cancel</button>
        </div>
    </div>
</div>

<style>
.is-invalid { border-color: #dc3545 !important; box-shadow: 0 0 0 2px rgba(220,53,69,.25); }
.invalid-feedback { color: #dc3545; font-size: 0.85em; display: none; }
.is-invalid + .invalid-feedback { display: block; }
</style>

<script>
// ── Tab switching ─────────────────────────────────────────────────────
document.querySelectorAll('.tab-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
        document.querySelectorAll('.tab-btn').forEach(function(b) { b.classList.remove('active'); });
        document.querySelectorAll('.tab-content').forEach(function(c) { c.style.display = 'none'; c.classList.remove('active'); });
        btn.classList.add('active');
        var tab = document.getElementById(btn.getAttribute('data-tab'));
        if (tab) { tab.style.display = 'block'; tab.classList.add('active'); }
    });
});

// ── Toast notifications ───────────────────────────────────────────────
function showToast(msg, type) {
    type = type || 'info';
    var t = document.createElement('div');
    t.className = 'toast-notification toast-' + type;
    t.textContent = msg;
    t.style.cssText = 'position:fixed;bottom:20px;right:20px;padding:12px 20px;border-radius:6px;z-index:9999;color:#fff;background:' + (type === 'error' ? '#dc3545' : '#28a745');
    document.body.appendChild(t);
    setTimeout(function() { t.remove(); }, 3000);
}

// ── Inline validation ─────────────────────────────────────────────────
function validateRequired(fieldId, errorMsg) {
    var el = document.getElementById(fieldId);
    if (!el || !el.value.trim()) {
        if (el) { el.classList.add('is-invalid'); }
        showToast(errorMsg, 'error');
        return false;
    }
    el.classList.remove('is-invalid');
    return true;
}

// ── Modal helpers ────────────────────────────────────────────────────
function openModal(id) { document.getElementById(id).style.display = 'flex'; }
function closeModal(id) { document.getElementById(id).style.display = 'none'; }
function openGlossaryModal() { openModal('glossary-modal'); }
function openWallModal() { openModal('glossary-modal'); document.getElementById('g-type').value = 'banned'; }
function openTaxonomyModal() { openModal('taxonomy-modal'); }

// ── CRUD helpers ─────────────────────────────────────────────────────
var ENFORCEMENT_ALLOWLIST = ['suggest', 'warn', 'block'];

function saveGlossary() {
    if (!validateRequired('g-term', 'Term is required')) { return; }
    var enforcement = document.getElementById('g-enforcement').value;
    if (ENFORCEMENT_ALLOWLIST.indexOf(enforcement) === -1) {
        showToast('Invalid enforcement value', 'error');
        return;
    }
    fetch('/api/writeguard/glossary', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            opp_id: '{{ opp_id }}',
            term: document.getElementById('g-term').value.trim(),
            term_type: document.getElementById('g-type').value,
            replacement: document.getElementById('g-replacement').value.trim(),
            definition: document.getElementById('g-definition').value.trim(),
            enforcement: enforcement,
        })
    }).then(function(r) { return r.json(); }).then(function(data) {
        if (data.error) { showToast(data.error, 'error'); return; }
        showToast('Glossary entry saved', 'success');
        closeModal('glossary-modal');
        location.reload();
    });
}

function deleteGlossaryEntry(id) {
    if (!confirm('Delete this entry?')) return;
    fetch('/api/writeguard/glossary/' + id, { method: 'DELETE' })
        .then(function(r) { return r.json(); })
        .then(function() { location.reload(); });
}

function saveTaxonomy() {
    if (!validateRequired('t-label', 'Label is required')) { return; }
    fetch('/api/writeguard/taxonomy', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            opportunity_id: '{{ opp_id }}',
            label: document.getElementById('t-label').value.trim(),
            description: document.getElementById('t-description').value.trim(),
            weight: parseFloat(document.getElementById('t-weight').value) || 1.0,
        })
    }).then(function(r) { return r.json(); }).then(function(data) {
        if (data.error) { showToast(data.error, 'error'); return; }
        showToast('Taxonomy node saved', 'success');
        closeModal('taxonomy-modal');
        location.reload();
    });
}

function deleteTaxonomyEntry(id) {
    if (!confirm('Delete this taxonomy node?')) return;
    fetch('/api/writeguard/taxonomy/' + id, { method: 'DELETE' })
        .then(function(r) { return r.json(); })
        .then(function() { location.reload(); });
}
</script>
{% endblock %}